Expanded Requirements for the Feedback Edit Modal

[shubhankertiwari8]

Description

To enhance the functionality of the feedback card edit feature, we can introduce a modal that allows the user to edit the original feedback details, such as the title and description. The modal should display two input fields labeled "Title" and "Description" when the user clicks on the edit icon located at the top right corner of the feedback card. The user can then modify the content and save the changes using a "Save Changes" button.

Additionally, to improve the user experience, the modal will automatically close if the user clicks anywhere outside the modal, providing a more intuitive interaction. Here's how we can expand and frame this:

1. Modal Activation:

• When the user clicks on the edit icon at the top right corner of the feedback card, a modal should be triggered.
• This modal will be centered on the screen and display two labeled input fields:
• Title: An editable field allowing the user to update the feedback title.
• Description: A larger text area allowing the user to update the feedback description.

2. Input Labels:

• Ensure the "Title" and "Description" labels are clearly visible and aligned with their corresponding input fields.
• Users can easily update the original title and description provided when the feedback was first submitted.

3. Save Changes Button:

• At the bottom of the modal, include a "Save Changes" button that, when clicked, updates the feedback with the newly edited values.
• Upon clicking, the modal should close, and the updated feedback should be reflected on the card.

4. Modal Dismissal:

• If the user clicks anywhere outside the modal (on the screen), the modal should automatically close. This provides a more natural and user-friendly interaction, especially if the user changes their mind about editing.
• This functionality can be achieved by adding an event listener for clicks outside the modal area.

5. Edge Case Handling:

• If no changes are made and the user clicks "Save Changes", the modal should still close, but no update should be performed on the original feedback.
• Ensure that input validation is in place, such as preventing empty fields for required input like the title.

6. Character Counter

• Add a character counter for the title and description fields to limit the length of input and give users real-time feedback on how much space they have left.
• You can highlight the counter in red when the user approaches or exceeds the limit.

7. Attach Media

• Allow users to attach images, screenshots, or files when editing feedback. This could give more context to the feedback.

8. Add a cancel button on top right corner of modal and fix css

This updated implementation improves the user experience by providing clear input fields for editing and more intuitive modal behavior. It also adds an extra layer of interaction by closing the modal when the user clicks outside, mimicking popular UI patterns.

[shubhankertiwari8]

@Manish-Sharma26 This issue has been assigned to you please comment to confirm!!!!

[Manish-Sharma26]

@shubhankertiwari8 Thank You for assigning me the issue, I have started working on the issue.

[Manish-Sharma26]

@shubhankertiwari8 The modal is working fine already Here is the video of it

https://github.com/user-attachments/assets/8b7adf8c-89f9-4df1-ba16-7a655ce54ad2

can you tell me what else is it to be done

[shubhankertiwari8]

In that case add a warning before editing note asking for user confirmation and introduce an attachment feature to attach files and photos and subsequently show them in feedback card after upload and a cancel button to top right corner of modal

[Manish-Sharma26]

The attachment feature should be included in the edit note modal or in the feedback card beside the edit note icon? And the attached file content is to be shown in the feedback card in the form of text?

[shubhankertiwari8]

@Manish-Sharma26 add attachment button to editing modal itself and attached content should be shown in the format it has been uploaded for example if user uploads images show an image in feedback card

[Manish-Sharma26]

@shubhankertiwari8 Just wanted to confirm that i have to store the images in the mongoDB only as time taken to fetch images from mongoDB will take time

[shubhankertiwari8]

@Manish-Sharma26 Yes, you are required to do it using MongoDB only but if you implement it in some other way which makes loading of images faster and more effective you may be rewarded bonus points.

[Manish-Sharma26]

@shubhankertiwari8 I have attached a video demonstrating the change in the app Moreover i have used some image optimisation like compressing the image before storing it ,lazy loading ,caching https://github.com/user-attachments/assets/10178c27-18e7-491f-b92c-86801796035f

Is it fine?