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

agreed on form to change and add

Browse Source
This commit is contained in:
Daria Golova
2022-07-05 18:07:21 +03:00
parent f21d10f830
commit 202989f374
1 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,51 +25,54 @@ const Profile = observer (() => {
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date'];
const [propertyValues, setPropertyValues] = useState([]); const [propertyValues, setPropertyValues] = useState([]);
const [currentValues, setCurrentValues] = useState(defaultValues); const [updatedValues, setUpdatedValues] = useState(defaultValues);
const [addedValues, setAddedValues] = useState(defaultValues);
const openHint = () => { const openHint = () => {
if (!currentValues.property) { if (!addedValues.property) {
setPropertyValues(initialPropertyValues); setPropertyValues(initialPropertyValues);
} }
} }
const addCurrentValues = (value, field) => { const changeAddedValues = (value, field) => {
setCurrentValues((prevState)=> ({ setAddedValues((prevState)=> ({
...prevState, ...prevState,
[field]: value.charAt(0).toUpperCase()+value.slice(1), [field]: value.charAt(0).toUpperCase()+value.slice(1),
})) }))
console.log(currentValues); console.log(addedValues);
} };
const changeCurrentValue = (value, field, id) => { const changeUpdatedValues = (value, field, key) => {
setCurrentValues((prevState) => setUpdatedValues((prevState) =>
prevState.map((elem) => ( prevState.map((elem) => (
elem.id === id ? { elem.key === key ? {
...elem, ...elem,
[field]: value.charAt(0).toUpperCase()+value.slice(1), [field]: value.charAt(0).toUpperCase()+value.slice(1),
} : elem } : elem
)) ))
) )
console.log(currentValues); console.log(updatedValues);
}; };
const closeHint = (element) => { const closeHint = (element) => {
addCurrentValues(element, 'property'); changeAddedValues(element, 'property');
setPropertyValues([]); setPropertyValues([]);
} }
const handleSelectedItems = (selectedItems) => { const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]); setSelectedItems([...selectedItems]);
setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)));
if (selectedItems.length > 0) { if (selectedItems.length > 0) {
setButtonPanelOpen(false); setButtonPanelOpen(false);
setAddPanelOpen(false); setAddPanelOpen(false);
setChangePanelOpen(true); setChangePanelOpen(true);
} }
if (removePanelOpen === true) { if (removePanelOpen === true || updatePanelOpen === true) {
setChangePanelOpen(false); setChangePanelOpen(false);
} }
if (selectedItems.length === 0) { if (selectedItems.length === 0) {
setRemovePanelOpen(false); setRemovePanelOpen(false);
setUpdatePanelOpen(false);
setButtonPanelOpen(true); setButtonPanelOpen(true);
setChangePanelOpen(false); setChangePanelOpen(false);
} }
@@ -81,10 +84,10 @@ const Profile = observer (() => {
} }
const sendValues = () => { const sendValues = () => {
if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) { if (!userDataStore.decryptedData.some((element) => element.property === addedValues.property) && (addedValues.seed.toString().length === 20)) {
setAddPanelOpen(false); setAddPanelOpen(false);
setButtonPanelOpen(true); setButtonPanelOpen(true);
setCurrentValues(defaultValues); setAddedValues(defaultValues);
} }
} }
@@ -94,7 +97,7 @@ const Profile = observer (() => {
} }
const cancelAddPanel = () => { const cancelAddPanel = () => {
setCurrentValues(defaultValues); setAddedValues(defaultValues);
setAddPanelOpen(false); setAddPanelOpen(false);
setButtonPanelOpen(true); setButtonPanelOpen(true);
} }
@@ -110,11 +113,9 @@ const Profile = observer (() => {
} }
const openUpdatePanel = () => { const openUpdatePanel = () => {
setCurrentValues(selectedUserData);
setUpdatePanelOpen(true); setUpdatePanelOpen(true);
setChangePanelOpen(false); setChangePanelOpen(false);
console.log(currentValues); console.log(updatedValues);
console.log(selectedUserData)
} }
const applyRemovePanel = () => { const applyRemovePanel = () => {
@@ -124,7 +125,7 @@ const Profile = observer (() => {
} }
const handleInput = (text, field) => { const handleInput = (text, field) => {
addCurrentValues(text, field); changeAddedValues(text, field);
setPropertyValues(initialPropertyValues); setPropertyValues(initialPropertyValues);
if (text) { if (text) {
let reg = new RegExp(`^${text}`, 'img'); let reg = new RegExp(`^${text}`, 'img');
@@ -132,8 +133,6 @@ const Profile = observer (() => {
} }
}; };
let selectedUserData = userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key));
return ( return (
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
{/* Sidebar */} {/* Sidebar */}
@@ -198,7 +197,7 @@ const Profile = observer (() => {
type="text" type="text"
required required
onInput={(e) => handleInput(e.target.value, 'property')} onInput={(e) => handleInput(e.target.value, 'property')}
value={currentValues.property} value={addedValues.property}
onClick={openHint} onClick={openHint}
/> />
<div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}> <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
@@ -218,8 +217,8 @@ const Profile = observer (() => {
type="text" type="text"
required required
onClick={() => setPropertyValues([])} onClick={() => setPropertyValues([])}
onChange={(e) => addCurrentValues(e.target.value, 'value')} onChange={(e) => changeAddedValues(e.target.value, 'value')}
value={currentValues.value} value={addedValues.value}
/> />
</div> </div>
<div> <div>
@@ -231,8 +230,8 @@ const Profile = observer (() => {
type="text" type="text"
required required
onClick={() => setPropertyValues([])} onClick={() => setPropertyValues([])}
onChange={(e) => addCurrentValues(e.target.value, 'seed')} onChange={(e) => changeAddedValues(e.target.value, 'seed')}
value={currentValues.seed} value={addedValues.seed}
/> />
</div> </div>
</div> </div>
@@ -265,16 +264,16 @@ const Profile = observer (() => {
</div> </div>
{/* Update panel */} {/* Update panel */}
<div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}> <div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
{currentValues.map((item, index) => ( {updatedValues.map((item, index) => (
<div key={item.key} className="flex flex-col gap-y-3"> <div key={index} className="flex flex-col gap-y-3">
<div> <div>
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
<input <input
id={`${item.key}property`} id={`${item.key}:property`}
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onChange={(e) => changeCurrentValue(e.target.value, 'property', item.id)} onChange={(e) => changeUpdatedValues(e.target.value, 'property', item.key)}
value={item.label} value={item.label}
disabled='disabled' disabled='disabled'
/> />
@@ -283,11 +282,11 @@ const Profile = observer (() => {
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
<input <input
autoComplete='off' autoComplete='off'
id={`${item.key}value`} id={`${item.key}:value`}
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onChange={(e) => changeCurrentValue(e.target.value, 'value', item.id)} onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
value={item.value} value={item.value}
/> />
</div> </div>
@@ -295,15 +294,15 @@ const Profile = observer (() => {
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label> <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
<input <input
autoComplete='off' autoComplete='off'
id={`${item.key}seed`} id={`${item.key}:seed`}
className="form-input w-full" className="form-input w-full"
type="text" type="text"
required required
onChange={(e) => changeCurrentValue(e.target.value, 'seed', item.id)} onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
value={item.seed || Math.floor(Math.random() * 90000000000000000000)} value={item.seed || Math.floor(Math.random() * 90000000000000000000)}
/> />
</div> </div>
{(currentValues[index+1]) ? ( {(updatedValues[index+1]) ? (
<div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div> <div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
) : null} ) : null}
</div> </div>