Basic tasks frontend view

Update app-frame.component.ts

src-ui/src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DirtyFormGuard } from './guards/dirty-form.guard'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
+import { TasksComponent } from './components/manage/tasks/tasks.component'
 
 const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -35,6 +36,7 @@ const routes: Routes = [
         component: SettingsComponent,
         canDeactivate: [DirtyFormGuard],
       },
+      { path: 'tasks', component: TasksComponent },
     ],
   },
 

src-ui/src/app/app.module.ts

@@ -90,6 +90,7 @@ import localeZh from '@angular/common/locales/zh'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
 import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { SettingsService } from './services/settings.service'
+import { TasksComponent } from './components/manage/tasks/tasks.component'
 
 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -171,6 +172,7 @@ function initializeApp(settings: SettingsService) {
     DateComponent,
     ColorComponent,
     DocumentAsnComponent,
+    TasksComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -141,6 +141,13 @@
               </svg>&nbsp;<ng-container i18n>Storage paths</ng-container>
             </a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#list-task"/>
+              </svg>&nbsp;<ng-container i18n>File Tasks</ng-container>
+            </a>
+          </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { FormControl } from '@angular/forms'
 import { ActivatedRoute, Router, Params } from '@angular/router'
-import { from, Observable, Subscription, BehaviorSubject } from 'rxjs'
+import { from, Observable } from 'rxjs'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -15,14 +15,13 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
 import { environment } from 'src/environments/environment'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
-import { Meta } from '@angular/platform-browser'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'
 import {
   RemoteVersionService,
   AppRemoteVersion,
 } from 'src/app/services/rest/remote-version.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 
 @Component({
   selector: 'app-app-frame',

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

@@ -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,38 +15,32 @@
   <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 scope="row">
+        <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();">
+            <!--  [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>
-        <td>{{ task.name }}</td>
-        <td>{{ task.created | customDate:'short' }}</td>
-        <td>
-          <button *ngIf="task.result.length > 50" class="btn btn-link p-1 mr-2" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click">
-            <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-            </svg>
-          </button><span class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
-          <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
         </td>
-        <td>
-          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
+        <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)="acknowledgeTask(task)">
             <svg class="sidebaricon" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#check"/>
             </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
@@ -69,23 +51,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>

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

@@ -9,16 +9,8 @@ import { TasksService } from 'src/app/services/tasks.service'
   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() {
@@ -29,50 +21,7 @@ export class TasksComponent implements OnInit, OnDestroy {
     this.unsubscribeNotifer.next(true)
   }
 
-  dismissTask(task: PaperlessTask) {
-    this.dismissTasks(task)
-  }
-
-  dismissTasks(task: PaperlessTask = undefined) {
-    let tasks = task ? new Set([task.id]) : this.selectedTasks
-    if (this.selectedTasks.size == 0)
-      tasks = new Set(this.currentTasks.map((t) => t.id))
-    this.tasksService.dismissTasks(tasks)
-  }
-
-  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.incompleteFileTasks
-        break
-      case 'completed':
-        tasks = this.tasksService.completedFileTasks
-        break
-      case 'failed':
-        tasks = this.tasksService.failedFileTasks
-        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()
+  acknowledgeTask(task: PaperlessTask) {
+    throw new Error('Not implemented' + task)
   }
 }

src-ui/src/app/data/paperless-task.ts

@@ -1,25 +1,9 @@
 import { ObjectWithId } from './object-with-id'
 
-export enum PaperlessTaskType {
-  // just file tasks, for now
-  File = 'file',
-}
-
-export enum PaperlessTaskStatus {
-  Incomplete = 'incomplete',
-  Complete = 'complete',
-  Failed = 'failed',
-  Unknown = 'unknown',
-}
-
 export interface PaperlessTask extends ObjectWithId {
-  type: PaperlessTaskType
-
-  status: PaperlessTaskStatus
-
   acknowledged: boolean
 
-  task_id: string
+  q_task_id: string
 
   name: string
 

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

@@ -1,13 +1,16 @@
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
 import { first, map } from 'rxjs/operators'
-import {
-  PaperlessTask,
-  PaperlessTaskStatus,
-  PaperlessTaskType,
-} from 'src/app/data/paperless-task'
+import { PaperlessTask } from 'src/app/data/paperless-task'
 import { environment } from 'src/environments/environment'
 
+interface TasksAPIResponse {
+  incomplete: Array<PaperlessTask>
+  completed: Array<PaperlessTask>
+  failed: Array<PaperlessTask>
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -16,26 +19,19 @@ export class TasksService {
 
   loading: boolean
 
-  private fileTasks: PaperlessTask[] = []
-
-  public get total(): number {
-    return this.fileTasks?.length
+  private incompleteTasks: PaperlessTask[] = []
+  public get incomplete(): PaperlessTask[] {
+    return this.incompleteTasks
   }
 
-  public get incompleteFileTasks(): PaperlessTask[] {
-    return this.fileTasks.filter(
-      (t) => t.status == PaperlessTaskStatus.Incomplete
-    )
+  private completedTasks: PaperlessTask[] = []
+  public get completed(): PaperlessTask[] {
+    return this.completedTasks
   }
 
-  public get completedFileTasks(): PaperlessTask[] {
-    return this.fileTasks.filter(
-      (t) => t.status == PaperlessTaskStatus.Complete
-    )
-  }
-
-  public get failedFileTasks(): PaperlessTask[] {
-    return this.fileTasks.filter((t) => t.status == PaperlessTaskStatus.Failed)
+  private failedTasks: PaperlessTask[] = []
+  public get failed(): PaperlessTask[] {
+    return this.failedTasks
   }
 
   constructor(private http: HttpClient) {}
@@ -44,23 +40,46 @@ export class TasksService {
     this.loading = true
 
     this.http
-      .get<PaperlessTask[]>(`${this.baseUrl}tasks/`)
+      .get<TasksAPIResponse>(`${this.baseUrl}consumption_tasks/`)
       .pipe(first())
       .subscribe((r) => {
-        this.fileTasks = r.filter((t) => t.type == PaperlessTaskType.File) // they're all File tasks, for now
+        this.incompleteTasks = r.incomplete
+        this.completedTasks = r.completed
+        this.failedTasks = r.failed
         this.loading = false
         return true
       })
   }
 
-  public dismissTasks(task_ids: Set<number>) {
-    this.http
-      .post(`${this.baseUrl}acknowledge_tasks/`, {
-        tasks: [...task_ids],
-      })
-      .pipe(first())
-      .subscribe((r) => {
-        this.reload()
-      })
-  }
+  // private savedViews: PaperlessSavedView[] = []
+
+  // get allViews() {
+  //   return this.savedViews
+  // }
+
+  // get sidebarViews() {
+  //   return this.savedViews.filter((v) => v.show_in_sidebar)
+  // }
+
+  // get dashboardViews() {
+  //   return this.savedViews.filter((v) => v.show_on_dashboard)
+  // }
+
+  // create(o: PaperlessSavedView) {
+  //   return super.create(o).pipe(tap(() => this.reload()))
+  // }
+
+  // update(o: PaperlessSavedView) {
+  //   return super.update(o).pipe(tap(() => this.reload()))
+  // }
+
+  // patchMany(objects: PaperlessSavedView[]): Observable<PaperlessSavedView[]> {
+  //   return combineLatest(objects.map((o) => super.patch(o))).pipe(
+  //     tap(() => this.reload())
+  //   )
+  // }
+
+  // delete(o: PaperlessSavedView) {
+  //   return super.delete(o).pipe(tap(() => this.reload()))
+  // }
 }