refactored most of the list view; fixes #147, much snappier UX when switching between views

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

@@ -48,7 +48,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
     if (this.savedView.show_in_sidebar) {
       this.router.navigate(['view', this.savedView.id])
     } else {
-      this.list.load(this.savedView)
+      this.list.loadSavedView(this.savedView, true)
       this.router.navigate(["documents"])
     }
   }

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

@@ -191,8 +191,8 @@ export class DocumentDetailComponent implements OnInit {
 
   close() {
     this.openDocumentService.closeDocument(this.document)
-    if (this.documentListViewService.savedViewId) {
+    if (this.documentListViewService.activeSavedViewId) {
-      this.router.navigate(['view', this.documentListViewService.savedViewId])
+      this.router.navigate(['view', this.documentListViewService.activeSavedViewId])
     } else {
       this.router.navigate(['documents'])
     }

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

@@ -63,12 +63,12 @@
   <div class="btn-group ml-2 flex-fill" ngbDropdown role="group">
     <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
     <div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
-      <ng-container *ngIf="!list.savedViewId">
+      <ng-container *ngIf="!list.activeSavedViewId">
         <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
         <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
       </ng-container>
 
-      <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
+      <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.activeSavedViewId" i18n>Save "{{list.activeSavedViewTitle}}"</button>
       <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
     </div>
   </div>
@@ -86,7 +86,7 @@
     <span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
   </p>
   <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
-  [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
+  [rotate]="true" aria-label="Default pagination"></ngb-pagination>
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
@@ -9,7 +9,7 @@ import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
-import { Toast, ToastService } from 'src/app/services/toast.service';
+import { ToastService } from 'src/app/services/toast.service';
 import { FilterEditorComponent } from './filter-editor/filter-editor.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 
@@ -46,7 +46,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
   }
 
   getTitle() {
-    return this.list.savedViewTitle || $localize`Documents`
+    return this.list.activeSavedViewTitle || $localize`Documents`
   }
 
   getSortFields() {
@@ -73,19 +73,18 @@ export class DocumentListComponent implements OnInit, OnDestroy {
       this.list.reload()
     })
     this.route.paramMap.subscribe(params => {
-      this.list.clear()
       if (params.has('id')) {
         this.savedViewService.getCached(+params.get('id')).subscribe(view => {
           if (!view) {
             this.router.navigate(["404"])
             return
           }
-          this.list.savedView = view
+          this.list.activateSavedView(view)
           this.list.reload()
           this.rulesChanged()
         })
       } else {
-        this.list.savedView = null
+        this.list.activateSavedView(null)
         this.list.reload()
         this.rulesChanged()
       }
@@ -99,16 +98,23 @@ export class DocumentListComponent implements OnInit, OnDestroy {
   }
 
   loadViewConfig(view: PaperlessSavedView) {
-    this.list.load(view)
+    this.list.loadSavedView(view)
     this.list.reload()
     this.rulesChanged()
   }
 
   saveViewConfig() {
-    this.savedViewService.update(this.list.savedView).subscribe(result => {
+    if (this.list.activeSavedViewId != null) {
-      this.toastService.showInfo($localize`View "${this.list.savedView.name}" saved successfully.`)
+      let savedView: PaperlessSavedView = {
+        id: this.list.activeSavedViewId,
+        filter_rules: this.list.filterRules,
+        sort_field: this.list.sortField,
+        sort_reverse: this.list.sortReverse
+      }
+      this.savedViewService.patch(savedView).subscribe(result => {
+        this.toastService.showInfo($localize`View "${this.list.activeSavedViewTitle}" saved successfully.`)
       })
-
+    }
   }
 
   saveViewConfigAs() {
@@ -116,7 +122,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
     modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
     modal.componentInstance.saveClicked.subscribe(formValue => {
       modal.componentInstance.buttonsEnabled = false
-      let savedView = {
+      let savedView: PaperlessSavedView = {
         name: formValue.name,
         show_on_dashboard: formValue.showOnDashboard,
         show_in_sidebar: formValue.showInSideBar,
@@ -137,8 +143,8 @@ export class DocumentListComponent implements OnInit, OnDestroy {
 
   resetFilters(): void {
     this.filterRulesModified = false
-    if (this.list.savedViewId) {
+    if (this.list.activeSavedViewId) {
-      this.savedViewService.getCached(this.list.savedViewId).subscribe(viewUntouched => {
+      this.savedViewService.getCached(this.list.activeSavedViewId).subscribe(viewUntouched => {
         this.list.filterRules = viewUntouched.filter_rules
         this.list.reload()
       })
@@ -150,11 +156,11 @@ export class DocumentListComponent implements OnInit, OnDestroy {
 
   rulesChanged() {
     let modified = false
-    if (this.list.savedView == null) {
+    if (this.list.activeSavedViewId == null) {
       modified = this.list.filterRules.length > 0 // documents list is modified if it has any filters
     } else {
       // compare savedView current filters vs original
-      this.savedViewService.getCached(this.list.savedViewId).subscribe(view => {
+      this.savedViewService.getCached(this.list.activeSavedViewId).subscribe(view => {
         let filterRulesInitial = view.filter_rules
 
         if (this.list.filterRules.length !== filterRulesInitial.length) modified = true

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

@@ -8,6 +8,23 @@ import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys';
 import { DocumentService } from './rest/document.service';
 import { SettingsService, SETTINGS_KEYS } from './settings.service';
 
+interface ListViewState {
+
+  title?: string
+
+  documents?: PaperlessDocument[]
+
+  currentPage: number
+  collectionSize: number
+
+  sortField: string
+  sortReverse: boolean
+
+  filterRules: FilterRule[]
+
+  selected?: Set<number>
+
+}
 
 /**
  * This service manages the document list which is displayed using the document list view.
@@ -20,156 +37,174 @@ import { SettingsService, SETTINGS_KEYS } from './settings.service';
 })
 export class DocumentListViewService {
 
-  static DEFAULT_SORT_FIELD = 'created'
-
   isReloading: boolean = false
-  documents: PaperlessDocument[] = []
+
-  currentPage = 1
-  currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
-  collectionSize: number
   rangeSelectionAnchorIndex: number
   lastRangeSelectionToIndex: number
 
-  /**
+  currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
-   * This is the current config for the document list. The service will always remember the last settings used for the document list.
-   */
-  private _documentListViewConfig: PaperlessSavedView
-  /**
-   * Optionally, this is the currently selected saved view, which might be null.
-   */
-  private _savedViewConfig: PaperlessSavedView
 
-  get savedView(): PaperlessSavedView {
+  private listViewStates: Map<number, ListViewState> = new Map()
-    return this._savedViewConfig
+
+  private _activeSavedViewId: number = null
+
+  get activeSavedViewId() {
+    return this._activeSavedViewId
   }
 
-  set savedView(value: PaperlessSavedView) {
+  get activeSavedViewTitle() {
-    if (value && !this._savedViewConfig || value && value.id != this._savedViewConfig.id) {
+    return this.activeListViewState.title
-      //saved view inactive and should be active now, or saved view active, but a different view is requested
+  }
-      //this is here so that we don't modify value, which might be the actual instance of the saved view.
+
-      this.selectNone()
+  private defaultListViewState(): ListViewState {
-      this._savedViewConfig = Object.assign({}, value)
+    return {
-    } else if (this._savedViewConfig && !value) {
+      title: null,
-      //saved view active, but document list requested
+      documents: [],
-      this.selectNone()
+      currentPage: 1,
-      this._savedViewConfig = null
+      collectionSize: null,
+      sortField: "created",
+      sortReverse: true,
+      filterRules: [],
+      selected: new Set<number>()
     }
   }
 
-  get savedViewId() {
+  private get activeListViewState() {
-    return this.savedView?.id
+    if (!this.listViewStates.has(this._activeSavedViewId)) {
+      this.listViewStates.set(this._activeSavedViewId, this.defaultListViewState())
+    }
+    return this.listViewStates.get(this._activeSavedViewId)
   }
 
-  get savedViewTitle() {
+  activateSavedView(view: PaperlessSavedView) {
-    return this.savedView?.name
+    this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
-  }
+    if (view) {
-
+      this._activeSavedViewId = view.id
-  get documentListView() {
+      this.loadSavedView(view)
-    return this._documentListViewConfig
+    } else {
-  }
+      this._activeSavedViewId = null
-
-  set documentListView(value) {
-    if (value) {
-      this._documentListViewConfig = Object.assign({}, value)
-      this.saveDocumentListView()
     }
   }
 
-  /**
+  loadSavedView(view: PaperlessSavedView, closeCurrentView: boolean = false) {
-   * This is what switches between the saved views and the document list view. Everything on the document list uses
+    if (closeCurrentView) {
-   * this property to determine the settings for the currently displayed document list.
+      this._activeSavedViewId = null
-   */
-  get view() {
-    return this.savedView || this.documentListView
     }
-
+    this.activeListViewState.filterRules = cloneFilterRules(view.filter_rules)
-  load(view: PaperlessSavedView) {
+    this.activeListViewState.sortField = view.sort_field
-    this.documentListView.filter_rules = cloneFilterRules(view.filter_rules)
+    this.activeListViewState.sortReverse = view.sort_reverse
-    this.documentListView.sort_reverse = view.sort_reverse
+    if (this._activeSavedViewId) {
-    this.documentListView.sort_field = view.sort_field
+      this.activeListViewState.title = view.name
-    this.saveDocumentListView()
     }
-
+    this.reduceSelectionToFilter()
-  clear() {
-    this.collectionSize = null
-    this.documents = []
-    this.currentPage = 1
   }
 
   reload(onFinish?) {
     this.isReloading = true
+    let activeListViewState = this.activeListViewState
+
     this.documentService.listFiltered(
-      this.currentPage,
+      activeListViewState.currentPage,
       this.currentPageSize,
-      this.view.sort_field,
+      activeListViewState.sortField,
-      this.view.sort_reverse,
+      activeListViewState.sortReverse,
-      this.view.filter_rules).subscribe(
+      activeListViewState.filterRules).subscribe(
         result => {
-          this.collectionSize = result.count
+          this.isReloading = false
-          this.documents = result.results
+          activeListViewState.collectionSize = result.count
+          activeListViewState.documents = result.results
           if (onFinish) {
             onFinish()
           }
           this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
-          this.isReloading = false
         },
         error => {
-          if (this.currentPage != 1 && error.status == 404) {
+          this.isReloading = false
+          if (activeListViewState.currentPage != 1 && error.status == 404) {
             // this happens when applying a filter: the current page might not be available anymore due to the reduced result set.
-            this.currentPage = 1
+            activeListViewState.currentPage = 1
             this.reload()
           }
-          this.isReloading = false
         })
   }
 
   set filterRules(filterRules: FilterRule[]) {
-    //we're going to clone the filterRules object, since we don't
+    this.activeListViewState.filterRules = filterRules
-    //want changes in the filter editor to propagate into here right away.
-    this.view.filter_rules = filterRules
     this.reload()
     this.reduceSelectionToFilter()
     this.saveDocumentListView()
   }
 
   get filterRules(): FilterRule[] {
-    return this.view.filter_rules
+    return this.activeListViewState.filterRules
   }
 
   set sortField(field: string) {
-    this.view.sort_field = field
+    this.activeListViewState.sortField = field
-    this.saveDocumentListView()
     this.reload()
+    this.saveDocumentListView()
   }
 
   get sortField(): string {
-    return this.view.sort_field
+    return this.activeListViewState.sortField
   }
 
   set sortReverse(reverse: boolean) {
-    this.view.sort_reverse = reverse
+    this.activeListViewState.sortReverse = reverse
-    this.saveDocumentListView()
     this.reload()
+    this.saveDocumentListView()
   }
 
   get sortReverse(): boolean {
-    return this.view.sort_reverse
+    return this.activeListViewState.sortReverse
+  }
+
+  get collectionSize(): number {
+    return this.activeListViewState.collectionSize
+  }
+
+  get currentPage(): number {
+    return this.activeListViewState.currentPage
+  }
+
+  set currentPage(page: number) {
+    this.activeListViewState.currentPage = page
+    this.reload()
+    this.saveDocumentListView()
+  }
+
+  get documents(): PaperlessDocument[] {
+    return this.activeListViewState.documents
+  }
+
+  get selected(): Set<number> {
+    return this.activeListViewState.selected
   }
 
   setSort(field: string, reverse: boolean) {
-    this.view.sort_field = field
+    this.activeListViewState.sortField = field
-    this.view.sort_reverse = reverse
+    this.activeListViewState.sortReverse = reverse
-    this.saveDocumentListView()
     this.reload()
+    this.saveDocumentListView()
   }
 
   private saveDocumentListView() {
-    sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(this.documentListView))
+    if (this._activeSavedViewId == null) {
+      let savedState: ListViewState = {
+        collectionSize: this.activeListViewState.collectionSize,
+        currentPage: this.activeListViewState.currentPage,
+        filterRules: this.activeListViewState.filterRules,
+        sortField: this.activeListViewState.sortField,
+        sortReverse: this.activeListViewState.sortReverse
+      }
+      sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(savedState))
+    }
   }
 
   quickFilter(filterRules: FilterRule[]) {
-    this.savedView = null
+    this._activeSavedViewId = null
-    this.view.filter_rules = filterRules
+    this.activeListViewState.filterRules = filterRules
+    this.activeListViewState.currentPage = 1
     this.reduceSelectionToFilter()
     this.saveDocumentListView()
     this.router.navigate(["documents"])
@@ -217,8 +252,6 @@ export class DocumentListViewService {
     }
   }
 
-  selected = new Set<number>()
-
   selectNone() {
     this.selected.clear()
     this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
@@ -227,13 +260,11 @@ export class DocumentListViewService {
   reduceSelectionToFilter() {
     if (this.selected.size > 0) {
       this.documentService.listAllFilteredIds(this.filterRules).subscribe(ids => {
-        let subset = new Set<number>()
+        for (let id of this.selected) {
-        for (let id of ids) {
+          if (!ids.includes(id)) {
-          if (this.selected.has(id)) {
+            this.selected.delete(id)
-            subset.add(id)
           }
         }
-        this.selected = subset
       })
     }
   }
@@ -290,17 +321,18 @@ export class DocumentListViewService {
      let documentListViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
     if (documentListViewConfigJson) {
       try {
-        this.documentListView = JSON.parse(documentListViewConfigJson)
+        let savedState: ListViewState = JSON.parse(documentListViewConfigJson)
+        // Remove null elements from the restored state
+        Object.keys(savedState).forEach(k => {
+          if (savedState[k] == null) {
+            delete savedState[k]
+          }
+        })
+        //only use restored state attributes instead of defaults if they are not null
+        let newState = Object.assign(this.defaultListViewState(), savedState)
+        this.listViewStates.set(null, newState)
       } catch (e) {
         sessionStorage.removeItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
-        this.documentListView = null
-      }
-    }
-    if (!this.documentListView || this.documentListView.filter_rules == null || this.documentListView.sort_reverse == null || this.documentListView.sort_field == null) {
-      this.documentListView = {
-        filter_rules: [],
-        sort_reverse: true,
-        sort_field: 'created'
       }
     }
   }