Enhancement: implement document link custom field (#4799)

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html

@@ -1,16 +1,16 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
-    </div>
-    <div class="modal-body">
-      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
-      <pngx-input-select i18n-title title="Data type" [items]="getDataTypes()" formControlName="data_type"></pngx-input-select>
-      <small class="d-block mt-n2" *ngIf="typeFieldDisabled" i18n>Data type cannot be changed after a field is created</small>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+    <pngx-input-select i18n-title title="Data type" [items]="getDataTypes()" formControlName="data_type"></pngx-input-select>
+    <small class="d-block mt-n2" *ngIf="typeFieldDisabled" i18n>Data type cannot be changed after a field is created</small>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -0,0 +1,50 @@
+<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
+    <div class="row">
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        <label *ngIf="title" class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+          <svg class="sidebaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+        </button>
+      </div>
+      <div [class.col-md-9]="horizontal">
+        <div>
+          <ng-select name="inputId" [(ngModel)]="selectedDocuments"
+            [disabled]="disabled"
+            [items]="foundDocuments$ | async"
+            placeholder="Search for documents"
+            [notFoundText]="notFoundText"
+            [multiple]="true"
+            bindValue="id"
+            [compareWith]="compareDocuments"
+            [trackByFn]="trackByFn"
+            [minTermLength]="2"
+            [loading]="loading"
+            [typeahead]="documentsInput$"
+            (change)="onChange(selectedDocuments)">
+                <ng-template ng-label-tmp let-document="item">
+                  <div class="d-flex align-items-center">
+                    <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
+                      <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                    </svg>
+                    <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary">
+                      <svg class="sidebaricon-sm me-1" fill="currentColor">
+                        <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                      </svg><span>{{document.title}}</span>
+                    </a>
+                  </div>
+                </ng-template>
+                <ng-template ng-loadingspinner-tmp>
+                  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                  <div class="visually-hidden" i18n>Loading...</div>
+                </ng-template>
+                <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+                  <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+                </ng-template>
+          </ng-select>
+        </div>
+        <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+      </div>
+    </div>
+  </div>

src-ui/src/app/components/common/input/document-link/document-link.component.scss

@@ -0,0 +1,14 @@
+::ng-deep .ng-select-container .ng-value-container .ng-value {
+    background-color: transparent !important;
+    border-color: transparent;
+}
+
+.sidebaricon {
+    cursor: pointer;
+}
+
+.badge {
+    font-size: .75rem;
+    // --bs-primary: var(--pngx-bg-alt);
+    // color: var(--pngx-primary-text-contrast);
+}

src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts

@@ -0,0 +1,118 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { of, throwError } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { DocumentLinkComponent } from './document-link.component'
+import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+
+const documents = [
+  {
+    id: 1,
+    title: 'Document 1 foo',
+  },
+  {
+    id: 12,
+    title: 'Document 12 bar',
+  },
+  {
+    id: 23,
+    title: 'Document 23 bar',
+  },
+]
+
+describe('DocumentLinkComponent', () => {
+  let component: DocumentLinkComponent
+  let fixture: ComponentFixture<DocumentLinkComponent>
+  let documentService: DocumentService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DocumentLinkComponent],
+      imports: [
+        HttpClientTestingModule,
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+      ],
+    })
+    documentService = TestBed.inject(DocumentService)
+    fixture = TestBed.createComponent(DocumentLinkComponent)
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should retrieve selected documents from APIs', () => {
+    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+    getSpy.mockImplementation((ids) => {
+      return of(documents.filter((d) => ids.includes(d.id)))
+    })
+    component.writeValue([1])
+    expect(getSpy).toHaveBeenCalled()
+  })
+
+  it('should search API on select text input', () => {
+    const listSpy = jest.spyOn(documentService, 'listFiltered')
+    listSpy.mockImplementation(
+      (page, pageSize, sortField, sortReverse, filterRules, extraParams) => {
+        const docs = documents.filter((d) =>
+          d.title.includes(filterRules[0].value)
+        )
+        return of({
+          count: docs.length,
+          results: docs,
+          all: docs.map((d) => d.id),
+        })
+      }
+    )
+    component.documentsInput$.next('bar')
+    expect(listSpy).toHaveBeenCalledWith(
+      1,
+      null,
+      'created',
+      true,
+      [{ rule_type: FILTER_TITLE, value: 'bar' }],
+      { truncate_content: true }
+    )
+    listSpy.mockReturnValueOnce(throwError(() => new Error()))
+    component.documentsInput$.next('foo')
+  })
+
+  it('should load values correctly', () => {
+    jest.spyOn(documentService, 'getCachedMany').mockImplementation((ids) => {
+      return of(documents.filter((d) => ids.includes(d.id)))
+    })
+    component.writeValue([12, 23])
+    expect(component.value).toEqual([12, 23])
+    expect(component.selectedDocuments).toEqual([documents[1], documents[2]])
+    component.writeValue(null)
+    expect(component.value).toEqual([])
+    expect(component.selectedDocuments).toEqual([])
+    component.writeValue([])
+    expect(component.value).toEqual([])
+    expect(component.selectedDocuments).toEqual([])
+  })
+
+  it('should support unselect', () => {
+    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+    getSpy.mockImplementation((ids) => {
+      return of(documents.filter((d) => ids.includes(d.id)))
+    })
+    component.writeValue([12, 23])
+    component.unselect({ id: 23 })
+    fixture.detectChanges()
+    expect(component.selectedDocuments).toEqual([documents[1]])
+  })
+
+  it('should use correct compare, trackBy functions', () => {
+    expect(component.compareDocuments(documents[0], { id: 1 })).toBeTruthy()
+    expect(component.compareDocuments(documents[0], { id: 2 })).toBeFalsy()
+    expect(component.trackByFn(documents[1])).toEqual(12)
+  })
+})

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -0,0 +1,120 @@
+import { Component, forwardRef, OnInit, Input, OnDestroy } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  Subject,
+  Observable,
+  takeUntil,
+  concat,
+  of,
+  distinctUntilChanged,
+  tap,
+  switchMap,
+  map,
+  catchError,
+} from 'rxjs'
+import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DocumentLinkComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-document-link',
+  templateUrl: './document-link.component.html',
+  styleUrls: ['./document-link.component.scss'],
+})
+export class DocumentLinkComponent
+  extends AbstractInputComponent<any[]>
+  implements OnInit, OnDestroy
+{
+  documentsInput$ = new Subject<string>()
+  foundDocuments$: Observable<PaperlessDocument[]>
+  loading = false
+  selectedDocuments: PaperlessDocument[] = []
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
+  @Input()
+  notFoundText: string = $localize`No documents found`
+
+  constructor(private documentsService: DocumentService) {
+    super()
+  }
+
+  ngOnInit() {
+    this.loadDocs()
+  }
+
+  writeValue(documentIDs: number[]): void {
+    if (!documentIDs || documentIDs.length === 0) {
+      this.selectedDocuments = []
+      super.writeValue([])
+    } else {
+      this.loading = true
+      this.documentsService
+        .getCachedMany(documentIDs)
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe((documents) => {
+          this.loading = false
+          this.selectedDocuments = documents
+          super.writeValue(documentIDs)
+        })
+    }
+  }
+
+  private loadDocs() {
+    this.foundDocuments$ = concat(
+      of([]), // default items
+      this.documentsInput$.pipe(
+        distinctUntilChanged(),
+        takeUntil(this.unsubscribeNotifier),
+        tap(() => (this.loading = true)),
+        switchMap((title) =>
+          this.documentsService
+            .listFiltered(
+              1,
+              null,
+              'created',
+              true,
+              [{ rule_type: FILTER_TITLE, value: title }],
+              { truncate_content: true }
+            )
+            .pipe(
+              map((results) => results.results),
+              catchError(() => of([])), // empty on error
+              tap(() => (this.loading = false))
+            )
+        )
+      )
+    )
+  }
+
+  unselect(document: PaperlessDocument): void {
+    this.selectedDocuments = this.selectedDocuments.filter(
+      (d) => d.id !== document.id
+    )
+    this.onChange(this.selectedDocuments.map((d) => d.id))
+  }
+
+  compareDocuments(
+    document: PaperlessDocument,
+    selectedDocument: PaperlessDocument
+  ) {
+    return document.id === selectedDocument.id
+  }
+
+  trackByFn(item: PaperlessDocument) {
+    return item.id
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(true)
+    this.unsubscribeNotifier.complete()
+  }
+}

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,4 +1,4 @@
-<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="suggestions">
+<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="getSuggestions().length > 0">
   <div class="row">
     <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
       <label class="form-label" [class.mb-md-0]="horizontal" for="tags" i18n>{{title}}</label>

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -131,6 +131,7 @@
                                     <pngx-input-number *ngSwitchCase="PaperlessCustomFieldDataType.Monetary" formControlName="value" [title]="getCustomFieldFromInstance(fieldInstance)?.name" [removable]="true" (removed)="removeField(fieldInstance)" [horizontal]="true" [showAdd]="false" [step]=".01" [error]="getCustomFieldError(i)"></pngx-input-number>
                                     <pngx-input-check *ngSwitchCase="PaperlessCustomFieldDataType.Boolean" formControlName="value" [title]="getCustomFieldFromInstance(fieldInstance)?.name" [removable]="true" (removed)="removeField(fieldInstance)" [horizontal]="true"></pngx-input-check>
                                     <pngx-input-url *ngSwitchCase="PaperlessCustomFieldDataType.Url" formControlName="value" [title]="getCustomFieldFromInstance(fieldInstance)?.name" [removable]="true" (removed)="removeField(fieldInstance)" [horizontal]="true" [error]="getCustomFieldError(i)"></pngx-input-url>
+                                    <pngx-input-document-link *ngSwitchCase="PaperlessCustomFieldDataType.DocumentLink" formControlName="value" [title]="getCustomFieldFromInstance(fieldInstance)?.name" [removable]="true" (removed)="removeField(fieldInstance)" [horizontal]="true" [error]="getCustomFieldError(i)"></pngx-input-document-link>
                                 </div>
                             </ng-container>
                         </div>