diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index c714ff0e5a..0a2f3ac947 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/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, diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts index d9dc6955d5..ad2e1b19af 100644 --- a/src/app/doubtfire-angularjs.module.ts +++ b/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}), +); diff --git a/src/app/units/modals/modals.coffee b/src/app/units/modals/modals.coffee deleted file mode 100644 index 9b2b2c391f..0000000000 --- a/src/app/units/modals/modals.coffee +++ /dev/null @@ -1,3 +0,0 @@ -angular.module('doubtfire.units.modals', [ - 'doubtfire.units.modals.unit-ilo-edit-modal' -]) diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee deleted file mode 100644 index 084f2cc69e..0000000000 --- a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.coffee +++ /dev/null @@ -1,54 +0,0 @@ -angular.module('doubtfire.units.modals.unit-ilo-edit-modal', []) -# -# Modal to edit or create a new ILO -# -.factory('UnitILOEditModal', ($modal) -> - UnitILOEditModalCtrl = {} - - # - # Provide unit, and optionally a ILO. If no ILO is provided - # it will assume you want to make a new ILO - # - UnitILOEditModalCtrl.show = (unit, ilo) -> - $modal.open - controller: 'UnitILOEditModalCtrl' - templateUrl: 'units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html' - resolve: { - ilo: -> ilo - unit: -> unit - } - - UnitILOEditModalCtrl -) -.controller('UnitILOEditModalCtrl', ($scope, $modalInstance, alertService, ilo, unit, newLearningOutcomeService) -> - prototypeIlo = { name: null, description: null, abbreviation: null } - $scope.ilo = ilo or prototypeIlo - $scope.isNew = !ilo? - - $scope.saveILO = -> - if $scope.isNew - newLearningOutcomeService.create({ - unitId: unit.id - }, { - body: { - name: $scope.ilo.name - description: $scope.ilo.description - abbreviation: $scope.ilo.abbreviation - }, - cache: unit.learningOutcomesCache - }).subscribe({ - next: (response) -> - $modalInstance.close(response) - alertService.success( "Intended Learning Outcome Added", 2000) - error: (response) -> - alertService.error( response, 6000) - }) - else - newLearningOutcomeService.update( {unitId: unit.id, id: ilo.id}, {entity: ilo}).subscribe({ - next: (response) -> - $modalInstance.close(response) - alertService.success( "Intended Learning Outcome Updated", 2000) - error: (response) -> - alertService.error( response, 6000) - }) -) diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.html b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.html new file mode 100644 index 0000000000..5e58a310db --- /dev/null +++ b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.html @@ -0,0 +1,78 @@ +
+
+
+

{{ isNew ? 'Create Learning Outcome' : 'Edit Learning Outcome: ' + ilo.iloNumber }}

+
+ +
+ +
+
+ +
+
+ + + +
+
+ + +
+
+ +
+
+ + + +
+
+ + +
+
+ +
+
+ + + +
+
+
+ +
+ +
+
+
diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.scss b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.scss new file mode 100644 index 0000000000..b116c78f0b --- /dev/null +++ b/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; +} diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.ts b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.component.ts new file mode 100644 index 0000000000..d337875d4d --- /dev/null +++ b/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, + @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(); + } +} diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.service.ts b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.service.ts new file mode 100644 index 0000000000..a65dca6c6c --- /dev/null +++ b/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', + }); + } +} diff --git a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html b/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html deleted file mode 100644 index 94c09e2b96..0000000000 --- a/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.tpl.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-
-

{{isNew ? "Create Learning Outcome" : "Edit Learning Outcome: " + ilo.iloNumber}}

-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
-
-
diff --git a/src/app/units/units.coffee b/src/app/units/units.coffee index 1aab3228fc..a4ad4c20fc 100644 --- a/src/app/units/units.coffee +++ b/src/app/units/units.coffee @@ -1,4 +1,3 @@ angular.module('doubtfire.units', [ - 'doubtfire.units.modals' 'doubtfire.units.states' ])