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 (
{/* Sidebar */} - + {/* Content area */}
{/* Site header */} -
+
-
+
{/* Page header */}
- {/* Title */}
  • @@ -75,16 +222,16 @@ function Profile () {
{/* Table */} - +
- {/* left Sidebar */} + {/* Left sidebar */}
- {/* Form with button*/} -
+ {/* Button panel*/} +
- {/* Add Form */} -
-
+
+ {/* Add panel */} +
@@ -125,26 +272,60 @@ function Profile () {
+ {/* Remove panel */} +
+

Summary

+
+ {userData.filter(({ id }) => selectedItems.includes(id)).map(item => ( + {item.property} + ))} +
+
+ On blockchain too +
+
+ setToggle(!toggle)} /> + +
+
+
+
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms. +
+
{/* Details */} -
+
{/* Top */} -
+
Transaction 04
-
0.012 IDN
+
0.012 IDN
Total amount fee
{/* Divider */} @@ -159,8 +340,8 @@ function Profile () {
- -
+ {/* Bottom */} +
Validator: IT17 2207 1010 0504 0006 88 @@ -176,12 +357,12 @@ function Profile () {
- {/* Field change form */} -
+ {/* Change panel */} +
- {/* Remove form */} -
-
-

Summary

-
- Second name - Birthday -
-
- On blockchain too -
-
- setToggle(!toggle)} /> - -
-
-
- {/* Buttons */} -
- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms. -
-
- {/* Details */} -
- {/* Top */} -
-
- Transaction 04 -
-
0.012 IDN
-
Total amount fee
-
- {/* Divider */} - -
diff --git a/src/partials/digitalId/ProfileTable.jsx b/src/partials/digitalId/ProfileTable.jsx index c2d1da1..cadad05 100644 --- a/src/partials/digitalId/ProfileTable.jsx +++ b/src/partials/digitalId/ProfileTable.jsx @@ -1,12 +1,9 @@ import React, {useState, useEffect} from 'react'; import ProfileTableItem from './ProfileTableItem'; -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 ProfileTable({ - selectedItems + selectedItems, + userData }) { const [isCheck, setIsCheck] = useState([]); @@ -24,143 +21,9 @@ function ProfileTable({ } }; - 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 ( <> + {/* General */}

General 🖋️

@@ -186,7 +49,7 @@ function ProfileTable({
- + {/* Nationality */}

Nationality 🖋️

@@ -212,7 +75,7 @@ function ProfileTable({
- + {/* Social */}

Social 🖋️