MOBILE-3958 grades: Display icon and color in grades

scripts/langindex.json

@@ -1734,6 +1734,7 @@
   "core.grades.calculatedgrade": "grades",
   "core.grades.category": "grades",
   "core.grades.contributiontocoursetotal": "grades",
+  "core.grades.fail": "grades",
   "core.grades.feedback": "grades",
   "core.grades.grade": "grades",
   "core.grades.gradeitem": "grades",
@@ -1744,6 +1745,7 @@
   "core.grades.nogradesreturned": "grades",
   "core.grades.nooutcome": "grades",
   "core.grades.outcome": "grades",
+  "core.grades.pass": "grades",
   "core.grades.percentage": "grades",
   "core.grades.range": "grades",
   "core.grades.rank": "grades",

src/core/features/grades/lang.json

@@ -6,6 +6,7 @@
     "calculatedgrade": "Calculated grade",
     "category": "Category",
     "contributiontocoursetotal": "Contribution to course total",
+    "fail": "Fail",
     "feedback": "Feedback",
     "grade": "Grade",
     "gradeitem": "Grade item",
@@ -16,6 +17,7 @@
     "nogradesreturned": "No grades returned",
     "nooutcome": "No outcome",
     "outcome": "Outcome",
+    "pass": "Pass",
     "percentage": "Percentage",
     "range": "Range",
     "rank": "Rank",

src/core/features/grades/pages/course/course.html

@@ -49,8 +49,8 @@
                                     <span [innerHTML]="row.gradeitem"></span>
                                 </th>
                                 <ng-container *ngFor="let column of columns">
-                                    <td *ngIf="column.name !== 'gradeitem' && column.name !== 'feedback' && row[column.name] != undefined"
+                                    <td *ngIf="column.name !== 'gradeitem' && column.name !== 'feedback' && column.name !== 'grade' &&
-                                        [class]="'ion-text-start core-grades-table-' + column.name"
+                                        row[column.name] != undefined" [class]="'ion-text-start core-grades-table-' + column.name"
                                         [class.ion-hide-md-down]="column.hiddenPhone" [innerHTML]="row[column.name]">
                                     </td>
                                     <td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
@@ -59,6 +59,12 @@
                                             [contextInstanceId]="courseId">
                                         </core-format-text>
                                     </td>
+                                    <td *ngIf="column.name === 'grade'" [class.ion-hide-md-down]="column.hiddenPhone"
+                                        class="ion-text-start core-grades-table-grade {{row.gradeClass}}">
+                                        <ion-icon *ngIf="row.gradeIcon" [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt">
+                                        </ion-icon>
+                                        <span [innerHTML]="row[column.name]"></span>
+                                    </td>
                                 </ng-container>
                             </ng-container>
                         </tr>

src/core/features/grades/pages/course/course.scss

@@ -42,7 +42,7 @@
     }
 
     th, td {
-        @include padding(10px, 10px, 10px, null);
+        @include padding(8px, 8px, 8px, null);
         vertical-align: top;
         white-space: normal;
         text-align: start;
@@ -55,7 +55,7 @@
     }
 
     thead #gradeitem {
-        @include padding(null, null, null, 23px);
+        @include padding(null, null, null, 24px);
     }
 
     tbody th {
@@ -63,11 +63,11 @@
     }
 
     tbody #gradeitem {
-        @include padding(null, null, null, 5px);
+        @include padding(null, null, null, 4px);
     }
 
     .core-grades-table-gradeitem {
-        @include padding(null, null, null, 5px);
+        @include padding(null, null, null, 4px);
         font-weight: bold;
 
         &.column-itemname {
@@ -90,7 +90,7 @@
         }
 
         span {
-            @include margin(null, null, null, 5px);
+            @include margin(null, null, null, 4px);
         }
 
         .expandable-status-icon {
@@ -101,7 +101,7 @@
     }
 
     .core-grades-table-feedback {
-        @include padding(null, null, null, 5px);
+        @include padding(null, null, null, 4px);
 
         .no-overflow {
             overflow: auto;
@@ -109,6 +109,12 @@
 
     }
 
+    .core-grades-table-grade {
+        ion-icon {
+            @include padding(null, 4px, null, null);
+        }
+    }
+
     .dimmed_text,
     .hidden {
         opacity: .7;

src/core/features/grades/services/grades-helper.ts

@@ -108,7 +108,7 @@ export class CoreGradesHelperProvider {
 
             let content = String(column.content);
 
-            if (name == 'itemname') {
+            if (name === 'itemname') {
                 const itemNameColumn = <CoreGradesTableItemNameColumn> column;
 
                 row.id = parseInt(itemNameColumn.id.split('_')[1], 10);
@@ -123,6 +123,20 @@ export class CoreGradesHelperProvider {
                 content = content.replace(/<\/span>/gi, '\n');
                 content = CoreTextUtils.cleanTags(content);
                 name = 'gradeitem';
+            } else if (name === 'grade') {
+                // Add the pass/fail class if present.
+                row.gradeClass = column.class.includes('gradepass') ? 'text-success' :
+                    (column.class.includes('gradefail') ? 'text-danger' : '');
+
+                if (content.includes('fa-check')) {
+                    row.gradeIcon = 'fas-check';
+                    row.gradeIconAlt = Translate.instant('core.grades.pass');
+                    content = CoreTextUtils.cleanTags(content);
+                } else if (content.includes('fa-times')) {
+                    row.gradeIcon = 'fas-times';
+                    row.gradeIconAlt = Translate.instant('core.grades.fail');
+                    content = CoreTextUtils.cleanTags(content);
+                }
             } else {
                 content = CoreTextUtils.replaceNewLines(content, '<br>');
             }
@@ -721,6 +735,9 @@ export type CoreGradesFormattedTableRow = CoreGradesFormattedRowCommonData & {
     ariaLabel?: string;
     expandable?: boolean;
     expanded?: boolean;
+    gradeClass?: string;
+    gradeIcon?: string;
+    gradeIconAlt?: string;
 };
 
 export type CoreGradesFormattedTableColumn = {