Migration grade icon rebase onto origin 8.0.x

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,16 @@
+<div>
+  <span
+    class="text-white bg-[#333] rounded-full font-[100] text-[1em] flex justify-center items-center w-[2.25em] h-[2.25em] m-0"
+    [ngClass]="{
+      colorful: colorful,
+      'grade-0': grade === 0,
+      'grade-1': grade === 1,
+      'grade-2': grade === 2,
+      'grade-3': grade === 3
+    }"
+    matTooltipPosition="above"
+    matTooltip="{{ gradeText }}"
+  >
+    {{ gradeLetter }}
+  </span>
+</div>

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

@@ -0,0 +1,6 @@
+.text-left .grade-icon {
+  margin-left: 0;
+}
+.text-right .grade-icon {
+ margin-right: 0;
+}

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

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {GradeService} from '../services/grade.service';
+
+@Component({
+  selector: 'f-grade-icon',
+  templateUrl: './grade-icon.component.html',
+  styleUrls: ['./grade-icon.component.scss'],
+})
+export class GradeIconComponent implements OnInit, OnChanges {
+  @Input() grade?: number | string;
+  @Input() colorful: boolean = false;
+
+  gradeText: string = 'Grade';
+  gradeLetter: string = 'G';
+
+  constructor(private gradeService: GradeService) {}
+
+  ngOnInit(): void {
+    this.updateGrade();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['grade']) {
+      this.updateGrade();
+    }
+  }
+
+  private updateGrade(): void {
+    const grade: number =
+      typeof this.grade === 'string' ? this.gradeService.stringToGrade(this.grade) : this.grade;
+    this.gradeText = this.gradeService.grades[grade] || 'Grade';
+    this.gradeLetter = this.gradeService.gradeAcronyms[grade] || 'G';
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -170,6 +170,7 @@ import {TaskAssessmentModalComponent} from './common/modals/task-assessment-moda
 import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
 import {HomeComponent} from './home/states/home/home.component';
 import {IsActiveUnitRole} from './common/pipes/is-active-unit-role.pipe';
+import {GradeIconComponent} from './common/grade-icon/grade-icon.component';
 import {HeaderComponent} from './common/header/header.component';
 import {UnitDropdownComponent} from './common/header/unit-dropdown/unit-dropdown.component';
 import {TaskDropdownComponent} from './common/header/task-dropdown/task-dropdown.component';
@@ -316,6 +317,7 @@ const MY_DATE_FORMAT = {
     TaskAssessmentCommentComponent,
     TaskAssessmentModalComponent,
     TaskSubmissionHistoryComponent,
+    GradeIconComponent,
     HeaderComponent,
     UnitDropdownComponent,
     TaskDropdownComponent,

src/app/doubtfire-angularjs.module.ts

@@ -122,7 +122,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';
@@ -193,6 +192,7 @@ import {CheckForUpdateService} from './sessions/service-worker-updater/check-for
 import {TaskSubmissionService} from './common/services/task-submission.service';
 import {TaskAssessmentModalService} from './common/modals/task-assessment-modal/task-assessment-modal.service';
 import {TaskSubmissionHistoryComponent} from './tasks/task-submission-history/task-submission-history.component';
+import {GradeIconComponent} from './common/grade-icon/grade-icon.component';
 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';
@@ -313,6 +313,7 @@ DoubtfireAngularJSModule.directive(
   'objectSelect',
   downgradeComponent({component: ObjectSelectComponent}),
 );
+DoubtfireAngularJSModule.directive('fGradeIcon', downgradeComponent({component: GradeIconComponent}));
 DoubtfireAngularJSModule.directive('appHeader', downgradeComponent({component: HeaderComponent}));
 DoubtfireAngularJSModule.directive(
   'splashScreen',

src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.tpl.html

@@ -1,41 +1,41 @@
-<div class="group-member-contribution-assigner">
-  <table class="table table-condensed table-hover">
-    <thead>
-      <tr>
-        <th><a ng-click="memberSortOrder='student_name'; reverse=!reverse">Team Member</a></th>
-        <th><a ng-click="memberSortOrder='targetGrade'; reverse=!reverse">Target Grade</a></th>
-        <th class="col-sm-4"><a ng-click="memberSortOrder='rating'; reverse=!reverse">Contribution</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr ng-repeat="contrib in team.memberContributions | orderBy:memberSortOrder:reverse">
-        <td>{{contrib.project.student.name}}</td>
-        <td class="text-left">
-          <grade-icon grade="contrib.project.targetGrade"></grade-icon>
-        </td>
-        <td>
-          <rating
-            class="group-member-contribution-rating"
-            ng-click="checkClearRating(contrib)"
-            ng-model="contrib.rating"
-            on-hover="hoveringOver(contrib, value)"
-            on-leave="hoveringOver(contrib, null)"
-            max="numStars"
-            state-on="'fa fa-child rating-outline'"
-            state-off="'fa fa-child rating-disabled'">
-          </rating>
-          <span
-            class="label {{percentClass(contrib.percent)}}"
-            ng-show="contrib.overStar">
-            <span ng-show="contrib.percent > 0">
-              {{contrib.percent}} % effort
-            </span>
-            <span ng-hide="contrib.percent > 0">
-              No effort
-            </span>
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<div class="group-member-contribution-assigner">
+  <table class="table table-condensed table-hover">
+    <thead>
+      <tr>
+        <th><a ng-click="memberSortOrder='student_name'; reverse=!reverse">Team Member</a></th>
+        <th><a ng-click="memberSortOrder='targetGrade'; reverse=!reverse">Target Grade</a></th>
+        <th class="col-sm-4"><a ng-click="memberSortOrder='rating'; reverse=!reverse">Contribution</a></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="contrib in team.memberContributions | orderBy:memberSortOrder:reverse">
+        <td>{{contrib.project.student.name}}</td>
+        <td class="text-left">
+          <f-grade-icon [grade]="contrib.project.targetGrade"></f-grade-icon>
+        </td>
+        <td>
+          <rating
+            class="group-member-contribution-rating"
+            ng-click="checkClearRating(contrib)"
+            ng-model="contrib.rating"
+            on-hover="hoveringOver(contrib, value)"
+            on-leave="hoveringOver(contrib, null)"
+            max="numStars"
+            state-on="'fa fa-child rating-outline'"
+            state-off="'fa fa-child rating-disabled'">
+          </rating>
+          <span
+            class="label {{percentClass(contrib.percent)}}"
+            ng-show="contrib.overStar">
+            <span ng-show="contrib.percent > 0">
+              {{contrib.percent}} % effort
+            </span>
+            <span ng-hide="contrib.percent > 0">
+              No effort
+            </span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/groups/group-member-list/group-member-list.tpl.html

@@ -38,7 +38,7 @@ <h4>No members in group</h4>
       <td class="student-id" ng-show="unitRole">{{member.student.username || "N/A"}}</td>
       <td class="student-name">{{member.student.name}}</td>
       <td ng-show="unitRole" class="student-grade text-left">
-        <grade-icon grade="member.targetGrade"></grade-icon>
+        <f-grade-icon [grade]="member.targetGrade"></f-grade-icon>
       </td>
       <td class="actions" ng-if="canRemoveMembers">
         <button ng-click="removeMember(member)" class="btn btn-sm btn-danger" ng-hide="project">

src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html

@@ -22,7 +22,7 @@ <h3 class="panel-title">Target Grade</h3>
           <div class="panel-body text-center">
             <p class="btn-group">
               <label ng-repeat="grade in grades" ng-if="$index != 4" ng-click="chooseGrade($index)" class="btn btn-default col-sm-3 text-center" ng-model="project.targetGrade" btn-radio="{{$index}}">
-                <grade-icon grade="grade" tooltip="Select a {{grade}} as your target grade" tooltip-append-to-body="true" class="text-{{$index == project.targetGrade ? 'primary' : 'muted'}}"></grade-icon>
+                <f-grade-icon [grade]="grade" tooltip="Select a {{grade}} as your target grade" tooltip-append-to-body="true" class="text-{{$index == project.targetGrade ? 'primary' : 'muted'}}"></f-grade-icon>
               </label>
             </p>
           </div>

src/app/projects/states/portfolio/directives/portfolio-grade-select-step/portfolio-grade-select-step.tpl.html

@@ -34,10 +34,10 @@ <h4>Grade Application</h4>
             ng-model="project.submittedGrade"
             btn-radio="{{$index}}"
           >
-            <grade-icon
-              grade="grade"
+            <f-grade-icon
+              [grade]="grade"
               class="text-{{project.submittedGrade == grades.indexOf(grade) ? 'success' : 'muted'}}"
-            ></grade-icon>
+            ></f-grade-icon>
           </label>
         </div>
         <p class="help-block">

src/app/tasks/modals/grade-task-modal/grade-task-modal.tpl.html

@@ -1,27 +1,27 @@
-<div class="grade-task-modal">
-  <div class="modal-header">
-    <h3>Assess Task Quality</h3>
-  </div>
-  <div class="modal-body text-center">
-    <div ng-if="task.definition.isGraded">
-      <p>Please provide a grade to change the student's status for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <p class="btn-group">
-        <label ng-repeat="idx in gradeValues" class="btn btn-default col-sm-15 text-center" ng-model="data.desiredGrade" btn-radio="{{idx}}">
-          <grade-icon grade="grades[idx]" tooltip="This student completed the task to a {{grades[idx]}} standard" tooltip-append-to-body="true"></grade-icon>
-        </label>
-      </p>
-    </div>
-    <div ng-if="task.definition.maxQualityPts > 0">
-      <p>Please provide a quality rating for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
-      <rating class="task-quality-rating" ng-click="checkClearRating()" ng-model="data.rating" on-hover="hoveringOver(value)" on-leave="hoveringOver(null)" max="numStars" state-on="'fa fa-3x fa-star icon-colorful'" state-off="'fa fa-3x fa-star icon-disable'"></rating>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button class="btn btn-default" ng-click="dismiss()">
-      <i class="fa fa-times"></i>
-    </button>
-    <button class="btn btn-primary" ng-click="close()" ng-disabled="task.isGraded && data.desiredGrade == null">
-      <i class="fa fa-check"></i>
-    </button>
-  </div>
-</div>
+<div class="grade-task-modal">
+  <div class="modal-header">
+    <h3>Assess Task Quality</h3>
+  </div>
+  <div class="modal-body text-center">
+    <div ng-if="task.definition.isGraded">
+      <p>Please provide a grade to change the student's status for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
+      <p class="btn-group">
+        <label ng-repeat="idx in gradeValues" class="btn btn-default col-sm-15 text-center" ng-model="data.desiredGrade" btn-radio="{{idx}}">
+          <f-grade-icon [grade]="grades[idx]" tooltip="This student completed the task to a {{grades[idx]}} standard" tooltip-append-to-body="true"></f-grade-icon>
+        </label>
+      </p>
+    </div>
+    <div ng-if="task.definition.maxQualityPts > 0">
+      <p>Please provide a quality rating for task <label class="label label-info">{{task.definition.abbreviation}}</label>.</p>
+      <rating class="task-quality-rating" ng-click="checkClearRating()" ng-model="data.rating" on-hover="hoveringOver(value)" on-leave="hoveringOver(null)" max="numStars" state-on="'fa fa-3x fa-star icon-colorful'" state-off="'fa fa-3x fa-star icon-disable'"></rating>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="dismiss()">
+      <i class="fa fa-times"></i>
+    </button>
+    <button class="btn btn-primary" ng-click="close()" ng-disabled="task.isGraded && data.desiredGrade == null">
+      <i class="fa fa-check"></i>
+    </button>
+  </div>
+</div>

src/app/units/states/portfolios/portfolios.tpl.html

@@ -64,12 +64,12 @@ <h4 class="panel-title">Mark Portfolios</h4>
               ng-model="filterOptions.selectedGrade"
               btn-radio="{{$index}}"
             >
-              <grade-icon
-                grade="grade"
+              <f-grade-icon
+                [grade]="grade"
                 tooltip="Select to show student's aiming for {{grades[grade]}}"
                 tooltip-append-to-body="true"
                 class="text-{{$index == filterOptions.selectedGrade ? 'primary' : 'muted'}}"
-              ></grade-icon>
+              ></f-grade-icon>
             </label>
           </div>
         </div>
@@ -194,10 +194,10 @@ <h4 class="panel-title">Mark Portfolios</h4>
             <td>{{student.tutorNames()}}</td>
             <td>{{student.shortTutorialDescription()}}</td>
             <td class="flags-data">
-              <grade-icon grade="student.targetGrade"></grade-icon>
+              <f-grade-icon [grade]="student.targetGrade"></f-grade-icon>
             </td>
             <td class="flags-data">
-              <grade-icon grade="student.submittedGrade"></grade-icon>
+              <f-grade-icon [grade]="student.submittedGrade"></f-grade-icon>
             </td>
             <td class="task-progress-bar">
               <progress class="task-progress" animate="true">