Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '9900M11AJOS-migrate/unit-table' into add-tii-integration
- Loading branch information
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <div class="table-padding"> | ||
| <div class="flex flex-row gap-8"> | ||
| <div class="flex-grow flex flex-col gap-8 gap-y-0"> | ||
| <div class="flex flex-row"> | ||
| <div> | ||
| <h3>Units</h3> | ||
| <p>Modify units registered with OnTrack</p> | ||
| </div> | ||
| <div class="flex-grow"></div> | ||
| <div> | ||
| <mat-form-field appearance="outline"> | ||
| <mat-label>Search</mat-label> | ||
| <input matInput (keyup)="applyFilter($event)" /> | ||
| </mat-form-field> | ||
| </div> | ||
| </div> | ||
| <table | ||
| class="flex-grow f-table selectable" | ||
| mat-table | ||
| [dataSource]="dataSource" | ||
| matSort | ||
| (matSortChange)="sortTableData($event)" | ||
| > | ||
| <!-- Unit Code Column --> | ||
| <ng-container matColumnDef="unit_code" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Unit Code</th> | ||
| <td mat-cell *matCellDef="let element"> | ||
| <f-chip>{{ element.code }}</f-chip> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Name Column --> | ||
| <ng-container matColumnDef="name" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th> | ||
| <td mat-cell *matCellDef="let element">{{ element.name }}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- Unit Role Column --> | ||
| <ng-container matColumnDef="unit_role" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Unit Role</th> | ||
| <td mat-cell *matCellDef="let element">{{ element.myRole }}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- Teaching Period Column --> | ||
| <ng-container matColumnDef="teaching_period" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Teaching Period</th> | ||
| <td mat-cell *matCellDef="let element"> | ||
| <ng-container *ngIf="element.teachingPeriod; else customTeachingPeriod"> | ||
| {{ element.teachingPeriod.name }} | ||
| </ng-container> | ||
|
|
||
| <ng-template #customTeachingPeriod> Custom </ng-template> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <!-- Start Date Column --> | ||
| <ng-container matColumnDef="start_date" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th> | ||
| <td mat-cell *matCellDef="let element">{{ element.startDate | date: 'EEE d MMM y' }}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- End Date Column --> | ||
| <ng-container matColumnDef="end_date" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>End Time</th> | ||
| <td mat-cell *matCellDef="let element">{{ element.endDate | date: 'EEE d MMM y' }}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- Active Column --> | ||
| <ng-container matColumnDef="active" sticky> | ||
| <th mat-header-cell *matHeaderCellDef mat-sort-header>Active</th> | ||
| <td mat-cell *matCellDef="let element"> | ||
| <!-- If element.teachingPeriod exists --> | ||
| <ng-container *ngIf="element.teachingPeriod; else noTeachingPeriod"> | ||
| <i *ngIf="element.teachingPeriod.active && element.active" class="fa fa-check"></i> | ||
| <i *ngIf="!element.teachingPeriod.active || !element.active" class="fa fa-times"></i> | ||
| </ng-container> | ||
|
|
||
| <!-- If element.teachingPeriod does not exist --> | ||
| <ng-template #noTeachingPeriod> | ||
| <i *ngIf="element.active" class="fa fa-check"></i> | ||
| <i *ngIf="!element.active" class="fa fa-times"></i> | ||
| </ng-template> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> | ||
| <tr | ||
| mat-row | ||
| *matRowDef="let row; columns: displayedColumns" | ||
| uiSref="units/admin" | ||
| [uiParams]="{ unitId: row.id }" | ||
| ></tr> | ||
| </table> | ||
| <span class="flex items-center"> | ||
| <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> | ||
| <span class="flex-grow"></span> | ||
| <button mat-raised-button color="primary" (click)="createUnit()"> | ||
| <mat-icon aria-hidden="false" aria-label="Example home icon" class="icon_display">add</mat-icon> Create Unit | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> |
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,8 @@ | ||
| .table-padding { | ||
| padding-left: 50px; | ||
| padding-right: 50px; | ||
| } | ||
|
|
||
| .icon_display { | ||
| transform: scale(2); | ||
| } |
Empty file.
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,101 @@ | ||
| import { Component, Inject, AfterViewInit, ViewChild, OnDestroy } from '@angular/core'; | ||
| import { createUnitModal } from 'src/app/ajs-upgraded-providers'; | ||
| import { Unit } from 'src/app/api/models/unit'; | ||
| import { UnitRole } from 'src/app/api/models/unit-role'; | ||
| import { UnitService } from 'src/app/api/services/unit.service'; | ||
| import { MatTable, MatTableDataSource } from '@angular/material/table'; | ||
| import { MatSort, Sort } from '@angular/material/sort'; | ||
| import { MatPaginator } from '@angular/material/paginator'; | ||
| import { Subscription } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'f-units', | ||
| templateUrl: './f-units.component.html', | ||
| styleUrls: ['./f-units.component.scss'], | ||
| }) | ||
| export class FUnitsComponent implements AfterViewInit, OnDestroy { | ||
| @ViewChild(MatTable, { static: false }) table: MatTable<Unit>; | ||
| @ViewChild(MatSort, { static: false }) sort: MatSort; | ||
| @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator; | ||
|
|
||
| displayedColumns: string[] = [ | ||
| 'unit_code', | ||
| 'name', | ||
| 'unit_role', | ||
| 'teaching_period', | ||
| 'start_date', | ||
| 'end_date', | ||
| 'active', | ||
| ]; | ||
| dataSource: MatTableDataSource<Unit>; | ||
| clickedRows = new Set<Unit>(); | ||
|
|
||
| public allUnits: Unit[]; | ||
| unitRoles: UnitRole[]; | ||
| dataload: boolean; | ||
|
|
||
| private subscriptions: Subscription[] = []; | ||
|
|
||
| constructor( | ||
| @Inject(createUnitModal) private createUnitModal: any, | ||
| private unitService: UnitService, | ||
| ) { | ||
| this.dataload = false; | ||
| } | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.dataSource = new MatTableDataSource(this.unitService.cache.currentValuesClone()); | ||
| this.dataSource.paginator = this.paginator; | ||
| this.dataSource.sort = this.sort; | ||
| this.dataSource.filterPredicate = (data: any, filter: string) => data.matches(filter); | ||
|
|
||
| this.subscriptions.push( | ||
| this.unitService.cache.values.subscribe((units) => { | ||
| this.dataSource.data = units; | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.subscriptions.forEach((s) => s.unsubscribe()); | ||
| } | ||
|
|
||
| createUnit() { | ||
| this.createUnitModal.show(this.dataSource); | ||
| } | ||
|
|
||
| applyFilter(event: Event) { | ||
| const filterValue = (event.target as HTMLInputElement).value; | ||
| this.dataSource.filter = filterValue.trim().toLowerCase(); | ||
| if (this.dataSource.paginator) { | ||
| this.dataSource.paginator.firstPage(); | ||
| } | ||
| } | ||
|
|
||
| private sortCompare(aValue: number | string, bValue: number | string, isAsc: boolean) { | ||
| return (aValue < bValue ? -1 : 1) * (isAsc ? 1 : -1); | ||
| } | ||
|
|
||
| // Sorting function to sort data when sort | ||
| // event is triggered | ||
| sortTableData(sort: Sort) { | ||
| if (!sort.active || sort.direction === '') { | ||
| return; | ||
| } | ||
| this.dataSource.data = this.dataSource.data.sort((a, b) => { | ||
| const isAsc = sort.direction === 'asc'; | ||
| switch (sort.active) { | ||
| case 'unit_code': | ||
| case 'name': | ||
| case 'unit_role': | ||
| case 'teaching_period': | ||
| case 'start_date': | ||
| case 'end_date': | ||
| case 'active': | ||
| return this.sortCompare(a[sort.active], b[sort.active], isAsc); | ||
| default: | ||
| return 0; | ||
| } | ||
| }); | ||
| } | ||
| } | ||
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
Oops, something went wrong.