refactored most of the list view; fixes #147, much snappier UX when s…

…witching 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) {
-      this.router.navigate(['view', this.documentListViewService.savedViewId])
+    if (this.documentListViewService.activeSavedViewId) {
+      this.router.navigate(['view', this.documentListViewService.activeSavedViewId])
     } else {
       this.router.navigate(['documents'])
     }

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

@@ -137,7 +137,7 @@ export class BulkEditorComponent {
       } else {
         modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} and remove the tags ${this._localizeList(changedTags.itemsToRemove)} on ${this.list.selected.size} selected document(s).`
       }
-      
+
       modal.componentInstance.btnClass = "btn-warning"
       modal.componentInstance.btnCaption = $localize`Confirm`
       modal.componentInstance.confirmClicked.subscribe(() => {

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,24 +98,31 @@ 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 => {
-      this.toastService.showInfo($localize`View "${this.list.savedView.name}" saved successfully.`)
-    })
-
+    if (this.list.activeSavedViewId != null) {
+      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() {
     let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
     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) {
-      this.savedViewService.getCached(this.list.savedViewId).subscribe(viewUntouched => {
+    if (this.list.activeSavedViewId) {
+      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