lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add MapPage pagination and page-size selector; update Web-Design docs

Browse Source
This commit is contained in:
Lukas
2026-03-29 15:23:47 +02:00
parent ccfcbc82c5
commit 7789353690
4 changed files with 180 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Docs/Tasks.md
View File

@@ -8,16 +8,26 @@ Reference: `Docs/Refactoring.md` for full analysis of each issue.
## Open Issues
- **World Map highlight does not reset on mouse leave** (done)
- Location: `frontend/src/components/WorldMap.tsx`, `GeoLayer` component
- Root cause: interactive event handlers (`onMouseEnter`, `onMouseMove`, `onMouseLeave`, `onClick`, `onKeyDown`) were on wrapping `<g>` element, creating mismatch with `Geography` internal hover state.
- Fix applied:
1. Interactive props and aria attributes are on `<Geography>`.
2. Hover highlight uses `style.hover` with derived `fill` from `isSelected/count`.
3. Tooltip state resets via `Geography.onMouseLeave` -> `setTooltip(null)`.
4. Test asserts tooltip appears/disappears and button role label is correct.
- Verification commands:
- `cd frontend && npx vitest --run src/components/__tests__/WorldMap.test.tsx`
- `cd frontend && npx vitest --run`
### Worldmap list pagination (new)
- Status: done
- Goal: Add paging controls to the WorldMap companion bans table (map page) so it matches Dashboard ban-list behavior and supports country drilldown without rendering / scrolling huge result sets.
- Implement in `frontend/src/pages/MapPage.tsx` using the dashboard pattern from `frontend/src/components/BanTable.tsx`:
1. Add local state: `page` (start 1), `pageSize` (e.g., 100).
2. Derive `visibleBans` from `useMemo` + `selectedCountry`, then compute `pageBans` using `slice((page-1)*pageSize, page*pageSize)`.
3. Compute `totalPages = Math.max(1, Math.ceil(visibleBans.length / pageSize))`, `hasPrev`, `hasNext`.
4. Render a footer row below Table with total, page, prev/next buttons (use icons `ChevronLeftRegular`, `ChevronRightRegular`, or existing style).
5. Wire buttons to `setPage(page - 1)` / `setPage(page + 1)`, disabled by bounds.
6. Reset `page` to 1 whenever `visibleBans` filter changes: on `range`, `originFilter`, `selectedCountry`, or when data refreshes.
- UX details:
- Keep existing “no bans found” row behavior.
- Keep summary info bar and total line consistent; show current slice counts in message as needed.
- Ensure paged data is used for `TableBody` mapping.
- Optional follow-ups:
- Allow page-size selector if needed (25/50/100), updating `totalPages` and reset to page 1 on change.
- Add tests in `frontend/src/pages/__tests__/MapPage.test.tsx` for paging behavior (initial page, next/prev, filtering reset).
- Add documentation in `Docs/Web-Design.md` if there is a worldmap data table UI guideline.

2
Docs/Web-Design.md
View File

@@ -210,7 +210,7 @@ Use Fluent UI React components as the building blocks. The following mapping sho
| Element | Fluent component | Notes |
|---|---|---|
| Data tables | `DetailsList` | All ban tables, jail overviews, history tables. Enable column sorting, selection, and shimmer loading. |
| Data tables | `DetailsList` | All ban tables, jail overviews, history tables. Enable column sorting, selection, and shimmer loading. Use clear pagination controls (page number + prev/next) and a page-size selector (25/50/100) for large result sets. |
| Stat cards | `DocumentCard` or custom `Stack` card | Dashboard status bar — server status, total bans, active jails. Use `Depth 4`. |
| Status indicators | `Badge` / `Icon` + colour | Server online/offline, jail running/stopped/idle. |
| Country labels | Monospaced text + flag emoji or icon | Geo data next to IP addresses. |