Save Amount of Entries

This commit is contained in:
Pallavi
2025-09-01 22:26:12 +05:30
parent 5fcf76066f
commit ee9101e738
16 changed files with 172 additions and 14 deletions

View File

@@ -22,6 +22,7 @@ export function InvitationsDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="invitations-table"
title={t('invite')}
searchPlaceholder={t('inviteSearch')}
searchColumn="email"

View File

@@ -24,6 +24,7 @@ export function RolesDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="roles-table"
title={t('roles')}
searchPlaceholder={t('accessRolesSearch')}
searchColumn="name"

View File

@@ -24,6 +24,7 @@ export function UsersDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="users-table"
title={t('users')}
searchPlaceholder={t('accessUsersSearch')}
searchColumn="email"

View File

@@ -22,6 +22,7 @@ export function OrgApiKeysDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="Org-apikeys-table"
title={t('apiKeys')}
searchPlaceholder={t('searchApiKeys')}
searchColumn="name"

View File

@@ -20,6 +20,7 @@ export function ClientsDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="clients-table"
title="Clients"
searchPlaceholder="Search clients..."
searchColumn="name"

View File

@@ -25,6 +25,7 @@ export function DomainsDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="domains-table"
title={t("domains")}
searchPlaceholder={t("domainsSearch")}
searchColumn="baseDomain"

View File

@@ -99,6 +99,43 @@ type ResourcesTableProps = {
defaultView?: "proxy" | "internal";
};
const STORAGE_KEYS = {
PAGE_SIZE: 'datatable-page-size',
getTablePageSize: (tableId?: string) =>
tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
};
const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
if (typeof window === 'undefined') return defaultSize;
try {
const key = STORAGE_KEYS.getTablePageSize(tableId);
const stored = localStorage.getItem(key);
if (stored) {
const parsed = parseInt(stored, 10);
if (parsed > 0 && parsed <= 1000) {
return parsed;
}
}
} catch (error) {
console.warn('Failed to read page size from localStorage:', error);
}
return defaultSize;
};
const setStoredPageSize = (pageSize: number, tableId?: string): void => {
if (typeof window === 'undefined') return;
try {
const key = STORAGE_KEYS.getTablePageSize(tableId);
localStorage.setItem(key, pageSize.toString());
} catch (error) {
console.warn('Failed to save page size to localStorage:', error);
}
};
export default function ResourcesTable({
resources,
internalResources,
@@ -113,6 +150,13 @@ export default function ResourcesTable({
const api = createApiClient({ env });
const [proxyPageSize, setProxyPageSize] = useState<number>(() =>
getStoredPageSize('proxy-resources', 20)
);
const [internalPageSize, setInternalPageSize] = useState<number>(() =>
getStoredPageSize('internal-resources', 20)
);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedResource, setSelectedResource] =
useState<ResourceRow | null>();
@@ -559,7 +603,7 @@ export default function ResourcesTable({
onGlobalFilterChange: setProxyGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageSize: proxyPageSize,
pageIndex: 0
}
},
@@ -582,7 +626,7 @@ export default function ResourcesTable({
onGlobalFilterChange: setInternalGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageSize: proxyPageSize,
pageIndex: 0
}
},
@@ -593,6 +637,16 @@ export default function ResourcesTable({
}
});
const handleProxyPageSizeChange = (newPageSize: number) => {
setProxyPageSize(newPageSize);
setStoredPageSize(newPageSize, 'proxy-resources');
};
const handleInternalPageSizeChange = (newPageSize: number) => {
setInternalPageSize(newPageSize);
setStoredPageSize(newPageSize, 'internal-resources');
};
return (
<>
{selectedResource && (
@@ -761,7 +815,10 @@ export default function ResourcesTable({
</TableBody>
</Table>
<div className="mt-4">
<DataTablePagination table={proxyTable} />
<DataTablePagination
table={proxyTable}
onPageSizeChange={handleProxyPageSizeChange}
/>
</div>
</TabsContent>
<TabsContent value="internal">
@@ -861,6 +918,7 @@ export default function ResourcesTable({
<div className="mt-4">
<DataTablePagination
table={internalTable}
onPageSizeChange={handleInternalPageSizeChange}
/>
</div>
</TabsContent>

View File

@@ -24,6 +24,7 @@ export function ShareLinksDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="shareLinks-table"
title={t('shareLinks')}
searchPlaceholder={t('shareSearch')}
searchColumn="name"

View File

@@ -26,6 +26,7 @@ export function SitesDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="sites-table"
title={t('sites')}
searchPlaceholder={t('searchSitesProgress')}
searchColumn="name"

View File

@@ -47,6 +47,7 @@ export function ApiKeysDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="apiKeys-table"
title={t('apiKeys')}
searchPlaceholder={t('searchApiKeys')}
searchColumn="name"

View File

@@ -21,6 +21,7 @@ export function IdpDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="idp-table"
title={t('idp')}
searchPlaceholder={t('idpSearch')}
searchColumn="name"

View File

@@ -22,6 +22,7 @@ export function PolicyDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="orgPolicies-table"
title={t('orgPolicies')}
searchPlaceholder={t('orgPoliciesSearch')}
searchColumn="orgId"

View File

@@ -136,6 +136,7 @@ export function LicenseKeysDataTable({
<DataTable
columns={columns}
data={licenseKeys}
persistPageSize="licenseKeys-table"
title={t('licenseKeys')}
searchPlaceholder={t('licenseKeySearch')}
searchColumn="licenseKey"

View File

@@ -22,6 +22,7 @@ export function UsersDataTable<TData, TValue>({
<DataTable
columns={columns}
data={data}
persistPageSize="userServer-table"
title={t('userServer')}
searchPlaceholder={t('userSearch')}
searchColumn="email"