[#12329] Refactoring of sortable tables

src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.html

@@ -26,7 +26,8 @@ <h5 class="modal-title" *ngIf="isDeleteModal() || isSessionDeleteModal()">Confir
 
     <div class="table-responsive" *ngIf="selectedStudents.length !== 0">
       <h1>Students</h1>
-      <table id="student-list-table" class="table table-bordered mb-3">
+      <tm-sortable-table [rows]="studentsRowsData" [columns]="studentsColumnsData"></tm-sortable-table> 
+      <!-- <table id="student-list-table" class="table table-bordered mb-3">
         <thead>
           <tr>
             <th class="sortable-header" (click)="sortStudentColumnsBy(SortBy.SECTION_NAME)" [attr.aria-sort]="getAriaSortStudent(SortBy.SECTION_NAME)">
@@ -99,12 +100,13 @@ <h1>Students</h1>
           <td>{{ student.email }}</td>
           <td>{{ student.extensionDeadline | formatDateDetail: feedbackSessionTimeZone }}</td>
         </tr>
-      </table>
+      </table> -->
     </div>
 
     <div class="table-responsive" *ngIf="selectedInstructors.length !== 0">
       <h1>Instructors</h1>
-      <table id="instructor-list-table" class="table table-bordered mb-3">
+      <tm-sortable-table [rows]="instructorsRowsData" [columns]="instructorsColumnsData"></tm-sortable-table> 
+      <!-- <table id="instructor-list-table" class="table table-bordered mb-3">
         <thead>
           <tr>
             <th class="sortable-header" (click)="sortInstructorsColumnsBy(SortBy.RESPONDENT_NAME)" [attr.aria-sort]="getAriaSortInstructor(SortBy.RESPONDENT_NAME)">
@@ -164,7 +166,7 @@ <h1>Instructors</h1>
           <td>{{ instructor.role | instructorRoleName }}</td>
           <td>{{ instructor.extensionDeadline | formatDateDetail: feedbackSessionTimeZone }}</td>
         </tr>
-      </table>
+      </table> -->
     </div>
 
     <div class="form-check" *ngIf="isDeleteModal() || isExtendModal()">

src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.spec.ts

@@ -11,6 +11,8 @@ import {
 } from '../../pages-instructor/instructor-session-individual-extension-page/extension-table-column-model';
 import { ExtensionConfirmModalComponent } from './extension-confirm-modal.component';
 import { ExtensionConfirmModalModule } from './extension-confirm-modal.module';
+import { SortableTableModule } from '../../components/sortable-table/sortable-table.module';
+
 
 describe('ExtensionConfirmModalComponent', () => {
   const testFeedbackSession: FeedbackSession = {
@@ -69,7 +71,8 @@ describe('ExtensionConfirmModalComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, ExtensionConfirmModalModule],
+        declarations: [ExtensionConfirmModalComponent],
+        imports: [HttpClientTestingModule, ExtensionConfirmModalModule, SortableTableModule],
         providers: [NgbActiveModal],
       }).compileComponents();
     }),

src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.ts

@@ -1,11 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output,  OnInit, OnChanges } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TableComparatorService } from '../../../services/table-comparator.service';
 import { SortBy, SortOrder } from '../../../types/sort-properties';
 import {
   StudentExtensionTableColumnModel,
   InstructorExtensionTableColumnModel,
 } from '../../pages-instructor/instructor-session-individual-extension-page/extension-table-column-model';
+import { ColumnData, SortableTableCellData } from '../../components/sortable-table/sortable-table.component';
+import { TimezoneService } from '../../../services/timezone.service';
+
 
 export enum ExtensionModalType {
   EXTEND,
@@ -18,7 +21,7 @@ export enum ExtensionModalType {
   templateUrl: './extension-confirm-modal.component.html',
   styleUrls: ['./extension-confirm-modal.component.scss'],
 })
-export class ExtensionConfirmModalComponent {
+export class ExtensionConfirmModalComponent implements OnInit, OnChanges {
   @Input()
   modalType: ExtensionModalType = ExtensionModalType.EXTEND;
 
@@ -37,7 +40,68 @@ export class ExtensionConfirmModalComponent {
   @Output()
   confirmExtensionCallbackEvent: EventEmitter<boolean> = new EventEmitter();
 
-  constructor(public activeModal: NgbActiveModal, private tableComparatorService: TableComparatorService) {}
+  constructor(public activeModal: NgbActiveModal, 
+              private tableComparatorService: TableComparatorService,
+              private timezoneService: TimezoneService) {}
+
+  studentsColumnsData: ColumnData[] = [];
+  studentsRowsData: SortableTableCellData[][] = [];
+
+  instructorsColumnsData: ColumnData[] = [];
+  instructorsRowsData: SortableTableCellData[][] = [];
+
+  ngOnInit(): void {
+    this.getTableData();
+  }
+
+  ngOnChanges(): void {
+    this.getTableData();
+  }
+
+  private formatTimestamp(timestamp: number, timeZone: string): string {
+    return this.timezoneService.formatToString(timestamp, timeZone, 'D MMM YYYY h:mm A');
+  }
+
+  private getTableData(): void {
+    var deadlineType = '';
+    if (this.isExtendModal()) var deadlineType = 'Original Deadline';
+    if (this.isDeleteModal() || this.isSessionDeleteModal()) var deadlineType = 'Current Deadline';
+
+    this.studentsColumnsData = [
+      { header: 'Section', sortBy: SortBy.SECTION_NAME },
+      { header: 'Team', sortBy: SortBy.TEAM_NAME },
+      { header: 'Name', sortBy: SortBy.RESPONDENT_NAME },
+      { header: 'Email', sortBy: SortBy.RESPONDENT_EMAIL},
+      { header: deadlineType, sortBy: SortBy.SESSION_END_DATE },
+    ]
+
+    this.instructorsColumnsData = [
+      { header: 'Name', sortBy: SortBy.RESPONDENT_NAME },
+      { header: 'Email', sortBy: SortBy.RESPONDENT_EMAIL },
+      { header: 'Role', sortBy: SortBy.INSTRUCTOR_PERMISSION_ROLE },
+      { header: deadlineType, sortBy: SortBy.SESSION_END_DATE },
+    ]
+
+    for (const student of this.selectedStudents) {
+      this.studentsRowsData.push([
+        { value: student.sectionName },
+        { value: student.teamName } ,
+        { value: student.name },
+        { value: student.email },
+        { value: this.formatTimestamp(student.extensionDeadline, 'America/New_York') },
+      ])
+
+    }
+
+    for (const instructor of this.selectedInstructors) {  
+      this.instructorsRowsData.push([
+        { value: instructor.name },
+        { value: instructor.email } ,
+        { value: instructor.role },
+        { value: this.formatTimestamp(instructor.extensionDeadline, 'America/New_York') },
+      ])
+    }
+  }
 
   SortBy: typeof SortBy = SortBy;
   SortOrder: typeof SortOrder = SortOrder;

src/web/app/components/extension-confirm-modal/extension-confirm-modal.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TeammatesCommonModule } from '../teammates-common/teammates-common.module';
 import { ExtensionConfirmModalComponent } from './extension-confirm-modal.component';
+import { SortableTableModule } from '../../components/sortable-table/sortable-table.module';
 
 /**
  * Module for confirming deadline extensions.
@@ -15,6 +16,7 @@ import { ExtensionConfirmModalComponent } from './extension-confirm-modal.compon
     CommonModule,
     FormsModule,
     TeammatesCommonModule,
+    SortableTableModule,
   ],
   exports: [
     ExtensionConfirmModalComponent,