Skip to content

Commit

Permalink
[#12329] Refactoring of sortable tables - Extension Confirm Modal (#1…
Browse files Browse the repository at this point in the history 
…2556)

* fix: refactor extension confirm modal to utilise sortable tables

* fix: color scheme

* fix: lint issues

* fix: utilise display value field for transformed data

* fix: add element for table name

* fix: differentiate header class for student and instructor data

* fix: update snapshot

* fix: lint whitespace fixes

* fix: more lint fixes

* fix: hide empty tables

---------

Co-authored-by: Jason Qiu <[email protected]>
  • Loading branch information
@domoberzin @jasonqiu212
domoberzin and jasonqiu212 authored Sep 22, 2023
1 parent b23d47f commit 52b0156
Show file tree
Hide file tree
Showing 5 changed files with 383 additions and 292 deletions.
327 changes: 184 additions & 143 deletions ...ents/extension-confirm-modal/__snapshots__/extension-confirm-modal.component.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
>
<fieldset>
<div
Expand Down Expand Up @@ -52,157 +62,188 @@ exports[`ExtensionConfirmModalComponent should snap with the extended students a
</b>
instructor(s):
</div>
<div
class="table-responsive"
>
<div>
<h1>
Students
</h1>
<table
class="table table-bordered mb-3"
id="student-list-table"
>
<thead>
<tr>
<th
aria-sort="none"
class="sortable-header"
>
<button>
Section
<span
aria-hidden="true"
class="fa-stack"
<tm-sortable-table>
<table
class="table table-bordered table-striped"
>
<thead>
<tr>
<th
aria-sort="none"
class="student-sort-by-section sortable-header"
style="text-align: start;"
>
<button
class="d-lg-flex align-items-center gap-lg-1 d-inline"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="sortable-header"
>
<button>
Team
<span
aria-hidden="true"
class="fa-stack"
<span
container="body"
>
Section
</span>
<span
aria-hidden="true"
class="fa-stack"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="student-sort-by-team sortable-header"
style="text-align: start;"
>
<button
class="d-lg-flex align-items-center gap-lg-1 d-inline"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="sortable-header"
>
<button>
Name
<span
aria-hidden="true"
class="fa-stack"
<span
container="body"
>
Team
</span>
<span
aria-hidden="true"
class="fa-stack"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="student-sort-by-name sortable-header"
style="text-align: start;"
>
<button
class="d-lg-flex align-items-center gap-lg-1 d-inline"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="sortable-header"
>
<button>
Email
<span
aria-hidden="true"
class="fa-stack"
<span
container="body"
>
Name
</span>
<span
aria-hidden="true"
class="fa-stack"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="student-sort-by-email sortable-header"
style="text-align: start;"
>
<button
class="d-lg-flex align-items-center gap-lg-1 d-inline"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="descending"
class="sortable-header"
>
<button>
<span>
Original Deadline
</span>
<span
aria-hidden="true"
class="fa-stack"
<span
container="body"
>
Email
</span>
<span
aria-hidden="true"
class="fa-stack"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
<th
aria-sort="none"
class="student-sort-by-deadline sortable-header"
style="text-align: start;"
>
<button
class="d-lg-flex align-items-center gap-lg-1 d-inline"
>
<i
class="fas fa-sort"
/>
<i
class="fas fa-sort-down"
/>
</span>
</button>
</th>
</tr>
</thead>
<tr>
<td>
Test Section 1
</td>
<td>
Test Section 1
</td>
<td>
Test Student 1
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
<tr>
<td>
Test Section 2
</td>
<td>
Test Section 2
</td>
<td>
Test Student 2
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
<tr>
<td>
Test Section 3
</td>
<td>
Test Section 3
</td>
<td>
Test Student 3
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
</table>
<span
container="body"
>
Original Deadline
</span>
<span
aria-hidden="true"
class="fa-stack"
>
<i
class="fas fa-sort"
/>
</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test Section 1
</td>
<td>
Test Section 1
</td>
<td>
Test Student 1
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
<tr>
<td>
Test Section 2
</td>
<td>
Test Section 2
</td>
<td>
Test Student 2
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
<tr>
<td>
Test Section 3
</td>
<td>
Test Section 3
</td>
<td>
Test Student 3
</td>
<td>
[email protected]
</td>
<td>
5 Apr 2000 2:00:00
</td>
</tr>
</tbody>
</table>
</tm-sortable-table>
</div>
<div
class="form-check"
Expand Down
Loading

0 comments on commit 52b0156

Please sign in to comment.