- @@ -75,16 +222,16 @@ function Profile () {
diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 8a17a34..d68aa5d 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -1,60 +1,207 @@ import React, { useState } from 'react'; - import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; import ProfileTable from '../../partials/digitalId/ProfileTable'; import Image from '../../images/transactions-image-04.svg'; +import ProfileIcon from '../../images/profile-icon.svg'; +import Avatar01 from '../../images/avatar-01.jpg'; +import Avatar02 from '../../images/avatar-02.jpg'; +import Avatar03 from '../../images/avatar-03.jpg'; function Profile () { - const [leftSidebarOpen, setLeftSidebarOpen] = useState(false); - const [rightSidebarOpen, setRightSidebarOpen] = useState(true); - const [removeFormOpen, setRemoveFormOpen] = useState(false); - const [changeFormOpen, setChangeFormOpen] = useState(false); + const [sidebarOpen, setSidebarOpen] = useState(false); + const [buttonPanelOpen, setButtonPanelOpen] = useState(true); + const [removePanelOpen, setRemovePanelOpen] = useState(false); + const [changePanelOpen, setChangePanelOpen] = useState(false); const [toggle, setToggle] = useState(true); - const [formOpen, setFormOpen] = useState(false); + const [addPanelOpen, setAddPanelOpen] = useState(false); const [selectedItems, setSelectedItems] = useState([]); const handleSelectedItems = (selectedItems) => { setSelectedItems([...selectedItems]); if (selectedItems.length > 0) { - setRightSidebarOpen(false); - setChangeFormOpen(true); + setButtonPanelOpen(false); + setAddPanelOpen(false); + setChangePanelOpen(true); + } + if (removePanelOpen === true) { + setChangePanelOpen(false); + } + if (selectedItems.length === 0) { + setRemovePanelOpen(false); + setButtonPanelOpen(true); + setChangePanelOpen(false); } }; - const openAddForm = () => { - setFormOpen(true); - setRightSidebarOpen(false); + const openAddPanel = () => { + setAddPanelOpen(true); + setButtonPanelOpen(false); } - const cancelAddForm = () => { - setFormOpen(false); - setRightSidebarOpen(true); + const cancelAddPanel = () => { + setAddPanelOpen(false); + setButtonPanelOpen(true); } - const openRemoveForm = () => { - setRemoveFormOpen(true); - setChangeFormOpen(false); + const openRemovePanel = () => { + setRemovePanelOpen(true); + setChangePanelOpen(false); } - const canselRemoveForm = () => { - setRemoveFormOpen(false); - setRightSidebarOpen(true); + const applyRemovePanel = () => { + setRemovePanelOpen(false); + setButtonPanelOpen(true); } + + const userData = [ + { + id: '0', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Dominik', + property: 'First name', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + { + id: '1', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Lamakani', + property: 'Second name', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '2', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.1983', + property: 'Birthdate', + status: 'Incorrect', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '3', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Male', + property: 'Gender', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '4', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'United Kindom', + property: 'Residence', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + { + id: '5', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Passport', + property: 'Document type', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + { + id: '6', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'A123B3143', + property: 'Document ID', + status: 'Incorrect', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '7', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.2012', + property: 'Issue date', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '8', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.2032', + property: 'Expiry date', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '9', + category: 'Social', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '@lamakani', + property: 'Telegram', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '10', + category: 'Social', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '@lamakani', + property: 'Telegram', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + ] + return (