Edit Time Modal

[samarth-ramesh]

Conditions of Satisfaction Specification for Right-Click Entry Modal

Objective

• Allow users to right-click on a specific entry, triggering the display of a modal dialog titled "Edit Time." Within this modal, provide a form with the following components: "New Start Time," "New End Time," and a "Submit" button. Populate the input fields with existing values and use native controls.

Specifications

1. Triggering the Modal:

   • Right-click action on a designated entry triggers the modal.
   • The modal titled "Edit Time" should appear over the current view without page redirection.

2. Modal Content:

   • The modal should contain a form with the following elements:
     • Label "New Start Time."
     • Label "New End Time."
     • A "Submit" button.

3. Input Fields:

   • The "New Start Time" and "New End Time" input fields should utilize native browser controls for consistency and user familiarity.
   • Existing values for "New Start Time" and "New End Time" should be pre-filled with the current values as default values.

4. Input Validation:

   • Input fields should enforce date and time format.

5. User Interaction:

   • Users should be able to modify the "New Start Time" and "New End Time" fields as needed.
   • Users can submit the form by clicking the "Submit" button.

6. Cancel Option:

   • Provide a clear mechanism (e.g., close button) to cancel the action and dismiss the modal.

7. Feedback and Confirmation:

   • Call the correct GraphQL Endpoint (documented here)
   • Upon successful submission, provide feedback to confirm that the changes have been saved using the Alert() API.
   • In case of validation errors, display clear error messages for the user.

8. Accessibility:

   • Ensure the modal and its components are accessible to all users, including those with disabilities, by following relevant accessibility standards (e.g., WCAG).

9. Visual Design:

   • Maintain consistent and aesthetically pleasing design to enhance user experience.

10. Testing and QA:

    • Thoroughly test the functionality and appearance of the modal across different browsers and devices.
    • Verify that existing values are correctly populated as default values.
    • Test the validation logic to ensure data integrity.

11. Documentation:

    • Provide clear and concise user documentation, tooltips, or help texts, if necessary, to guide users through the process.

12. Error Handling:

    • Define how to handle and report server or application errors that may occur during form submission.

By adhering to these conditions of satisfaction, the right-click entry modal with the "Edit Time" form can be successfully implemented, offering users a clear and user-friendly experience for editing time entries.

[ninsid711]

can i get assigned to this

[ninsid711]

so should i make a new file which includes this modal or it is supposed to be integrated into the main ts file

[samarth-ramesh]

Yes, new file

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Siddhartha Aakash Rao @.> Sent: Friday, October 13, 2023 8:43:30 PM To: acmpesuecc/timetracker-frontend @.> Cc: Samarth Ramesh @.>; Author @.> Subject: Re: [acmpesuecc/timetracker-frontend] Edit Time Modal (Issue #1)

so should i make a new file which includes this modal or it is supposed to be integrated into the main ts file

— Reply to this email directly, view it on GitHubhttps://github.com/acmpesuecc/timetracker-frontend/issues/1#issuecomment-1761683815, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AL7LVY2DPT7GYT5CSYVFGP3X7FLBVANCNFSM6AAAAAA55BAJGY. You are receiving this because you authored the thread.Message ID: @.***>

[ninsid711]

ill take some time to figure it out is it fine ?

[samarth-ramesh]

you have another 45 minutes from now

[samarth-ramesh]

@SiddharthaRao2005 last chance

[ssether04]

can i get assigned if this is still open?

[siri-n-shetty]

Could you please assign this to me?