Development » OnlineGradeCalculator

Description:
Refactor the UI/UX for handling default and custom scale tables in the grade scale table feature. This involves creating separate modals for default and custom tables, adding new functionalities, improving user interactions, and ensuring responsiveness.

Tasks:¶

1. Separate Modal for Default and Custom Tables:

   • Implement distinct modals for default scale tables and custom tables to provide a clear user experience.

2. Custom Table Reset Restriction:

   • Disable the reset functionality for custom tables to preserve user-created configurations.

3. Edit Features for Default Tables:

   • Allow users to add/remove rows and edit the letter column specifically for default tables.

4. Main Dropdown for Table Selection:

   • Restrict table selection to the main dropdown outside of modals. Ensure modals do not provide an option to switch tables.

5. Add Delete Custom Scale Modal Confirmation:

   • Display a confirmation modal when a user attempts to delete a custom scale table to prevent accidental deletion.

6. Rotate Dropdown Icon:

   • Rotate the dropdown icon 180 degrees when opened for better visual feedback.

7. Field Validation:

   • Add validation for the letter and comments columns:
     • Ensure the letter column accepts valid and unique values.
     • Validate the comments column for length and content.

8. Mobile Responsiveness:

   • Make new buttons and UI components responsive and optimized for mobile devices.

Expected Outcome:¶

An enhanced and intuitive user experience for managing default and custom scale tables, with improved interactions, validations, and responsive design.