138 lines
4.1 KiB
JavaScript
138 lines
4.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import ValidateTableItem from './ValidateItem';
|
|
|
|
function ValidateTable({ setValidatePanelOpen }) {
|
|
const validateData = [
|
|
{
|
|
id: '10',
|
|
check: true,
|
|
filed: 'Second name',
|
|
data: 'Pavel',
|
|
status: 'Correct',
|
|
seed: '1234 ... 1234',
|
|
},
|
|
{
|
|
id: '11',
|
|
check: true,
|
|
filed: 'First name',
|
|
data: 'Thownetc',
|
|
status: 'Correct',
|
|
seed: '4567 ... 0987',
|
|
},
|
|
{
|
|
id: '12',
|
|
check: false,
|
|
filed: 'Gender',
|
|
data: 'Female',
|
|
status: 'Incorrect',
|
|
seed: '4567 ... 0987',
|
|
},
|
|
{
|
|
id: '13',
|
|
check: false,
|
|
filed: 'Document',
|
|
data: 'Passport',
|
|
status: 'Missed',
|
|
seed: '4567 ... 0987',
|
|
},
|
|
{
|
|
id: '14',
|
|
check: true,
|
|
filed: 'Document ID',
|
|
data: '1233425345',
|
|
status: 'Correct',
|
|
seed: '1234 ... 1234',
|
|
},
|
|
];
|
|
|
|
const [selectAll, setSelectAll] = useState(false);
|
|
const [marked, setMarked] = useState([]);
|
|
const [selectedList, setSelectedList] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setSelectedList(validateData);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const handleSelectAll = () => {
|
|
setSelectAll(!selectAll);
|
|
setMarked(selectedList.map((li) => li.id));
|
|
if (selectAll) {
|
|
setMarked([]);
|
|
}
|
|
};
|
|
|
|
const handleClick = (e) => {
|
|
const { id, checked } = e.target;
|
|
setSelectAll(false);
|
|
setMarked([...marked, id]);
|
|
if (!checked) {
|
|
setMarked(marked.filter((item) => item !== id));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-fit">
|
|
<div>
|
|
{/* Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="table-auto w-fit">
|
|
{/* Table header */}
|
|
<thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
|
|
<tr>
|
|
<th className="first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
|
|
<div className="flex items-center">
|
|
<label className="inline-flex">
|
|
<span className="sr-only">Select all</span>
|
|
<input
|
|
className="form-checkbox"
|
|
type="checkbox"
|
|
checked={selectAll}
|
|
onChange={handleSelectAll}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</th>
|
|
<th className="px-2 first:pl-5 pr-[136px] py-3 whitespace-nowrap">
|
|
<div className="font-semibold text-left">FIELD</div>
|
|
</th>
|
|
<th className="px-2 first:pl-5 pr-[154px] py-3 whitespace-nowrap">
|
|
<div className="font-semibold text-left">DATA</div>
|
|
</th>
|
|
<th className="min-w-[191px] px-2 first:pl-5 pr-[168px] py-3 whitespace-nowrap">
|
|
<div className="pl-7 font-semibold text-left">SEED</div>
|
|
</th>
|
|
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="pl-2 font-semibold text-left">STATUS</div>
|
|
</th>
|
|
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap" />
|
|
</tr>
|
|
</thead>
|
|
{/* Table body */}
|
|
<tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
|
|
{selectedList.map((data) => {
|
|
return (
|
|
<ValidateTableItem
|
|
key={data.id}
|
|
id={data.id}
|
|
filed={data.filed}
|
|
data={data.data}
|
|
status={data.status}
|
|
seed={data.seed}
|
|
check={data.check}
|
|
handleClick={handleClick}
|
|
isChecked={marked.includes(data.id)}
|
|
setValidatePanelOpen={setValidatePanelOpen}
|
|
/>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ValidateTable;
|