Refactored the list view logic, editable saved views fixes #58

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

@@ -7,6 +7,12 @@ import { DOCUMENT_LIST_SERVICE, GENERAL_SETTINGS } from '../data/storage-keys';
 import { DocumentService } from './rest/document.service';
 
 
+/**
+ * This service manages the document list which is displayed using the document list view.
+ * 
+ * This service also serves saved views by transparently switching between the document list
+ * and saved views on request. See below.
+ */
 @Injectable({
   providedIn: 'root'
 })
@@ -14,80 +20,127 @@ export class DocumentListViewService {
 
   static DEFAULT_SORT_FIELD = 'created'
 
+  isReloading: boolean = false
   documents: PaperlessDocument[] = []
   currentPage = 1
   currentPageSize: number = +localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT
   collectionSize: number
   
-  private currentViewConfig: SavedViewConfig
-  //TODO: make private
-  viewConfigOverride: SavedViewConfig
+  /**
+   * This is the current config for the document list. The service will always remember the last settings used for the document list.
+   */
+  private _documentListViewConfig: SavedViewConfig
+  /**
+   * Optionally, this is the currently selected saved view, which might be null.
+   */
+  private _savedViewConfig: SavedViewConfig
 
-  get viewId() {
-    return this.viewConfigOverride?.id
+  get savedView() {
+    return this._savedViewConfig
+  }
+
+  set savedView(value) {
+    if (value) {
+      //this is here so that we don't modify value, which might be the actual instance of the saved view.
+      this._savedViewConfig = Object.assign({}, value)
+    } else {
+      this._savedViewConfig = null
+    }
+  }
+
+  get savedViewId() {
+    return this.savedView?.id
+  }
+
+  get savedViewTitle() {
+    return this.savedView?.title
+  }
+
+  get documentListView() {
+    return this._documentListViewConfig
+  }
+
+  set documentListView(value) {
+    if (value) {
+      this._documentListViewConfig = Object.assign({}, value)
+      this.saveDocumentListView()
+    }
+  }
+
+  /**
+   * This is what switches between the saved views and the document list view. Everything on the document list uses
+   * this property to determine the settings for the currently displayed document list.
+   */
+  get view() {
+    return this.savedView || this.documentListView
+  }
+
+  load(config: SavedViewConfig) {
+    this.view.filterRules = cloneFilterRules(config.filterRules)
+    this.view.sortDirection = config.sortDirection
+    this.view.sortField = config.sortField
+    this.reload()
   }
 
   reload(onFinish?) {
-    let viewConfig = this.viewConfigOverride || this.currentViewConfig
-
+    this.isReloading = true
     this.documentService.list(
       this.currentPage,
       this.currentPageSize,
-      viewConfig.sortField,
-      viewConfig.sortDirection,
-      viewConfig.filterRules).subscribe(
+      this.view.sortField,
+      this.view.sortDirection,
+      this.view.filterRules).subscribe(
         result => {
           this.collectionSize = result.count
           this.documents = result.results
           if (onFinish) {
             onFinish()
           }
+          this.isReloading = false
         },
         error => {
           if (error.error['detail'] == 'Invalid page.') {
             this.currentPage = 1
             this.reload()
           }
+          this.isReloading = false
         })
   }
 
   set filterRules(filterRules: FilterRule[]) {
-    this.currentViewConfig.filterRules = cloneFilterRules(filterRules)
-    this.saveCurrentViewConfig()
+    //we're going to clone the filterRules object, since we don't
+    //want changes in the filter editor to propagate into here right away.
+    this.view.filterRules = cloneFilterRules(filterRules)
     this.reload()
+    this.saveDocumentListView()
   }
 
   get filterRules(): FilterRule[] {
-    return cloneFilterRules(this.currentViewConfig.filterRules)
+    return cloneFilterRules(this.view.filterRules)
   }
 
   set sortField(field: string) {
-    this.currentViewConfig.sortField = field
-    this.saveCurrentViewConfig()
+    this.view.sortField = field
+    this.saveDocumentListView()
     this.reload()
   }
 
   get sortField(): string {
-    return this.currentViewConfig.sortField
+    return this.view.sortField
   }
 
   set sortDirection(direction: string) {
-    this.currentViewConfig.sortDirection = direction
-    this.saveCurrentViewConfig()
+    this.view.sortDirection = direction
+    this.saveDocumentListView()
     this.reload()
   }
 
   get sortDirection(): string {
-    return this.currentViewConfig.sortDirection
+    return this.view.sortDirection
   }
 
-  loadViewConfig(config: SavedViewConfig) {
-    Object.assign(this.currentViewConfig, config)
-    this.reload()
-  }
-
-  private saveCurrentViewConfig() {
-    sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(this.currentViewConfig))
+  private saveDocumentListView() {
+    sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(this.documentListView))
   }
 
   getLastPage(): number {
@@ -134,21 +187,21 @@ export class DocumentListViewService {
   }
 
   constructor(private documentService: DocumentService) { 
-    let currentViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
-    if (currentViewConfigJson) {
+    let documentListViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
+    if (documentListViewConfigJson) {
       try {
-        this.currentViewConfig = JSON.parse(currentViewConfigJson)
+        this.documentListView = JSON.parse(documentListViewConfigJson)
       } catch (e) {
         sessionStorage.removeItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
-        this.currentViewConfig = null
+        this.documentListView = null
       }
     }
-    if (!this.currentViewConfig) {
-      this.currentViewConfig = {
+    if (!this.documentListView) {
+      this.documentListView = {
         filterRules: [],
         sortDirection: 'des',
         sortField: 'created'
       }
-      }
+    }
   }
 }

src-ui/src/app/services/saved-view-config.service.ts

@@ -36,13 +36,21 @@ export class SavedViewConfigService {
     return this.configs.find(sf => sf.id == id)
   }
 
-  saveConfig(config: SavedViewConfig) {
+  newConfig(config: SavedViewConfig) {
     config.id = uuidv4()
     this.configs.push(config)
 
     this.save()
   }
 
+  updateConfig(config: SavedViewConfig) {
+    let savedConfig = this.configs.find(c => c.id == config.id)
+    if (savedConfig) {
+      Object.assign(savedConfig, config)
+      this.save()
+    }
+  }
+
   private save() {
     localStorage.setItem('saved-view-config-service:savedConfigs', JSON.stringify(this.configs))
   }