diff --git a/src/web/app/components/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap b/src/web/app/components/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap index ce3fa400dc7..5820c11b56e 100644 --- a/src/web/app/components/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap +++ b/src/web/app/components/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap @@ -7,18 +7,28 @@ exports[`ExtensionConfirmModalComponent should snap with the extended students a __ngContext__={[Function Number]} activeModal={[Function NgbActiveModal]} confirmExtensionCallbackEvent={[Function EventEmitter_]} + dateDetailPipe={[Function FormatDateDetailPipe]} extensionTimestamp={[Function Number]} feedbackSessionTimeZone={[Function String]} + headerColorScheme={[Function Number]} + instructorColumnsData={[Function Array]} + instructorRoleNamePipe={[Function InstructorRoleNamePipe]} + instructorRowsData={[Function Array]} isNotifyDeadlines="false" isSubmitting="false" modalType="0" selectedInstructors={[Function Array]} selectedStudents={[Function Array]} + sortInstructorListEvent={[Function EventEmitter_]} sortInstructorOrder="0" sortInstructorsBy={[Function Number]} + sortStudentListEvent={[Function EventEmitter_]} sortStudentOrder="0" sortStudentsBy={[Function Number]} + studentColumnsData={[Function Array]} + studentRowsData={[Function Array]} tableComparatorService={[Function TableComparatorService]} + timeZoneService={[Function TimezoneService]} >
instructor(s):
-
+

Students

- - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
- +
+ Test Section 1 + + Test Section 1 + + Test Student 1 + + testStudent1@gmail.com + + 5 Apr 2000 2:00:00 +
+ Test Section 2 + + Test Section 2 + + Test Student 2 + + testStudent2@gmail.com + + 5 Apr 2000 2:00:00 +
+ Test Section 3 + + Test Section 3 + + Test Student 3 + + testStudent3@gmail.com + + 5 Apr 2000 2:00:00 +
+
Confir {{ extensionTimestamp | formatDateDetail: feedbackSessionTimeZone }}:
-
+

Students

- - - - - - - - - - - - - - - - - -
- - - - - - - - - -
{{ student.sectionName }}{{ student.teamName }}{{ student.name }}{{ student.email }}{{ student.extensionDeadline | formatDateDetail: feedbackSessionTimeZone }}
+
-
+

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, diff --git a/src/web/app/components/panel-chevron/panel-chevron.component.html b/src/web/app/components/panel-chevron/panel-chevron.component.html index 9a924686122..48594557a11 100644 --- a/src/web/app/components/panel-chevron/panel-chevron.component.html +++ b/src/web/app/components/panel-chevron/panel-chevron.component.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/src/web/app/components/panel-chevron/panel-chevron.component.scss b/src/web/app/components/panel-chevron/panel-chevron.component.scss index ee53858661d..a00f6edd589 100644 --- a/src/web/app/components/panel-chevron/panel-chevron.component.scss +++ b/src/web/app/components/panel-chevron/panel-chevron.component.scss @@ -1,4 +1,10 @@ -.chevron { +button.chevron { display: inline-flex; vertical-align: middle; + background-color: inherit; + border-width: 0; +} + +button.chevron:active { + background-color: inherit; } diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap index 6a053f54ffd..22d1fe0b703 100644 --- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap +++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap @@ -39,13 +39,16 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = ` class="collapse-caret" > -
-
+
- +
diff --git a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html index 3214e968a25..bc9a583b9bf 100644 --- a/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html +++ b/src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html @@ -1,7 +1,7 @@
- +
@@ -109,13 +112,16 @@ exports[`UserNotificationsListComponent should snap when all loaded notification class="card-header-btn-toolbar" > - +
@@ -253,13 +259,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n class="card-header-btn-toolbar" > -
-
+
@@ -307,13 +316,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n class="card-header-btn-toolbar" > -
-
+
@@ -430,13 +442,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati class="card-header-btn-toolbar" > -
-
+ @@ -484,13 +499,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati class="card-header-btn-toolbar" > -
-
+ @@ -607,13 +625,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati class="card-header-btn-toolbar" > -
-
+ @@ -661,13 +682,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati class="card-header-btn-toolbar" > -
-
+ diff --git a/src/web/app/pages-instructor/instructor-course-edit-page/copy-instructors-from-other-courses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-course-edit-page/copy-instructors-from-other-courses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap index cda762a9dbe..f05954210be 100644 --- a/src/web/app/pages-instructor/instructor-course-edit-page/copy-instructors-from-other-courses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap +++ b/src/web/app/pages-instructor/instructor-course-edit-page/copy-instructors-from-other-courses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap @@ -81,13 +81,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when feedback class="card-header-btn-toolbar" > -
-
+ @@ -218,13 +221,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct class="card-header-btn-toolbar" > -
-
+ @@ -478,13 +484,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct class="card-header-btn-toolbar" > -
-
+ @@ -612,13 +621,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses class="card-header-btn-toolbar" > - + @@ -640,13 +652,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses class="card-header-btn-toolbar" > - + diff --git a/src/web/app/pages-instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap index e003acc07c9..0329d14dff8 100644 --- a/src/web/app/pages-instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap +++ b/src/web/app/pages-instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap @@ -269,15 +269,6 @@ exports[`InstructorHomePageComponent should snap with one course with error load > [CS3281]: Thematic Systems I - -
- -
- + + + - -
- -
- + + + - -
- -
- + + + - -
- -
- @@ -2032,6 +2044,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate aria-expanded="false" class="dropdown-toggle btn btn-primary btn-sm" ngbdropdowntoggle="" + type="button" > Students @@ -2063,6 +2076,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate aria-expanded="false" class="dropdown-toggle btn btn-primary btn-sm" ngbdropdowntoggle="" + type="button" > Instructors @@ -2087,6 +2101,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate aria-expanded="false" class="dropdown-toggle btn btn-primary btn-sm" ngbdropdowntoggle="" + type="button" > Sessions @@ -2111,6 +2126,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate aria-expanded="false" class="dropdown-toggle btn-course btn btn-primary btn-sm" ngbdropdowntoggle="" + type="button" > Course @@ -2151,16 +2167,19 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate + + + - -
- -
- + + + - -
- -
-
Home courseTabModel.course.courseName }}
- + - + - + - + +
-
-
-
+
-
-
+
-
-
+
-
-
+
@@ -288,13 +291,16 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap when feedback class="card-header-btn-toolbar" > -
-
+ @@ -420,13 +426,16 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap when feedback class="card-header-btn-toolbar" > -
-
+ @@ -638,13 +647,16 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap with feedback class="card-header-btn-toolbar" > - + @@ -668,13 +680,16 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap with feedback class="card-header-btn-toolbar" > - + diff --git a/src/web/app/pages-instructor/instructor-student-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-student-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap index 8fb22eed5b3..2c2f0ec0b7e 100644 --- a/src/web/app/pages-instructor/instructor-student-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap +++ b/src/web/app/pages-instructor/instructor-student-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap @@ -1249,13 +1249,16 @@ exports[`InstructorStudentActivityLogsComponent should snap with results of a se class="card-header-btn-toolbar" > -
-
+ @@ -1431,13 +1434,16 @@ exports[`InstructorStudentActivityLogsComponent should snap with results of a se class="card-header-btn-toolbar" > -
-
+ diff --git a/src/web/app/pages-instructor/instructor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap index 1af0749d7cb..fbb9e7a35d7 100644 --- a/src/web/app/pages-instructor/instructor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap +++ b/src/web/app/pages-instructor/instructor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap @@ -86,13 +86,16 @@ exports[`InstructorStudentListPageComponent should snap with a course with stude class="card-header-btn-toolbar" > -
-
+ diff --git a/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap b/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap index 4542d188005..2c9baf7d677 100644 --- a/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap +++ b/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap @@ -891,23 +891,23 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi class="card" id="question-submission-form-qn-1" > - question brief - +
-
+ question brief - +
-
+

question brief

- +
-
+ MSQ question - +
-
+ numerical scale question - +
-
+ constant sum question - +
-
+ contribution question - +
-
+ question brief - +
-
+ question brief - +
-
+ question brief - +
-
+ question brief - +
-
+ question brief - +
-
+

question brief

- +
-
+ MSQ question - +
-
+ numerical scale question - +
-
+ constant sum question - +
-
+ contribution question - +
-
+ question brief - +
-
+ question brief - +
-
+ question brief - +