feat: Saving user's page size choices #171

web/src/features/accounts/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_accounts_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -78,7 +79,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100, 150].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/accounts/components/table.tsx

@@ -75,6 +75,12 @@ export function AccountTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_accounts_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/oauth2/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_oauth2_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/oauth2/components/oauth2-table.tsx

@@ -74,6 +74,12 @@ export function Oauth2Table({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_oauth2_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/search/index.tsx

@@ -51,7 +51,7 @@ export default function Search() {
     page,
     pageSize,
     setPage,
-    setPageSize,
+    setSearchPageSize,
     setSortBy,
     setSortOrder,
     filter,
@@ -60,7 +60,7 @@ export default function Search() {
 
   const handleSetPageSize = (pageSize: number) => {
     setPage(1);
-    setPageSize(pageSize)
+    setSearchPageSize(pageSize)
   }
 
   const handleTagToggle = (tag: string) => {

web/src/features/settings/proxy/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_proxy_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/settings/proxy/components/table.tsx

@@ -76,6 +76,12 @@ export function ProxyTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_proxy_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/api-tokens/components/data-table-pagination.tsx

@@ -72,6 +72,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_apitoken_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/users/api-tokens/components/table.tsx

@@ -75,6 +75,12 @@ export function ApiTokensTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_apitoken_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/roles/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_roles_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -78,7 +79,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/users/roles/components/table.tsx

@@ -75,6 +75,12 @@ export function RolesTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_roles_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/users/components/data-table-pagination.tsx

@@ -69,6 +69,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_users_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -76,7 +77,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/users/users/components/table.tsx

@@ -75,6 +75,12 @@ export function UsersTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_users_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/hooks/use-search-messages.ts

@@ -29,7 +29,7 @@ export function useSearchMessages() {
     // const queryClient = useQueryClient();
     const [filter, _setFilter] = useState<Record<string, any>>({});
     const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(30);
+    const [pageSize, setPageSize] = useState(Number(localStorage.getItem('bichon_search_page_size')) || 30);
     const [sortBy, setSortBy] = useState<"DATE" | "SIZE">("DATE");
     const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
 
@@ -38,6 +38,12 @@ export function useSearchMessages() {
         setPage(1);
     }, []);
 
+
+    const setSearchPageSize = (value: number) => {
+        localStorage.setItem('bichon_search_page_size', value.toString());
+        setPageSize(value);
+    }
+
     const onSubmit = (cleaned: Record<string, any>) => {
         if ('has_attachment' in cleaned && cleaned.has_attachment === false) {
             delete cleaned.has_attachment;
@@ -84,7 +90,7 @@ export function useSearchMessages() {
         total: data?.total_items ?? 0,
         totalPages: data?.total_pages ?? 1,
         pageSize: data?.page_size ?? pageSize,
-        setPageSize,
+        setSearchPageSize,
         sortBy,
         setSortBy,
         sortOrder,