Linh - Add multi-select and bulk actions to Materials table#4680
Linh - Add multi-select and bulk actions to Materials table#4680linh2020 wants to merge 13 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
…rsisted backend integration - add row multi-select checkboxes and header Select All on materials table - add bulk actions dropdown with: - Mark as Hold - Mark as Reviewed - Add/Update Notes - Export Selected (CSV/PDF) - disable bulk actions when no rows are selected - add loading state while bulk actions are being applied - visually highlight selected rows for better clarity - show bulk status tags per row (On Hold, Reviewed, Has Note) - connect materials bulk actions to backend API and refresh materials after success - keep dark mode and responsive behavior for bulk actions area - add endpoint constant and action helper for materials bulk actions API Files updated: - frontend/HighestGoodNetworkApp/src/components/BMDashboard/ItemList/ItemsTable.jsx - frontend/HighestGoodNetworkApp/src/components/BMDashboard/ItemList/ItemListView.module.css - frontend/HighestGoodNetworkApp/src/actions/bmdashboard/materialsActions.js - frontend/HighestGoodNetworkApp/src/utils/URL.js
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- fix invalid regex used to sanitize env keys in vite define config - normalize non-alphanumeric characters to underscores - guard against keys starting with digits - resolve Netlify deploy-preview build failure caused by invalid define names
- fix invalid regex used to sanitize env keys in vite define config - normalize non-alphanumeric characters to underscores - guard against keys starting with digits - resolve Netlify deploy-preview build failure caused by invalid define names
- fix invalid regex used to sanitize env keys in vite define config - normalize non-alphanumeric characters to underscores - guard against keys starting with digits - resolve Netlify deploy-preview build failure caused by invalid define names
- Install joi@18.1.2 (required by setupTests.js vi.mock) - Remove package-lock.json to resolve mixed npm/yarn conflict - Regenerate yarn.lock with proper dependency tracking - Resolves pre-push hook test failures from missing 'joi' import
one-community
added
the
High Priority - Please Review First
|
- Escape CSV fields (quote commas/quotes, neutralize formula injection) while keeping plain numbers and the empty placeholder intact - Fix PDF export crash by importing jsPDF as ESM instead of require() - Rebuild PDF as a full table (jspdf-autotable) matching CSV columns, rounding floats to 2 decimals Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ons_materials_frontend
|
handikaharianto
left a comment
handikaharianto
left a comment
There was a problem hiding this comment.
Hi, I just reviewed this PR and here are my findings:
Worked well
Row checkboxes appear and select all work properly✅
- The checkboxes appear on each row, clickable and the UI is updated properly
- The select all feature also functions as expected
- The selected rows are highlighted properly
Bulk actions button is disabled when none of the rows are selected✅
When none of the rows are selected, the bulk actions button is disabled and not clickable
Export to CSV/PDF is working properly✅
As can be seen from the two images below, exporting the selected table rows to CSV and PDF is working properly.
Responsive layout on mobile and tablet view✅
As can be seen from the two images below, the layout is responsive on both mobile and tablet view
The bulk actions button and dropdown are displayed properly.
Requires some changes
Hold column/status is not found❌
The hold column/status mentioned in PR 2178 is not found. Thus, I can't verify whether
Mark as reviewed then confirming persisted value after refresh can't be verified❌
After marking the rows as reviewed, I can't verify whether the values are persisted for two reasons:
- There is no way to tell when rows have been reviewed
- The toast component displayed says undefined material records
Add/update notes can't be verified❌
- After adding/updating notes, there is no way to tell whether the notes have been added to the selected rows.
- The toast component displayed also shows another undefined material records, which I assume doesn't really update anything.
Dark mode styling issues❌
The title of this dialog uses a black color for the font and results in a bad contrast considering it is currently in dark mode. This issue also occurs in other dialogs: Purchase Record, Update Record, Update Material Form.
- the text color of status should use the green color for approved, yellow color for pending, etc.
- the reject button also uses the green color when it should use the red color
pixelpix13
left a comment
pixelpix13
left a comment
There was a problem hiding this comment.
Hi @linh2020, I reviewed the pr and below is the summary
Testing Summary
Tested frontend PR #4680 together with backend PR #2178.
Verified
- Multi-select checkboxes are visible and usable in both light and dark modes.
- Individual row selection works correctly.
- Select-all functionality works correctly.
- Bulk Actions dropdown is enabled/disabled appropriately based on selection.
- Row highlighting works when materials are selected.
- CSV export works successfully.
- PDF export generates successfully.
- Bulk action UI is functional and accessible in both light and dark modes.
Multi-Select Functionality
Dark Mode Verification
Issue 1 – Bulk Action Response Message
After executing bulk actions, the response displays:
Applied 'hold' to undefined material records.
instead of returning the correct number of updated records.
Expected Behavior
The response should indicate the actual number of affected records.
Example:
Applied 'hold' to 12 material records.
Screenshot
Issue 2 – Hold Status Does Not Appear Persisted
Executed:
{
"action": "hold",
"materialIds": [...]
}The operation reports success, however the persisted material data does not appear to contain the expected fields.
Observed
After:
POST /bm/materials/bulk-actions
and subsequently retrieving materials again:
GET /bm/materials
the returned material records do not contain:
stockHold
isReviewed
notes
Screenshot
Issue 3 – Database Verification
While checking the database records, I was unable to find the expected fields introduced by this PR:
stockHold
isReviewed
notes
Please Verify
-
buildingMaterialschema includes:stockHoldisReviewednotes
-
bmApplyMaterialBulkActioncorrectly updates:stockHoldisReviewednotes
-
GET /bm/materialsreturns these fields and they are not being removed by projection/select logic.
Screenshot
Issue 4 – PDF Export Behavior
PDF export generates successfully, however it appears to only export rows currently visible on the page.
Additionally, some bulk-action related statuses and fields do not appear in the generated PDF.
Questions
- Should export include only the currently visible page?
- Or should it include all selected rows across pagination?
Please clarify the intended behavior.
Screenshot
Overall Assessment
Verified Working
- Multi-select checkboxes
- Select-all functionality
- Row highlighting
- Bulk action UI
- Dark mode compatibility
- CSV export
- PDF generation
Concerns Requiring Verification
- Backend persistence of:
stockHoldisReviewednotes
- Bulk action update count reporting
- Export behavior across pagination
- Inclusion of bulk-action status fields in generated exports
Request Changes
The frontend functionality appears to work correctly, however the backend persistence behavior introduced by PR #2178 does not appear to be fully verified end-to-end. The expected fields are not visible in returned material records or database records, and the response message reports "undefined material records" instead of an actual update count.
Please verify the persistence layer and material retrieval flow before approval.
5 participants
Description
Implements bulk multi-select and bulk actions for BM Materials at /bmdashboard/materials so admins can apply updates to multiple materials in one flow (mark hold, mark reviewed, add/update notes, export selected), with selection highlighting and disabled bulk actions until at least one row is selected.
Related PRS (if any):
To test this frontend PR you need to checkout the #2178 backend PR.
Main changes explained:
Update ItemsTable.jsx for:
multi-select row checkboxes + select-all header checkbox
bulk actions dropdown with disabled/loading states
backend-connected actions for hold/review/notes
CSV/PDF export on selected rows
selected row highlight and persisted status chips (On Hold, Reviewed, Has Note)
Update materialsActions.js for new bulk action API helper (postMaterialsBulkAction).
Update URL.js for new endpoint constant BM_MATERIALS_BULK_ACTIONS.
Update ItemListView.module.css for bulk action responsive styles, disabled button state, selected-row clarity, and light/dark bulk status tag styling.
video:
Screen.Recording.2026-06-12.at.11.21.28.PM.mov