[TEAMMATES#12329] Refactoring of sortable tables - Student list (TEAM…

…MATES#12539)
jasonqiu212 · Sep 23, 2023 · 23f92b7 · 23f92b7
1 parent 52b0156
commit 23f92b7
Show file tree

Hide file tree

Showing 16 changed files with 3,298 additions and 2,511 deletions.
diff --git a/src/e2e/java/teammates/e2e/cases/InstructorCourseDetailsPageE2ETest.java b/src/e2e/java/teammates/e2e/cases/InstructorCourseDetailsPageE2ETest.java
@@ -116,7 +116,7 @@ public void testAll() {
         ______TS("delete student");
         detailsPage.sortByName();
         detailsPage.sortByStatus();
-        StudentAttributes[] studentsAfterDelete = { students[3], students[0], students[1] };
+        StudentAttributes[] studentsAfterDelete = { students[0], students[3], students[1] };
         detailsPage.deleteStudent(student);
 
         detailsPage.verifyStatusMessage("Student is successfully deleted from course \""

diff --git a/...ents/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap b/...ents/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap
@@ -204,7 +204,9 @@ exports[`ExtensionConfirmModalComponent should snap with the extended students a
                   testStudent1@gmail.com
                 </td>
                 <td>
-                  5 Apr 2000 2:00:00
+                  <span>
+                    5 Apr 2000 2:00:00
+                  </span>
                 </td>
               </tr>
               <tr>
@@ -221,7 +223,9 @@ exports[`ExtensionConfirmModalComponent should snap with the extended students a
                   testStudent2@gmail.com
                 </td>
                 <td>
-                  5 Apr 2000 2:00:00
+                  <span>
+                    5 Apr 2000 2:00:00
+                  </span>
                 </td>
               </tr>
               <tr>
@@ -238,7 +242,9 @@ exports[`ExtensionConfirmModalComponent should snap with the extended students a
                   testStudent3@gmail.com
                 </td>
                 <td>
-                  5 Apr 2000 2:00:00
+                  <span>
+                    5 Apr 2000 2:00:00
+                  </span>
                 </td>
               </tr>
             </tbody>

diff --git a/src/web/app/components/sortable-table/sortable-table.component.html b/src/web/app/components/sortable-table/sortable-table.component.html
@@ -1,6 +1,6 @@
 <table class="table table-bordered table-striped">
   <thead>
-    <tr [ngClass]="{ 'bg-primary': setMainTableStyle, 'text-white': setMainTableStyle}">
+    <tr [ngClass]="setMainTableStyle ? 'bg-primary text-white' : customHeaderStyle">
       <th *ngFor="let column of columns" [ngClass]="{ 'sortable-header': column.sortBy }" class="{{column?.headerClass}}"
         [ngStyle]="getAlignment(column)" (click)="column.sortBy && onClickHeader(column.header)" [attr.aria-sort]="getAriaSort(column.header)"
       >
@@ -25,7 +25,9 @@
                      [ngComponentOutlet]="item.customComponent.component"
                      [ndcDynamicInputs]="item.customComponent.componentData(idx)"
         ></ndc-dynamic>
-        <ng-container *ngIf="!item.customComponent && item.displayValue">{{ item.displayValue }}</ng-container>
+        <ng-container *ngIf="!item.customComponent && item.displayValue">
+          <span [innerHTML]="item.displayValue"></span>
+        </ng-container>
         <ng-container *ngIf="!item.customComponent && !item.displayValue">{{ item.value }}</ng-container>
       </td>
     </tr>

diff --git a/src/web/app/components/sortable-table/sortable-table.component.ts b/src/web/app/components/sortable-table/sortable-table.component.ts
@@ -15,6 +15,11 @@ export enum SortableTableHeaderColorScheme {
    * White background with black text.
    */
   WHITE,
+
+  /**
+   * Custom background setting
+   */
+  OTHERS,
 }
 
 /**
@@ -72,6 +77,9 @@ export class SortableTableComponent implements OnInit, OnChanges {
   @Input()
   headerColorScheme: SortableTableHeaderColorScheme = SortableTableHeaderColorScheme.BLUE;
 
+  @Input()
+  customHeaderStyle: string = '';
+
   @Input()
   columns: ColumnData[] = [];