Migrate Unit ilo Edit Modal

src/app/doubtfire-angular.module.ts

@@ -253,6 +253,8 @@ import {ScormExtensionModalComponent} from './common/modals/scorm-extension-moda
 import { GradeIconComponent } from './common/grade-icon/grade-icon.component';
 import { GradeTaskModalComponent } from './tasks/modals/grade-task-modal/grade-task-modal.component';
 import { PrivacyPolicy } from './config/privacy-policy/privacy-policy';
+import {UnitILOEditModalComponent} from './units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component';
+import {UnitILOEditModalService} from './units/modals/unit-ilo-edit-modal/unit-ilo-edit-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 = {
@@ -389,6 +391,7 @@ import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-
     TaskScormCardComponent,
     ScormExtensionCommentComponent,
     ScormExtensionModalComponent,
+    UnitILOEditModalComponent,
   ],
   // Services we provide
   providers: [
@@ -468,6 +471,7 @@ import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-
     provideLottieOptions({
       player: () => player,
     }),
+    UnitILOEditModalService,
   ],
   imports: [
     FlexLayoutModule,

src/app/doubtfire-angularjs.module.ts

@@ -89,8 +89,6 @@ import 'build/src/app/groups/groups.js';
 import 'build/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.js';
 import 'build/src/app/groups/group-member-list/group-member-list.js';
 import 'build/src/app/groups/group-set-selector/group-set-selector.js';
-import 'build/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.js';
-import 'build/src/app/units/modals/modals.js';
 import 'build/src/app/units/units.js';
 import 'build/src/app/units/states/tasks/inbox/inbox.js';
 import 'build/src/app/units/states/tasks/tasks.js';
@@ -224,6 +222,8 @@ import {GradeService} from './common/services/grade.service';
 import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
 import { UnitStudentEnrolmentModalService } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
 import { PrivacyPolicy } from './config/privacy-policy/privacy-policy';
+import {UnitILOEditModalComponent} from './units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component';
+import {UnitILOEditModalService} from './units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.service';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -304,6 +304,7 @@ DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(Creat
 DoubtfireAngularJSModule.factory('GradeTaskModal', downgradeInjectable(GradeTaskModalService));
 DoubtfireAngularJSModule.factory('UnitStudentEnrolmentModal', downgradeInjectable(UnitStudentEnrolmentModalService));
 DoubtfireAngularJSModule.factory('PrivacyPolicy', downgradeInjectable(PrivacyPolicy));
+DoubtfireAngularJSModule.factory('UnitILOEditModal', downgradeInjectable(UnitILOEditModalService));
 
 // directive -> component
 DoubtfireAngularJSModule.directive(
@@ -495,3 +496,8 @@ DoubtfireAngularJSModule.directive(
   'fTaskVisualisation',
   downgradeComponent({ component: TaskVisualisationComponent })
 );
+
+DoubtfireAngularJSModule.directive(
+  'unitILOEditModalComponent',
+  downgradeComponent({component: UnitILOEditModalComponent}),
+);

src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.html

@@ -0,0 +1,78 @@
+<div class="unit-ilo-edit-modal">
+  <form (ngSubmit)="saveILO()" role="form">
+    <div mat-dialog-title>
+      <h3>{{ isNew ? 'Create Learning Outcome' : 'Edit Learning Outcome: ' + ilo.iloNumber }}</h3>
+    </div>
+
+    <div mat-dialog-content>
+      <!-- Name -->
+      <div fxLayout="row" fxLayoutAlign="start start" style="margin-bottom: 16px;">
+        <div fxFlex="20%" class="text-right font-bold pr-8">
+          <label for="ilo-name">Name</label>
+        </div>
+        <div fxFlex="80%">
+          <mat-form-field appearance="outline" style="width: 100%">
+            <input
+              matInput
+              id="ilo-name"
+              [(ngModel)]="ilo.name"
+              placeholder="Outcome Name"
+              name="name"
+              required
+            />
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- Abbreviation -->
+      <div fxLayout="row" fxLayoutAlign="start start" style="margin-bottom: 16px;">
+        <div fxFlex="20%" class="text-right font-bold pr-8">
+          <label for="ilo-abbreviation">Abbreviation</label>
+        </div>
+        <div fxFlex="80%">
+          <mat-form-field appearance="outline" style="width: 100%">
+            <input
+              matInput
+              id="ilo-abbreviation"
+              [(ngModel)]="ilo.abbreviation"
+              placeholder="ABBR"
+              name="abbreviation"
+              required
+            />
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- Description -->
+      <div fxLayout="row" fxLayoutAlign="start start" style="margin-bottom: 0;">
+        <div fxFlex="20%" class="text-right font-bold pr-8">
+          <label for="ilo-description">Description</label>
+        </div>
+        <div fxFlex="80%">
+          <mat-form-field appearance="outline" style="width: 100%">
+            <textarea
+              matInput
+              id="ilo-description"
+              [(ngModel)]="ilo.description"
+              placeholder="Enter markdown description..."
+              name="description"
+              style="min-height: 120px"
+              required
+            ></textarea>
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+
+    <div mat-dialog-actions align="end">
+      <button
+        mat-raised-button
+        color="primary"
+        type="submit"
+        [disabled]="!ilo.name || !ilo.abbreviation || !ilo.description"
+      >
+        {{ isNew ? 'Create' : 'Update' }}
+      </button>
+    </div>
+  </form>
+</div>

src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.scss

@@ -0,0 +1,8 @@
+// Label styling
+.label {
+  display: inline-block;
+  width: 120px;
+  margin-right: 8px;
+  vertical-align: middle;
+  font-weight: 600;
+}

src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {LearningOutcomeService} from 'src/app/api/services/learning-outcome.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'unit-ilo-edit-modal',
+  templateUrl: 'unit-ilo-edit-modal.component.html',
+  styleUrls: ['unit-ilo-edit-modal.component.scss'],
+})
+export class UnitILOEditModalComponent {
+  prototypeIlo = {name: null, description: null, abbreviation: null};
+  ilo: any;
+  isNew: boolean;
+
+  constructor(
+    public dialogRef: MatDialogRef<UnitILOEditModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private alertService: AlertService,
+    private newLearningOutcomeService: LearningOutcomeService,
+  ) {
+    this.ilo = data.ilo || this.prototypeIlo;
+    this.isNew = !data.ilo;
+  }
+
+  saveILO(): void {
+    if (this.isNew) {
+      this.newLearningOutcomeService
+        .create(
+          {
+            unitId: this.data.unit.id,
+          },
+          {
+            body: {
+              name: this.ilo.name,
+              description: this.ilo.description,
+              abbreviation: this.ilo.abbreviation,
+            },
+            cache: this.data.unit.learningOutcomesCache,
+          },
+        )
+        .subscribe({
+          next: (response) => {
+            this.dialogRef.close(response);
+            this.alertService.success('Intended Learning Outcome Added', 2000);
+          },
+          error: (response) => {
+            this.alertService.error(response, 6000);
+          },
+        });
+    } else {
+      this.newLearningOutcomeService
+        .update(
+          {
+            unitId: this.data.unit.id,
+            id: this.ilo.id,
+          },
+          {
+            entity: this.ilo,
+          },
+        )
+        .subscribe({
+          next: (response) => {
+            this.dialogRef.close(response);
+            this.alertService.success('Intended Learning Outcome Updated', 2000);
+          },
+          error: (response) => {
+            this.alertService.error(response, 6000);
+          },
+        });
+    }
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.service.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {UnitILOEditModalComponent} from './unit-ilo-edit-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UnitILOEditModalService {
+  constructor(private dialog: MatDialog) {}
+
+  show(unit: any, ilo?: any): void {
+    this.dialog.open(UnitILOEditModalComponent, {
+      data: {unit, ilo},
+      width: '600px',
+      panelClass: 'unit-ilo-edit-modal',
+    });
+  }
+}

src/app/units/units.coffee

@@ -1,4 +1,3 @@
 angular.module('doubtfire.units', [
-  'doubtfire.units.modals'
   'doubtfire.units.states'
 ])