paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-25 10:49:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Basic tasks frontend view

Browse Source 
Update app-frame.component.ts
This commit is contained in:
Michael Shamoon 2022-05-23 00:32:39 -07:00
parent 3dc617277f
commit d925fb38ce
8 changed files with 93 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/app-routing.module.ts
View File

@ -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 },
],
},

2
src-ui/src/app/app.module.ts
View File

@ -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,

7
src-ui/src/app/components/app-frame/app-frame.component.html
View File

@ -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">

5
src-ui/src/app/components/app-frame/app-frame.component.ts
View File

@ -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',

60
src-ui/src/app/components/manage/tasks/tasks.component.html
View File

@ -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,23 +15,25 @@
<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>
<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>
@ -71,23 +61,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>

55
src-ui/src/app/components/manage/tasks/tasks.component.ts
View File

@ -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)
}
}

18
src-ui/src/app/data/paperless-task.ts
View File

@ -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

85
src-ui/src/app/services/tasks.service.ts
View File

@ -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()))
// }
}