Make table page size a configurable setting, not a hardcoded 20
Pagination just landed hardcoded to 20 rows everywhere; add a way to change that instead of leaving it fixed for every table in the app. pageSize joins dateFormat/timeFormat on the existing display settings object (server-side default 20, 5-500 range enforced by the PUT schema) rather than becoming its own settings section, since it's the same kind of thing -- an admin-configured, globally-applied display preference read by every signed-in role via the already-public GET /api/settings/display endpoint, same as the date/time format already works. Renamed the "Date & Time" settings tab/page/route to "Display" (still just one component, now covering both date/time format and table pagination) since its scope no longer matches the old name -- kept Settings.tsx's usual pattern of one page per concern rather than adding a second, oddly-scoped tab just for one number field. New web/src/utils/pageSize.ts mirrors utils/date.ts's existing module-level "set once at startup, read anywhere without prop- drilling" pattern; usePagination()'s pageSize parameter now defaults to getPageSize() instead of a literal 20, evaluated fresh on every call so it picks up a saved change without touching any of the ten pages already using the hook. Verified server-side against a temp SQLite DB: pageSize defaults to 20, a partial update sets it without disturbing dateFormat/timeFormat and vice versa, and it persists across a fresh settings read. Also checked the default-parameter mechanics directly (re-evaluates the global value on every call rather than capturing it once, and an explicit override still wins). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
7bf9b03839
commit
b40234a557
10 files changed
+180
-123
No files matched your search
+7
-3
@@ -21,10 +21,11 @@ import Synology from "./pages/Synology";
|
||||
import Settings from "./pages/Settings";
|
||||
import NotificationSettings from "./pages/settings/NotificationSettings";
|
||||
import BadgeSettings from "./pages/settings/BadgeSettings";
|
||||
import DateTimeSettings from "./pages/settings/DateTimeSettings";
|
||||
import DisplaySettings from "./pages/settings/DisplaySettings";
|
||||
import CacheSettings from "./pages/settings/CacheSettings";
|
||||
import AppShell from "./layout/AppShell";
|
||||
import { setDateTimeSettings } from "./utils/date";
|
||||
import { setPageSize } from "./utils/pageSize";
|
||||
|
||||
const roleRank: Record<UserRole, number> = { viewer: 0, operator: 1, admin: 2 };
|
||||
|
||||
@@ -58,7 +59,10 @@ export default function App() {
|
||||
setUser(null);
|
||||
},
|
||||
);
|
||||
api.settings.display().then((res) => setDateTimeSettings(res.display)).catch(() => {});
|
||||
api.settings.display().then((res) => {
|
||||
setDateTimeSettings(res.display);
|
||||
setPageSize(res.display.pageSize);
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
if (user === undefined) {
|
||||
@@ -120,7 +124,7 @@ export default function App() {
|
||||
<Route index element={<Navigate to="notifications" replace />} />
|
||||
<Route path="notifications" element={<NotificationSettings />} />
|
||||
<Route path="badges" element={<BadgeSettings />} />
|
||||
<Route path="date-time" element={<DateTimeSettings />} />
|
||||
<Route path="display" element={<DisplaySettings />} />
|
||||
<Route path="cache" element={<CacheSettings />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
Reference in new issue
Block a user