feat(frontend): Persisnt "perPage" for tables

This commit is contained in:
x032205
2025-05-20 19:42:32 -04:00
parent 27badad3d7
commit a6bafb8adc
24 changed files with 285 additions and 58 deletions
@@ -43,6 +43,7 @@ import {
useSubscription,
useWorkspace
} from "@app/context";
import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences";
import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
import { OrderByDirection } from "@app/hooks/api/generic/types";
import { useGetKmipClientsByProjectId } from "@app/hooks/api/kmip";
@@ -71,7 +72,14 @@ export const KmipClientTable = () => {
perPage,
page,
setPerPage
} = usePagination(KmipClientOrderBy.Name);
} = usePagination(KmipClientOrderBy.Name, {
initPerPage: getUserTablePreference("kmipClientTable", "perPage", 20)
});
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("kmipClientTable", "perPage", newPerPage);
};
const { data, isPending, isFetching } = useGetKmipClientsByProjectId({
projectId,
@@ -290,7 +298,7 @@ export const KmipClientTable = () => {
page={page}
perPage={perPage}
onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
onChangePerPage={handlePerPageChange}
/>
)}
{!isPending && kmipClients.length === 0 && (
@@ -53,6 +53,7 @@ import {
useWorkspace
} from "@app/context";
import { kmsKeyUsageOptions } from "@app/helpers/kms";
import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences";
import { usePagination, usePopUp, useResetPageHelper, useTimedReset } from "@app/hooks";
import { useGetCmeksByProjectId, useUpdateCmek } from "@app/hooks/api/cmeks";
import { CmekOrderBy, KmsKeyUsage, TCmek } from "@app/hooks/api/cmeks/types";
@@ -100,7 +101,14 @@ export const CmekTable = () => {
perPage,
page,
setPerPage
} = usePagination(CmekOrderBy.Name);
} = usePagination(CmekOrderBy.Name, {
initPerPage: getUserTablePreference("cmekClientTable", "perPage", 20)
});
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("cmekClientTable", "perPage", newPerPage);
};
const { data, isPending, isFetching } = useGetCmeksByProjectId({
projectId,
@@ -508,7 +516,7 @@ export const CmekTable = () => {
page={page}
perPage={perPage}
onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
onChangePerPage={handlePerPageChange}
/>
)}
{!isPending && keys.length === 0 && (