b23albst commented

Collaborator

Modal menu used to add cards. In the pr, I only included the files for the modal and its css, so to test it, you have to add a button to eg. dashboard and map it to a useState hook used to show or hide the modal.

Import the modal
Declare useState hook
Add the modal component (I don't think it matters where you add it) with the correct props (copy the picture).
Add a button with setShowCard(true) as its onClick

When reviewing, please pay attention to the size of different parts of the modal. I tried to use vw and vh (based on screen size) for some of its size, and I don't know if it only worked on my screen... Here's how it looked for me:

To be done/Planned changes:

In the team 1 branch, there is a config file with tooltips for each card. The card descriptions should be retrieved from here.
The constant "views" is a modified version of views from Dashboard that also includes a field for a views category. If/when categories are added to views in dashboard, this can just be passed down as a prop and views in AddCardModal can be removed.
Color should be changed

Modal menu used to add cards. In the pr, I only included the files for the modal and its css, so to test it, you have to add a button to eg. dashboard and map it to a useState hook used to show or hide the modal. + Import the modal ![image](/attachments/321e9dbd-395d-4cab-956b-f75dd9ea48d3) + Declare useState hook ![image](/attachments/4653f92a-a476-44bd-8486-c8f29df4557c) + Add the modal component (I don't think it matters where you add it) with the correct props (copy the picture). + Add a button with setShowCard(true) as its onClick ![image](/attachments/12e972f2-555c-4aa4-91ea-210523d75049) When reviewing, please pay attention to the size of different parts of the modal. I tried to use vw and vh (based on screen size) for some of its size, and I don't know if it only worked on my screen... Here's how it looked for me: ![image](/attachments/58eb87b2-87b1-4c21-af79-f842a9ef264a) To be done/Planned changes: + In the team 1 branch, there is a config file with tooltips for each card. The card descriptions should be retrieved from here. + The constant "views" is a modified version of views from Dashboard that also includes a field for a views category. If/when categories are added to views in dashboard, this can just be passed down as a prop and views in AddCardModal can be removed. + Color should be changed

image.png

20 KiB

image.png

8.4 KiB

image.png

39 KiB

image.png

60 KiB

b23albst added 4 commits

2026-04-28 07:56:37 +00:00

Implementation of add card modal. Some things left todo 1636ea2ebe

Fixed text view crash and added search functionality 6cf07599ac

Changed modal color e2f089354d

Added some comments and changes per request of group leader fd64f8bce2

b23albst was assigned by c24elipe

2026-04-28 07:58:46 +00:00

c24elipe added the

needs review

label

2026-04-28 07:59:24 +00:00

a24vinla commented

2026-04-28 08:32:05 +00:00

Collaborator

I will remove the old add widget button/dropdown during merge.

a24vinla requested review from b25marem

2026-04-28 08:33:26 +00:00

b25marem commented

2026-04-28 09:53:35 +00:00

Collaborator

# Review on #539

![image](/attachments/b8a02ea0-1420-4a45-8549-383d5677684c)# Review on #539

image.png

62 KiB

b25marem commented

2026-04-28 09:57:18 +00:00

Collaborator

Review on #604

Whats done

Tested on Windows 11 using Edge

Tested Add Card modal functionality
App starts correctly
- Confirmed that the modal can be opened using a temporary button in Dashboard
- Confirmed that:
  - Cancel closes the modal correctly
  - search works
  - category filters work
- Add works and adds the selected card to the dashboard
- Tested by adding BookingView successfully
Tested responsiveness
- Confirmed that the modal renders correctly on my screen
- Layout is usable and visually stable on my screen
- I did not find a clear responsiveness bug, but since vw/vh is used, it should still be tested on more screen sizes

Inspected following files

frontend/src/features/addCardModal/AddCardModal.js
- Indentation/code styling
  - Follows Prettier
- Naming convention
  - Component name follows PascalCase
  - Variables follow camelCase
- General code quality
  - Logic is clear and easy to follow
  - Search and filtering are implemented correctly
  - Confirmed that views/categories are currently handled inside the modal, as mentioned in the PR description
frontend/src/features/addCardModal/AddCardModal.module.css
- Indentation/code styling
  - Well structured
- Naming convention
  - Class names are clear
- Comments
  - No issues found
- General code quality
  - Styling works on my screen

What needs to be done

frontend/src/features/addCardModal/AddCardModal.js
- As already mentioned in the PR description, card descriptions are currently placeholders and should later be fetched from the config file
- As already mentioned in the PR description, views/categories are duplicated in the modal and should later be passed from Dashboard when categories are added there
- The modal is not fully integrated into Dashboard yet, since I had to add a temporary button and useState to test it
UI / Responsiveness
- As mentioned in the PR description, sizing with vw/vh should be verified on more screen sizes
- Colors can be adjusted later according to the planned changes

Conclusion

The modal works for opening, cancel, search, filtering and adding cards
I confirmed the planned TODOs mentioned in the PR description
I did not find a blocking functional issue during my test

Looks good functionally, but final integration and the planned cleanup should be completed before final merge.

# Review on #604 ## Whats done ### Tested on Windows 11 using Edge + Tested Add Card modal functionality + App starts correctly + Confirmed that the modal can be opened using a temporary button in Dashboard + Confirmed that: + Cancel closes the modal correctly + search works + category filters work + Add works and adds the selected card to the dashboard + Tested by adding BookingView successfully + Tested responsiveness + Confirmed that the modal renders correctly on my screen + Layout is usable and visually stable on my screen + I did not find a clear responsiveness bug, but since vw/vh is used, it should still be tested on more screen sizes ### Inspected following files + frontend/src/features/addCardModal/AddCardModal.js + Indentation/code styling + Follows Prettier + Naming convention + Component name follows PascalCase + Variables follow camelCase + General code quality + Logic is clear and easy to follow + Search and filtering are implemented correctly + Confirmed that views/categories are currently handled inside the modal, as mentioned in the PR description + frontend/src/features/addCardModal/AddCardModal.module.css + Indentation/code styling + Well structured + Naming convention + Class names are clear + Comments + No issues found + General code quality + Styling works on my screen ## What needs to be done + frontend/src/features/addCardModal/AddCardModal.js + As already mentioned in the PR description, card descriptions are currently placeholders and should later be fetched from the config file + As already mentioned in the PR description, views/categories are duplicated in the modal and should later be passed from Dashboard when categories are added there + The modal is not fully integrated into Dashboard yet, since I had to add a temporary button and useState to test it + UI / Responsiveness + As mentioned in the PR description, sizing with vw/vh should be verified on more screen sizes + Colors can be adjusted later according to the planned changes ## Conclusion + The modal works for opening, cancel, search, filtering and adding cards + I confirmed the planned TODOs mentioned in the PR description + I did not find a blocking functional issue during my test Looks good functionally, but final integration and the planned cleanup should be completed before final merge.

b25marem added

reviewed

and removed

needs review

labels

2026-04-28 09:59:02 +00:00

b23albst added 1 commit

2026-04-28 12:08:37 +00:00

Added the changes to dashboard (button, changed views array) b026305ac3

b23albst commented

2026-04-28 12:14:30 +00:00

Author

Collaborator

I added the necessary changes to Dashboard (and changed the light mode color to not be horrendous).

I added the button in the same div as the dropdown (that is to be removed) currently is.
The only thing left is to add the descriptions, but as these are in team 1's branch, this should be done after the weekly merge.

I added the necessary changes to Dashboard (and changed the light mode color to not be horrendous). I added the button in the same div as the dropdown (that is to be removed) currently is. The only thing left is to add the descriptions, but as these are in team 1's branch, this should be done after the weekly merge.

b23albst added

needs review

and removed

reviewed

labels

2026-04-28 12:15:18 +00:00