Toggle functionality for tasks list

src-ui/src/app/components/manage/tasks/tasks.component.html

@@ -0,0 +1,83 @@
+<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)="dismissMany()" [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>
+</app-page-header>
+
+<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>
+
+<ng-template let-tasks="tasks" #tasksTemplate>
+  <table class="table table-striped align-middle border shadow-sm">
+    <thead>
+      <tr>
+        <th>
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
+            <label class="form-check-label" for="all-tasks"></label>
+          </div>
+        </th>
+        <th scope="col" i18n>Name</th>
+        <th scope="col" i18n>Created</th>
+        <th scope="col" i18n>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let task of tasks">
+        <td>
+          <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();">
+            <label class="form-check-label" for="task{{task.id}}"></label>
+          </div>
+        </td>
+        <td scope="row">{{ task.name }}</td>
+        <td scope="row">{{ task.created | customDate:'medium' }}</td>
+        <td scope="row">
+          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </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.incomplete.length}}</span></a>
+    <ng-template ngbNavContent>
+      <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.completed.length}}</span></a>
+    <ng-template ngbNavContent>
+      <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.failed.length}}</span></a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failed}"></ng-container>
+    </ng-template>
+  </li>
+</ul>
+<div [ngbNavOutlet]="nav"></div>

src-ui/src/app/components/manage/tasks/tasks.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+import { takeUntil, Subject } from 'rxjs'
+import { PaperlessTask } from 'src/app/data/paperless-task'
+import { TasksService } from 'src/app/services/tasks.service'
+
+@Component({
+  selector: 'app-tasks',
+  templateUrl: './tasks.component.html',
+  styleUrls: ['./tasks.component.scss'],
+})
+export class TasksComponent implements OnInit, OnDestroy {
+  public activeTab: string
+  public selectedTasks: Set<number> = new Set()
+  private unsubscribeNotifer = new Subject()
+
+  get dismissButtonText(): string {
+    return this.selectedTasks.size > 0
+      ? $localize`Dismiss selected`
+      : $localize`Dismiss all`
+  }
+
+  constructor(public tasksService: TasksService) {}
+
+  ngOnInit() {
+    this.tasksService.reload()
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeNotifer.next(true)
+  }
+
+  dismissTask(task: PaperlessTask) {
+    throw new Error('Not implemented' + task)
+  }
+
+  dismissMany() {
+    throw new Error('Not implemented')
+  }
+
+  toggleSelected(task: PaperlessTask) {
+    this.selectedTasks.has(task.id)
+      ? this.selectedTasks.delete(task.id)
+      : this.selectedTasks.add(task.id)
+  }
+
+  get currentTasks(): PaperlessTask[] {
+    let tasks: PaperlessTask[]
+    switch (this.activeTab) {
+      case 'incomplete':
+        tasks = this.tasksService.incomplete
+        break
+      case 'completed':
+        tasks = this.tasksService.completed
+        break
+      case 'failed':
+        tasks = this.tasksService.failed
+        break
+      default:
+        break
+    }
+    return tasks
+  }
+
+  toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedTasks = new Set(this.currentTasks.map((t) => t.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  clearSelection() {
+    this.selectedTasks = new Set()
+  }
+}