Feature/grant extension form v3

src/app/admin/modals/grant-extension-form/grant-extension-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { GrantExtensionFormComponent } from './grant-extension-form.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'f-grant-extension-dialog',
+  standalone: true,
+  imports: [MatDialogModule, CommonModule, GrantExtensionFormComponent],
+  template: `
+    <h2 mat-dialog-title>Grant Extension</h2>
+    <mat-dialog-content>
+      <f-grant-extension-form></f-grant-extension-form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="close()">Close</button>
+    </mat-dialog-actions>
+  `
+})
+export class GrantExtensionDialogComponent {
+  constructor(private dialogRef: MatDialogRef<GrantExtensionDialogComponent>) {}
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/admin/modals/grant-extension-form/grant-extension-form.component.html

@@ -0,0 +1,67 @@
+<h2 mat-dialog-title>Grant Extension</h2>
+<form [formGroup]="grantExtensionForm" (ngSubmit)="submitForm()">
+
+
+<mat-dialog-content [formGroup]="grantExtensionForm">
+  <!-- Student Selection -->
+  <mat-form-field appearance="fill" class="w-full mb-4">
+    <mat-label>Student</mat-label>
+    <mat-select formControlName="student" required>
+      <mat-option value="" disabled>Select a student</mat-option>
+      <mat-option *ngFor="let student of students" [value]="student.id">
+        {{ student.name }}
+      </mat-option>
+    </mat-select>
+    <mat-error *ngIf="grantExtensionForm.get('student')?.touched && grantExtensionForm.get('student')?.invalid">
+      Please select a student.
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Extension Duration -->
+  <div class="mb-4">
+  <label for="extension" class="block text-xl font-semibold text-gray-900">
+    Extension Duration: <strong>{{ grantExtensionForm.get('extension')?.value }}</strong> day(s)
+  </label>
+
+  <mat-slider
+    min="1"
+    max="30"
+    step="1"
+    tickInterval="5"
+    thumbLabel
+    class="w-full"
+    style="width: 100%; max-width: 600px; min-width: 300px;"
+  >
+    <input matSliderThumb formControlName="extension" />
+  </mat-slider>
+  </div>
+
+  <!-- Reason Field -->
+  <mat-form-field appearance="fill" class="w-full mb-4">
+    <mat-label>Reason</mat-label>
+    <textarea
+      matInput
+      formControlName="reason"
+      rows="4"
+      required
+    ></textarea>
+    <mat-error *ngIf="grantExtensionForm.get('reason')?.touched && grantExtensionForm.get('reason')?.invalid">
+      Please provide a reason for the extension.
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Notes Field (Optional) -->
+  <mat-form-field appearance="fill" class="w-full mb-4">
+    <mat-label>Additional Notes (optional)</mat-label>
+    <textarea matInput formControlName="notes" rows="3"></textarea>
+  </mat-form-field>
+</mat-dialog-content>
+
+  <!-- Form Buttons -->
+<mat-dialog-actions align="end">
+  <button mat-button type="button" (click)="close()" [disabled]="isSubmitting">Cancel</button>
+  <button mat-flat-button color="primary" type="submit" [disabled]="isSubmitting">
+    Grant Extension
+  </button>
+</mat-dialog-actions>
+

src/app/admin/modals/grant-extension-form/grant-extension-form.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GrantExtensionFormComponent } from './grant-extension-form.component';
+
+describe('GrantExtensionFormComponent', () => {
+  let component: GrantExtensionFormComponent;
+  let fixture: ComponentFixture<GrantExtensionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GrantExtensionFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GrantExtensionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/modals/grant-extension-form/grant-extension-form.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ExtensionService } from 'src/app/api/services/extension.service';
+
+@Component({
+  selector: 'f-grant-extension-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    CommonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSliderModule,
+    MatButtonModule,
+    MatDialogModule
+  ],
+  templateUrl: './grant-extension-form.component.html'
+})
+export class GrantExtensionFormComponent implements OnInit {
+  grantExtensionForm!: FormGroup;
+  isSubmitting = false;
+
+  // Temporary values will be replaced with dynamic context
+  unitId = 1;
+  taskDefinitionId = 25;
+
+  // List of test students to choose from
+  students = [
+    { id: 1, name: 'Joe M' },
+    { id: 2, name: 'Sahiru W' },
+    { id: 3, name: 'Samindi M' }
+  ];
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<GrantExtensionFormComponent>,
+    private snackBar: MatSnackBar,
+    private extensionService: ExtensionService
+  ) {}
+
+  // Initialize the reactive form with validators for each field
+  ngOnInit(): void {
+    this.grantExtensionForm = this.fb.group({
+      student: ['', Validators.required],
+      extension: [1, [Validators.required, Validators.min(1)]],
+      reason: ['', Validators.required],
+      notes: ['']
+    });
+  }
+
+  // Handles form submission.
+  // Builds the payload and sends it to the backend via the ExtensionService.
+  // Displays a success or error message and closes the dialog on success.
+  submitForm(): void {
+    if (this.grantExtensionForm.invalid) {
+      this.grantExtensionForm.markAllAsTouched();
+      return;
+    }
+
+    this.isSubmitting = true;
+
+    const { student, extension, reason, notes } = this.grantExtensionForm.value;
+    const unitId = 1; // temporary value
+    const payload = {
+      student_ids: [student],
+      task_definition_id: 25,
+      weeks_requested: extension,
+      comment: reason,
+      notes: notes,
+    };
+
+    this.extensionService.grantExtension(unitId, payload).subscribe({
+      next: () => {
+        this.snackBar.open('Extension granted successfully!', 'Close', { duration: 3000 });
+        this.dialogRef.close(true);
+      },
+      error: (error) => {
+        const errorMsg = error?.error?.message || 'An unexpected error occurred. Please try again.';
+        this.snackBar.open(`Failed to grant extension: ${errorMsg}`, 'Close', { duration: 5000 });
+        console.error('Grant Extension Error:', error);
+      },
+      complete: () => {
+        this.isSubmitting = false;
+      }
+    });
+  }
+
+  // Closes the dialog without submitting the form
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/api/services/authentication.service.ts

@@ -136,7 +136,7 @@ export class AuthenticationService {
           remember: boolean;
         },
   ): Observable<any> {
-    return this.httpClient.post(this.AUTH_URL, userCredentials).pipe(
+    return this.httpClient.post(this.AUTH_URL, userCredentials, { withCredentials: true }).pipe(
       map((response: any) => {
         // Extract relevant data from response and construct user object to store in cache.
         const user: User = this.userService.cache.getOrCreate(

src/app/api/services/extension.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UserService } from 'src/app/api/models/doubtfire-model';
+
+interface GrantExtensionPayload {
+  student_ids: number[];
+  task_definition_id: number;
+  weeks_requested: number;
+  comment: string;
+  notes?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExtensionService {
+  constructor(
+    private http: HttpClient,
+    private userService: UserService
+  ) {}
+
+  grantExtension(unitId: number, payload: GrantExtensionPayload): Observable<any> {
+    const authToken = this.userService.currentUser?.authenticationToken ?? '';
+    const username = this.userService.currentUser?.username ?? '';
+
+    const headers = new HttpHeaders({
+      'Auth-Token': authToken,
+      'Username': username
+    });
+
+    return this.http.post(
+      `/api/units/${unitId}/staff-grant-extension`,
+      payload,
+      { headers }
+    );
+  }
+}

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html

@@ -1,44 +1,40 @@
 <mat-card appearance="outlined">
   @if (triggers?.length > 0) {
-  <mat-form-field class="px-4 pt-4" appearance="outline">
-    <mat-select [value]="task?.status" (selectionChange)="triggerTransition($event.value)">
-      <mat-select-trigger>
-        <span style="display: inline-flex">
-          <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-          <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
-        </span>
-      </mat-select-trigger>
-      @for (trigger of triggers; track trigger) {
-      <mat-option [value]="trigger.status">
-        <status-icon [status]="trigger.status" [showTooltip]="false"></status-icon>
-        <span style="display: inline-flex; margin-left: 10px"
-          ><h5>{{ trigger.label }}</h5></span
-        >
-      </mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
-  } @if (triggers?.length < 0) {
-  <mat-card-title>
-    <span style="display: inline-flex">
-      <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-      <h5>{{ task?.statusLabel() }}</h5>
-    </span>
-  </mat-card-title>
+    <mat-form-field class="px-4 pt-4" appearance="outline">
+      <mat-select [value]="task?.status" (selectionChange)="triggerTransition($event.value)">
+        <mat-select-trigger>
+          <span style="display: inline-flex">
+            <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
+            <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
+          </span>
+        </mat-select-trigger>
+        @for (trigger of triggers; track trigger) {
+          <mat-option [value]="trigger.status">
+            <status-icon [status]="trigger.status" [showTooltip]="false"></status-icon>
+            <span style="display: inline-flex; margin-left: 10px">
+              <h5>{{ trigger.label }}</h5>
+            </span>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
   }
 
   <mat-card-content>
     <p>{{ task?.statusHelp().reason }} {{ task?.statusHelp().action }}</p>
   </mat-card-content>
 
-  @if ( task?.unit.currentUserIsStaff || task?.canApplyForExtension() || (task?.inSubmittedState() &&
-  task?.requiresFileUpload()) ) {
   <mat-card-actions class="space-x-2">
     @if (task?.canApplyForExtension()) {
-    <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
-    } @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
-    <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
+      <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
     }
-  </mat-card-actions>
-  }
-</mat-card>
+    @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
+      <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
+    }
+    @if (currentUser?.role === 'Admin' || currentUser?.role === 'Convenor') {
+      <button mat-stroked-button (click)="openGrantExtensionDialog()">
+        Grant Extension
+      </button>
+
+    }
+

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts

@@ -5,6 +5,11 @@ import { Task } from 'src/app/api/models/task';
 import { TaskStatusEnum } from 'src/app/api/models/task-status';
 import { TaskService } from 'src/app/api/services/task.service';
 import { ExtensionModalService } from 'src/app/common/modals/extension-modal/extension-modal.service';
+import { MatDialog } from '@angular/material/dialog';
+import { GrantExtensionFormComponent } from 'src/app/admin/modals/grant-extension-form/grant-extension-form.component';
+import { UserService } from 'src/app/api/services/user.service';
+
+
 
 @Component({
   selector: 'f-task-status-card',
@@ -19,6 +24,8 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
     private extensions: ExtensionModalService,
     private taskService: TaskService,
     private router: UIRouter,
+    private dialog: MatDialog,
+    private userService: UserService,
   ) {}
 
   @Input() task: Task;
@@ -66,4 +73,17 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
       this.task.refresh();
     });
   }
+
+  openGrantExtensionDialog(): void {
+    this.dialog.open(GrantExtensionFormComponent, {
+      width: '100%',
+      maxWidth: '600px',
+      disableClose: true,
+    });
+  }
+
+  get currentUser() {
+    return this.userService.currentUser;
+  }
+
 }

src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts

@@ -15,7 +15,7 @@ import {ProjectService} from 'src/app/api/services/project.service';
 import {GlobalStateService} from '../../index/global-state.service';
 import {UserService} from 'src/app/api/services/user.service';
 import {Project, TaskDefinition} from 'src/app/api/models/doubtfire-model';
-
+import { MatDialog } from '@angular/material/dialog';
 @Component({
   selector: 'f-project-dashboard',
   templateUrl: './project-dashboard.component.html',
@@ -43,6 +43,7 @@ export class ProjectDashboardComponent implements OnInit {
     private currentUser: UserService,
     private projectService: ProjectService,
     private globalStateService: GlobalStateService,
+    private dialog: MatDialog,
   ) {}
 
   startedDragging(event: CdkDragStart, div: HTMLDivElement) {