Files
no-copy-frontend/src/app/ui/file-page/violation-table/file-page-violations-loading-list.tsx
T

143 lines
3.3 KiB
TypeScript

'use client'
import Link from 'next/link';
import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
import DropDownList from '@/app/components/DropDownList';
import { IconArrowLeft, IconArrowRight, IconDoubleArrowLeft, IconDoubleArrowRight } from '@/app/ui/icons/icons';
import { useTranslations } from 'next-intl';
export default function FilePageViolationsLoadingList({
currentPage,
fileId,
status,
cachedTotalPages,
cachedTotalElements,
cachedCurrentPage,
}: {
currentPage: number,
fileId: string,
status: string | undefined,
cachedTotalPages: number | undefined,
cachedTotalElements: number | undefined,
cachedCurrentPage: number | undefined
}) {
const t = useTranslations('Global');
const tStatus = useTranslations('Match-status');
const getPageNumbers = () => {
const pages = [];
const maxVisible = 5;
const total = cachedTotalPages;
let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
let end = Math.min(total ? total : 0, start + maxVisible - 1);
if (end - start + 1 < maxVisible) {
start = Math.max(1, end - maxVisible + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
};
return (
<div className="block-wrapper">
<div className="card-header">
<h3 className="card-title">
{t('all-file-violations')}
</h3>
<div className="flex items-center gap-4">
<div
className="status-filter-select"
>
<DropDownList
value={status ? tStatus(status) : t('all-statuses')}
callBack={() => { }}
>
<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>
</div>
</div>
<div
className="sources-list-wrapper relative"
>
<div
className="loading-animation"
>
<div
className="global-spinner large"
>
</div>
</div>
</div>
<div
className="sources-list-pagination"
>
<span>
{t('total-violations')}: {cachedTotalElements} | {t('page')} {cachedCurrentPage} {t('out-of')} {cachedTotalPages}
</span>
<div className="pagination-controls">
<button
className="arrow"
onClick={() => { }}
disabled={true}
>
<IconDoubleArrowLeft />
</button>
<button
onClick={() => { }}
className="arrow"
disabled={true}
>
<IconArrowLeft />
</button>
<div
className="pagination-controls-pages"
>
{getPageNumbers().map(pageNum => (
<button
key={pageNum}
onClick={() => { }}
className={currentPage === pageNum ? 'current' : 'other'}
disabled={true}
>
{pageNum}
</button>
))}
</div>
<button
onClick={() => { }}
className="arrow"
disabled={true}
>
<IconArrowRight />
</button>
<button
className="arrow"
onClick={() => { }}
disabled={true}
>
<IconDoubleArrowRight />
</button>
</div>
</div>
</div>
)
}