Andras/BoundlessFlowCampus2K
3
6
Fork 0
Code Issues 143 Pull requests 16 Projects Releases Packages Wiki Activity Actions 2

539-add-card-modal #604

Closed
b23albst wants to merge 0 commits from 539-add-card-modal into team_2_week_3
pull from: 539-add-card-modal
merge into: Andras:team_2_week_3
Conversation 6 Commits - Files changed -
b23albst commented 2026-04-28 07:56:37 +00:00
Collaborator
Copy link

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

  • Declare useState hook
    image

  • 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

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

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
a24vinla commented 2026-04-28 08:32:05 +00:00
Collaborator
Copy link

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

I will remove the old add widget button/dropdown during merge.
b25marem commented 2026-04-28 09:53:35 +00:00
Collaborator
Copy link

image# 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
Copy link

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.
b23albst commented 2026-04-28 12:14:30 +00:00
Author
Collaborator
Copy link

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.
a24vinla approved these changes 2026-04-29 06:19:05 +00:00
a24vinla left a comment
Collaborator
Copy link

Will merge manually!

Will merge manually!
a24vinla commented 2026-04-29 07:14:50 +00:00
Collaborator
Copy link

Merged Manually, well done!

Merged Manually, well done!
a24vinla closed this pull request 2026-04-29 07:14:54 +00:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
b25marem
a24vinla
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked-waiting-for-further-changes

   
bug

Something is not working

  
bug-only-on-server-for-mobile-not-webpage

   
Bug-Report-After-Merge

   
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
further-changes-needed

   
future-problem-not-fixint-this-period

   
help wanted

Need some help

  
invalid

Something is wrong

  
last-week-issue-to-fix

   
library

   
low-priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
not-implemented.

   
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
Script

   
security

use this for security-related issues

  
SQL

  
style

   
Team 1

Team 1 is responsible for this issue

  
Team 2

Team 2 is responsible for this issue

  
team leaders

   
test-creation

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
unassigned

   
Under-review

   
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked-waiting-for-further-changes
bug
bug-only-on-server-for-mobile-not-webpage
Bug-Report-After-Merge
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
further-changes-needed
future-problem-not-fixint-this-period
help wanted
invalid
last-week-issue-to-fix
library
low-priority
needs input
needs review
not-implemented.
project documentation
question
research
reviewed
Script
security
SQL
style
Team 1
Team 2
team leaders
test-creation
testing
topLevel
unassigned
Under-review
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
b23albst
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!604
No description provided.