Andras/BoundlessFlowCampus2K

Fork 0

Improve text view card design and functionality #790

Merged

a22erigr merged 4 commits from 741-improve-text-view-card into team_2_week_5

2026-05-08 10:42:41 +00:00

b25marem commented

2026-05-06 18:43:37 +00:00

Collaborator

Changes

TextView Improvements

Added separate states for:
- edit mode
- delete confirmation mode
- error handling
Added Save/Edit toggle functionality
Added Delete confirmation flow
Added Cancel functionality for delete state
Prevented delete confirmation from opening when the note is empty
Added error message:
- "There is no note to delete"

Editing & Saving Flow

Fixed issue where text changes were not saved correctly before adding a card
Added validation to prevent adding a card while still editing
Added warning message:
- "Please press Save or Cancel before adding"
Synced saved preview text with dashboard card data
Fixed issue where dashboard cards were created with empty text

AddCardModal Improvements

Added preview state management:
- previewData
- previewError
- isPreviewEditing
Synced TextView preview with AddCardModal state

AddNewView Improvements

Updated addNewView to accept custom card data
Added support for passing TextView content into dashboard layout
Fixed TextView card initialization with saved text value

UI / UX Improvements

Improved TextView interaction flow
Improved delete/error UX behavior
Removed unnecessary resize/extra controls from text card behavior
Improved card preview behavior in modal

Test Cases

TextView edit/save

Open Add Card modal
Select TextView
Click Edit
Enter text in the textarea
Click Save
Verify that the text remains visible in the preview

Add TextView to dashboard

Select TextView in Add Card modal
Click Edit
Enter text
Click Save
Click Add
Verify that the new TextView card appears on the dashboard with the saved text

Prevent add while editing

Select TextView
Click Edit
Enter text
Click Add without pressing Save
Verify that the message "Please press Save or Cancel before adding" is shown
Verify that no card is added to the dashboard

Delete confirmation

Create or open a TextView card with text
Click Delete
Verify that the confirmation message is shown
Click Cancel
Verify that the text is still visible

Confirm delete

Create or open a TextView card with text
Click Delete
Confirm Delete
Verify that the text is removed

Empty delete error

Open a TextView card with no text
Click Delete
Verify that "There is no note to delete" is shown
Verify that the delete confirmation is not opened

## Changes ### TextView Improvements - Added separate states for: - edit mode - delete confirmation mode - error handling - Added Save/Edit toggle functionality - Added Delete confirmation flow - Added Cancel functionality for delete state - Prevented delete confirmation from opening when the note is empty - Added error message: - "There is no note to delete" ### Editing & Saving Flow - Fixed issue where text changes were not saved correctly before adding a card - Added validation to prevent adding a card while still editing - Added warning message: - "Please press Save or Cancel before adding" - Synced saved preview text with dashboard card data - Fixed issue where dashboard cards were created with empty text ### AddCardModal Improvements - Added preview state management: - previewData - previewError - isPreviewEditing - Synced TextView preview with AddCardModal state ### AddNewView Improvements - Updated addNewView to accept custom card data - Added support for passing TextView content into dashboard layout - Fixed TextView card initialization with saved text value ### UI / UX Improvements - Improved TextView interaction flow - Improved delete/error UX behavior - Removed unnecessary resize/extra controls from text card behavior - Improved card preview behavior in modal ## Test Cases ### TextView edit/save - Open Add Card modal - Select TextView - Click Edit - Enter text in the textarea - Click Save - Verify that the text remains visible in the preview ### Add TextView to dashboard - Select TextView in Add Card modal - Click Edit - Enter text - Click Save - Click Add - Verify that the new TextView card appears on the dashboard with the saved text ### Prevent add while editing - Select TextView - Click Edit - Enter text - Click Add without pressing Save - Verify that the message "Please press Save or Cancel before adding" is shown - Verify that no card is added to the dashboard ### Delete confirmation - Create or open a TextView card with text - Click Delete - Verify that the confirmation message is shown - Click Cancel - Verify that the text is still visible ### Confirm delete - Create or open a TextView card with text - Click Delete - Confirm Delete - Verify that the text is removed ### Empty delete error - Open a TextView card with no text - Click Delete - Verify that "There is no note to delete" is shown - Verify that the delete confirmation is not opened

b25marem added 1 commit

2026-05-06 18:43:38 +00:00

Improve text view card design and functionality fca3f3e52d

b25marem added the

needs review

label

2026-05-06 18:44:08 +00:00

b23albst commented

2026-05-07 06:57:19 +00:00

Collaborator

This is not a full review, just something I noticed.
I think the states added should be reset with the closeModal function. A small quirk or functionality of the addCardModal is that its state (eg. what card and category is selected) is stored if you just click outside of the modal. This is so that you can click outside the modal to view the dashboard before adding and to prevent the user accidentally clicking outside of it and having to select the view again.
I think that the preview for the text should follow this logic. This is just my opinion though.
One thing that should be fixed is that the error message stays if you press close and then open the modal again

This is not a full review, just something I noticed. I think the states added should be reset with the closeModal function. A small quirk or functionality of the addCardModal is that its state (eg. what card and category is selected) is stored if you just click outside of the modal. This is so that you can click outside the modal to view the dashboard before adding and to prevent the user accidentally clicking outside of it and having to select the view again. I think that the preview for the text should follow this logic. This is just my opinion though. One thing that should be fixed is that the error message stays if you press close and then open the modal again ![image](/attachments/c6197f0f-5d6b-4165-a465-166d40d982bb)

image.png

17 KiB

a22erigr

2026-05-07 07:42:29 +00:00

added the
Under-review
label
requested review from a24vinla

a24vinla commented

2026-05-07 08:57:27 +00:00

Collaborator

Review on #741

Whats done

Tested on Windows using Chrome

App starts
- New text view works
- New way of handling edit state, save and delete works well
- All error messages display the correct info

Inspected following files

frontend/src/features/addCardModal/AddCardModal.js
- Indentation/code styling
  - Code follows standards
- Naming convention
  - Code follows naming convention
- Comments
  - I believe comments are lacking, it should describe the purpose of the new methods (setPreviewData, setIsPreviewEditing, setPreviewError) somewhere.
- General code quality
  - Code quality is good!
frontend/src/features/addCardModal/AddCardModal.module.css
- Indentation/code styling
  - Code follows standards
- Naming convention
  - Code follows naming convention
frontend/src/features/text/TextView.js
- Indentation/code styling
  - Code follows standards
- Naming convention
  - Code follows naming convention
- Comments
  - Much like in AddCardModal, comments describing purpose/working of new useState methods are required
- General code quality
  - Code quality is good!
frontend/src/features/text/Text.module.css
- Indentation/code styling
  - Code follows standards
- Naming convention
  - Code follows naming convention
frontend/src/pages/dashboard/utils/AddNewView.js
- Indentation/code styling
  - Code follows standards
- Naming convention
  - Code follows naming convention
- Comments
  - Not necessary
- General code quality
  - Code quality is good!

What needs to be done

frontend/src/features/addCardModal/AddCardModal.js
- Add comments
frontend/src/features/text/TextView.js
- Add comments
Design
- Design does not follow the design examples given in issue #741, where buttons are on the right of the card
- The text window currently does not scale with the card, which is fine, but it is also in a weird state where it is too big/to far down with one cell height, and way to small when extending the card downwards:
- None of the icons are implemented. This might be a separate issue however.

Conclusion

Some comments need to be added.
Design also needs to be implemented.
I personally don't see the value in being able to write/edit in the preview, since that in some ways contradictory of what a preview is. But I still think the implementation is very well done.
In regard to what @b23albst commented I think it would be good to implement that as well

# Review on #741 ## Whats done ### Tested on Windows using Chrome + App starts + New text view works + New way of handling edit state, save and delete works well + All error messages display the correct info ### Inspected following files + frontend/src/features/addCardModal/AddCardModal.js + Indentation/code styling + Code follows standards + Naming convention + Code follows naming convention + Comments + I believe comments are lacking, it should describe the purpose of the new methods (setPreviewData, setIsPreviewEditing, setPreviewError) somewhere. + General code quality + Code quality is good! + frontend/src/features/addCardModal/AddCardModal.module.css + Indentation/code styling + Code follows standards + Naming convention + Code follows naming convention + frontend/src/features/text/TextView.js + Indentation/code styling + Code follows standards + Naming convention + Code follows naming convention + Comments + Much like in AddCardModal, comments describing purpose/working of new useState methods are required + General code quality + Code quality is good! + frontend/src/features/text/Text.module.css + Indentation/code styling + Code follows standards + Naming convention + Code follows naming convention + frontend/src/pages/dashboard/utils/AddNewView.js + Indentation/code styling + Code follows standards + Naming convention + Code follows naming convention + Comments + Not necessary + General code quality + Code quality is good! ## What needs to be done + frontend/src/features/addCardModal/AddCardModal.js + Add comments + frontend/src/features/text/TextView.js + Add comments + Design + Design does not follow the design examples given in issue #741, where buttons are on the right of the card + The text window currently does not scale with the card, which is fine, but it is also in a weird state where it is too big/to far down with one cell height, and way to small when extending the card downwards: ![image](/attachments/45ecf89d-b279-4b86-bb4e-b4ffab961c62) + None of the icons are implemented. This might be a separate issue however. ## Conclusion + Some comments need to be added. + Design also needs to be implemented. + I personally don't see the value in being able to write/edit in the preview, since that in some ways contradictory of what a preview is. But I still think the implementation is very well done. + In regard to what @b23albst commented I think it would be good to implement that as well

image.png

18 KiB

a24vinla requested changes

2026-05-07 08:58:28 +00:00

Dismissed

a24vinla left a comment

Collaborator

See review for what needs to be done #790 (comment)

See review for what needs to be done https://git.webug.se/Andras/BoundlessFlowCampus2K/pulls/790#issuecomment-8554

👍 1

b25marem added 1 commit

2026-05-07 12:14:03 +00:00

Improve text view card design and modal state handling 9f41130f7d

b25marem commented

2026-05-07 12:16:36 +00:00

Author

Collaborator

Thank you both for the detailed reviews and feedback. The comments and suggestions helped improve both the functionality and overall user experience of the feature.

Implemented the requested review changes for the TextView card and AddCardModal.

Changes made:

Updated TextView design/layout to better match issue #741
Moved action buttons to the right side of the card
Added Save/Cancel flow while editing instead of showing Delete during edit mode
Improved textarea scaling and responsiveness for both small and expanded cards
Added icons for Edit, Save and Delete actions
Added comments explaining new states and logic
Fixed preview/modal state handling in AddCardModal
Fixed issue where preview error messages persisted after reopening the modal
Added support for hiding TextView action buttons when dashboard edit mode is OFF
Cleaned up styling and improved responsiveness in Text.module.css and AddCardModal.module.css

Thank you both for the detailed reviews and feedback. The comments and suggestions helped improve both the functionality and overall user experience of the feature. Implemented the requested review changes for the TextView card and AddCardModal. Changes made: * Updated TextView design/layout to better match issue #741 * Moved action buttons to the right side of the card * Added Save/Cancel flow while editing instead of showing Delete during edit mode * Improved textarea scaling and responsiveness for both small and expanded cards * Added icons for Edit, Save and Delete actions * Added comments explaining new states and logic * Fixed preview/modal state handling in AddCardModal * Fixed issue where preview error messages persisted after reopening the modal * Added support for hiding TextView action buttons when dashboard edit mode is OFF * Cleaned up styling and improved responsiveness in Text.module.css and AddCardModal.module.css

b25marem commented

2026-05-07 12:39:52 +00:00

Author

Collaborator

@a24vinla Can you please check the changes?

b25marem added 1 commit

2026-05-07 14:20:25 +00:00

Replace text view emojis with Material SVG icons 3a7badc34f

a22erigr requested review from a24vinla

2026-05-08 07:17:17 +00:00

a24vinla commented

2026-05-08 10:10:41 +00:00

Collaborator

Sorry for late response, my notifications are a bit full.

All requested changes have been made and work well. I think this implementation should be looked at if we want to implement adding settings to cards before adding them.

Nothing more to add!

Sorry for late response, my notifications are a bit full. All requested changes have been made and work well. I think this implementation should be looked at if we want to implement adding settings to cards before adding them. Nothing more to add!

👍 1

a24vinla approved these changes

2026-05-08 10:10:47 +00:00

b25marem added

reviewed

and removed

needs review

Under-review

labels

2026-05-08 10:20:11 +00:00

a22erigr added 1 commit

2026-05-08 10:42:12 +00:00