admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add other forms

Browse Source
This commit is contained in:
Daria Golova
2022-05-27 17:36:06 +03:00
committed by DwCay
parent 3e5ef4f128
commit 709f668697
4 changed files with 257 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/tailwind.config.js
View File

@@ -20,6 +20,7 @@ module.exports = {
inter: ['Inter', 'sans-serif'], inter: ['Inter', 'sans-serif'],
}, },
fontSize: { fontSize: {
descriptionSize: ['0.75rem', { lineHeight: '1.25' }],
xxs: ['0.625rem', { lineHeight: '0.75' }], xxs: ['0.625rem', { lineHeight: '0.75' }],
xs: ['0.75rem', { lineHeight: '1.5' }], xs: ['0.75rem', { lineHeight: '1.5' }],
sm: ['0.875rem', { lineHeight: '1.5715' }], sm: ['0.875rem', { lineHeight: '1.5715' }],

277
src/pages/digitalId/ProfileId.jsx
View File

@@ -6,17 +6,49 @@ import ProfileTable from '../../partials/digitalId/ProfileTable';
import Image from '../../images/transactions-image-04.svg'; import Image from '../../images/transactions-image-04.svg';
function Profile () { function Profile () {
const [sidebarOpen, setSidebarOpen] = useState(false); const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
const [rightSidebarOpen, setRightSidebarOpen] = useState(true);
const [removeFormOpen, setRemoveFormOpen] = useState(false);
const [changeFormOpen, setChangeFormOpen] = useState(false);
const [toggle, setToggle] = useState(true); const [toggle, setToggle] = useState(true);
const [formOpen, setFormOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState([]);
const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]);
if (selectedItems.length > 0) {
setRightSidebarOpen(false);
setChangeFormOpen(true);
}
};
const openAddForm = () => {
setFormOpen(true);
setRightSidebarOpen(false);
}
const cancelAddForm = () => {
setFormOpen(false);
setRightSidebarOpen(true);
}
const openRemoveForm = () => {
setRemoveFormOpen(true);
setChangeFormOpen(false);
}
const canselRemoveForm = () => {
setRemoveFormOpen(false);
setRightSidebarOpen(true);
}
return ( return (
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
{/* Sidebar */} {/* Sidebar */}
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Sidebar sidebarOpen={leftSidebarOpen} setSidebarOpen={setLeftSidebarOpen} />
{/* Content area */} {/* Content area */}
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden"> <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
{/* Site header */} {/* Site header */}
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Header sidebarOpen={leftSidebarOpen} setSidebarOpen={setLeftSidebarOpen} />
<main> <main>
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto"> <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
<div className="mx-auto flex flex-col lg:flex-row lg:space-x-8"> <div className="mx-auto flex flex-col lg:flex-row lg:space-x-8">
@@ -43,78 +75,203 @@ function Profile () {
</ul> </ul>
</div> </div>
{/* Table */} {/* Table */}
<ProfileTable/> <ProfileTable selectedItems={handleSelectedItems}/>
</div> </div>
{/* Sidebar */} {/* left Sidebar */}
<div> <div>
{/* Form */} {/* Form with button*/}
<div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80"> <div className={`${!rightSidebarOpen && "hidden"}`}>
<div className="flex flex-col gap-y-3"> <div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
<div> <button
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label> className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
<input id="property" className="form-input w-full" type="text" required /> onClick={openAddForm}
>
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</svg>
<span className="ml-1">Add new field</span>
</button>
</div>
</div>
{/* Add Form */}
<div className={`${!formOpen && 'hidden'}`}>
<div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
<div className="flex flex-col gap-y-3">
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
<input id="property" className="form-input w-full" type="text" required />
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
<input id="value" className="form-input w-full" type="text" required />
</div>
<div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
<input id="seed" className="form-input w-full" type="text" required />
</div>
</div> </div>
<div> <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label> <span className="block text-sm font-medium">Store data on blockchain</span>
<input id="value" className="form-input w-full" type="text" required /> <div className="flex items-center">
<div className="form-switch">
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
<label className="bg-slate-400" htmlFor="switch-1">
<span className="bg-white shadow-sm" aria-hidden="true"></span>
</label>
</div>
</div>
</div> </div>
<div> {/* Buttons */}
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label> <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
<input id="seed" className="form-input w-full" type="text" required /> <button
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
onClick={cancelAddForm}
>
Cansel
</button>
<button
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
onClick={cancelAddForm}
>
Send
</button>
</div> </div>
</div> </div>
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200"> {/* Details */}
<span className="block text-sm font-medium">Store data on blockchain</span> <div className="drop-shadow-lg mt-11">
<div className="flex items-center"> {/* Top */}
<div className="form-switch"> <div className="bg-white rounded-t-xl px-5 pb-2.5 text-center">
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} /> <div className="mb-3 text-center">
<label className="bg-slate-400" htmlFor="switch-1"> <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
<span className="bg-white shadow-sm" aria-hidden="true"></span> </div>
</label> <div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
</div>
{/* Divider */}
<div className="flex justify-between items-center" aria-hidden="true">
<svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
<div className="grow w-full h-5 bg-white flex flex-col justify-center">
<div className="h-px w-full border-t border-dashed border-slate-200" />
</div>
<svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
</div>
<div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3">
<div className="flex justify-between space-x-1">
<span className="italic">Validator:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Recipient:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span>
</div> </div>
</div> </div>
</div> </div>
{/* Buttons */} </div>
<div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end"> {/* Field change form */}
<button className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600">Cansel</button> <div className={`${!changeFormOpen && 'hidden'}`}>
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Send</button> <div className="flex flex-col bg-white px-5 pt-5 pb-6 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 gap-y-[8px]">
<button
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
onClick={openRemoveForm}
>
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</svg>
<span className="ml-2">Remove</span>
</button>
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
</svg>
<span className="ml-2">Update</span>
</button>
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
</svg>
<span className="ml-2">Share</span>
</button>
</div> </div>
</div> </div>
{/* Details */} {/* Remove form */}
<div className="drop-shadow-lg mt-11"> <div className={`${!removeFormOpen && 'hidden'}`}>
{/* Top */} <div className="bg-white p-5 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
<div className="bg-white rounded-t-xl px-5 pb-2.5 text-center"> <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5">Summary</h2>
<div className="mb-3 text-center"> <div className="flex flex-col">
<img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" /> <span className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">Second name</span>
<span className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">Birthday</span>
</div>
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center">
<span className="block text-sm font-medium">On blockchain too</span>
<div className="flex items-center">
<div className="form-switch">
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
<label className="bg-slate-400" htmlFor="switch-1">
<span className="bg-white shadow-sm" aria-hidden="true"></span>
</label>
</div>
</div>
</div>
{/* Buttons */}
<div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
<button
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
onClick={canselRemoveForm}
>
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</svg>
<span className="ml-2">Apply</span>
</button>
</div>
<div className="flex justify-center">
<span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
</div> </div>
<div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
</div> </div>
{/* Divider */} {/* Details */}
<div className="flex justify-between items-center" aria-hidden="true"> <div className="drop-shadow-lg mt-12">
<svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg"> {/* Top */}
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" /> <div className="bg-white rounded-t-xl px-5 pb-2.5 text-center">
</svg> <div className="mb-3 text-center">
<div className="grow w-full h-5 bg-white flex flex-col justify-center"> <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
<div className="h-px w-full border-t border-dashed border-slate-200" /> </div>
<div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
</div> </div>
<svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg"> {/* Divider */}
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" /> <div className="flex justify-between items-center" aria-hidden="true">
</svg> <svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
</div> <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
<div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3"> <div className="grow w-full h-5 bg-white flex flex-col justify-center">
<div className="flex justify-between space-x-1"> <div className="h-px w-full border-t border-dashed border-slate-200" />
<span className="italic">Validator:</span> </div>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span> <svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
</div> </div>
<div className="flex justify-between space-x-1"> <div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3">
<span className="italic">Recipient:</span> <div className="flex justify-between space-x-1">
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span> <span className="italic">Validator:</span>
</div> <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
<div className="flex justify-between space-x-1"> </div>
<span className="italic">Transacion::</span> <div className="flex justify-between space-x-1">
<span className="font-medium text-slate-700 text-right">145 bytes</span> <span className="italic">Recipient:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span>
</div>
</div> </div>
</div> </div>
</div> </div>

27
src/partials/digitalId/ProfileTable.jsx
View File

@@ -1,11 +1,28 @@
import React from 'react'; import React, {useState, useEffect} from 'react';
import ProfileTableItem from './ProfileTableItem'; import ProfileTableItem from './ProfileTableItem';
import ProfileIcon from '../../images/profile-icon.svg'; import ProfileIcon from '../../images/profile-icon.svg';
import Avatar01 from '../../images/avatar-01.jpg'; import Avatar01 from '../../images/avatar-01.jpg';
import Avatar02 from '../../images/avatar-02.jpg'; import Avatar02 from '../../images/avatar-02.jpg';
import Avatar03 from '../../images/avatar-03.jpg'; import Avatar03 from '../../images/avatar-03.jpg';
function ProfileTable() { function ProfileTable({
selectedItems
}) {
const [isCheck, setIsCheck] = useState([]);
useEffect(() => {
selectedItems(isCheck);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isCheck]);
const handleClick = e => {
const { id, checked } = e.target;
setIsCheck([...isCheck, id]);
if (!checked) {
setIsCheck(isCheck.filter(item => item !== id));
}
};
const userData = [ const userData = [
{ {
@@ -160,6 +177,8 @@ function ProfileTable() {
status={data.status} status={data.status}
transactions={data.transactions} transactions={data.transactions}
avatars={data.avatars} avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/> />
) )
}) })
@@ -184,6 +203,8 @@ function ProfileTable() {
status={data.status} status={data.status}
transactions={data.transactions} transactions={data.transactions}
avatars={data.avatars} avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/> />
) )
}) })
@@ -208,6 +229,8 @@ function ProfileTable() {
status={data.status} status={data.status}
transactions={data.transactions} transactions={data.transactions}
avatars={data.avatars} avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/> />
) )
}) })

28
src/partials/digitalId/ProfileTableItem.jsx
View File

@@ -28,20 +28,20 @@ function ProfileTableItem(props) {
<td className="py-3 whitespace-nowrap w-px"> <td className="py-3 whitespace-nowrap w-px">
<div className="w-fit text-xs inline-flex font-medium px-2.5 py-1"> <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
{(props.status === 'Progress') ? ( {(props.status === 'Progress') ? (
<div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1"> <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
{props.status} {props.status}
</div>) : </div>) :
(props.status === 'Stored') ? ( (props.status === 'Stored') ? (
<div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1"> <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
{props.status} {props.status}
</div>) : </div>) :
(props.status === 'Completed') ? ( (props.status === 'Completed') ? (
<div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1"> <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
{props.status} {props.status}
</div>) : ( </div>) : (
<div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1"> <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
{props.status} {props.status}
</div>) </div>)
} }
</div> </div>
</td> </td>