Feature/Staff Grant Extension - Complete Front-end work #403
Conversation
…or students on the homepage
…on and UI updates
…ant extension form This commit adds the Student Search and Select feature to the Staff Grant Extension form, enhancing the form's usability by allowing staff to search for individual students and select multiple students for bulk extension grants. This update integrates directly with the existing extension form backend, improving the overall user experience for staff handling large classes. Changes include: - Added student search input for filtering student lists. - Implemented multi-student selection support for bulk operations. - Improved UI components for efficient student selection. - Integrated with the existing form backend for seamless data flow. References: - Related to JoeMacl's Grant Extension Form PR thoth-tech#330 - Addresses requirements for bulk extension management.
- Create new Staff Grant Extension page with two-column layout - Left panel: Task list using FUnitTaskListComponent - Right panel: Embedded grant extension form (copied from admin modals) - Form is disabled until a task is selected - Form resets after successful submission - Accessible via /#/staff-grant-extension URL - Add proper routing and module configuration - Include comprehensive form validation with visual feedback - Add blue-tinted styling for containers
- Remove old grant extension form files that were duplicating functionality - Add character limits to staff grant extension form: reason (300 chars), notes (500 chars) - Clean up task status card component to remove old form dependencies
- WIP commit for adding Angular UIRouter routing for the `Staff Grant Extension` feature
- add Angular UIRouter declaration for the `Staff Grant Extension` `TaskDropdown` item - conditionally render the `Staff Grant Extension` `TaskDropdown` item based on the user's `role`
- remove test code
rashi-agrawal29
force-pushed
the
feature/staff-grant-extension-page-merge
branch
from
e718b1f to
5a456ef
Compare
Remove the notes field from the staff grant extension feature as it was not being used in the backend implementation. This simplifies the form and payload structure by removing the unused functionality. Changes made: - Remove notes field from GrantExtensionPayload interface - Remove notes form control from grant extension form - Remove notes textarea from form template - Remove notes field from form reset and payload creation The feature now only includes essential fields: student_ids, task_definition_id, weeks_requested and comment.
- Fix error handling to properly extract specific error messages from API responses - Handle cases where error is directly a string (most common case) - Add debugging logs to help troubleshoot error structures Resolves issue where generic 'Error granting extensions' message was shown instead of specific errors like 'Extensions cannot be granted beyond task deadline'
- Remove development console.log statements used for debugging error extraction - Keep console.error for proper error logging - Clean up code now that error handling is working correctly
SahiruWithanage
changed the title
vaghelaparth05
left a comment
vaghelaparth05
left a comment
There was a problem hiding this comment.
Can you please paste some screenshot of this feature working on the frontend with multiple views on Desktop, Tablet and Mobile if possible.
| </div> | ||
|
|
||
| <!-- Student List --> | ||
| <div *ngIf="showStudentList" |
There was a problem hiding this comment.
We can use @if directive here as using *ngif is outdated way of using angular. It won't break the code though because this is still supported.
| </div> | ||
|
|
||
| <!-- Student Selection Error --> | ||
| <div *ngIf="grantExtensionForm.get('students')?.touched && grantExtensionForm.get('students')?.invalid" style="color: #f44336; font-size: 12px; margin-top: 4px; margin-bottom: 24px;"> |
There was a problem hiding this comment.
We can use @if directive here as using *ngif is outdated way of using angular. It won't break the code though because this is still supported.
| let errorMessage = 'Error granting extensions. Please try again.'; | ||
|
|
||
| // Check if error is directly a string (most common case) | ||
| if (typeof error === 'string') { |
There was a problem hiding this comment.
Just a suggestion here, you can use this :
let errorMessage =
(typeof error === 'string' && error) ??
(typeof error?.error === 'string' && error.error) ??
error?.error?.error ??
error?.error?.message ??
error?.message ??
'An unknown error occurred';
Its called Nullish Coalescing Operator.
| @@ -0,0 +1,31 @@ | |||
| export interface SuccessfulResult { | |||
There was a problem hiding this comment.
All of these values are mandatory values and none of them are optional. If one of them is somehow missing, this might result in undefined/null error and break js. You can use ?: to define a value if its going to be optional.
like extension_response?: number.
| task_status: string; | ||
| } | ||
|
|
||
| export interface FailedResult { |
There was a problem hiding this comment.
All of these values are mandatory values and none of them are optional. If one of them is somehow missing, this might result in undefined/null error and break js. You can use ?: to define a value if its going to be optional.
like extension_response?: number.
| skipped: SkippedResult[]; | ||
| } | ||
|
|
||
| export interface ExtensionSummaryPayload { |
There was a problem hiding this comment.
All of these values are mandatory values and none of them are optional. If one of them is somehow missing, this might result in undefined/null error and break js. You can use ?: to define a value if its going to be optional.
like extension_response?: number.
6 participants
Description
This pull request contains the complete front‑end implementation for the Staff Grant Extension feature. It delivers everything required for staff (tutors, convenors and admins) to grant extensions to students from within the Ontrack interface. The back‑end API and email notifications are handled in a separate PR – this PR is purely the UI/UX work.
What’s Included
Full grant extension workflow
Notifications and communication
Services and integration
Validation and user experience
Type of change
How Has This Been Tested?
Accessing the feature
Task and student selection
Form behaviour
Extension summary and notifications
Other checks
Testing Checklist:
Checklist:
Folders and Files Added/Modified
Added:
src/app/api/services/extension.service.ts– new service for grant extension API calls.src/app/units/states/tasks/staff-grant-extension/– new directory containing:tasks.component.*– displays tasks for the selected unit (left panel).grant-extension-form/component – the reactive form for requesting extensions (right panel).grant-extension-summary/component – displays results after submission.staff-grant-extension.component.*– page container and routing.Modified:
src/app/common/header/header.component.html– added integration point for in‑system notifications.src/app/units/states/tasks/…– updated to pass unit and task data into the new form and summary components.Deleted:
src/app/admin/modals/grant-extension-form/– removed the old modal‑based grant extension form.