82 lines
3.7 KiB
HTML
82 lines
3.7 KiB
HTML
<mat-form-field appearance="fill">
|
|
<mat-label>Search</mat-label>
|
|
<input matInput (keyup)="applyFilter($event)" placeholder="Search for Taskname" #input>
|
|
</mat-form-field>
|
|
|
|
<!--<mat-slide-toggle style="margin-left: 20px">Show finished tasks</mat-slide-toggle>-->
|
|
<button id="clear-tasks-btn" (click)="clearTasks()" mat-raised-button color="warn"><mat-icon>delete</mat-icon>Clear Tasks</button>
|
|
|
|
<div class="mat-elevation-z8">
|
|
<table mat-table [dataSource]="datasource" matSort>
|
|
<!-- Checkbox Column -->
|
|
<ng-container matColumnDef="select">
|
|
<th mat-header-cell *matHeaderCellDef>
|
|
<mat-checkbox (change)="$event ? toggleAllRows() : null"
|
|
[checked]="selection.hasValue() && isAllSelected()"
|
|
[indeterminate]="selection.hasValue() && !isAllSelected()">
|
|
</mat-checkbox>
|
|
</th>
|
|
<td mat-cell *matCellDef="let row">
|
|
<mat-checkbox (click)="$event.stopPropagation()"
|
|
(change)="$event ? selection.toggle(row) : null"
|
|
[checked]="selection.isSelected(row)">
|
|
</mat-checkbox>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
|
|
<td mat-cell *matCellDef="let task">
|
|
<a class="navLink" [routerLink]="['/taskgroups', taskgroupID!, 'tasks', task.taskID]">{{task.taskName}}</a>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="eta">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> ETA </th>
|
|
<td mat-cell *matCellDef="let task"> {{task.eta}} </td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="start">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Start </th>
|
|
<td mat-cell *matCellDef="let task"> {{task.startDate}} </td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="deadline">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Deadline </th>
|
|
<td mat-cell *matCellDef="let task"> {{task.deadline}} </td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="finished">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Finished </th>
|
|
<td mat-cell *matCellDef="let task">
|
|
<mat-checkbox [checked]="task.finished" [contentEditable]="false" (click)="$event.preventDefault()"></mat-checkbox>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="status">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
|
|
<td mat-cell *matCellDef="let task">
|
|
<p>{{getStatusOfTask(task)}}</p>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="edit">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
|
|
<td mat-cell *matCellDef="let task">
|
|
<button mat-icon-button color="primary" (click)="editTask(task)"><mat-icon>edit</mat-icon></button>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="delete">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
|
<button mat-icon-button color="primary" (click)="repeatSelectedTasks()" [disabled]="selection.isEmpty()"><mat-icon>event_repeat</mat-icon></button>
|
|
</th>
|
|
<td mat-cell *matCellDef="let task">
|
|
<button mat-icon-button color="warn" (click)="deleteTask(task)"><mat-icon>delete</mat-icon></button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
<!-- Row shown when there is no matching data. -->
|
|
<tr class="mat-row" *matNoDataRow>
|
|
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
|
|
</tr>
|
|
</table>
|
|
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
|
</div>
|