add dropDown filter for matched list

This commit is contained in:
smanylov
2026-03-27 17:22:09 +07:00
parent f4a0222e0e
commit 11d65410e6
5 changed files with 67 additions and 15 deletions
@@ -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