Enhancement: document link field fixes (#5020)

* Implement more efficient getFew for document retrieval

* Filter out parent document ID & already-selected documents

* Clip very long document titles

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

@@ -1,6 +1,10 @@
-::ng-deep .ng-select-container .ng-value-container .ng-value {
-    background-color: transparent !important;
-    border-color: transparent;
+::ng-deep .ng-select-container .ng-value-container {
+    overflow: hidden;
+
+    .ng-value {
+        background-color: transparent !important;
+        border-color: transparent;
+    }
 }
 
 .sidebaricon {
@@ -9,6 +13,4 @@
 
 .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

@@ -20,6 +20,10 @@ const documents = [
     id: 12,
     title: 'Document 12 bar',
   },
+  {
+    id: 16,
+    title: 'Document 16 bar',
+  },
   {
     id: 23,
     title: 'Document 23 bar',
@@ -48,10 +52,15 @@ describe('DocumentLinkComponent', () => {
     fixture.detectChanges()
   })
 
-  it('should retrieve selected documents from APIs', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+  it('should retrieve selected documents from API', () => {
+    const getSpy = jest.spyOn(documentService, 'getFew')
     getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
     })
     component.writeValue([1])
     expect(getSpy).toHaveBeenCalled()
@@ -85,12 +94,18 @@ describe('DocumentLinkComponent', () => {
   })
 
   it('should load values correctly', () => {
-    jest.spyOn(documentService, 'getCachedMany').mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+    const getSpy = jest.spyOn(documentService, 'getFew')
+    getSpy.mockImplementation((ids) => {
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
     })
     component.writeValue([12, 23])
     expect(component.value).toEqual([12, 23])
-    expect(component.selectedDocuments).toEqual([documents[1], documents[2]])
+    expect(component.selectedDocuments).toEqual([documents[1], documents[3]])
     component.writeValue(null)
     expect(component.value).toEqual([])
     expect(component.selectedDocuments).toEqual([])
@@ -100,9 +115,14 @@ describe('DocumentLinkComponent', () => {
   })
 
   it('should support unselect', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+    const getSpy = jest.spyOn(documentService, 'getFew')
     getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
     })
     component.writeValue([12, 23])
     component.unselect({ id: 23 })
@@ -115,4 +135,26 @@ describe('DocumentLinkComponent', () => {
     expect(component.compareDocuments(documents[0], { id: 2 })).toBeFalsy()
     expect(component.trackByFn(documents[1])).toEqual(12)
   })
+
+  it('should not include the current document or already selected documents in results', () => {
+    let foundDocs
+    component.foundDocuments$.subscribe((found) => (foundDocs = found))
+    component.parentDocumentID = 23
+    component.selectedDocuments = [documents[2]]
+    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(foundDocs).toEqual([documents[1]])
+  })
 })

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

@@ -43,6 +43,9 @@ export class DocumentLinkComponent
   @Input()
   notFoundText: string = $localize`No documents found`
 
+  @Input()
+  parentDocumentID: number
+
   constructor(private documentsService: DocumentService) {
     super()
   }
@@ -58,11 +61,11 @@ export class DocumentLinkComponent
     } else {
       this.loading = true
       this.documentsService
-        .getCachedMany(documentIDs)
+        .getFew(documentIDs, { fields: 'id,title' })
         .pipe(takeUntil(this.unsubscribeNotifier))
-        .subscribe((documents) => {
+        .subscribe((documentResults) => {
           this.loading = false
-          this.selectedDocuments = documents
+          this.selectedDocuments = documentResults.results
           super.writeValue(documentIDs)
         })
     }
@@ -86,7 +89,13 @@ export class DocumentLinkComponent
               { truncate_content: true }
             )
             .pipe(
-              map((results) => results.results),
+              map((results) =>
+                results.results.filter(
+                  (d) =>
+                    d.id !== this.parentDocumentID &&
+                    !this.selectedDocuments.find((sd) => sd.id === d.id)
+                )
+              ),
               catchError(() => of([])), // empty on error
               tap(() => (this.loading = false))
             )