Fixhancement: rework saved view widget queue processing to expected (#14699)

* activateSavedViewWithDocuments, move most of loadSavedView to a helper

* Consolidate the page size thing

* Pass widget's documents to list service fpr next / previous

* Tests for the page size + widget click

* Fix close from a dashboard widget list

src-ui/src/app/app-routing.module.ts

@@ -37,7 +37,7 @@ export const routes: Routes = [
         path: 'dashboard',
         component: DashboardComponent,
         data: {
-          componentName: 'AppFrameComponent',
+          componentName: 'DashboardComponent',
         },
       },
       {

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -62,13 +62,13 @@
                 } @else {
                   @switch (field) {
                     @case (DisplayField.ADDED) {
-                      <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
+                      <a routerLink="/documents/{{doc.id}}" (click)="activateViewForNavigation()" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
                     }
                     @case (DisplayField.CREATED) {
-                      <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created | customDate}}</a>
+                      <a routerLink="/documents/{{doc.id}}" (click)="activateViewForNavigation()" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created | customDate}}</a>
                     }
                     @case (DisplayField.TITLE) {
-                      <a routerLink="/documents/{{doc.id}}" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
+                      <a routerLink="/documents/{{doc.id}}" (click)="activateViewForNavigation()" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
                     }
                     @case (DisplayField.CORRESPONDENT) {
                       @if (doc.correspondent) {
@@ -106,7 +106,7 @@
                     }
                     @case (DisplayField.NOTES) {
                       @if (doc.notes.length) {
-                        <a routerLink="/documents/{{doc.id}}/notes" class="btn btn-sm p-0">
+                        <a routerLink="/documents/{{doc.id}}/notes" (click)="activateViewForNavigation()" class="btn btn-sm p-0">
                           <span class="badge rounded-pill bg-light border text-primary">
                             <pngx-bs-icon width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></pngx-bs-icon>
                           {{doc.notes.length}}</span>
@@ -150,6 +150,7 @@
         <pngx-document-card-small
           class="p-0"
           [ngStyle]="{ opacity: show() ? 1 : 1 - (i * 1/documents().length) }"
+          (click)="activateViewForNavigation()"
           (dblClickDocument)="openDocumentDetail(d)"
           [document]="d"
           [displayFields]="displayFields()"
@@ -173,6 +174,7 @@
       }
       @for (d of documents(); track d.id; let i = $index) {
         <pngx-document-card-large
+          (click)="activateViewForNavigation()"
           (dblClickDocument)="openDocumentDetail(d)"
           [document]="d"
           [ngStyle]="{ opacity: show() ? 1 : 1 - (i * 1/documents().length) }"

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -16,7 +16,11 @@ import { routes } from 'src/app/app-routing.module'
 import { CustomFieldDisplayComponent } from 'src/app/components/common/custom-field-display/custom-field-display.component'
 import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
-import { DisplayField, DisplayMode } from 'src/app/data/document'
+import {
+  DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
+  DisplayField,
+  DisplayMode,
+} from 'src/app/data/document'
 import {
   FILTER_CORRESPONDENT,
   FILTER_DOCUMENT_TYPE,
@@ -277,10 +281,40 @@ describe('SavedViewWidgetComponent', () => {
 
   it('should navigate to document', () => {
     const routerSpy = jest.spyOn(router, 'navigate')
+    const activateSpy = jest.spyOn(
+      documentListViewService,
+      'activateSavedViewWithDocuments'
+    )
     component.openDocumentDetail(documentResults[0])
+    expect(activateSpy).toHaveBeenCalled()
     expect(routerSpy).toHaveBeenCalledWith(['documents', documentResults[0].id])
   })
 
+  it('should hand its documents to the list service when opening a document', () => {
+    jest.spyOn(documentService, 'listFiltered').mockReturnValue(
+      of({
+        all: [2, 3],
+        count: 25,
+        results: documentResults,
+      })
+    )
+    jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true)
+    const activateSpy = jest
+      .spyOn(documentListViewService, 'activateSavedViewWithDocuments')
+      .mockImplementation(() => {})
+    component.ngOnInit()
+    fixture.detectChanges()
+    fixture.debugElement
+      .query(By.css('a[title="Open document"]'))
+      .nativeElement.click()
+    expect(activateSpy).toHaveBeenCalledWith(savedView, documentResults, 25, 20)
+  })
+
+  it('should fall back to the default dashboard page size', () => {
+    component.savedView = { ...savedView, page_size: undefined }
+    expect(component.pageSize).toEqual(DEFAULT_DASHBOARD_VIEW_PAGE_SIZE)
+  })
+
   it('should navigate via quickfilter on click tag', () => {
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
     component.clickTag(11, new MouseEvent('click'))

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -132,7 +132,7 @@ export class SavedViewWidgetComponent
   ngOnInit(): void {
     this.placeholderRows = Array.from(
       {
-        length: this.savedView?.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
+        length: this.pageSize,
       },
       (_, index) => index
     )
@@ -187,7 +187,7 @@ export class SavedViewWidgetComponent
     this.documentService
       .listFiltered(
         1,
-        this.savedView?.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
+        this.pageSize,
         this.savedView.sort_field,
         this.savedView.sort_reverse,
         this.savedView.filter_rules,
@@ -292,7 +292,24 @@ export class SavedViewWidgetComponent
     ])
   }
 
+  get pageSize(): number {
+    return this.savedView?.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE
+  }
+
+  /**
+   * Pass the widget's documents to the list service to enable next / previous.
+   */
+  activateViewForNavigation() {
+    this.documentListViewService.activateSavedViewWithDocuments(
+      this.savedView,
+      this.documents(),
+      this.count(),
+      this.pageSize
+    )
+  }
+
   openDocumentDetail(document: Document) {
+    this.activateViewForNavigation()
     this.router.navigate(['documents', document.id])
   }
 

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -940,6 +940,20 @@ describe('DocumentDetailComponent', () => {
     expect(navigateSpy).toHaveBeenCalledWith(['view', 77])
   })
 
+  it('should close back to the dashboard even if a saved view is active', () => {
+    initNormally()
+    jest
+      .spyOn(componentRouterService, 'getComponentURLBefore')
+      .mockReturnValue('dashboard')
+    jest
+      .spyOn(documentListViewService, 'activeSavedViewId', 'get')
+      .mockReturnValue(77)
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    component.close()
+    expect(navigateSpy).toHaveBeenCalledWith(['dashboard'])
+    expect(navigateSpy).not.toHaveBeenCalledWith(['view', 77])
+  })
+
   it('should not close if e.g. user-cancelled', () => {
     initNormally()
     jest.spyOn(openDocumentsService, 'closeDocument').mockReturnValue(of(false))

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

@@ -1454,7 +1454,12 @@ export class DocumentDetailComponent
       .subscribe((closed) => {
         if (!closed) return
         if (closedCallback) closedCallback()
-        if (this.documentListViewService.activeSavedViewId) {
+        if (
+          this.componentRouterService.getComponentURLBefore() === 'dashboard'
+        ) {
+          // e.g. opened from a dashboard widget
+          this.router.navigate(['dashboard'])
+        } else if (this.documentListViewService.activeSavedViewId) {
           this.router.navigate([
             'view',
             this.documentListViewService.activeSavedViewId,

src-ui/src/app/services/document-list-view.service.spec.ts

@@ -386,6 +386,46 @@ describe('DocumentListViewService', () => {
     documentListViewService.activateSavedView(null)
   })
 
+  it('should support activating saved view with pre-fetched documents', () => {
+    const routerSpy = jest.spyOn(router, 'navigate')
+    routerSpy.mockClear()
+    documentListViewService.activateSavedViewWithDocuments(
+      view,
+      documents.slice(0, 2),
+      documents.length,
+      2
+    )
+    // no navigation, no reload
+    expect(routerSpy).not.toHaveBeenCalled()
+    httpTestingController.expectNone(
+      (req) => req.url === `${environment.apiBaseUrl}documents/`
+    )
+    expect(documentListViewService.activeSavedViewId).toEqual(view.id)
+    expect(documentListViewService.activeSavedViewTitle).toEqual(view.name)
+    expect(documentListViewService.documents).toEqual(documents.slice(0, 2))
+    expect(documentListViewService.collectionSize).toEqual(documents.length)
+    expect(documentListViewService.currentPage).toEqual(1)
+    expect(documentListViewService.pageSize).toEqual(2)
+    expect(documentListViewService.hasNext(documents[0].id)).toBeTruthy()
+
+    let nextDocId: number
+    documentListViewService
+      .getNext(documents[1].id)
+      .subscribe((docId) => (nextDocId = docId))
+    // crossing the page uses the view's sort + filters and the given page size
+    // (the currentPage setter reloads too, so the first request is cancelled)
+    const reqs = httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=2&page_size=2&ordering=-added&truncate_content=true&include_selection_data=true&tags__id__all=${tags__id__all}`
+    )
+    expect(reqs.length).toBeGreaterThan(0)
+    reqs[reqs.length - 1].flush({
+      count: documents.length,
+      results: documents.slice(2, 4),
+    })
+    expect(nextDocId).toEqual(documents[2].id)
+    documentListViewService.activateSavedView(null)
+  })
+
   it('should support navigating next / previous', () => {
     documentListViewService.setFilterRules([])
     let req = httpTestingController.expectOne(

src-ui/src/app/services/document-list-view.service.ts

@@ -270,11 +270,28 @@ export class DocumentListViewService {
     this.currentPage = viewState.currentPage
   }
 
-  loadSavedView(view: SavedView, closeCurrentView: boolean = false) {
-    if (closeCurrentView) {
-      this._activeSavedViewId = null
-    }
+  /**
+   * Activate a saved view using documents that were already fetched, e.g. by a
+   * dashboard widget. Does not navigate or reload.
+   */
+  activateSavedViewWithDocuments(
+    view: SavedView,
+    documents: Document[],
+    collectionSize: number,
+    pageSize: number
+  ) {
+    this.cancelPending()
+    this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
+    this._activeSavedViewId = view.id
+    this.applySavedViewConfig(view)
+    this.activeListViewState.pageSize = pageSize // match the page size the documents were fetched with
+    this.activeListViewState.currentPage = 1
+    this.activeListViewState.documents = documents
+    this.activeListViewState.collectionSize = collectionSize
+    this.markChanged()
+  }
 
+  private applySavedViewConfig(view: SavedView) {
     this.activeListViewState.filterRules = cloneFilterRules(view.filter_rules)
     this.activeListViewState.sortField = view.sort_field
     this.activeListViewState.sortReverse = view.sort_reverse
@@ -284,6 +301,14 @@ export class DocumentListViewService {
     this.activeListViewState.displayMode = view.display_mode
     this.activeListViewState.pageSize = view.page_size
     this.activeListViewState.displayFields = view.display_fields
+  }
+
+  loadSavedView(view: SavedView, closeCurrentView: boolean = false) {
+    if (closeCurrentView) {
+      this._activeSavedViewId = null
+    }
+
+    this.applySavedViewConfig(view)
 
     this.reduceSelectionToFilter()
     this.markChanged()