add dropDown filter for matched list
This commit is contained in:
@@ -1,34 +1,51 @@
|
||||
// app/ui/violations/file-page/violation-page-violations-list.tsx
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
|
||||
import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
|
||||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||||
import DropDownList from '@/app/components/DropDownList';
|
||||
|
||||
export default function FilePageViolationsList({
|
||||
currentPage,
|
||||
fileId
|
||||
fileId,
|
||||
status
|
||||
}: {
|
||||
currentPage: number,
|
||||
fileId: string
|
||||
fileId: string,
|
||||
status: string | undefined
|
||||
}) {
|
||||
const t = useTranslations('Global');
|
||||
const tStatus = useTranslations('Match-status');
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
|
||||
const { data: fileViolations } = useFileViolations(fileId, currentPage, '');
|
||||
|
||||
const { data: fileViolations } = useFileViolations(fileId, currentPage, status);
|
||||
|
||||
if (!fileViolations?.violations) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
router.push(`${pathname}?page=${page}`, { scroll: false });
|
||||
const params = new URLSearchParams(searchParams);
|
||||
params.set('page', page.toString());
|
||||
router.push(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const handleStatusChange = (status: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (status) {
|
||||
params.set('status', status);
|
||||
} else {
|
||||
params.delete('status');
|
||||
}
|
||||
params.set('page', '1');
|
||||
router.push(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const getPageNumbers = () => {
|
||||
@@ -60,9 +77,29 @@ export default function FilePageViolationsList({
|
||||
<h3 className="card-title">
|
||||
{t('all-file-violations')}
|
||||
</h3>
|
||||
<span>
|
||||
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className="status-filter-select"
|
||||
>
|
||||
<DropDownList
|
||||
value={status ? tStatus(status) : t('all-statuses')}
|
||||
callBack={handleStatusChange}
|
||||
>
|
||||
<li value=''>{t('all-statuses')}</li>
|
||||
<li value="NEW">{tStatus('NEW')}</li>
|
||||
<li value="SHOWED">{tStatus('SHOWED')}</li>
|
||||
<li value="LEGAL_IN_WORK">{tStatus('LEGAL_IN_WORK')}</li>
|
||||
<li value="COMPLAINT_IN_WORK">{tStatus('COMPLAINT_IN_WORK')}</li>
|
||||
<li value="COMPLAINT_AND_LEGAL_IN_WORK">{tStatus('COMPLAINT_AND_LEGAL_IN_WORK')}</li>
|
||||
<li value="AUTHORIZED_USE">{tStatus('AUTHORIZED_USE')}</li>
|
||||
</DropDownList>
|
||||
</div>
|
||||
<span>
|
||||
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user