forked from CS3219-AY2425S1/cs3219-ay2425s1-project-g03
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update history page styles (CS3219-AY2425S1#101)
* Update history page styles * Move history out of account as parent div being flex/grid affects table style * Adjust width of side panel to be maximum 90% of screen width * Update styles of readonly editor * Fix compose.dev.yml * Fix panel description styling Co-authored-by: samuelim01 <[email protected]> * Conver history panel to primeNG sidebar * Fix sorting for history table * Remove console log statements in history component * Add fix to history * Make SortEvent required * Adjust undefined handling for dt * Adjust time format * Remove removable sort * Fix question sort * Fix filter --------- Co-authored-by: Samuel Lim <[email protected]> Co-authored-by: samuelim01 <[email protected]>
- Loading branch information
3 people
authored
Nov 13, 2024
1 parent
8520762
commit 0c24387
Showing
11 changed files
with
179 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <div class="container"> | ||
| <div class="table-container" style="max-width: 1150px; margin: 100px auto"> | ||
| <p-table | ||
| #dt | ||
| sortField="time" | ||
| [sortOrder]="1" | ||
| [value]="histories" | ||
| datakey="id" | ||
| [tableStyle]="{ 'table-layout': 'auto', width: '100%', 'min-width': '50rem', 'text-align': 'center' }" | ||
| [paginator]="true" | ||
| [rows]="10" | ||
| [rowsPerPageOptions]="[10, 25, 50]" | ||
| [globalFilterFields]="['title', 'difficulty', 'topics', 'collaborator', 'status', 'time']" | ||
| styleClass="p-datatable-gridlines-striped" | ||
| (sortFunction)="customSort($event)" | ||
| [customSort]="true"> | ||
| <ng-template pTemplate="caption"> | ||
| <div class="flex flex-wrap align-items-center justify-content-between"> | ||
| <h3 class="">Matching History</h3> | ||
| <p-iconField iconPosition="left"> | ||
| <p-inputIcon> | ||
| <i class="pi pi-search"></i> | ||
| </p-inputIcon> | ||
| <input | ||
| pInputText | ||
| type="text" | ||
| (input)="dt.filterGlobal($any($event.target).value, 'contains')" | ||
| placeholder="Search keyword" /> | ||
| </p-iconField> | ||
| </div> | ||
| </ng-template> | ||
| <ng-template pTemplate="header" let-columns> | ||
| <tr> | ||
| <th pSortableColumn="title" style="width: 20%">Question<p-sortIcon field="title"></p-sortIcon></th> | ||
| <th pSortableColumn="difficulty" style="width: 15%"> | ||
| Difficulty<p-sortIcon field="difficulty"></p-sortIcon> | ||
| </th> | ||
| <th pSortableColumn="topics" style="width: 24%">Topics<p-sortIcon field="topics"></p-sortIcon></th> | ||
| <th pSortableColumn="collaborator" style="width: 17%"> | ||
| Collaborator<p-sortIcon field="collaborator"></p-sortIcon> | ||
| </th> | ||
| <th pSortableColumn="status" style="width: 12%">Status<p-sortIcon field="status"></p-sortIcon></th> | ||
| <th pSortableColumn="time" style="width: 12%">Time<p-sortIcon field="time"></p-sortIcon></th> | ||
| </tr> | ||
| </ng-template> | ||
| <ng-template pTemplate="body" let-history> | ||
| <tr (click)="onRowSelect(history)"> | ||
| <td>{{ history.title }}</td> | ||
| <td>{{ history.difficulty }}</td> | ||
| <td>{{ history.topics.join(', ') }}</td> | ||
| <td>{{ history.collaborator }}</td> | ||
| <td> | ||
| @if (history.status === 'COMPLETED') { | ||
| <i class="pi pi-check" style="color: green; font-size: large"></i> | ||
| } @else if (history.status === 'FORFEITED') { | ||
| <i class="pi pi-times" style="color: red; font-size: large"></i> | ||
| } @else if (history.status === 'IN_PROGRESS') { | ||
| <i class="pi pi-spin pi-spinner" style="color: white; font-size: large"></i> | ||
| } | ||
| </td> | ||
| <td>{{ history.time | date: 'dd/MM/yyyy hh:mm a' }}</td> | ||
| </tr> | ||
| </ng-template> | ||
| </p-table> | ||
| </div> | ||
| <p-sidebar | ||
| [(visible)]="isPanelVisible" | ||
| position="right" | ||
| [blockScroll]="true" | ||
| styleClass="w-10 md:w-8 lg:w-6" | ||
| transitionOptions="200ms cubic-bezier(0, 0, 0.2, 1)" | ||
| (onHide)="closePanel()"> | ||
| <ng-template pTemplate="header"> | ||
| <h3>{{ panelHistory?.title }}</h3> | ||
| </ng-template> | ||
| <div class="panel-content"> | ||
| <p style="white-space: pre-wrap">{{ panelHistory?.description }}</p> | ||
| <h4>Submitted Solution</h4> | ||
| <div #editor class="editor-content text-lg"></div> | ||
| </div> | ||
| </p-sidebar> | ||
| <p-toast position="bottom-right" [breakpoints]="{ '920px': { width: '90%' } }" /> | ||
| </div> |
Oops, something went wrong.