Skip to content

Commit

Permalink
feat: completed verification page
Browse files Browse the repository at this point in the history 
Signed-off-by: hanifdwyputras <hanifdwyputrasembiring@gmail.com>
  • Loading branch information
@hansputera
hansputera committed Jun 5, 2023
1 parent 5b3488c commit 9e9e064
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 17 deletions.
2 changes: 1 addition & 1 deletion src/app/me/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function MePage() {
</p>
<div className="grid grid-cols-2 gap-4">
<Link className="btn btn-primary" href={'/verifikasi'}>verifikasi</Link>
<Link className="btn btn-secondary" href={'/terverifikasi'}>terverifikasi</Link>
<Link className="btn btn-secondary" href={'/users'}>users management</Link>
</div>
</div>
{!isLoading && data?.archives && !('errors' in data) && (
Expand Down
91 changes: 76 additions & 15 deletions src/app/verifikasi/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,38 @@ import Fuse from 'fuse.js'
export default function VerifikasiPage() {
const session = useSessionStore();
const [currentPage, setCurrentPage] = React.useState(1);
const [query, setQuery] = React.useState<string>();
const [selectedData, setSelectedData] = React.useState<any[]>([]);
const { data, isLoading } = useSWR(session.token ? `/api/archives?perPage=10&page=${currentPage}` : null, url => fetcher(url, {
const [sortBy, setSortBy] = React.useState<string>('verificator_id:== \'null\'');
const { data, isLoading, mutate } = useSWR(session.token ? `/api/archives?offset=200&page=${currentPage}` : null, url => fetcher(url, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${session.token}`
},
}).then(r => r.data), {
onSuccess(data) {
setSelectedData(data.archives);
if (!data) {
session.reset();
return
}
sortForm(sortBy);
cariForm(query || '');
},
});

const sendVerifyNode = (id: string): void => {
fetch(`/api/archives/${id}/verify`, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${session.token}`,
},
method: 'POST',
}).finally(() => {
mutate();
setSelectedData(selectedData.filter(x => x.id !== id));
});
}

const resolveDoc = (t: string) => {
switch(t) {
case 'prestasi':
Expand All @@ -35,39 +56,71 @@ export default function VerifikasiPage() {

React.useEffect(() => {
setSelectedData(data?.archives || []);
}, [data]);
}, [data, sortBy]);


const cariForm = (query: string) => {
const cariForm = React.useCallback((query: string) => {
setQuery(query);
if (!query.length) {
setSelectedData(data?.archives || []);
return;
}

const fuse = new Fuse(data?.archives || [], {
keys: ['nisn', 'name', 'nik', 'birthday', 'school'],
keys: ['nisn', 'name', 'nik'],
});

const results = fuse.search(query);
setSelectedData(results.map(x => x.item));
}
setSelectedData(results.map(x => x.item).sort());
}, [data?.archives]);

const sortForm = React.useCallback((sortBy: string) => {
const values = sortBy.split(':');

const newdata = data?.archives.filter((x: any) => eval(`'${x[values![0]]}'${values![1]}`)) || [];
setSelectedData(newdata);
}, [data?.archives]);

React.useEffect(() => {
sortForm(sortBy);
cariForm(query || '');
}, [query, sortBy, sortForm, cariForm]);

return (
<div>
<div className="lg:px-40">
{!isLoading && (
<div className="join join-vertical lg:join-horizontal">
<div>
<div>
<input className="input join-item" placeholder="Cari NISN/Nama" onChange={(ev) => cariForm(ev.target.value)}/>
<input className="input join-item" placeholder="Cari NISN/Nama" value={query} onChange={(ev) => cariForm(ev.target.value)}/>
</div>
</div>
<div className="join-item">
<div className="join">
<button className="join-item btn">«</button>
<button className="join-item btn" onClick={() => setCurrentPage(currentPage === 1 ? 1 : currentPage-1)}>«</button>
{currentPage > 1 && (
<>
<button className="join-item btn" onClick={() => setCurrentPage(1)}>1</button>
{currentPage > 2 && <button className="join-item btn btn-disabled">...</button>}
</>
)}
<button className="join-item btn btn-neutral">{currentPage}</button>
<button className="join-item btn">{data?.nextPage}</button>
{currentPage !== data?.totalPage && <button className="join-item btn" onClick={() => setCurrentPage(data?.nextPage)}>{data?.nextPage}</button>}
<button className="join-item btn btn-disabled">...</button>
<button className="join-item btn">{data?.totalPage}</button>
<button className="join-item btn">»</button>
<button className="join-item btn" onClick={() => setCurrentPage(data?.totalPage)}>{data?.totalPage}</button>
<button className="join-item btn" onClick={() => setCurrentPage(currentPage === data?.totalPage ? data?.totalPage : currentPage+1)}>»</button>

<div className="join-item">
<select className="select w-full max-w-xs" defaultValue={'verificator_id:== \'null\''} value={sortBy} onChange={(ev) => setSortBy(ev.target.value)}>
<option disabled selected>Sort by:</option>
<option value="type:== 'zonasi'">Zonasi</option>
<option value="type:== 'prestasi'">Prestasi</option>
<option value="type:== 'afirmasi'">Afirmasi</option>
<option value="type:== 'mutasi'">Mutasi</option>
<option value="verificator_id:!== 'null'">Terverifikasi</option>
<option value="verificator_id:== 'null'">Tidak terverifikasi</option>
</select>
</div>
</div>
</div>
</div>
Expand All @@ -77,9 +130,9 @@ export default function VerifikasiPage() {
{!isLoading && data && (
<>
<table className="table">
{/* head */}
<thead>
<tr className="lg:text-lg">
<th>Actions</th>
<th>Berkas/Kelamin</th>
<th>Nama</th>
<th>NISN</th>
Expand All @@ -92,12 +145,20 @@ export default function VerifikasiPage() {
<th>Agama</th>
<th>SKHU</th>
<th>Foto Pas</th>
<th>KK/Sertifikat/SK Mutasi/KIP</th>
<th>Dokumen Lain</th>
</tr>
</thead>
<tbody>
{selectedData.map((archive: any) => (
<tr key={archive.id}>
<th>
<button className="btn btn-secondary text-sm" onClick={(ev) => {
ev.currentTarget.setAttribute('disabled', 'true');
sendVerifyNode(archive.id);
}}>
verify
</button>
</th>
<td>{archive.id.split('-')[0]}/{archive.gender}</td>
<td>{archive.name}</td>
<td>{archive.nisn}</td>
Expand Down
1 change: 0 additions & 1 deletion src/components/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export const Navbar = () => {
) : (
<>
<li><Link href='/verifikasi'>Halaman Verifikasi</Link></li>
<li><Link href='/terverifikasi'>Halaman Terverifikasi</Link></li>
{session.status === 2 && (
<>
<li>
Expand Down

0 comments on commit 9e9e064

Please sign in to comment.