+
Instructors
-
-
-
-
-
-
-
-
-
-
- | {{ instructor.name }} |
- {{ instructor.email }} |
- {{ instructor.role | instructorRoleName }} |
- {{ instructor.extensionDeadline | formatDateDetail: feedbackSessionTimeZone }} |
-
-
+
diff --git a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.spec.ts b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.spec.ts
index 1f0b0e3f2f9..9f859d63cd3 100644
--- a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.spec.ts
+++ b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.spec.ts
@@ -89,7 +89,7 @@ describe('ExtensionConfirmModalComponent', () => {
});
it('should snap with the extended students and instructors', () => {
- component.selectedStudents = [studentModel1, studentModel2, studentModel3];
+ component.studentData = [studentModel1, studentModel2, studentModel3];
component.extensionTimestamp = testFeedbackSession.submissionEndTimestamp;
fixture.detectChanges();
expect(fixture).toMatchSnapshot();
diff --git a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.ts b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.ts
index 8ef0eeaf32a..5ca6bf28f42 100644
--- a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.ts
+++ b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.component.ts
@@ -1,11 +1,20 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { TableComparatorService } from '../../../services/table-comparator.service';
+import { TimezoneService } from '../../../services/timezone.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,
+ SortableEvent,
+ SortableTableCellData,
+ SortableTableHeaderColorScheme,
+ } from '../sortable-table/sortable-table.component';
+import { FormatDateDetailPipe } from '../teammates-common/format-date-detail.pipe';
+import { InstructorRoleNamePipe } from '../teammates-common/instructor-role-name.pipe';
export enum ExtensionModalType {
EXTEND,
@@ -18,7 +27,7 @@ export enum ExtensionModalType {
templateUrl: './extension-confirm-modal.component.html',
styleUrls: ['./extension-confirm-modal.component.scss'],
})
-export class ExtensionConfirmModalComponent {
+export class ExtensionConfirmModalComponent implements OnInit {
@Input()
modalType: ExtensionModalType = ExtensionModalType.EXTEND;
@@ -34,10 +43,41 @@ export class ExtensionConfirmModalComponent {
@Input()
feedbackSessionTimeZone: string = '';
+ @Input()
+ headerColorScheme: SortableTableHeaderColorScheme = SortableTableHeaderColorScheme.WHITE;
+
+ @Input() set studentData(studentData: StudentExtensionTableColumnModel[]) {
+ this.selectedStudents = studentData;
+ if (this.selectedStudents.length > 0) {
+ this.setStudentTableData();
+ }
+ }
+
+ @Input() set instructorData(instructorData: InstructorExtensionTableColumnModel[]) {
+ this.selectedInstructors = instructorData;
+ if (this.selectedInstructors.length > 0) {
+ this.setInstructorTableData();
+ }
+ }
+
@Output()
confirmExtensionCallbackEvent: EventEmitter = new EventEmitter();
- constructor(public activeModal: NgbActiveModal, private tableComparatorService: TableComparatorService) {}
+ @Output()
+ sortStudentListEvent: EventEmitter = new EventEmitter();
+
+ @Output()
+ sortInstructorListEvent: EventEmitter = new EventEmitter();
+
+ studentColumnsData : ColumnData[] = [];
+ studentRowsData : SortableTableCellData[][] = [];
+ instructorColumnsData : ColumnData[] = [];
+ instructorRowsData : SortableTableCellData[][] = [];
+ dateDetailPipe = new FormatDateDetailPipe(this.timeZoneService);
+ instructorRoleNamePipe = new InstructorRoleNamePipe();
+
+ constructor(public activeModal: NgbActiveModal, private tableComparatorService: TableComparatorService,
+ private timeZoneService: TimezoneService) {}
SortBy: typeof SortBy = SortBy;
SortOrder: typeof SortOrder = SortOrder;
@@ -49,6 +89,135 @@ export class ExtensionConfirmModalComponent {
isSubmitting: boolean = false;
isNotifyDeadlines: boolean = false;
+ ngOnInit(): void {
+ if (this.selectedStudents.length > 0) {
+ this.setStudentTableData();
+ }
+
+ if (this.selectedInstructors.length > 0) {
+ this.setInstructorTableData();
+ }
+ }
+
+ setStudentTableData(): void {
+ this.setStudentColumnData();
+ this.setStudentRowData();
+ }
+
+ setInstructorTableData(): void {
+ this.setInstructorColumnData();
+ this.setInstructorRowData();
+ }
+
+ setStudentColumnData(): void {
+ this.studentColumnsData = [
+ {
+ header: 'Section',
+ sortBy: SortBy.SECTION_NAME,
+ headerClass: 'student-sort-by-section',
+ },
+ {
+ header: 'Team',
+ sortBy: SortBy.TEAM_NAME,
+ headerClass: 'student-sort-by-team',
+ },
+ {
+ header: 'Name',
+ sortBy: SortBy.RESPONDENT_NAME,
+ headerClass: 'student-sort-by-name',
+ },
+ {
+ header: 'Email',
+ sortBy: SortBy.RESPONDENT_EMAIL,
+ headerClass: 'student-sort-by-email',
+ },
+ {
+ header: this.isDeleteModal() || this.isSessionDeleteModal() ? 'Current Deadline' : 'Original Deadline',
+ sortBy: SortBy.SESSION_END_DATE,
+ headerClass: 'student-sort-by-deadline',
+ },
+ ];
+ }
+
+ setStudentRowData(): void {
+ this.studentRowsData = this.selectedStudents
+ .map((studentData: StudentExtensionTableColumnModel) => {
+ const rowData: SortableTableCellData[] = [
+ {
+ value: studentData.sectionName,
+ },
+ {
+ value: studentData.teamName,
+ },
+ {
+ value: studentData.name,
+ },
+ {
+ value: studentData.email,
+ },
+ {
+ value: studentData.extensionDeadline,
+ displayValue: this.dateDetailPipe.transform(
+ studentData.extensionDeadline,
+ this.feedbackSessionTimeZone),
+ },
+ ];
+ return rowData;
+ });
+ }
+
+ setInstructorColumnData(): void {
+ this.instructorColumnsData = [
+ {
+ header: 'Name',
+ sortBy: SortBy.RESPONDENT_NAME,
+ headerClass: 'instructor-sort-by-name',
+ },
+ {
+ header: 'Email',
+ sortBy: SortBy.RESPONDENT_EMAIL,
+ headerClass: 'instructor-sort-by-email',
+ },
+ {
+ header: 'Role',
+ sortBy: SortBy.INSTRUCTOR_PERMISSION_ROLE,
+ headerClass: 'instructor-sort-by-role',
+ },
+ {
+ header: this.isDeleteModal() || this.isSessionDeleteModal() ? 'Current Deadline' : 'Original Deadline',
+ sortBy: SortBy.SESSION_END_DATE,
+ headerClass: 'instructor-sort-by-deadline',
+ },
+ ];
+ }
+
+ setInstructorRowData(): void {
+ this.instructorRowsData = this.selectedInstructors
+ .map((instructorData: InstructorExtensionTableColumnModel) => {
+ const rowData: SortableTableCellData[] = [
+ {
+ value: instructorData.name,
+ },
+ {
+ value: instructorData.email,
+ },
+ {
+ value: instructorData.role,
+ displayValue: instructorData.role
+ ? this.instructorRoleNamePipe.transform(instructorData.role)
+ : instructorData.role,
+ },
+ {
+ value: instructorData.extensionDeadline,
+ displayValue: this.dateDetailPipe.transform(
+ instructorData.extensionDeadline,
+ this.feedbackSessionTimeZone),
+ },
+ ];
+ return rowData;
+ });
+ }
+
onConfirm(): void {
this.isSubmitting = true;
this.confirmExtensionCallbackEvent.emit(this.isNotifyDeadlines);
@@ -66,10 +235,8 @@ export class ExtensionConfirmModalComponent {
return this.modalType === ExtensionModalType.SESSION_DELETE;
}
- sortStudentColumnsBy(by: SortBy): void {
- this.sortStudentsBy = by;
- this.sortStudentOrder = this.sortStudentOrder === SortOrder.DESC ? SortOrder.ASC : SortOrder.DESC;
- this.selectedStudents.sort(this.sortStudentPanelsBy(by));
+ sortStudentColumnsByEventHandler(event: { sortBy: SortBy, sortOrder: SortOrder }): void {
+ this.sortStudentListEvent.emit(event);
}
getAriaSortStudent(by: SortBy): String {
@@ -114,10 +281,8 @@ export class ExtensionConfirmModalComponent {
};
}
- sortInstructorsColumnsBy(by: SortBy): void {
- this.sortInstructorsBy = by;
- this.sortInstructorOrder = this.sortInstructorOrder === SortOrder.DESC ? SortOrder.ASC : SortOrder.DESC;
- this.selectedInstructors.sort(this.sortInstructorPanelsBy(by));
+ sortInstructorsColumnsByEventHandler(event: { sortBy: SortBy, sortOrder: SortOrder }): void {
+ this.sortInstructorListEvent.emit(event);
}
getAriaSortInstructor(by: SortBy): String {
diff --git a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.module.ts b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.module.ts
index 28b7b4bff2d..0da808f31fe 100644
--- a/src/web/app/components/extension-confirm-modal/extension-confirm-modal.module.ts
+++ b/src/web/app/components/extension-confirm-modal/extension-confirm-modal.module.ts
@@ -1,6 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
+import { SortableTableModule } from '../sortable-table/sortable-table.module';
import { TeammatesCommonModule } from '../teammates-common/teammates-common.module';
import { ExtensionConfirmModalComponent } from './extension-confirm-modal.component';
@@ -15,6 +16,7 @@ import { ExtensionConfirmModalComponent } from './extension-confirm-modal.compon
CommonModule,
FormsModule,
TeammatesCommonModule,
+ SortableTableModule,
],
exports: [
ExtensionConfirmModalComponent,