Merge branch 'migrate/grade-task-modal' of https://github.com/thoth-t…

…ech/doubtfire-web into thoth-tech-migrate/grade-task-modal

README.md

@@ -227,11 +227,14 @@ TODO:
 
 ## Table of Contents
 
-1. [Getting Started](#getting-started)
-2. [Resources](#resources)
-3. [Contributing](#contributing)
-4. [Deployment](#deployment)
-5. [License](#license)
+- [Doubtfire Web ![CI](https://github.com/doubtfire-lms/doubtfire-web/actions/workflows/nodejs-ci.yml)](#doubtfire-web-)
+  - [Migration Progress](#migration-progress)
+  - [Table of Contents](#table-of-contents)
+  - [Getting Started](#getting-started)
+  - [Deployment](#deployment)
+  - [Resources](#resources)
+  - [Contributing](#contributing)
+  - [License](#license)
 
 ## Getting Started
 

src/app/api/models/task.ts

@@ -23,9 +23,10 @@ import {Grade} from './grade';
 import {LOCALE_ID} from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {Observable, map} from 'rxjs';
-import {gradeTaskModal, uploadSubmissionModal} from 'src/app/ajs-upgraded-providers';
+import {uploadSubmissionModal} from 'src/app/ajs-upgraded-providers';
 import {AlertService} from 'src/app/common/services/alert.service';
 import {MappingFunctions} from '../services/mapping-fn';
+import { GradeTaskModalService } from 'src/app/tasks/modals/grade-task-modal/grade-task-modal.service';
 
 export class Task extends Entity {
   id: number;
@@ -670,28 +671,22 @@ export class Task extends Entity {
         });
     }; // end update function
 
-    // Must provide grade if graded and in a final complete state
-    if (
-      (this.definition.isGraded || this.definition.maxQualityPts > 0) &&
-      TaskStatus.GRADEABLE_STATUSES.includes(status)
-    ) {
-      const gradeModal: any = AppInjector.get(gradeTaskModal);
-      const modal = gradeModal.show(this);
-      if (modal) {
-        modal.result.then(
-          // Grade was selected (modal closed with result)
-          (response) => {
-            this.grade = response.selectedGrade;
-            this.qualityPts = response.qualityPts;
-            updateFunc();
-          },
-          // Grade was not selected (modal was dismissed)
-          () => {
-            this.status = oldStatus;
-            alerts.message('Status reverted, as no grade was specified', 6000);
-          },
-        );
-      }
+    // Must provide grade if graded and in a final complete state - so use callback to run update function
+    if ((this.definition.isGraded || this.definition.maxQualityPts > 0) && TaskStatus.GRADEABLE_STATUSES.includes(status)) {
+      const gradeModal: GradeTaskModalService = AppInjector.get(GradeTaskModalService);
+      gradeModal.show(this,
+        // Grade was selected (modal closed with result)
+        (response) => {
+          this.grade = response.grade;
+          this.qualityPts = response.qualityPts;
+          updateFunc();
+        },
+        // Grade was not selected (modal was dismissed)
+        () => {
+          this.status = oldStatus;
+          alerts.message('Status reverted, as no grade was specified', 6000);
+        },
+      );
     } else {
       updateFunc();
     }

src/app/common/common.coffee

@@ -3,6 +3,5 @@ angular.module("doubtfire.common", [
   'doubtfire.common.filters'
   'doubtfire.common.modals'
   'doubtfire.common.file-uploader'
-  'doubtfire.common.grade-icon'
   'doubtfire.common.content-editable'
 ])

src/app/common/grade-icon/grade-icon.component.html

@@ -0,0 +1,3 @@
+<span class="grade-icon">
+  {{ gradeLetter }}
+</span>

src/app/common/grade-icon/grade-icon.component.scss

@@ -0,0 +1,13 @@
+.grade-icon {
+  color: #fff;
+  font-size: 1em;
+  border-radius: 100%;
+  width: 2.25em;
+  height: 2.25em;
+  font-weight: 100;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #333333;
+}

src/app/common/grade-icon/grade-icon.component.spec.ts

@@ -0,0 +1,86 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { GradeIconComponent } from './grade-icon.component';
+import { gradeService } from 'src/app/ajs-upgraded-providers';
+
+describe('GradeIconComponent', () => {
+  let component: GradeIconComponent;
+  let fixture: ComponentFixture<GradeIconComponent>;
+  let gradeServiceStub: jasmine.SpyObj<any>;
+
+  beforeEach(
+    waitForAsync(() => {
+      gradeServiceStub = {
+        grades: ['Pass', 'Credit', 'Distinction', 'High Distinction'],
+        gradeAcronyms: {
+          Fail: 'F',
+          Pass: 'P',
+          Credit: 'C',
+          Distinction: 'D',
+          'High Distinction': 'HD',
+          0: 'P',
+          1: 'C',
+          2: 'D',
+          3: 'HD',
+        },
+      };
+
+      gradeServiceStub.grades[-1] = 'Fail';
+      gradeServiceStub.gradeAcronyms[-1] = 'F';
+
+      TestBed.configureTestingModule({
+        declarations: [GradeIconComponent],
+        providers: [{ provide: gradeService, useValue: gradeServiceStub }],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GradeIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the index value when undefined', () => {
+    component.index = undefined;
+    component.ngOnInit();
+
+    expect(component.index).toEqual(-1);
+  });
+
+  it('should set the grade to Fail when given invalid input', () => {
+    component.index = undefined;
+    component.grade = 'Tomato';
+    component.ngOnInit();
+
+    expect(component.index).toEqual(-1);
+    expect(component.gradeText).toEqual('Fail');
+    expect(component.gradeLetter).toEqual('F');
+  });
+
+  it('should appropriate set the grade when passed a grade value', () => {
+    gradeServiceStub.grades.forEach((grade: string) => {
+      component.grade = grade;
+      component.index = undefined;
+      component.ngOnInit();
+
+      expect(component.index).toEqual(gradeServiceStub.grades.indexOf(grade));
+      expect(component.gradeText).toEqual(grade);
+      expect(component.gradeLetter).toEqual(gradeServiceStub.gradeAcronyms[grade]);
+    });
+  });
+
+  it('should appropriate set the grade when passed a grade index', () => {
+    gradeServiceStub.grades.forEach((_, index: number) => {
+      component.index = index - 1;
+      component.ngOnInit();
+
+      expect(component.index).toEqual(index - 1);
+      expect(component.gradeText).toEqual(gradeServiceStub.grades[component.index]);
+      expect(component.gradeLetter).toEqual(gradeServiceStub.gradeAcronyms[component.gradeText]);
+    });
+  });
+});

src/app/common/grade-icon/grade-icon.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { GradeService } from '../services/grade.service';
+
+@Component({
+  selector: 'grade-icon',
+  templateUrl: 'grade-icon.component.html',
+  styleUrls: ['grade-icon.component.scss'],
+})
+export class GradeIconComponent implements OnInit {
+  @Input() grade: string | number = 'F';
+  @Input() index: number;
+
+  gradeText: string;
+  gradeLetter: string;
+
+  constructor(private gradeService: GradeService) {}
+
+  ngOnInit(): void {
+    if (this.index == undefined) {
+      this.index = this.gradeService.gradeNumbers[this.grade] || this.grade;
+    }
+    this.gradeText = this.gradeService.grades[this.index];
+    this.gradeLetter = this.gradeService.gradeAcronyms[this.gradeText];
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -249,6 +249,8 @@ import {TaskScormCardComponent} from './projects/states/dashboard/directives/tas
 import {TestAttemptService} from './api/services/test-attempt.service';
 import {ScormExtensionCommentComponent} from './tasks/task-comments-viewer/scorm-extension-comment/scorm-extension-comment.component';
 import {ScormExtensionModalComponent} from './common/modals/scorm-extension-modal/scorm-extension-modal.component';
+import { GradeIconComponent } from './common/grade-icon/grade-icon.component';
+import { GradeTaskModalComponent } from './tasks/modals/grade-task-modal/grade-task-modal.component';
 
 // 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 = {
@@ -337,6 +339,8 @@ const MY_DATE_FORMAT = {
     TaskDropdownComponent,
     SplashScreenComponent,
     ProjectDashboardComponent,
+    GradeIconComponent,
+    GradeTaskModalComponent,
     ObjectSelectComponent,
     WelcomeComponent,
     AcceptEulaComponent,

src/app/doubtfire-angularjs.module.ts

@@ -43,7 +43,6 @@ import 'build/src/app/visualisations/achievement-custom-bar-chart.js';
 import 'build/src/app/visualisations/alignment-bar-chart.js';
 import 'build/src/app/visualisations/achievement-box-plot.js';
 import 'build/src/app/tasks/modals/upload-submission-modal/upload-submission-modal.js';
-import 'build/src/app/tasks/modals/grade-task-modal/grade-task-modal.js';
 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';
@@ -119,7 +118,6 @@ import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
 import 'build/src/app/common/modals/comments-modal/comments-modal.js';
 import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
 import 'build/src/app/common/modals/modals.js';
-import 'build/src/app/common/grade-icon/grade-icon.js';
 import 'build/src/app/common/file-uploader/file-uploader.js';
 import 'build/src/app/common/common.js';
 import 'build/src/app/common/services/listener-service.js';
@@ -195,6 +193,8 @@ import { HeaderComponent } from './common/header/header.component';
 import { SplashScreenComponent } from './home/splash-screen/splash-screen.component';
 import { GlobalStateService } from './projects/states/index/global-state.service';
 import { TransitionHooksService } from './sessions/transition-hooks.service';
+import { GradeIconComponent } from './common/grade-icon/grade-icon.component';
+import { GradeTaskModalService } from './tasks/modals/grade-task-modal/grade-task-modal.service';
 import { AuthenticationService } from './api/services/authentication.service';
 import { ProjectService } from './api/services/project.service';
 import { ObjectSelectComponent } from './common/obect-select/object-select.component';
@@ -211,7 +211,6 @@ import { InboxComponent } from './units/states/tasks/inbox/inbox.component';
 import { TaskDefinitionEditorComponent } from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component';
 import { UnitAnalyticsComponent } from './units/states/analytics/unit-analytics-route.component';
 import { UnitTaskEditorComponent } from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
-import { TeachingPeriodUnitImportService } from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
 import { CreateNewUnitModal } from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
 import { FUsersComponent } from './admin/states/users/users.component';
 import { FUnitTaskListComponent } from './units/task-viewer/directives/unit-task-list/unit-task-list.component';
@@ -304,12 +303,17 @@ DoubtfireAngularJSModule.factory(
   downgradeInjectable(EditProfileDialogService),
 );
 DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(CreateNewUnitModal));
+DoubtfireAngularJSModule.factory('GradeTaskModal', downgradeInjectable(GradeTaskModalService));
 
 // directive -> component
 DoubtfireAngularJSModule.directive(
   'fProjectTasksList',
   downgradeComponent({component: ProjectTasksListComponent}),
 );
+DoubtfireAngularJSModule.directive(
+  'gradeIcon',
+  downgradeComponent({component: GradeIconComponent}),
+);
 DoubtfireAngularJSModule.directive(
   'taskCommentComposer',
   downgradeComponent({component: TaskCommentComposerComponent}),