Feature: Grant Extension Form

[JoeMacl]

Description

Features the new 'grant extension component' that allows staff to grant extensions to students via the 'grant extension' button located in the units page. Currently this component is frontend-only. No API integration has been implemented yet. Backend endpoints will be added in a future update.

Important: Currently, there's an issue preventing admins from accessing the units page. For testing purposes, the grant extension form is temporarily accessible to students. This will be restricted to admin users only in future updates.

The form includes the following fields:

Student: A dropdown selector.

Extension Duration: A slider ranging from 1 to 30 days.

Reason: A required text area input.

Additional Notes: Optional text area.

To View the Feature

• Sign in as a student (temporarily accessible for testing) and navigate to any enrolled unit, such as Introduction to Programming.
• Locate the 'grant extension' button in any one of the students tasks
• Open the browser console to verify no errors. On submit, you should see logs for the task, received dialog data, submitted payload, and final form values.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

• Validated that the range slider updates and reflects the selected value in the UI
• Confirmed responsive behaviour across different view sizes
• Clicking the "Grant Extension" button triggers console.log
• Dropdown renders expected student options

Testing Checklist:

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have requested a review on the Pull Request

[samindiii]

Great job on your work! I have reviewed it and have suggested some changes- if you want to discuss them with me, feel free to shoot me a message on Teams! :)

[JoeMacl]

Just pushed some updates to the grant-extension-form:

Added a list of students to the component to support testing of the dropdown and placeholder behaviour. The default “Select a student” option has been updated accordingly.

Validation error messages are now shown for the student and reason fields when they're touched but not filled out, or when the "Grant Extension" button is clicked.

The Additional Notes field now indicates that it’s optional.

The "Grant Extension" button now disables on submit and resets all form fields after a successful submission.

Added inline comments to clarify the form logic and improve maintainability.

These updates reflect the requirements outlined in my assigned ticket, along with suggestions provided by Samindi.
Please note that this implementation is front-end only and there is no API integration at this stage. The form is still under development and will be enhanced in upcoming tasks.

[SahiruWithanage]

Great work! I went through everything and didn’t run into any issues – it all worked smoothly. I also checked the console log, and everything seemed to be working fine there as well.

I do have a couple of suggestions though. One is to consider adding a word limit to the "Reason" and "Additional Notes" fields so the input doesn’t exceed a certain limit.

Another idea is to include a “Cancel” or “Clear Form” button that resets everything back to the default state – that would be a nice touch for usability. Also, I think the suggestions made by Samindi were really great and worth considering as well. Overall, awesome job!

[b0ink]

The current scaling of the form and text seems to be really small

You should also be using Material UI components for elements like the select dropdown, slider, buttons, inputs, etc. This should reduce the amount of tailwind classes you're currently using

I'm not familiar with the guidelines of this project, but perhaps this could be a modal/dialogue pop up, similar to the extension request form component that students are able to submit. Are you working off any existing documentation that you could link here for reference?

[JoeMacl]

The current scaling of the form and text seems to be really small

You should also be using Material UI components for elements like the select dropdown, slider, buttons, inputs, etc. This should reduce the amount of tailwind classes you're currently using

I'm not familiar with the guidelines of this project, but perhaps this could be a modal/dialogue pop up, similar to the extension request form component that students are able to submit. Are you working off any existing documentation that you could link here for reference?

Thanks for the feedback!
I'll start updating the form to use Angular Material as suggested. As for the modal/dialogue approach I went back through the documentation here --> https://thoth-tech.netlify.app/products/ontrack/projects/staff-grant-extension/design/ it doesn't specifically state it but implies to use the modal/dialog approach. I'll begin refactoring the form to follow that as well!

[JoeMacl]

This PR implements the Grant Extension form as an Angular Material Dialog.

Please note: The form is accessible as a student for testing purposes. As there are issues preventing admins from accessing units on the 9.x branch. Once those issues are resolved, this will be updated so that only staff users can access the feature.

Changes Made:

Grant Extension form implemented as a Material Dialog

Utilizes Material UI components (form fields, select dropdown, slider, textarea, buttons)

Form validation for required fields

Slider for extension duration (1-30 days)

Temporary visibility for students to allow testing due to current admin access issues

[zara1504]

After testing the grant extension component (in the student area, which I understand is here just for testing), I was able to get a console output that my extension has been submitted to the student I had selected and see the number of days and reasoning. Everything mentioned above that the form should include was there, with the required fields working and coming up with a message underneath when not filled out. Along with this, the slider works from 1-30 days. After seeing the comments written above, I can see that a cancel button has been added and works.

I did see there was an empty file, grant-extension-form.component.scss. If it's not needed in this component, I would recommend removing it so it doesn't cause any clutter.

Overall, everything worked for me during testing. Good job :).

[SahiruWithanage]

Nice work on the changes – everything looks good to me!

[b0ink]

Hi @JoeMacl

I wasn't able to navigate to the grant extension route as it kept redirecting me back to the home page, but i have left a few notes regarding your changes - looks all good to me, just a few areas that you could change so that when the API routes are added this component can be merged relatively smoothly without additional changes

[aNebula]

@JoeMacl - why was there a need for a force push? Also, you need to get this reviewed again after any and all code changes. Please contact @b0ink and get this task completed.
Is this PR not valid any more, because I also see #330 ?
In that case, @JoeMacl please close the PR.

[JoeMacl]

I'm closing this PR as PR #330 includes a more updated and integrated implementation of the Staff Grant Extension frontend work.