Saved views, some refactoring

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -43,6 +43,20 @@
           </li>
         </ul>
 
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='viewConfigService.getSideBarConfigs().length > 0'>
+          <span>Saved filters</span>
+        </h6>
+        <ul class="nav flex-column mb-2">
+          <li class="nav-item" *ngFor='let config of viewConfigService.getSideBarConfigs()'>
+            <a class="nav-link" routerLink="view/{{config.id}}" routerLinkActive="active">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
+              </svg>
+              {{config.title}}
+            </a>
+          </li>
+        </ul>
+
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
           <span>Open documents</span>
         </h6>

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -7,6 +7,7 @@ import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { AuthService } from 'src/app/services/auth.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { SearchService } from 'src/app/services/rest/search.service';
+import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
   
 @Component({
   selector: 'app-app-frame',
@@ -15,7 +16,13 @@ import { SearchService } from 'src/app/services/rest/search.service';
 })
 export class AppFrameComponent implements OnInit, OnDestroy {
 
-  constructor (public router: Router, private openDocumentsService: OpenDocumentsService, private authService: AuthService, private searchService: SearchService) {
+  constructor (
+    public router: Router,
+    private openDocumentsService: OpenDocumentsService,
+    private authService: AuthService,
+    private searchService: SearchService,
+    public viewConfigService: SavedViewConfigService
+    ) {
   }
 
   searchField = new FormControl('')

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -1,8 +1,8 @@
 import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Form, FormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
-import { MatchingModel } from 'src/app/data/matching-model';
+import { MATCHING_ALGORITHMS } from 'src/app/data/matching-model';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
@@ -47,7 +47,7 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
   }
 
   getMatchingAlgorithms() {
-    return MatchingModel.MATCHING_ALGORITHMS
+    return MATCHING_ALGORITHMS
   }
 
   save() {

src-ui/src/app/components/common/input/select/select.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { v4 as uuidv4 } from 'uuid';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractInputComponent } from '../abstract-input';
 
 @Component({

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
 
 @Component({
   selector: 'app-tag',
@@ -23,7 +23,7 @@ export class TagComponent implements OnInit {
   }
 
   getColour() {
-    return PaperlessTag.COLOURS.find(c => c.id == this.tag.colour)
+    return TAG_COLOURS.find(c => c.id == this.tag.colour)
   }
 
 }

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

@@ -6,7 +6,7 @@ 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 { PaperlessTag } from 'src/app/data/paperless-tag';
+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';
@@ -17,6 +17,7 @@ import { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.com
 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',
   templateUrl: './document-detail.component.html',
@@ -116,7 +117,7 @@ export class DocumentDetailComponent implements OnInit {
   }
 
   getColour(id: number) {
-    return PaperlessTag.COLOURS.find(c => c.id == this.getTag(id).colour)
+    return TAG_COLOURS.find(c => c.id == this.getTag(id).colour)
   }
 
   addTag(id: number) {

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

@@ -1,74 +1,83 @@
-<app-page-header title="Documents">
+<app-page-header [title]="docs.viewConfig ? docs.viewConfig.title : 'Documents'">
 
-  <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="displayMode" (ngModelChange)="saveDisplayMode()">
+  <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="displayMode"
+    (ngModelChange)="saveDisplayMode()">
     <label ngbButtonLabel class="btn-outline-secondary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="details">
       <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#list-ul"/>
+        <use xlink:href="assets/bootstrap-icons.svg#list-ul" />
       </svg>
     </label>
     <label ngbButtonLabel class="btn-outline-secondary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="smallCards">
       <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#grid"/>
+        <use xlink:href="assets/bootstrap-icons.svg#grid" />
       </svg>
     </label>
     <label ngbButtonLabel class="btn-outline-secondary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="largeCards">
       <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#hdd-stack"/>
+        <use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
       </svg>
     </label>
   </div>
-  <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="docs.currentSortDirection" (ngModelChange)="reload()">
+  <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="docs.currentSortDirection"
+    (ngModelChange)="reload()"
+    *ngIf="!docs.viewConfig">
     <div ngbDropdown class="btn-group">
       <button class="btn btn-outline-secondary 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.currentSortField == f.field">{{f.name}}</button>
+        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSort(f.field)"
+          [class.active]="docs.currentSortField == f.field">{{f.name}}</button>
       </div>
     </div>
     <label ngbButtonLabel class="btn-outline-secondary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="asc">
       <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down"/>
+        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
       </svg>
     </label>
     <label ngbButtonLabel class="btn-outline-secondary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="des">
       <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt"/>
+        <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
       </svg>
     </label>
   </div>
-  <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" (click)="showFilter=!showFilter">
-    <svg class="toolbaricon" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
-    </svg>
-    Filter
-  </button>
+  <div class="btn-group" *ngIf="!docs.viewConfig">
+
+    <button type="button" class="btn btn-sm btn-outline-secondary" (click)="showFilter=!showFilter">
+      <svg class="toolbaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#funnel" />
+      </svg>
+      Filter
+    </button>
+
+    <div class="btn-group" ngbDropdown role="group">
+      <button class="btn btn-sm btn-outline-secondary 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>
+      </div>
+    </div>
+
+
+  </div>
 </app-page-header>
 
 <div class="card w-100 mb-3" [hidden]="!showFilter">
   <div class="card-body">
     <h5 class="card-title">Filter</h5>
-    <app-filter-editor [(ruleSet)]="filter" (apply)="applyFilter()"></app-filter-editor>
+    <app-filter-editor [(filterRules)]="filterRules" (apply)="applyFilterRules()"></app-filter-editor>
   </div>
 </div>
 
-<ngb-pagination
-  [pageSize]="25"
-  [collectionSize]="docs.collectionSize"
-  [(page)]="docs.currentPage"
-  [maxSize]="5"
-  [rotate]="true"
-  [boundaryLinks]="true"
-  (pageChange)="reload()"
-  aria-label="Default pagination"></ngb-pagination>
+<ngb-pagination [pageSize]="25" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
+  [rotate]="true" [boundaryLinks]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
 
 <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 docs.documents" [document]="d" [details]="d.content">
   </app-document-card-large>
 </div>
 

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

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } 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 { FilterRuleSet } from '../filter-editor/filter-editor.component';
+import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 
 @Component({
   selector: 'app-document-list',
@@ -10,11 +15,14 @@ import { FilterRuleSet } from '../filter-editor/filter-editor.component';
 export class DocumentListComponent implements OnInit {
 
   constructor(
-    public docs: DocumentListViewService) { }
+    public docs: DocumentListViewService,
+    public savedViewConfigService: SavedViewConfigService,
+    public route: ActivatedRoute,
+    public modalService: NgbModal) { }
 
   displayMode = 'smallCards' // largeCards, smallCards, details
 
-  filter = new FilterRuleSet()
+  filterRules: FilterRule[] = []
   showFilter = false
 
   getSortFields() {
@@ -34,18 +42,47 @@ export class DocumentListComponent implements OnInit {
     if (localStorage.getItem('document-list:displayMode') != null) {
       this.displayMode = localStorage.getItem('document-list:displayMode')
     }
-    this.filter = this.docs.currentFilter.clone()
-    this.showFilter = this.filter.rules.length > 0
-    this.reload()
+    this.route.paramMap.subscribe(params => {
+      if (params.has('id')) {
+        this.docs.viewConfig = this.savedViewConfigService.getConfig(params.get('id'))
+      } else {
+        this.filterRules = cloneFilterRules(this.docs.currentFilterRules)
+        this.showFilter = this.filterRules.length > 0
+        this.docs.viewConfig = null
+      }
+      this.reload()
+    })
   }
 
   reload() {
     this.docs.reload()
   }
 
-  applyFilter() {
-    this.docs.setFilter(this.filter.clone())
+  applyFilterRules() {
+    this.docs.setFilterRules(this.filterRules)
     this.reload()
   }
 
+  loadViewConfig(config: SavedViewConfig) {
+    this.filterRules = config.filterRules
+    this.docs.setFilterRules(config.filterRules)
+    this.docs.currentSortField = config.sortField
+    this.docs.currentSortDirection = config.sortDirection
+    this.reload()
+  }
+
+  saveViewConfig() {
+    let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.saveClicked.subscribe(formValue => {
+      this.savedViewConfigService.saveConfig({
+        filterRules: cloneFilterRules(this.filterRules),
+        title: formValue.title,
+        showInDashboard: formValue.showInDashboard,
+        showInSideBar: formValue.showInSideBar,
+        sortDirection: this.docs.currentSortDirection,
+        sortField: this.docs.currentSortField
+      })
+      modal.close()
+    })
+  }
 }

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html

@@ -0,0 +1,17 @@
+<form [formGroup]="saveViewConfigForm" class="needs-validation" novalidate (ngSubmit)="save()">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Save current view</h4>
+    <button type="button" class="close" aria-label="Close" (click)="cancel()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <app-input-text title="Title" formControlName="title"></app-input-text>
+    <app-input-check title="Show in side bar" formControlName="showInSideBar"></app-input-check>
+    <app-input-check title="Show in dashboard" formControlName="showInDashboard"></app-input-check>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
+    <button type="submit" class="btn btn-primary">Save</button>
+  </div>
+</form>

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaveViewConfigDialogComponent } from './save-view-config-dialog.component';
+
+describe('SaveViewConfigDialogComponent', () => {
+  let component: SaveViewConfigDialogComponent;
+  let fixture: ComponentFixture<SaveViewConfigDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SaveViewConfigDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SaveViewConfigDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-save-view-config-dialog',
+  templateUrl: './save-view-config-dialog.component.html',
+  styleUrls: ['./save-view-config-dialog.component.css']
+})
+export class SaveViewConfigDialogComponent implements OnInit {
+
+  constructor(private modal: NgbActiveModal) { }
+
+  @Output()
+  public saveClicked = new EventEmitter()
+
+  saveViewConfigForm = new FormGroup({
+    title: new FormControl(''),
+    showInSideBar: new FormControl(false),
+    showInDashboard: new FormControl(false),
+  })
+
+  ngOnInit(): void {
+  }
+
+  save() {
+    this.saveClicked.emit(this.saveViewConfigForm.value)
+  }
+
+  cancel() {
+    this.modal.close()
+  }
+}

src-ui/src/app/components/filter-editor/filter-editor.component.html

@@ -1,4 +1,4 @@
-<div *ngFor="let rule of ruleSet.rules" class="form-row form-group">
+<div *ngFor="let rule of filterRules" class="form-row form-group">
   <div class="col">
     <select class="form-control form-control-sm" [(ngModel)]="rule.type" (change)="rule.value = null">
       <option *ngFor="let ruleType of getRuleTypes()" [ngValue]="ruleType">{{ruleType.name}}</option>

src-ui/src/app/components/filter-editor/filter-editor.component.ts

@@ -1,4 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FilterRule } from 'src/app/data/filter-rule';
+import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
@@ -6,66 +8,6 @@ import { CorrespondentService } from 'src/app/services/rest/correspondent.servic
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 
-export interface FilterRuleType {
-  name: string
-  filtervar: string
-  datatype: string //number, string, boolean, date
-}
-
-export interface FilterRule {
-  type: FilterRuleType
-  value: any
-}
-
-export class FilterRuleSet {
-
-  static RULE_TYPES: FilterRuleType[] = [
-    {name: "Title contains", filtervar: "title__icontains", datatype: "string"},
-    {name: "Content contains", filtervar: "content__icontains", datatype: "string"},
-    
-    {name: "ASN is", filtervar: "archive_serial_number", datatype: "number"},
-    
-    {name: "Correspondent is", filtervar: "correspondent__id", datatype: "correspondent"},
-    {name: "Document type is", filtervar: "document_type__id", datatype: "document_type"},
-    {name: "Has tag", filtervar: "tags__id", datatype: "tag"},
-    
-    {name: "Has any tag", filtervar: "is_tagged", datatype: "boolean"},
-  
-    {name: "Date created before", filtervar: "created__date__lt", datatype: "date"},
-    {name: "Date created after", filtervar: "created__date__gt", datatype: "date"},
-  
-    {name: "Year created is", filtervar: "created__year", datatype: "number"},
-    {name: "Month created is", filtervar: "created__month", datatype: "number"},
-    {name: "Day created is", filtervar: "created__day", datatype: "number"},
-  
-    {name: "Date added before", filtervar: "added__date__lt", datatype: "date"},
-    {name: "Date added after", filtervar: "added__date__gt", datatype: "date"},
-    
-    {name: "Date modified before", filtervar: "modified__date__lt", datatype: "date"},
-    {name: "Date modified after", filtervar: "modified__date__gt", datatype: "date"},
-  ]
-
-  rules: FilterRule[] = []
-
-  toQueryParams() {
-    let params = {}
-    for (let rule of this.rules) {
-      params[rule.type.filtervar] = rule.value
-    }
-    return params
-  }
-
-  clone(): FilterRuleSet {
-    let newRuleSet = new FilterRuleSet()
-    for (let rule of this.rules) {
-      newRuleSet.rules.push({type: rule.type, value: rule.value})
-    }
-    return newRuleSet
-  }
-
-  constructor() { }
-
-}
 
 @Component({
   selector: 'app-filter-editor',
@@ -77,28 +19,25 @@ export class FilterEditorComponent implements OnInit {
   constructor(private documentTypeService: DocumentTypeService, private tagService: TagService, private correspondentService: CorrespondentService) { }
 
   @Input()
-  ruleSet = new FilterRuleSet()
-
-  @Output()
-  ruleSetChange = new EventEmitter<FilterRuleSet>()
+  filterRules: FilterRule[] = []
 
   @Output()
   apply = new EventEmitter()
 
-  selectedRuleType: FilterRuleType = FilterRuleSet.RULE_TYPES[0]
+  selectedRuleType: FilterRuleType = FILTER_RULE_TYPES[0]
 
   correspondents: PaperlessCorrespondent[] = []
   tags: PaperlessTag[] = []
   documentTypes: PaperlessDocumentType[] = []
 
   newRuleClicked() {
-    this.ruleSet.rules.push({type: this.selectedRuleType, value: null})
+    this.filterRules.push({type: this.selectedRuleType, value: null})
   }
 
   removeRuleClicked(rule) {
-    let index = this.ruleSet.rules.findIndex(r => r == rule)
+    let index = this.filterRules.findIndex(r => r == rule)
     if (index > -1) {
-      this.ruleSet.rules.splice(index, 1)
+      this.filterRules.splice(index, 1)
     }
   }
 
@@ -107,7 +46,7 @@ export class FilterEditorComponent implements OnInit {
   }
 
   clearClicked() {
-    this.ruleSet.rules.splice(0,this.ruleSet.rules.length)
+    this.filterRules.splice(0,this.filterRules.length)
     this.apply.next()
   }
 
@@ -118,6 +57,7 @@ export class FilterEditorComponent implements OnInit {
   }
 
   getRuleTypes() {
-    return FilterRuleSet.RULE_TYPES
+    return FILTER_RULE_TYPES
   }
+
 }

src-ui/src/app/components/manage/generic-list/generic-list.component.ts

@@ -1,6 +1,6 @@
 import { Directive, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { MatchingModel } from 'src/app/data/matching-model';
+import { MatchingModel, MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
 import { DeleteDialogComponent } from '../../common/delete-dialog/delete-dialog.component';
@@ -21,10 +21,10 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   public collectionSize = 0
 
   getMatching(o: MatchingModel) {
-    if (o.matching_algorithm == MatchingModel.MATCH_AUTO) {
+    if (o.matching_algorithm == MATCH_AUTO) {
       return "Automatic"
     } else if (o.match && o.match.length > 0) {
-      return `${o.match} (${MatchingModel.MATCHING_ALGORITHMS.find(a => a.id == o.matching_algorithm).name})`
+      return `${o.match} (${MATCHING_ALGORITHMS.find(a => a.id == o.matching_algorithm).name})`
     } else {
       return "-"
     }

src-ui/src/app/components/manage/settings/settings.component.html

@@ -2,5 +2,38 @@
 
 </app-page-header>
 
-<p>items per page, documents per view type</p>
+<!-- <p>items per page, documents per view type</p> -->
+<ul ngbNav #nav="ngbNav" class="nav-tabs">
+  <li [ngbNavItem]="1">
+    <a ngbNavLink>Document List Settings</a>
+    <ng-template ngbNavContent>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink>Saved views</a>
+    <ng-template ngbNavContent>
 
+      <table class="table table-striped">
+        <thead>
+        <tr>
+          <th scope="col">Title</th>
+          <th scope="col">Show in dashboard</th>
+          <th scope="col">Show in sidebar</th>
+          <th scope="col">Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let config of savedViewConfigService.getConfigs()">
+          <td>{{ config.title }}</td>
+          <td>{{ config.showInDashboard }}</td>
+          <td>{{ config.showInSideBar }}</td>
+          <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
+        </tr>
+        </tbody>
+      </table>
+
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
 
 @Component({
   selector: 'app-settings',
@@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SettingsComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private savedViewConfigService: SavedViewConfigService
+  ) { }
+
+  active
 
   ngOnInit(): void {
   }
 
+  deleteViewConfig(config: SavedViewConfig) {
+    this.savedViewConfigService.deleteConfig(config)
+  }
+
 }

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -29,11 +29,11 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
   }
 
   getColours() {
-    return PaperlessTag.COLOURS
+    return TAG_COLOURS
   }
 
   getColor(id: number) {
-    return PaperlessTag.COLOURS.find(c => c.id == id)
+    return TAG_COLOURS.find(c => c.id == id)
   }
 
 }

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentEditDialogComponent } from '../correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
 import { GenericListComponent } from '../generic-list/generic-list.component';
@@ -18,7 +18,7 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
    }
 
   getColor(id) {
-    return PaperlessTag.COLOURS.find(c => c.id == id)
+    return TAG_COLOURS.find(c => c.id == id)
   }
 
   getObjectName(object: PaperlessTag) {