mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
UI fixes
This commit is contained in:
@@ -75,7 +75,7 @@ export function CertificationPage() {
|
||||
const locale = i18n.language as 'en' | 'am';
|
||||
const { handleError } = useErrorHandler();
|
||||
const { data, isFetching, isError, refetch } = useGetCertificationsQuery();
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable();
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
|
||||
const [createCert, { isLoading: isCreating }] = useCreateCertificationMutation();
|
||||
const [updateCert, { isLoading: isUpdating }] = useUpdateCertificationMutation();
|
||||
const [deleteCert] = useDeleteCertificationMutation();
|
||||
@@ -191,6 +191,7 @@ export function CertificationPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isFetching}
|
||||
emptyText={t('certification.noItems')}
|
||||
|
||||
@@ -353,7 +353,7 @@ export function ExamPage() {
|
||||
const locale = i18n.language as "en" | "am";
|
||||
const { data: certRes } = useGetCertificationsQuery();
|
||||
const { data, isFetching, isError, refetch } = useGetExamsQuery();
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable();
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
|
||||
const [createExam, { isLoading: isCreating }] = useCreateExamMutation();
|
||||
const [updateExam, { isLoading: isUpdating }] = useUpdateExamMutation();
|
||||
const [deleteExam] = useDeleteExamMutation();
|
||||
@@ -580,6 +580,7 @@ export function ExamPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isFetching}
|
||||
emptyText={t("exam.noItems")}
|
||||
|
||||
@@ -130,6 +130,7 @@ export function LicenseQueuePage() {
|
||||
() => (searchParams.get("view") as SavedViewId) || readLastView(),
|
||||
);
|
||||
const [page, setPage] = useState(() => Number(searchParams.get("page")) || 1);
|
||||
const [pageSize, setPageSize] = useState(PAGE_SIZE);
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const [searchInput, setSearchInput] = useState(searchParams.get("q") ?? "");
|
||||
const [cursor, setCursor] = useState(0);
|
||||
@@ -166,10 +167,10 @@ export function LicenseQueuePage() {
|
||||
urlFilter.sortBy ??
|
||||
(activeView.id === "mine" ? "submittedAt" : "submittedAt"),
|
||||
sortDir: urlFilter.sortDir ?? "DESC",
|
||||
take: PAGE_SIZE,
|
||||
skip: (page - 1) * PAGE_SIZE,
|
||||
take: pageSize,
|
||||
skip: (page - 1) * pageSize,
|
||||
}),
|
||||
[activeView, urlFilter, debouncedSearch, pinnedTypeId, page],
|
||||
[activeView, urlFilter, debouncedSearch, pinnedTypeId, page, pageSize],
|
||||
);
|
||||
|
||||
// One query per source; the two inactive ones are skipped, so switching
|
||||
@@ -688,8 +689,8 @@ export function LicenseQueuePage() {
|
||||
<Group justify="flex-end" p="sm" pb={0}>
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("queue.showing", {
|
||||
from: (page - 1) * PAGE_SIZE + 1,
|
||||
to: Math.min(page * PAGE_SIZE, total),
|
||||
from: (page - 1) * pageSize + 1,
|
||||
to: Math.min(page * pageSize, total),
|
||||
total,
|
||||
defaultValue: "Showing {{from}}–{{to}} of {{total}}",
|
||||
})}
|
||||
@@ -706,7 +707,12 @@ export function LicenseQueuePage() {
|
||||
setPage(next);
|
||||
updateUrl({}, view, next);
|
||||
}}
|
||||
pageSize={PAGE_SIZE}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={(next) => {
|
||||
setPageSize(next);
|
||||
setPage(1);
|
||||
updateUrl({}, view, 1);
|
||||
}}
|
||||
refresh={() => active.refetch()}
|
||||
isLoading={active.isFetching}
|
||||
verticalSpacing={density === "compact" ? 4 : "sm"}
|
||||
|
||||
@@ -218,6 +218,8 @@ export function MedicalVerificationPage() {
|
||||
|
||||
const [medicalPage, setMedicalPage] = useState(0);
|
||||
const [seaServicePage, setSeaServicePage] = useState(0);
|
||||
const [medicalPageSize, setMedicalPageSize] = useState(PAGE_SIZE);
|
||||
const [seaServicePageSize, setSeaServicePageSize] = useState(PAGE_SIZE);
|
||||
|
||||
const rule = useCallback(
|
||||
async (run: () => Promise<unknown>, done: string): Promise<void> => {
|
||||
@@ -241,14 +243,24 @@ export function MedicalVerificationPage() {
|
||||
);
|
||||
|
||||
const pagedMedical = useMemo(() => {
|
||||
const start = medicalPage * PAGE_SIZE;
|
||||
return pendingMedicalList.slice(start, start + PAGE_SIZE);
|
||||
}, [pendingMedicalList, medicalPage]);
|
||||
const start = medicalPage * medicalPageSize;
|
||||
return pendingMedicalList.slice(start, start + medicalPageSize);
|
||||
}, [pendingMedicalList, medicalPage, medicalPageSize]);
|
||||
|
||||
const pagedSeaService = useMemo(() => {
|
||||
const start = seaServicePage * PAGE_SIZE;
|
||||
return pendingSeaServiceList.slice(start, start + PAGE_SIZE);
|
||||
}, [pendingSeaServiceList, seaServicePage]);
|
||||
const start = seaServicePage * seaServicePageSize;
|
||||
return pendingSeaServiceList.slice(start, start + seaServicePageSize);
|
||||
}, [pendingSeaServiceList, seaServicePage, seaServicePageSize]);
|
||||
|
||||
const handleMedicalPageSizeChange = useCallback((size: number) => {
|
||||
setMedicalPageSize(size);
|
||||
setMedicalPage(0);
|
||||
}, []);
|
||||
|
||||
const handleSeaServicePageSizeChange = useCallback((size: number) => {
|
||||
setSeaServicePageSize(size);
|
||||
setSeaServicePage(0);
|
||||
}, []);
|
||||
|
||||
const medicalColumns: AdvancedColumn<MedicalCertificate>[] = useMemo(
|
||||
() => [
|
||||
@@ -491,7 +503,8 @@ export function MedicalVerificationPage() {
|
||||
itemCount={pendingMedicalList.length}
|
||||
pageIndex={medicalPage}
|
||||
onPageChange={setMedicalPage}
|
||||
pageSize={PAGE_SIZE}
|
||||
pageSize={medicalPageSize}
|
||||
onPageSizeChange={handleMedicalPageSizeChange}
|
||||
refresh={refetchMedical}
|
||||
isLoading={loadingMedical || fetchingMedical}
|
||||
emptyText="Nothing awaiting verification."
|
||||
@@ -506,7 +519,8 @@ export function MedicalVerificationPage() {
|
||||
itemCount={pendingSeaServiceList.length}
|
||||
pageIndex={seaServicePage}
|
||||
onPageChange={setSeaServicePage}
|
||||
pageSize={PAGE_SIZE}
|
||||
pageSize={seaServicePageSize}
|
||||
onPageSizeChange={handleSeaServicePageSizeChange}
|
||||
refresh={refetchSeaService}
|
||||
isLoading={loadingSeaService || fetchingSeaService}
|
||||
emptyText="Nothing awaiting verification."
|
||||
|
||||
@@ -123,7 +123,7 @@ export function QuestionPage() {
|
||||
const { handleError } = useErrorHandler();
|
||||
const { data: certRes } = useGetCertificationsQuery();
|
||||
const { data, isFetching, isError, refetch } = useGetQuestionsQuery();
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable();
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
|
||||
const [createQ, { isLoading: isCreating }] = useCreateQuestionMutation();
|
||||
const [updateQ, { isLoading: isUpdating }] = useUpdateQuestionMutation();
|
||||
const [deleteQ] = useDeleteQuestionMutation();
|
||||
@@ -341,6 +341,7 @@ export function QuestionPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isFetching}
|
||||
emptyText={t('question.noQuestions')}
|
||||
|
||||
@@ -120,7 +120,7 @@ export function ResultPage() {
|
||||
const { handleError } = useErrorHandler();
|
||||
const { data: examRes } = useGetExamsQuery();
|
||||
const { data, isFetching, isError, refetch } = useGetResultsQuery();
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable();
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
|
||||
const [fetchDetail, { data: detailResult, isFetching: isDetailLoading }] = useLazyGetResultQuery();
|
||||
|
||||
const exams = examRes?.items ?? [];
|
||||
@@ -452,6 +452,7 @@ export function ResultPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isFetching}
|
||||
emptyText={t('result.noItems')}
|
||||
|
||||
@@ -334,7 +334,7 @@ export function SeafarerRegistryPage() {
|
||||
method: 'GET',
|
||||
params: { q: 'i=profession,address&t=200' },
|
||||
});
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable();
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
|
||||
|
||||
const items = (data?.items ?? []).filter((p) => {
|
||||
if (!search.trim()) return true;
|
||||
@@ -446,6 +446,7 @@ export function SeafarerRegistryPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isLoading}
|
||||
emptyText={search ? 'No profiles match that search.' : 'No seafarers registered yet.'}
|
||||
|
||||
@@ -104,8 +104,12 @@ export function MyApplicationsPage() {
|
||||
const items = data?.items ?? [];
|
||||
const licenceItems = licences?.items ?? [];
|
||||
|
||||
const { setPageIndex: setLicencePage, pageSize: licencePageSize, paginate: paginateLicences } =
|
||||
useServerTable({ pageSize: 10 });
|
||||
const {
|
||||
setPageIndex: setLicencePage,
|
||||
pageSize: licencePageSize,
|
||||
setPageSize: setLicencePageSize,
|
||||
paginate: paginateLicences,
|
||||
} = useServerTable({ pageSize: 10 });
|
||||
const licencePage = paginateLicences(licenceItems);
|
||||
|
||||
const licenceColumns: AdvancedColumn<IssuedLicense>[] = [
|
||||
@@ -154,7 +158,7 @@ export function MyApplicationsPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const page = paginate(items);
|
||||
|
||||
const applicationColumns: AdvancedColumn<LicenseApplication>[] = [
|
||||
@@ -284,6 +288,7 @@ export function MyApplicationsPage() {
|
||||
pageIndex={licencePage.pageIndex}
|
||||
onPageChange={setLicencePage}
|
||||
pageSize={licencePageSize}
|
||||
onPageSizeChange={setLicencePageSize}
|
||||
refresh={refetchLicences}
|
||||
isLoading={isFetchingLicences}
|
||||
/>
|
||||
@@ -324,6 +329,7 @@ export function MyApplicationsPage() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
refresh={refetch}
|
||||
isLoading={isFetching}
|
||||
/>
|
||||
|
||||
@@ -237,7 +237,7 @@ function SeaServiceTab() {
|
||||
form.dischargeDate &&
|
||||
form.engagementDate < form.dischargeDate;
|
||||
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const page = paginate(records ?? []);
|
||||
|
||||
const columns: AdvancedColumn<SeaServiceRecord>[] = [
|
||||
@@ -348,6 +348,7 @@ function SeaServiceTab() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
isLoading={isLoading}
|
||||
refresh={refetch}
|
||||
/>
|
||||
@@ -537,7 +538,7 @@ function MedicalTab() {
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
const page = paginate(certificates ?? []);
|
||||
|
||||
const columns: AdvancedColumn<MedicalCertificate>[] = [
|
||||
@@ -654,6 +655,7 @@ function MedicalTab() {
|
||||
pageIndex={page.pageIndex}
|
||||
onPageChange={setPageIndex}
|
||||
pageSize={pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
isLoading={isLoading}
|
||||
refresh={refetch}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user