Basic tasks frontend view

Update app-frame.component.ts
This commit is contained in:
Michael Shamoon
2022-05-23 00:32:39 -07:00
parent 990fc5195a
commit 77b6c9dbaa
8 changed files with 93 additions and 141 deletions

View File

@@ -1,24 +1,12 @@
<app-page-header title="File Tasks" i18n-title>
<div class="btn-toolbar col col-md-auto">
<button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size == 0">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#x"/>
</svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" [disabled]="tasksService.total == 0">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
</svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="tasksService.reload()">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
</svg>&nbsp;<ng-container i18n>Refresh</ng-container>
</button>
</div>
<button class="btn btn-sm btn-outline-primary" (click)="tasksService.reload()">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
</svg>&nbsp;<ng-container i18n>Refresh</ng-container>
</button>
</app-page-header>
<ng-container *ngIf="!tasksService.completedFileTasks && tasksService.loading">
<ng-container *ngIf="!tasksService.completed && tasksService.loading">
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<div class="visually-hidden" i18n>Loading...</div>
</ng-container>
@@ -27,23 +15,25 @@
<table class="table table-striped align-middle border shadow-sm">
<thead>
<tr>
<th scope="col">
<!-- [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" -->
<th>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
<!-- [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();" -->
<input type="checkbox" class="form-check-input" id="all-tasks">
<label class="form-check-label" for="all-tasks"></label>
</div>
</th>
<th scope="col" width="25%" i18n>Name</th>
<th scope="col" width="20%" i18n>Created</th>
<th scope="col" width="45%" i18n>Results</th>
<th scope="col" width="10%" i18n>Actions</th>
<th scope="col" sortable="name" i18n>Name</th>
<th scope="col" sortable="name" i18n>Started</th>
<th scope="col" i18n>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let task of tasks">
<th>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
<!-- [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();" -->
<input type="checkbox" class="form-check-input" id="task{{task.id}}">
<label class="form-check-label" for="task{{task.id}}"></label>
</div>
</th>
@@ -71,23 +61,23 @@
</table>
</ng-template>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
<li ngbNavItem="incomplete">
<a ngbNavLink i18n>Incomplete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.incompleteFileTasks.length}}</span></a>
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink i18n>Incomplete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.incomplete.length}}</span></a>
<ng-template ngbNavContent>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.incompleteFileTasks}"></ng-container>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.incomplete}"></ng-container>
</ng-template>
</li>
<li ngbNavItem="completed">
<a ngbNavLink i18n>Completed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
<li ngbNavItem>
<a ngbNavLink i18n>Completed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completed.length}}</span></a>
<ng-template ngbNavContent>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completed}"></ng-container>
</ng-template>
</li>
<li ngbNavItem="failed">
<a ngbNavLink i18n>Failed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.failedFileTasks.length}}</span></a>
<li ngbNavItem>
<a ngbNavLink i18n>Failed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.failed.length}}</span></a>
<ng-template ngbNavContent>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failed}"></ng-container>
</ng-template>
</li>
</ul>