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
@@ -20,6 +20,7 @@ import {
THead,
Tr
} from "@app/components/v2";
import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences";
import { usePagination, useResetPageHelper } from "@app/hooks";
import { OrderByDirection } from "@app/hooks/api/generic/types";
import { OrgUser } from "@app/hooks/api/types";
@@ -52,7 +53,14 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
offset,
orderDirection,
toggleOrderDirection
} = usePagination(UserGroupsOrderBy.Name, { initPerPage: 10 });
} = usePagination(UserGroupsOrderBy.Name, {
initPerPage: getUserTablePreference("userGroupsTable", "perPage", 20)
});
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("userGroupsTable", "perPage", newPerPage);
};
const filteredGroupMemberships = useMemo(
() =>
@@ -119,7 +127,7 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
page={page}
perPage={perPage}
onChangePage={setPage}
onChangePerPage={setPerPage}
onChangePerPage={handlePerPageChange}
/>
)}
{!isPending && !filteredGroupMemberships?.length && (
@@ -22,6 +22,7 @@ import {
Tr
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences";
import { usePagination, useResetPageHelper } from "@app/hooks";
import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -54,7 +55,14 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
offset,
orderDirection,
toggleOrderDirection
} = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 });
} = usePagination(UserProjectsOrderBy.Name, {
initPerPage: getUserTablePreference("userProjectsTable", "perPage", 20)
});
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("userProjectsTable", "perPage", newPerPage);
};
const { data: projectMemberships = [], isPending } = useGetOrgMembershipProjectMemberships(
orgId,
@@ -136,7 +144,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
page={page}
perPage={perPage}
onChangePage={setPage}
onChangePerPage={setPerPage}
onChangePerPage={handlePerPageChange}
/>
)}
{!isPending && !filteredProjectMemberships?.length && (