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

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

@@ -1,4 +1,3 @@
-import { DatePipe, formatDate } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -6,17 +5,14 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { TagService } from 'src/app/services/rest/tag.service';
 import { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.component';
 import { CorrespondentEditDialogComponent } from '../manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
 import { DocumentTypeEditDialogComponent } from '../manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component';
-import { TagEditDialogComponent } from '../manage/tag-list/tag-edit-dialog/tag-edit-dialog.component';
 
 @Component({
   selector: 'app-document-detail',
@@ -133,8 +129,8 @@ export class DocumentDetailComponent implements OnInit {
 
   close() {
     this.openDocumentService.closeDocument(this.document)
-    if (this.documentListViewService.viewId) {
-      this.router.navigate(['view', this.documentListViewService.viewId])
+    if (this.documentListViewService.savedViewId) {
+      this.router.navigate(['view', this.documentListViewService.savedViewId])
     } else {
       this.router.navigate(['documents'])
     }

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

@@ -21,13 +21,12 @@
       </svg>
     </label>
   </div>
-  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="docs.sortDirection"
-    *ngIf="!docs.viewId">
+  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortDirection">
     <div ngbDropdown class="btn-group">
       <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSort(f.field)"
-          [class.active]="docs.sortField == f.field">{{f.name}}</button>
+        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
+          [class.active]="list.sortField == f.field">{{f.name}}</button>
       </div>
     </div>
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
@@ -43,7 +42,7 @@
       </svg>
     </label>
   </div>
-  <div class="btn-group ml-2" *ngIf="!docs.viewId">
+  <div class="btn-group ml-2">
 
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="showFilter=!showFilter">
       <svg class="toolbaricon" fill="currentColor">
@@ -55,9 +54,13 @@
     <div class="btn-group" ngbDropdown role="group">
       <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
       <div class="dropdown-menu" ngbDropdownMenu>
-        <button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
-        <div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
-        <button ngbDropdownItem (click)="saveViewConfig()">Save current view</button>
+        <ng-container *ngIf="!list.savedViewId" >
+          <button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
+          <div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
+        </ng-container>
+        
+        <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId">Save "{{list.savedViewTitle}}"</button>
+        <button ngbDropdownItem (click)="saveViewConfigAs()">Save as...</button>
       </div>
     </div>
 
@@ -72,12 +75,12 @@
 </div>
 
 <div class="row m-0 justify-content-end">
-  <ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
-  [rotate]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
+  <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
+  [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">
-  <app-document-card-large *ngFor="let d of docs.documents" [document]="d" [details]="d.content">
+  <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)">
   </app-document-card-large>
 </div>
 
@@ -91,7 +94,7 @@
     <th class="d-none d-xl-table-cell">Added</th>
   </thead>
   <tbody>
-    <tr *ngFor="let d of docs.documents" routerLink="/documents/{{d.id}}">
+    <tr *ngFor="let d of list.documents" routerLink="/documents/{{d.id}}">
       <td class="d-none d-lg-table-cell">{{d.archive_serial_number}}</td>
       <td class="d-none d-md-table-cell">{{d.correspondent ? d.correspondent.name : ''}}</td>
       <td>{{d.title}}<app-tag [tag]="t" *ngFor="let t of d.tags" class="ml-1"></app-tag></td>
@@ -104,7 +107,7 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of docs.documents"></app-document-card-small>    
+  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
 </div>
 
-<p *ngIf="docs.documents.length == 0" class="mx-auto">No results</p>
+<p *ngIf="list.documents.length == 0" class="mx-auto">No results</p>

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

@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { cloneFilterRules, FilterRule } from 'src/app/data/filter-rule';
 import { SavedViewConfig } from 'src/app/data/saved-view-config';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { Toast, ToastService } from 'src/app/services/toast.service';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 
 @Component({
@@ -16,9 +17,10 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
 export class DocumentListComponent implements OnInit {
 
   constructor(
-    public docs: DocumentListViewService,
+    public list: DocumentListViewService,
     public savedViewConfigService: SavedViewConfigService,
     public route: ActivatedRoute,
+    private toastService: ToastService,
     public modalService: NgbModal) { }
 
   displayMode = 'smallCards' // largeCards, smallCards, details
@@ -27,17 +29,13 @@ export class DocumentListComponent implements OnInit {
   showFilter = false
 
   getTitle() {
-    return this.docs.viewConfigOverride ? this.docs.viewConfigOverride.title : "Documents"
+    return this.list.savedViewTitle || "Documents"
   }
 
   getSortFields() {
     return DOCUMENT_SORT_FIELDS
   }
 
-  setSort(field: string) {
-    this.docs.sortField = field
-  }
-
   saveDisplayMode() {
     localStorage.setItem('document-list:displayMode', this.displayMode)
   }
@@ -48,39 +46,42 @@ export class DocumentListComponent implements OnInit {
     }
     this.route.paramMap.subscribe(params => {
       if (params.has('id')) {
-        this.docs.viewConfigOverride = this.savedViewConfigService.getConfig(params.get('id'))
+        this.list.savedView = this.savedViewConfigService.getConfig(params.get('id'))
       } else {
-        this.filterRules = this.docs.filterRules
-        this.showFilter = this.filterRules.length > 0
-        this.docs.viewConfigOverride = null
+        this.list.savedView = null
       }
-      this.reload()
+      this.filterRules = this.list.filterRules
+      //this.showFilter = this.filterRules.length > 0
+      // prevents temporarily visible results from previous views
+      this.list.documents = []
+      this.list.reload()
     })
   }
 
-  reload() {
-    this.docs.reload()
-  }
-
   applyFilterRules() {
-    this.docs.filterRules = this.filterRules
+    this.list.filterRules = this.filterRules
   }
 
   loadViewConfig(config: SavedViewConfig) {
     this.filterRules = cloneFilterRules(config.filterRules)
-    this.docs.loadViewConfig(config)
+    this.list.load(config)
   }
 
   saveViewConfig() {
+    this.savedViewConfigService.updateConfig(this.list.savedView)
+    this.toastService.showToast(Toast.make("Information", `View "${this.list.savedView.title}" saved successfully.`))
+  }
+
+  saveViewConfigAs() {
     let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
     modal.componentInstance.saveClicked.subscribe(formValue => {
-      this.savedViewConfigService.saveConfig({
+      this.savedViewConfigService.newConfig({
         title: formValue.title,
         showInDashboard: formValue.showInDashboard,
         showInSideBar: formValue.showInSideBar,
-        filterRules: this.docs.filterRules,
-        sortDirection: this.docs.sortDirection,
-        sortField: this.docs.sortField
+        filterRules: this.list.filterRules,
+        sortDirection: this.list.sortDirection,
+        sortField: this.list.sortField
       })
       modal.close()
     })

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))
   }