Feature: Grant Extension Form

angular.json

@@ -32,6 +32,7 @@
               "src/manifest.webmanifest"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/theme.scss",
               "src/styles.scss",
               "./node_modules/bootstrap/dist/css/bootstrap.css",
@@ -139,6 +140,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "./node_modules/bootstrap/dist/css/bootstrap.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
             ],

package.json

@@ -165,4 +165,4 @@
     "@nx/nx-linux-x64-gnu": "^18.0",
     "@nx/nx-win32-x64-msvc": "^18.0"
   }
-}
+}

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,65 @@
+<h2 mat-dialog-title>Grant Extension</h2>
+
+<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 -->
+  <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>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="close()" [disabled]="isSubmitting">Cancel</button>
+  <button mat-flat-button color="primary" type="submit" (click)="onSubmit()" [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,85 @@
+import { Component, OnInit, Inject } 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, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'f-grant-extension-form',
+  standalone: true,
+  imports: [
+  ReactiveFormsModule,
+  CommonModule,
+  MatFormFieldModule,
+  MatSelectModule,
+  MatInputModule,
+  MatSliderModule,
+  MatButtonModule,
+  MatDialogModule
+  ],
+  templateUrl: './grant-extension-form.component.html',
+  styleUrls: ['./grant-extension-form.component.scss']
+})
+export class GrantExtensionFormComponent implements OnInit {
+  grantExtensionForm!: FormGroup;
+  isSubmitting = false;
+
+  students = [
+    { id: 1, name: 'Joe M' },
+    { id: 2, name: 'Sahiru W' },
+    { id: 3, name: 'Samindi M' }
+  ];
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<GrantExtensionFormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { unitId: number; taskDefinitionId: number }
+    ) {}
+
+  ngOnInit(): void {
+    this.grantExtensionForm = this.fb.group({
+      student: ['', Validators.required],
+      extension: [1, [Validators.required, Validators.min(1)]],
+      reason: ['', Validators.required],
+      notes: [''],
+    });
+    console.log('Received dialog data:', this.data);
+  }
+
+  onSubmit(): void {
+    if (this.grantExtensionForm.invalid) {
+      this.grantExtensionForm.markAllAsTouched();
+      return;
+    }
+
+    this.isSubmitting = true;
+
+    setTimeout(() => {
+      console.log('Form submitted:', {
+        ...this.grantExtensionForm.value,
+        unitId: this.data.unitId,
+        taskDefinitionId: this.data.taskDefinitionId
+      });
+
+      this.grantExtensionForm.reset({
+        student: '',
+        extension: 1,
+        reason: '',
+        notes: ''
+      });
+
+      this.isSubmitting = false;
+      this.dialogRef.close();
+    }, 1000);
+    console.log('Submitting with data:', this.data);
+
+
+  }
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -267,6 +267,7 @@ const MY_DATE_FORMAT = {
   },
 };
 import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 @NgModule({
   // Components we declare
@@ -468,6 +469,7 @@ import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-
     provideLottieOptions({
       player: () => player,
     }),
+    provideAnimationsAsync(),
   ],
   imports: [
     FlexLayoutModule,

src/app/doubtfire.states.ts

@@ -271,6 +271,21 @@ const ProjectDashboardState: NgHybridStateDeclaration = {
   },
 };
 
+const ProjectDashboardStateV1: NgHybridStateDeclaration = {
+  name: 'dashboard',
+  parent: 'projects',
+  url: '/dashboard',
+  views: {
+    projectView: {
+      component: ProjectDashboardComponent,  // <-- Your new Angular Component
+    },
+  },
+  data: {
+    pageTitle: 'Unit Dashboard',
+  },
+};
+
+
 const ViewAllUnits: NgHybridStateDeclaration = {
   name: 'view-all-units',
   url: '/view-all-units',
@@ -428,6 +443,7 @@ export const doubtfireStates = [
   UnauthoriedState,
   ProjectRootState,
   ProjectDashboardState,
+  ProjectDashboardStateV1,
   UnitRootState,
   TaskViewerState,
   ScormPlayerNormalState,

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>
     }
+    @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
+      <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
+    }
+
+    <!-- Always show for testing -->
+    <button mat-stroked-button color="primary" (click)="openGrantExtensionDialog()">
+      Grant Extension
+    </button>
   </mat-card-actions>
-  }
 </mat-card>

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

@@ -5,6 +5,9 @@ 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';
+
 
 @Component({
   selector: 'f-task-status-card',
@@ -19,6 +22,7 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
     private extensions: ExtensionModalService,
     private taskService: TaskService,
     private router: UIRouter,
+    private dialog: MatDialog,
   ) {}
 
   @Input() task: Task;
@@ -66,4 +70,19 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
       this.task.refresh();
     });
   }
+
+  openGrantExtensionDialog(): void {
+    this.dialog.open(GrantExtensionFormComponent, {
+      width: '100%',
+      maxWidth: '600px',
+      disableClose: true,
+      data: {
+        unitId: this.task.unit.id,
+        taskDefinitionId: this.task.definition.id
+      }
+    });
+
+    console.log('TASK:', this.task);
+  }
+
 }

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) {