Feature: consumption templates (#4196)

* Initial implementation of consumption templates

* Frontend implementation of consumption templates

Testing

* Support consumption template source

* order templates, automatically add permissions

* Support title assignment in consumption templates

* Refactoring, filters to and, show sources on list

Show sources on template list, update some translation strings

Make filters and

minor testing

* Update strings

* Only update django-multiselectfield

* Basic docs, document some methods

* Improve testing coverage, template multi-assignment merges

src-ui/src/app/components/manage/consumption-templates-list/consumption-templates-list.component.html

@@ -0,0 +1,33 @@
+<pngx-page-header title="Consumption Templates">
+    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editTemplate()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ConsumptionTemplate }">
+      <svg class="sidebaricon me-1" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+      </svg>
+      <ng-container i18n>Add Template</ng-container>
+    </button>
+  </pngx-page-header>
+
+  <table class="table table-striped align-middle border shadow-sm">
+    <thead>
+        <tr>
+            <th scope="col" i18n>Name</th>
+            <th scope="col" i18n>Sort order</th>
+            <th scope="col" i18n>Document Sources</th>
+            <th scope="col" i18n>Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let template of templates">
+            <td scope="row"><button class="btn btn-link p-0" type="button" (click)="editTemplate(template)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.ConsumptionTemplate)">{{template.name}}</button></td>
+            <td scope="row"><code>{{template.order}}</code></td>
+            <td scope="row">{{getSourceList(template)}}</td>
+            <td scope="row">
+                <div class="btn-group">
+                    <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.ConsumptionTemplate }" class="btn btn-sm btn-primary" type="button" (click)="editTemplate(template)" i18n>Edit</button>
+                    <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.ConsumptionTemplate }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteTemplate(template)" i18n>Delete</button>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<div *ngIf="templates.length === 0" i18n>No templates defined.</div>

src-ui/src/app/components/manage/consumption-templates-list/consumption-templates-list.component.spec.ts

@@ -0,0 +1,175 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import {
+  NgbModal,
+  NgbPaginationModule,
+  NgbModalRef,
+  NgbModalModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { of, throwError } from 'rxjs'
+import {
+  DocumentSource,
+  PaperlessConsumptionTemplate,
+} from 'src/app/data/paperless-consumption-template'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { ConsumptionTemplateService } from 'src/app/services/rest/consumption-template.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConsumptionTemplatesListComponent } from './consumption-templates-list.component'
+import { ConsumptionTemplateEditDialogComponent } from '../../common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component'
+import { PermissionsService } from 'src/app/services/permissions.service'
+
+const templates: PaperlessConsumptionTemplate[] = [
+  {
+    id: 0,
+    name: 'Template 1',
+    order: 0,
+    sources: [
+      DocumentSource.ConsumeFolder,
+      DocumentSource.ApiUpload,
+      DocumentSource.MailFetch,
+    ],
+    filter_filename: 'foo',
+    filter_path: 'bar',
+    assign_tags: [1, 2, 3],
+  },
+  {
+    id: 1,
+    name: 'Template 2',
+    order: 1,
+    sources: [DocumentSource.MailFetch],
+    filter_filename: null,
+    filter_path: 'foo/bar',
+    assign_owner: 1,
+  },
+]
+
+describe('ConsumptionTemplatesComponent', () => {
+  let component: ConsumptionTemplatesListComponent
+  let fixture: ComponentFixture<ConsumptionTemplatesListComponent>
+  let consumptionTemplateService: ConsumptionTemplateService
+  let modalService: NgbModal
+  let toastService: ToastService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ConsumptionTemplatesListComponent,
+        IfPermissionsDirective,
+        PageHeaderComponent,
+        ConfirmDialogComponent,
+      ],
+      providers: [
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+            currentUserHasObjectPermissions: () => true,
+            currentUserOwnsObject: () => true,
+          },
+        },
+      ],
+      imports: [
+        HttpClientTestingModule,
+        NgbPaginationModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModalModule,
+      ],
+    })
+
+    consumptionTemplateService = TestBed.inject(ConsumptionTemplateService)
+    jest.spyOn(consumptionTemplateService, 'listAll').mockReturnValue(
+      of({
+        count: templates.length,
+        all: templates.map((o) => o.id),
+        results: templates,
+      })
+    )
+    modalService = TestBed.inject(NgbModal)
+    toastService = TestBed.inject(ToastService)
+
+    fixture = TestBed.createComponent(ConsumptionTemplatesListComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should support create, show notification on error / success', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    const createButton = fixture.debugElement.queryAll(By.css('button'))[0]
+    createButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog =
+      modal.componentInstance as ConsumptionTemplateEditDialogComponent
+
+    // fail first
+    editDialog.failed.emit({ error: 'error creating item' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    // succeed
+    editDialog.succeeded.emit(templates[0])
+    expect(toastInfoSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should support edit, show notification on error / success', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    const editButton = fixture.debugElement.queryAll(By.css('button'))[1]
+    editButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog =
+      modal.componentInstance as ConsumptionTemplateEditDialogComponent
+    expect(editDialog.object).toEqual(templates[0])
+
+    // fail first
+    editDialog.failed.emit({ error: 'error editing item' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    // succeed
+    editDialog.succeeded.emit(templates[0])
+    expect(toastInfoSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should support delete, show notification on error / success', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const deleteSpy = jest.spyOn(consumptionTemplateService, 'delete')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[3]
+    deleteButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog = modal.componentInstance as ConfirmDialogComponent
+
+    // fail first
+    deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
+    editDialog.confirmClicked.emit()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    // succeed
+    deleteSpy.mockReturnValueOnce(of(true))
+    editDialog.confirmClicked.emit()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/manage/consumption-templates-list/consumption-templates-list.component.ts

@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core'
+import { ConsumptionTemplateService } from 'src/app/services/rest/consumption-template.service'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { Subject, takeUntil } from 'rxjs'
+import { PaperlessConsumptionTemplate } from 'src/app/data/paperless-consumption-template'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { ToastService } from 'src/app/services/toast.service'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  ConsumptionTemplateEditDialogComponent,
+  DOCUMENT_SOURCE_OPTIONS,
+} from '../../common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
+
+@Component({
+  selector: 'pngx-consumption-templates-list',
+  templateUrl: './consumption-templates-list.component.html',
+  styleUrls: ['./consumption-templates-list.component.scss'],
+})
+export class ConsumptionTemplatesListComponent
+  extends ComponentWithPermissions
+  implements OnInit
+{
+  public templates: PaperlessConsumptionTemplate[] = []
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
+  constructor(
+    private consumptionTemplateService: ConsumptionTemplateService,
+    public permissionsService: PermissionsService,
+    private modalService: NgbModal,
+    private toastService: ToastService
+  ) {
+    super()
+  }
+
+  ngOnInit() {
+    this.reload()
+  }
+
+  reload() {
+    this.consumptionTemplateService
+      .listAll()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((r) => {
+        this.templates = r.results
+      })
+  }
+
+  getSourceList(template: PaperlessConsumptionTemplate): string {
+    return template.sources
+      .map((id) => DOCUMENT_SOURCE_OPTIONS.find((s) => s.id === id).name)
+      .join(', ')
+  }
+
+  editTemplate(rule: PaperlessConsumptionTemplate) {
+    const modal = this.modalService.open(
+      ConsumptionTemplateEditDialogComponent,
+      {
+        backdrop: 'static',
+        size: 'xl',
+      }
+    )
+    modal.componentInstance.dialogMode = rule
+      ? EditDialogMode.EDIT
+      : EditDialogMode.CREATE
+    modal.componentInstance.object = rule
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((newTemplate) => {
+        this.toastService.showInfo(
+          $localize`Saved template "${newTemplate.name}".`
+        )
+        this.consumptionTemplateService.clearCache()
+        this.reload()
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving template.`, e)
+      })
+  }
+
+  deleteTemplate(rule: PaperlessConsumptionTemplate) {
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete template`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this template.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      this.consumptionTemplateService.delete(rule).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted template`)
+          this.consumptionTemplateService.clearCache()
+          this.reload()
+        },
+        error: (e) => {
+          this.toastService.showError($localize`Error deleting template.`, e)
+        },
+      })
+    })
+  }
+}