Enhancement: file task filtering (#8421)

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

@@ -1,12 +1,36 @@
 import { Component, OnInit, OnDestroy } from '@angular/core'
 import { Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { first } from 'rxjs'
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  first,
+  Subject,
+  takeUntil,
+} 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'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
+export enum TaskTab {
+  Queued = 'queued',
+  Started = 'started',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+enum TaskFilterTargetID {
+  Name,
+  Result,
+}
+
+const FILTER_TARGETS = [
+  { id: TaskFilterTargetID.Name, name: $localize`Name` },
+  { id: TaskFilterTargetID.Result, name: $localize`Result` },
+]
+
 @Component({
   selector: 'pngx-tasks',
   templateUrl: './tasks.component.html',
@@ -16,7 +40,7 @@ export class TasksComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  public activeTab: string
+  public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
   public togggleAll: boolean = false
   public expandedTask: number
@@ -26,6 +50,28 @@ export class TasksComponent
 
   public autoRefreshInterval: any
 
+  private _filterText: string = ''
+  get filterText() {
+    return this._filterText
+  }
+  set filterText(value: string) {
+    this.filterDebounce.next(value)
+  }
+
+  public filterTargetID: TaskFilterTargetID = TaskFilterTargetID.Name
+  public get filterTargetName(): string {
+    return this.filterTargets.find((t) => t.id == this.filterTargetID).name
+  }
+  private filterDebounce: Subject<string> = new Subject<string>()
+
+  public get filterTargets(): Array<{ id: number; name: string }> {
+    return [TaskTab.Failed, TaskTab.Completed].includes(this.activeTab)
+      ? FILTER_TARGETS
+      : FILTER_TARGETS.slice(0, 1)
+  }
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
   get dismissButtonText(): string {
     return this.selectedTasks.size > 0
       ? $localize`Dismiss selected`
@@ -43,11 +89,21 @@ export class TasksComponent
   ngOnInit() {
     this.tasksService.reload()
     this.toggleAutoRefresh()
+
+    this.filterDebounce
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        debounceTime(100),
+        distinctUntilChanged(),
+        filter((query) => !query.length || query.length > 2)
+      )
+      .subscribe((query) => (this._filterText = query))
   }
 
   ngOnDestroy() {
     this.tasksService.cancelPending()
     clearInterval(this.autoRefreshInterval)
+    this.unsubscribeNotifier.next(this)
   }
 
   dismissTask(task: PaperlessTask) {
@@ -96,19 +152,30 @@ export class TasksComponent
   get currentTasks(): PaperlessTask[] {
     let tasks: PaperlessTask[] = []
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         tasks = this.tasksService.queuedFileTasks
         break
-      case 'started':
+      case TaskTab.Started:
         tasks = this.tasksService.startedFileTasks
         break
-      case 'completed':
+      case TaskTab.Completed:
         tasks = this.tasksService.completedFileTasks
         break
-      case 'failed':
+      case TaskTab.Failed:
         tasks = this.tasksService.failedFileTasks
         break
     }
+    if (this._filterText.length) {
+      tasks = tasks.filter((t) => {
+        if (this.filterTargetID == TaskFilterTargetID.Name) {
+          return t.task_file_name
+            .toLowerCase()
+            .includes(this._filterText.toLowerCase())
+        } else if (this.filterTargetID == TaskFilterTargetID.Result) {
+          return t.result.toLowerCase().includes(this._filterText.toLowerCase())
+        }
+      })
+    }
     return tasks
   }
 
@@ -125,19 +192,24 @@ export class TasksComponent
     this.selectedTasks.clear()
   }
 
-  duringTabChange(navID: number) {
+  duringTabChange() {
     this.page = 1
   }
 
+  beforeTabChange() {
+    this.resetFilter()
+    this.filterTargetID = TaskFilterTargetID.Name
+  }
+
   get activeTabLocalized(): string {
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         return $localize`queued`
-      case 'started':
+      case TaskTab.Started:
         return $localize`started`
-      case 'completed':
+      case TaskTab.Completed:
         return $localize`completed`
-      case 'failed':
+      case TaskTab.Failed:
         return $localize`failed`
     }
   }
@@ -152,4 +224,16 @@ export class TasksComponent
       }, 5000)
     }
   }
+
+  public resetFilter() {
+    this._filterText = ''
+  }
+
+  filterInputKeyup(event: KeyboardEvent) {
+    if (event.key == 'Enter') {
+      this._filterText = (event.target as HTMLInputElement).value
+    } else if (event.key === 'Escape') {
+      this.resetFilter()
+    }
+  }
 }