matches: add animation, add suspense for table, add no-image image

2026-04-08 13:41:56 +07:00
parent eb2615c303
commit 0c3ccb2806
10 changed files with 267 additions and 26 deletions
@@ -0,0 +1,143 @@
+'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>
+	)
+}