88 lines
3.2 KiB
Markdown
88 lines
3.2 KiB
Markdown
# Announcement List Table Redesign
|
|
|
|
## Existing Structure Review
|
|
|
|
- Reused the existing `announcements` feature and kept the same route-handler, React Query, permission, and workflow stack.
|
|
- Reused the shared table stack:
|
|
- `DataTable`
|
|
- `useDataTable`
|
|
- `DataTableColumnHeader`
|
|
- `DataTableFacetedFilter`
|
|
- `DataTableViewOptions`
|
|
- Reused the current announcement state transitions, pin/unpin endpoints, audit logging, and pagination flow.
|
|
- Replaced only the presentation layer of the list page from cards to an enterprise-style data table.
|
|
|
|
## Files Changed
|
|
|
|
- `src/features/announcements/api/types.ts`
|
|
- `src/features/announcements/api/service.ts`
|
|
- `src/features/announcements/components/announcements-listing.tsx`
|
|
- `src/features/announcements/components/announcements-page.tsx`
|
|
- `src/features/announcements/components/announcement-columns.tsx`
|
|
- `src/features/announcements/components/announcement-toolbar.tsx`
|
|
- `src/features/announcements/components/announcement-action-menu.tsx`
|
|
- `src/features/announcements/server/announcement-data.ts`
|
|
- `src/app/api/announcements/route.ts`
|
|
|
|
## UI Before / After
|
|
|
|
- Before: announcement rows were rendered as stacked cards with inline action buttons.
|
|
- After: the page uses a structured data table with fixed columns, sortable headers, row selection, and a per-row dropdown action menu.
|
|
- Search and filter controls were kept but moved into a table-friendly toolbar layout.
|
|
- Pinned status is now visible in a dedicated pin column instead of only inside the card header.
|
|
|
|
## Table Columns
|
|
|
|
- Selection checkbox
|
|
- Pin indicator
|
|
- Announcement title with content preview
|
|
- Status badge
|
|
- Published date
|
|
- End date
|
|
- Creator
|
|
- Attachment
|
|
- Action menu
|
|
|
|
## Action Menu
|
|
|
|
- Replaced inline buttons with a dropdown menu per row.
|
|
- Menu entries still depend on the same permission and workflow checks:
|
|
- View
|
|
- Edit
|
|
- Submit
|
|
- Approve
|
|
- Return
|
|
- Reject
|
|
- Publish
|
|
- Pin / Unpin
|
|
- Archive
|
|
- Delete
|
|
- Review and delete actions still reuse the existing dialogs.
|
|
|
|
## Responsive Result
|
|
|
|
- The toolbar stacks vertically on smaller widths and expands horizontally on larger screens.
|
|
- The table stays inside the shared horizontal scroll container instead of overflowing the page.
|
|
- The actions column remains pinned to the right for easier management on wide datasets.
|
|
|
|
## Performance Impact
|
|
|
|
- Kept the existing server pagination and React Query cache path.
|
|
- Added sorting as an additive query parameter without changing the response shape.
|
|
- Preserved the existing pinned-first ordering behavior, then applied requested table sorting.
|
|
- No duplicate fetch path or alternate data source was introduced.
|
|
|
|
## Regression Check
|
|
|
|
- Search still uses the existing announcement query path.
|
|
- Status and pin filters still work through the same list endpoint.
|
|
- Pagination behavior is unchanged.
|
|
- Workflow actions still call the same mutation and pin/unpin endpoints.
|
|
- Permission checks remain enforced both in UI behavior and server routes.
|
|
|
|
## Future Improvements
|
|
|
|
- Add real bulk actions once the backend supports batch publish/archive/delete/pin operations.
|
|
- Add optional mobile card mode if the product team wants a more touch-optimized small-screen presentation.
|
|
- Add richer filter dimensions such as creator or year if the backend exposes options for them.
|