Skip to content

Admin bulk action footer #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zachchong merged 11 commits into from
Mar 10, 2026
Merged

Admin bulk action footer #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c1699f1
bulk action pattern prototype
Shum-ster Jan 21, 2026
394d4d5
Fix checkbox bug
Shum-ster Jan 31, 2026
c06c77c
Merge branch 'master' of https://github.com/CAPTxTreeckle/Treeckle-3.…
Shum-ster Jan 31, 2026
7c6b27f
Implement bulk action & API calls
Shum-ster Feb 4, 2026
634246f
Fix frontend errors
Shum-ster Feb 4, 2026
a277b1c
Fix frontend error 2
Shum-ster Feb 4, 2026
482a2cb
Filter disabled when bulk action pattern used
Shum-ster Feb 14, 2026
c2e8d39
Added backend for bulk action footer
Shum-ster Feb 19, 2026
a3ba668
Fix bugs related to expanded rows
Shum-ster Mar 1, 2026
25c0776
Add X button and fix mobile view
Shum-ster Mar 5, 2026
55c74d1
Merge branch 'master' into feature/admin-mass-accept-bookings
Shum-ster Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/components/admin-booking-base-table/admin-booking-base-table.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@

.extraContentContainer {
width: 100%;
padding-left: 60px;
Copy link
Copy Markdown
Contributor

@zachchong zachchong Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch

// Required so checkbox does not hide expanded row
}

.detailsContainer {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/admin-booking-base-table/admin-booking-base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@ function BookingBaseTable({

const CheckboxRenderer: ColumnShape<BookingViewProps>["cellRenderer"] =
useCallback(
({ rowData: { id } }: { rowData: BookingViewProps }) => {
if (id === undefined) return null;
({ rowData: { id, booking } }: { rowData: BookingViewProps }) => {
if (id === undefined || booking) return null;
const isChecked = selectedBookingIds.has(id);
return (
<div onClick={(e) => e.stopPropagation()}>
Expand Down
52 changes: 34 additions & 18 deletions frontend/src/components/admin-bulk-action-footer/admin-bulk-action-footer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
.footerContainer {
/* Positioning */
position: fixed !important;
bottom: 40px !important;
bottom: 24px !important;
left: 50% !important;
transform: translateX(-50%) !important;

/* Layout constraints */
top: auto !important;
height: auto !important;
width: auto !important;
min-width: 0 !important;

/* Visuals */

background-color: #ffffff;
border: 1px solid #dfe1e6;
box-shadow: 0 4px 12px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.31);
border-radius: 6px;

/* Flexbox settings */

display: flex;
align-items: center;
justify-content: center;

gap: 20px;
padding: 14px 24px;
padding: 14px 18px;

z-index: 9999;
animation: slideUp 0.3s ease-out;
Expand All @@ -32,7 +28,7 @@
.selectionGroup {
display: flex;
align-items: center;
gap: 6px;
gap: 4px;
padding-right: 20px;
border-right: 1px solid #dfe1e6;
}
Expand All @@ -46,42 +42,51 @@
justify-content: center;
}

.deselectIconBtn {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
cursor: pointer;

color: #172b4d !important;
font-size: 16px !important;
font-weight: 700 !important;
margin-right: 4px !important;
line-height: 1 !important;
}

.selectionText {
color: #172b4d;
font-size: 14px;
font-weight: 500;
}

/* --- NEW STYLES --- */

.separator {
color: #dfe1e6; /* Subtle grey divider */
color: #dfe1e6;
margin: 0 8px;
font-size: 18px; /* Slightly taller than text */
font-size: 18px;
line-height: 1;
}

.selectAllBtn {
/* Override default Button styles to look like a link */
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;

color: #0052cc !important; /* Standard "Link Blue" */
color: #0052cc !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer;

&:hover {
text-decoration: underline;
background: none !important;
}
}

/* ------------------ */

.buttonGroup {
display: flex;
gap: 12px;
Expand All @@ -96,4 +101,15 @@
@keyframes slideUp {
from { transform: translate(-50%, 100%); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}

// mobile view
@media (max-width: 768px) {
.footerContainer {
overflow-x: auto;
white-space: nowrap;
width: 97vw !important;
padding: 12px 16px;
justify-content: flex-start;
}
}
10 changes: 10 additions & 0 deletions frontend/src/components/admin-bulk-action-footer/admin-bulk-action-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,16 @@ const BookingSelectionFooter = ({ selectedIds, processedData, onSelectionChange
<div className={styles.footerContainer}>

<div className={styles.selectionGroup}>
<Button
className={styles.deselectIconBtn}
onClick={() => onSelectionChange(new Set())}
title="Deselect all"
>
✕
Comment on lines +102 to +103
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new icon-only deselect button uses the glyph "✕" with only a title. For accessibility, add an accessible name (e.g., aria-label="Deselect all") and ensure the decorative glyph isn’t the only label screen readers will announce.

Suggested change
>
✕
aria-label="Deselect all"
>
<span aria-hidden="true">✕</span>

Copilot uses AI. Check for mistakes.
</Button>

<span className={styles.separator}>|</span>

<div className={styles.countBadge}>
{selectedIds.size}
</div>
Expand Down
9 changes: 9 additions & 0 deletions frontend/src/components/booking-admin-table/booking-admin-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ function BookingAdminTable() {
useTableState(bookingViewData);

return (
<>
<Segment.Group raised>
<Segment secondary>
<SearchBar fluid onFilterChange={onFilterChange} disabled={selectedBookingIds.size !== 0} />
Expand Down Expand Up @@ -98,6 +99,7 @@ function BookingAdminTable() {
adminView
selectedBookingIds={selectedBookingIds}
onSelectionChange={setSelectedBookingIds}
footerHeight={selectedBookingIds.size > 0 ? 25 : 0}
>
<Column<BookingViewProps>
key={ID}
Expand Down Expand Up @@ -174,6 +176,13 @@ function BookingAdminTable() {
onSelectionChange={setSelectedBookingIds}
/>
</Segment.Group>

<BookingSelectionFooter
selectedIds={selectedBookingIds}
processedData={processedData}
onSelectionChange={setSelectedBookingIds}
/>
Comment on lines +180 to +184
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BookingSelectionFooter is rendered twice (once inside the Segment.Group and again after it). When selectedBookingIds.size > 0, this will mount two fixed-position footers at the same time (duplicate UI + duplicate DOM actions). Remove one of the render sites (likely keep only the one outside the Segment.Group).

Copilot uses AI. Check for mistakes.
</>
);
}

Expand Down