refactor: task-ilo-assignment-modal migrated

src/app/doubtfire-angular.module.ts

@@ -265,7 +265,8 @@ import {PrivacyPolicy} from './config/privacy-policy/privacy-policy';
 import {UnitStaffEditorComponent} from './units/states/edit/directives/unit-staff-editor/unit-staff-editor.component';
 import {PortfolioGradeSelectStepComponent} from './projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.component';
 import {GroupMemberContributionAssignerComponent} from './groups/group-member-contribution-assigner/group-member-contribution-assigner.component';
-
+import {TaskIloAlignmentModalComponent} from './tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.component';
+import {TaskIloAlignmentModalService} from './tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.service';
 // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
 const MY_DATE_FORMAT = {
   parse: {
@@ -440,6 +441,7 @@ import {ProjectGroupsComponent} from './projects/states/groups/project-groups/pr
     RolloverComponent,
     ProjectGroupsComponent,
     GroupMemberContributionAssignerComponent,
+    TaskIloAlignmentModalComponent,
   ],
   // Services we provide
   providers: [
@@ -472,6 +474,7 @@ import {ProjectGroupsComponent} from './projects/states/groups/project-groups/pr
     FileDownloaderService,
     CheckForUpdateService,
     TaskOutcomeAlignmentService,
+    TaskIloAlignmentModalService,
     visualisationsProvider,
     commentsModalProvider,
     rootScopeProvider,

src/app/doubtfire-angularjs.module.ts

@@ -41,8 +41,8 @@ import 'build/src/app/tasks/modals/modals.js';
 import 'build/src/app/tasks/tasks.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-rater/task-ilo-alignment-rater.js';
-import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.js';
-import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.js';
+// import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment.js';
+// import 'build/src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-editor/task-ilo-alignment-editor.js';
 import 'build/src/app/tasks/task-ilo-alignment/task-ilo-alignment-viewer/task-ilo-alignment-viewer.js';
 import 'build/src/app/config/runtime/runtime.js';
@@ -209,6 +209,7 @@ import {PortfolioAddExtraFilesStepComponent} from './projects/states/portfolio/d
 import {UnitGroupsComponent} from './units/states/groups/unit-groups/unit-groups.component';
 import {ProjectGroupsComponent} from './projects/states/groups/project-groups/project-groups.component';
 import {GroupMemberContributionAssignerComponent} from './groups/group-member-contribution-assigner/group-member-contribution-assigner.component';
+import {TaskIloAlignmentModalService} from './tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.service';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -295,6 +296,10 @@ DoubtfireAngularJSModule.factory(
   downgradeInjectable(UnitStudentEnrolmentModalService),
 );
 DoubtfireAngularJSModule.factory('PrivacyPolicy', downgradeInjectable(PrivacyPolicy));
+DoubtfireAngularJSModule.factory(
+  'TaskILOAlignmentModal',
+  downgradeInjectable(TaskIloAlignmentModalService),
+);
 
 // directive -> component
 DoubtfireAngularJSModule.directive(
@@ -488,6 +493,9 @@ DoubtfireAngularJSModule.directive(
 );
 
 // Global configuration
+// To compensate for rest unmigrated components
+angular.module('doubtfire.tasks.task-ilo-alignment.modals', []);
+angular.module('doubtfire.tasks.task-ilo-alignment.modals.task-ilo-alignment-modal', []);
 
 // If the user enters a URL that doesn't match any known URL (state), send them to `/home`
 const otherwiseConfigBlock = [

src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.component.html

@@ -0,0 +1,92 @@
+<h2 mat-dialog-title class="text-center">
+  How much does
+  <span class="label label-info mx-1" [matTooltip]="data.task.definition.name">
+    {{ data.task.definition.abbreviation }}
+  </span>
+  relate to
+  <span class="label label-info mx-1" [matTooltip]="data.ilo.name">
+    {{ data.ilo.abbreviation }} </span
+  >?
+</h2>
+
+<mat-dialog-content class="mat-typography">
+  <div class="flex flex-col items-center gap-4 mt-4">
+    <div class="flex flex-col items-center w-full">
+      <p class="text-gray-500 mb-2">Select Rating</p>
+
+      <!-- Custom Circle Rater -->
+      <div class="rating-container">
+        <!-- Loop 1 to 5 -->
+        <button
+          type="button"
+          *ngFor="let r of [1, 2, 3, 4, 5]"
+          class="rating-circle"
+          [ngClass]="{'filled': alignment.rating >= r}"
+          (click)="onRatingChange(r)"
+          [matTooltip]="alignmentLabels[r]"
+        ></button>
+      </div>
+
+      <!-- Rating Label Badge -->
+      <div class="mt-3 min-h-[2em]">
+        <span class="rating-label-badge" *ngIf="alignment.rating > 0">
+          {{ alignmentLabels[alignment.rating] }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Rationale Section -->
+    <div class="w-full rationale-wrapper px-4" *ngIf="alignment.rating > 0">
+      <!-- Display Mode -->
+      <div
+        *ngIf="!editingRationale"
+        class="rationale-display p-4 border rounded relative hover:bg-gray-50 cursor-pointer"
+        (click)="toggleEditRationale()"
+        matTooltip="Click to edit rationale"
+      >
+        <span class="rationale-header text-gray-500 text-lg font-bold uppercase block mb-2">
+          Provided Rationale
+        </span>
+
+        <div class="markdown-content" [innerHTML]="alignment.description || '' | marked"></div>
+
+        <div class="text-lg text-gray-400 italic mt-2" *ngIf="!alignment.description">
+          Click to add a rationale...
+        </div>
+      </div>
+
+      <!-- Edit Mode -->
+      <div *ngIf="editingRationale" class="flex flex-col animate-fade-in">
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Rationale</mat-label>
+          <textarea
+            matInput
+            [(ngModel)]="alignment.description"
+            rows="6"
+            placeholder="Explain why this task meets this outcome..."
+            autofocus
+          ></textarea>
+        </mat-form-field>
+        <button mat-button color="primary" class="self-end" (click)="toggleEditRationale()">
+          Done Editing
+        </button>
+      </div>
+    </div>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="px-4 pb-4">
+  <button
+    mat-mini-fab
+    color="warn"
+    *ngIf="alignment.id"
+    (click)="removeAlignmentItem()"
+    matTooltip="Remove this alignment"
+  >
+    <mat-icon>delete</mat-icon>
+  </button>
+  <span class="flex-grow"></span>
+  <button mat-fab color="primary" (click)="closeModal()" matTooltip="Save and Close">
+    <mat-icon>check</mat-icon>
+  </button>
+</mat-dialog-actions>

src/app/tasks/task-ilo-alignment/modals/task-ilo-alignment-modal/task-ilo-alignment-modal.component.scss

@@ -0,0 +1,78 @@
+@import '../../../../../theme.scss';
+
+.label-info {
+  background-color: #17a2b8;
+  color: white;
+  padding: 0.3em 0.8em;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25em;
+}
+
+.rating-container {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.rating-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  background-color: #e0e0e0;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: mix(#3f51b5, #e0e0e0, 20%);
+  }
+
+  // Filled state
+  &.filled {
+    background-color: #3f51b5;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+
+    &:hover {
+      background-color: darken(#3f51b5, 5%);
+    }
+  }
+}
+
+.rating-label-badge {
+  background-color: #303f9f;
+  color: white;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 1.5rem;
+  font-weight: 500;
+  display: inline-block;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  line-height: 1.4;
+}
+
+mat-dialog-content {
+  min-height: 350px;
+  overflow-y: auto;
+  padding-bottom: 20px;
+}
+
+// Rationale Text Area
+.rationale-display, .markdown-content {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.rationale-header {
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+}