Naming fix
This commit is contained in:
@@ -5,7 +5,6 @@ import Header from '../../partials/Header';
|
||||
import ValidateTable from "../../partials/validate/ValidateTable";
|
||||
import ValidatePanel from "../../partials/validate/ValidatePanel";
|
||||
import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
|
||||
import {TransactionID} from "../../utils/TransactionID";
|
||||
import {Link} from "react-router-dom";
|
||||
import User06 from "../../images/user-28-06.jpg";
|
||||
import User08 from "../../images/user-28-08.jpg";
|
||||
@@ -20,7 +19,7 @@ function Validate () {
|
||||
{
|
||||
id: '40',
|
||||
name: 'Today',
|
||||
transid: TransactionID(),
|
||||
data: '7234ABC342342352345',
|
||||
usersImges: [
|
||||
{
|
||||
img: User06,
|
||||
@@ -41,21 +40,21 @@ function Validate () {
|
||||
],
|
||||
items: [
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '555',
|
||||
trunsText: 'Second name for',
|
||||
text: 'Second name for',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '534',
|
||||
trunsText: 'Gender name for',
|
||||
text: 'Gender name for',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '567',
|
||||
trunsText: 'Document ID name for',
|
||||
text: 'Document ID name for',
|
||||
checked: true
|
||||
},
|
||||
]
|
||||
@@ -110,7 +109,7 @@ function Validate () {
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
|
||||
</div>
|
||||
{validateItems.map(item => {
|
||||
return <ValidateRoadMap trunsSeason={item} key={item.id}/>
|
||||
return <ValidateRoadMap season={item} key={item.id}/>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,6 @@ import User09 from "../../images/user-28-09.jpg";
|
||||
import User06 from "../../images/user-28-06.jpg";
|
||||
import User03 from "../../images/user-28-03.jpg";
|
||||
import User01 from "../../images/user-28-01.jpg";
|
||||
import {TransactionID} from "../../utils/TransactionID";
|
||||
|
||||
function ValidationLog () {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
@@ -18,7 +17,7 @@ function ValidationLog () {
|
||||
{
|
||||
id: '20',
|
||||
name: 'Today',
|
||||
transid: TransactionID(),
|
||||
data: '7234ABC342342352345',
|
||||
usersImges: [
|
||||
{
|
||||
img: User06,
|
||||
@@ -39,21 +38,21 @@ function ValidationLog () {
|
||||
],
|
||||
items: [
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '434',
|
||||
trunsText: 'Second name',
|
||||
text: 'Second name',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '476',
|
||||
trunsText: 'First name by',
|
||||
text: 'First name by',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '422',
|
||||
trunsText: 'Document name by',
|
||||
text: 'Document name by',
|
||||
checked: true
|
||||
},
|
||||
]
|
||||
@@ -61,7 +60,7 @@ function ValidationLog () {
|
||||
{
|
||||
id: '30',
|
||||
name: 'Last Week',
|
||||
transid: TransactionID(),
|
||||
data: '7234ABC342342352345',
|
||||
usersImges: [
|
||||
{
|
||||
img: User06,
|
||||
@@ -82,21 +81,21 @@ function ValidationLog () {
|
||||
],
|
||||
items: [
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '654',
|
||||
trunsText: 'Gender name by',
|
||||
text: 'Gender name by',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '617',
|
||||
trunsText: 'Second name Updated',
|
||||
text: 'Second name Updated',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
seasonId: TransactionID(),
|
||||
dataSeason: '7234ABC342342352345',
|
||||
id: '643',
|
||||
trunsText: 'Gender name by',
|
||||
text: 'Gender name by',
|
||||
checked: true
|
||||
},
|
||||
]
|
||||
@@ -126,7 +125,7 @@ function ValidationLog () {
|
||||
<div className="xl:-translate-x-16 max-w-fit">
|
||||
{/* PostsID */}
|
||||
{logItems.map(item => {
|
||||
return <ValidateRoadMap trunsSeason={item} key={item.id} />
|
||||
return <ValidateRoadMap season={item} key={item.id} />
|
||||
})}
|
||||
{/* Post */}
|
||||
<article className="pt-6">
|
||||
|
||||
@@ -13,8 +13,13 @@ function ValidateTableItem(props) {
|
||||
}
|
||||
};
|
||||
|
||||
function openValidatePanel (event) {
|
||||
event.stopPropagation()
|
||||
props.setValidatePanelOpen(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => { e.stopPropagation(); props.setValidatePanelOpen(true); }}>
|
||||
<tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
|
||||
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
|
||||
<div className="flex items-center">
|
||||
<label className="inline-flex">
|
||||
|
||||
@@ -49,28 +49,28 @@ function ValidateTable({
|
||||
];
|
||||
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [isCheck, setIsCheck] = useState([]);
|
||||
const [list, setList] = useState([]);
|
||||
const [marked, setMarked] = useState([]);
|
||||
const [selectedList, setSelectedList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setList(validateData);
|
||||
setSelectedList(validateData);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleSelectAll = () => {
|
||||
setSelectAll(!selectAll);
|
||||
setIsCheck(list.map(li => li.id));
|
||||
setMarked(selectedList.map(li => li.id));
|
||||
if (selectAll) {
|
||||
setIsCheck([]);
|
||||
setMarked([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = e => {
|
||||
const { id, checked } = e.target;
|
||||
setSelectAll(false);
|
||||
setIsCheck([...isCheck, id]);
|
||||
setMarked([...marked, id]);
|
||||
if (!checked) {
|
||||
setIsCheck(isCheck.filter(item => item !== id));
|
||||
setMarked(marked.filter(item => item !== id));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -108,7 +108,7 @@ function ValidateTable({
|
||||
</thead>
|
||||
{/* Table body */}
|
||||
<tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
|
||||
{list.map((data) => {
|
||||
{selectedList.map((data) => {
|
||||
return (
|
||||
<ValidateTableItem
|
||||
key={data.id}
|
||||
@@ -119,7 +119,7 @@ function ValidateTable({
|
||||
seed={data.seed}
|
||||
check={data.check}
|
||||
handleClick={handleClick}
|
||||
isChecked={isCheck.includes(data.id)}
|
||||
isChecked={marked.includes(data.id)}
|
||||
setValidatePanelOpen={setValidatePanelOpen}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -3,20 +3,20 @@ import React from "react";
|
||||
import ValidationSeasonItem from "./ValidationSeasonItem";
|
||||
import ValidationUsersImg from "./ValidationUsersImg";
|
||||
|
||||
function ValidateRoadMap({ trunsSeason }) {
|
||||
function ValidateRoadMap({ season }) {
|
||||
|
||||
return (
|
||||
<article className="pt-6">
|
||||
<div className="xl:flex">
|
||||
<div className="w-32 shrink-0">
|
||||
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{trunsSeason.name}</h2>
|
||||
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{season.name}</h2>
|
||||
</div>
|
||||
<div className="grow pb-6 border-b border-slate-200">
|
||||
<header>
|
||||
<div className="flex flex-nowrap items-center space-x-2 mb-6">
|
||||
{/* Avatars */}
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
{trunsSeason.usersImges.map(pic => {
|
||||
{season.usersImges.map(pic => {
|
||||
return <ValidationUsersImg key={pic.imgId} image={pic}/>
|
||||
})}
|
||||
</div>
|
||||
@@ -26,8 +26,8 @@ function ValidateRoadMap({ trunsSeason }) {
|
||||
{/* List */}
|
||||
<ul className="-my-2">
|
||||
{/* List item(s) */}
|
||||
{trunsSeason.items.map((item, index) => {
|
||||
return <ValidationSeasonItem key={item.id} length={trunsSeason.items.length} item={item} index={index}/>
|
||||
{season.items.map((item, index) => {
|
||||
return <ValidationSeasonItem key={item.id} length={season.items.length} item={item} index={index}/>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -11,15 +11,15 @@ function ValidationSeasonItem({ length, item, index }) {
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-800 pl-9">
|
||||
{item.trunsText} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.seasonId}`}</a>}
|
||||
{item.text} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.dataSeason}`}</a>}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="block text-slate-800 w-fit pl-9">
|
||||
<div className="text-base font-semibold underline mb-[-10px]">{`0x${item.seasonId}`}</div>
|
||||
<div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
|
||||
<span className="font-normal text-[10px]">Transactions ID</span>
|
||||
</div>
|
||||
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
|
||||
<div className="text-base font-semibold underline mb-[-10px]">{item.seasonId}</div>
|
||||
<div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
|
||||
<span className="font-normal text-[10px]">Validated data</span>
|
||||
</div>
|
||||
<a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -></a>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
export var TransactionID = (function(ID){
|
||||
return function () {
|
||||
if(ID) {
|
||||
localStorage.setItem('transID', ID)
|
||||
} else {
|
||||
localStorage.setItem('transID', '7234ABC342342352345')
|
||||
}
|
||||
return localStorage.getItem('transID')
|
||||
}
|
||||
})()
|
||||
Reference in New Issue
Block a user