Vishala Consumables Page View

[Vishala09]

Description

This PR is about the Consumables List View from Phase 2 with Sorting based on project name and item name , Filtering based on selected values of project and consumable and Modal implementation for viewing update and purchase history.
Implements # (WBS) 8.1.1

Related PRS (if any):

This frontend PR is related to the #672 backend PR.

Main changes explained:

• Created components for Consumables

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. verify all the table functionalities like open/close modals , sorting and filtering

Screenshots or videos of changes:

Untitled_.Dec.29.2023.5_14.PM.webm

[abdel-lall]

Works as described. Good job!

[Alforoan]

All functionalities seem to work as intended. Nice!

pr.review.1758.mp4

[ramyaram2092]

Hello @Vishala09 Good job on the functionality. I just notice one issue. First time I load the page the table is empty After I make a selection/interaction in the UI then I see the list of projects in the table. Let me know if this is an acceptable behaviour

I repeated this couple of times to make sure if its a repeated behaviour. After clearing the cache when the page is loaded for the first time this happens

1758.mp4

[bienzguoa]

Same case as [ramyaram2092] mentioned above, after refreshing, it has projects displayed. Functionality works as intended.
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/92126559/b2d1cf88-585b-4090-a65e-c93f7d11b09d

[ChengyanOo]

Hi @Vishala09,

I saw that you are using px and rem here, would it be better if we consider using the same size unit?

[ChengyanOo]

Hey @Vishala09,

Just went through your code updates – they're super neat and clean, nicely done! Tested out the new feature you implemented as well, and it’s working smoothly. I’ve included a video below for a more detailed walkthrough. Awesome work on the implementation, everything's spot on as you described!

HighestGoodNetworkApp_PR.1758.mp4

[Vishala09]

Hello @Vishala09 Good job on the functionality. I just notice one issue. First time I load the page the table is empty After I make a selection/interaction in the UI then I see the list of projects in the table. Let me know if this is an acceptable behaviour
I repeated this couple of times to make sure if its a repeated behaviour. After clearing the cache when the page is loaded for the first time this happens

This issue is resolved. Please do a git pull and re test if necessary.

[Vishala09]

Same case as [ramyaram2092] mentioned above, after refreshing, it has projects displayed. Functionality works as intended. https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/92126559/b2d1cf88-585b-4090-a65e-c93f7d11b09d

Thank you for testing. This issue is resolved. Please do a git pull and test if needed.

[ramyaram2092]

The issue is fixed. I dont see it anymore . Good job Vishala !
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/89441435/1d5471d4-3d2e-403d-abcb-24c8549f35e9