From f88e0704550d0da18758e97089fc1dd8f557a613 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 23 May 2022 01:21:06 -0700 Subject: [PATCH] Toggle functionality for tasks list --- .../manage/tasks/tasks.component.html | 83 +++++++++++++++++ .../manage/tasks/tasks.component.ts | 75 ++++++++++++++++ src-ui/src/app/services/tasks.service.ts | 89 +++++++++++++++++++ 3 files changed, 247 insertions(+) create mode 100644 src-ui/src/app/components/manage/tasks/tasks.component.html create mode 100644 src-ui/src/app/components/manage/tasks/tasks.component.ts create mode 100644 src-ui/src/app/services/tasks.service.ts diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.html b/src-ui/src/app/components/manage/tasks/tasks.component.html new file mode 100644 index 000000000..edbfa126a --- /dev/null +++ b/src-ui/src/app/components/manage/tasks/tasks.component.html @@ -0,0 +1,83 @@ + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ 		NameCreatedActions
+
+ + +
+ 		{{ task.name }}{{ task.created | customDate:'medium' }} + +
+ + + +
diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.ts b/src-ui/src/app/components/manage/tasks/tasks.component.ts new file mode 100644 index 000000000..e0e7c3466 --- /dev/null +++ b/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 = 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() + } +} diff --git a/src-ui/src/app/services/tasks.service.ts b/src-ui/src/app/services/tasks.service.ts new file mode 100644 index 000000000..3560122a9 --- /dev/null +++ b/src-ui/src/app/services/tasks.service.ts @@ -0,0 +1,89 @@ +import { HttpClient } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { Observable } from 'rxjs' +import { first, map } from 'rxjs/operators' +import { PaperlessTask } from 'src/app/data/paperless-task' +import { environment } from 'src/environments/environment' + +interface TasksAPIResponse { + total: number + incomplete: Array + completed: Array + failed: Array +} + +@Injectable({ + providedIn: 'root', +}) +export class TasksService { + private baseUrl: string = environment.apiBaseUrl + + loading: boolean + + public total: number + + private incompleteTasks: PaperlessTask[] = [] + public get incomplete(): PaperlessTask[] { + return this.incompleteTasks + } + + private completedTasks: PaperlessTask[] = [] + public get completed(): PaperlessTask[] { + return this.completedTasks + } + + private failedTasks: PaperlessTask[] = [] + public get failed(): PaperlessTask[] { + return this.failedTasks + } + + constructor(private http: HttpClient) {} + + public reload() { + this.loading = true + + this.http + .get(`${this.baseUrl}consumption_tasks/`) + .pipe(first()) + .subscribe((r) => { + this.total = r.total + this.incompleteTasks = r.incomplete + this.completedTasks = r.completed + this.failedTasks = r.failed + this.loading = false + return true + }) + } + + // 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 { + // return combineLatest(objects.map((o) => super.patch(o))).pipe( + // tap(() => this.reload()) + // ) + // } + + // delete(o: PaperlessSavedView) { + // return super.delete(o).pipe(tap(() => this.reload())) + // } +}