Gary add materials page

[GaryB93]

Description

Adds Purchase Request: Material page and form to the BM Dashboard (Phase 2).

Related PRS (if any):

Backend PR 577 must be running to test this branch.

Main changes explained:

• adds ability to initiate a purchase request for a material to be used on a specific project.
• request must include quantity and priority level, with an optional 'preferred brand' field.
• adds actions and reducers to store project and material types data in redux store
• adds error handling to fetch request on page load
• adds success and error toasts after submitting purchase request

How to test:

1. follow checkout instructions for backend PR 577
2. git checkout gary_add_materials_page
3. npm install
4. npm run start:local
5. log in to HGN as a volunteer user
6. navigate to http://localhost:3000/bmdashboard and enter credentials again
7. navigate to http://localhost:3000/bmdashboard/materials/purchase
8. Test basic form submission:
   • Project and Material options should auto-load into respective fields
   • Enter info into all required fields (Preferred Brand is optional) and click Submit
   • Note whether a success toast notification is received
   • Optional: check Network tab in browser tools to check for a 'materials' request with status code 201 (Created).
9. Test form validation:
   • Test that Submit button is disabled unless all required fields are entered
   • Test that entering a decimal or technically-allowable letter 'e' (ex: 10e10) in Quantity field results in a validation check/error.
   • Note: there are validation checks for all form fields, but these are harder to test without manipulating the HTML.
10. Test that Cancel button clears form and returns user to previously visited page.
11. Test error handling:
    - To test error handling on initial page load, you can deactivate the backend server and reload the page. This will load an error page with code 503.
    - You can also change the fetch route in src/actions/bmdashboard/projectActions.js > fetchBMProjects from axios.get(ENDPOINTS.BM_PROJECTS) to axios.get(ENDPOINTS.BM_PROJECTS + 's'), then reload the page, to force a 404 error.
    - To test error handling if form submission fails, change the fetch route in src/actions/bmdashboard/materialsActions > purchaseMaterial from ENDPOINTS.BM_MATERIALS to ENDPOINTS.BM_MATERIALS + "s". This should result in an error toast with code 404.

Screenshots or videos of changes:

purchase-request-material-demo1.mov

Notes:

• Please remember to either Approve or Request Changes. Do not just leave a comment.
• Please leave a review for BOTH front and backend branches after you have finished testing!
• Gary began work on this branch and has since left the project. The branch and pull request are currently being managed by Tim.
• Permissions are currently not being built into the Phase 2 codebase. All functionality should be accessible to volunteer users.
• The form will eventually only be accessible to Building Manager users. Purchase requests will be limited to the BM's own projects. For now these limitations are not in place (the code has been written but is disabled).
• Lint fixes were made to unrelated files while Gary was working on the branch: ProjectTable.jsx, reports.css, SummaryBar.jsx, UserProfileAdd.jsx, UserProfileAdd.scss.

[KurtisIvey]

Don't forget to sanitize the inputs with joi please before the data is sent to the backend. Love the implementation of joi in this. This one is looking really good so far

[Cavein254]

I tested your PR and works as intended.

• Navigate to http://localhost:3000/bmdashboard and enter credentials again
• Project and Material options should auto-load into respective fields
• Enter info into all required fields (Preferred Brand is optional) and click Submit
• Note whether a success toast notification is received
• Optional: check Network tab in browser tools to check for a 'materials' request with status code 201 (Created).
• Test that Submit button is disabled unless all required fields are entered
• Test that entering a decimal or technically-allowable letter 'e' (ex: 10e10) in Quantity field results in a validation check/error.
• To test error handling on initial page load, you can deactivate the backend server and reload the page. This will load an error page with code 503.
• change the fetch route
• test error handling if form submission fails

screen-recorder-mon-nov-20-2023-13-46-38.mov

[cvtqx]

Tested this PR and everything works as described. See video:

Screen.Recording.2023-11-20.at.1.44.09.PM.mov

Errors are displayed correctly as per the description as well:

Server:

Client:

[Changhao3220K]

Hi @GaryB93
I tested the new functions on my local environment. the purchase form works perfectly.
The login url works fine

The management dashboard works fine after login from the previous url

The Form loads correctly.

All the drop downs and info show correctly

The form submission works fine

When there is unfilled part in the form, form submission is prohibited

The cancel button will redirect to the previous page.

These main functions works perfectly on my environment.

For the error handling part, I didn't find any 503 code or 404(code edited) after shutdown the backend service. The page will continue to rended and pop up some error messages. Could you check out this issue? Other than this all the function works well, Thank you for you work!

[tdkent]

@Changhao3220K thanks for your detailed review! When you tested the error handling did you have the Purchase Request: Materials page open? Looks like the Unexpected error toast is popping up on the main Dashboard, so it doesn't seem like the correct fetch route would have been activated.

[Changhao3220K]

Hi @GaryB93 I tested the new functions on my local environment. the purchase form works perfectly. The login url works fine The management dashboard works fine after login from the previous url

The Form loads correctly.

All the drop downs and info show correctly

The form submission works fine

When there is unfilled part in the form, form submission is prohibited

The cancel button will redirect to the previous page.

These main functions works perfectly on my environment.

For the error handling part, I didn't find any 503 code or 404(code edited) after shutdown the backend service. The page will continue to rended and pop up some error messages. Could you check out this issue? Other than this all the function works well, Thank you for you work!

Hi @GaryB93
The 503 error showsup correctly this time. but it takes me some time to find the 404 error. It seems that I have to restart the BE service again to test 404 right? But all functions are working properly this time. Nice work!

[Aishwaryak01]

@tdkent Everything works as expected. Code files also look good to me!

[Aishwaryak01]

@tdkent I know that this PR is already merged, but just found out that there is no category filter added to the list of materials in the dropdown list of the purchase request form. This makes even the tools visible under the materials list