tasks usability improvements

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

@@ -11,9 +11,13 @@
       </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">
+      <svg *ngIf="!tasksService.loading" class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
-      </svg>&nbsp;<ng-container i18n>Refresh</ng-container>
+      </svg>
+      <ng-container *ngIf="tasksService.loading">
+        <div class="spinner-border spinner-border-sm fw-normal" role="status"></div>
+        <div class="visually-hidden" i18n>Loading...</div>
+      </ng-container>&nbsp;<ng-container i18n>Refresh</ng-container>
     </button>
   </div>
 </app-page-header>
@@ -41,7 +45,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let task of tasks">
+      <tr *ngFor="let task of tasks" (click)="toggleSelected(task, $event); $event.stopPropagation();">
         <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();">
@@ -56,7 +60,7 @@
               <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
             </svg>
             <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
-            <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
+            <ng-template #resultPopover><pre class="small">{{ task.result }}</pre></ng-template>
           </div>
           <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
         </td>
@@ -69,7 +73,7 @@
           <ng-template #resultPopoverMobile><div class="small">{{ task.created | customDate:'short' }}<div class="font-monospace">{{ task.result }}</div></div></ng-template>
         </td>
         <td scope="row">
-          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
+          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();">
             <svg class="sidebaricon" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#check"/>
             </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>

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

@@ -5,3 +5,8 @@
 ::ng-deep .popover.mobile {
     max-width: 75%;
 }
+
+.btn .spinner-border-sm {
+    width: 0.8rem;
+    height: 0.8rem;
+}

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

@@ -1,7 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core'
-import { takeUntil, Subject } from 'rxjs'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { takeUntil, Subject, first } from 'rxjs'
 import { PaperlessTask } from 'src/app/data/paperless-task'
 import { TasksService } from 'src/app/services/tasks.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 
 @Component({
   selector: 'app-tasks',
@@ -19,7 +21,10 @@ export class TasksComponent implements OnInit, OnDestroy {
       : $localize`Dismiss all`
   }
 
-  constructor(public tasksService: TasksService) {}
+  constructor(
+    public tasksService: TasksService,
+    private modalService: NgbModal
+  ) {}
 
   ngOnInit() {
     this.tasksService.reload()
@@ -36,8 +41,24 @@ export class TasksComponent implements OnInit, OnDestroy {
   dismissTasks(task: PaperlessTask = undefined) {
     let tasks = task ? new Set([task.id]) : this.selectedTasks
     if (!task && this.selectedTasks.size == 0)
-      tasks = new Set(this.currentTasks.map((t) => t.id))
+      tasks = new Set(this.tasksService.allFileTasks.map((t) => t.id))
-    this.tasksService.dismissTasks(tasks)
+    if (tasks.size > 1) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
+      })
+      modal.componentInstance.title = $localize`Confirm Dismiss All`
+      modal.componentInstance.messageBold =
+        $localize`Dismiss all` + ` ${tasks.size} ` + $localize`tasks?`
+      modal.componentInstance.btnClass = 'btn-warning'
+      modal.componentInstance.btnCaption = $localize`Dismiss`
+      modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        modal.close()
+        this.tasksService.dismissTasks(tasks)
+      })
+    } else {
+      this.tasksService.dismissTasks(tasks)
+    }
   }
 
   toggleSelected(task: PaperlessTask) {

src-ui/src/app/services/tasks.service.ts

@@ -22,6 +22,10 @@ export class TasksService {
     return this.fileTasks?.length
   }
 
+  public get allFileTasks(): PaperlessTask[] {
+    return this.fileTasks.slice(0)
+  }
+
   public get incompleteFileTasks(): PaperlessTask[] {
     return this.fileTasks.filter(
       (t) => t.status == PaperlessTaskStatus.Incomplete