Merge branch 'dev' into feature-ocrmypdf

2025-07-28 18:24:38 -05:00 · 2020-11-29 01:35:37 +01:00
parent bc3ae34c26 c2a86704eb
commit fdaf419a7e
22 changed files with 524 additions and 135 deletions
--- a/src-ui/src/app/components/common/tag/tag.component.html
+++ b/src-ui/src/app/components/common/tag/tag.component.html
@@ -1,2 +1,2 @@
 <span *ngIf="!clickable" class="badge" [style.background]="getColour().value" [style.color]="getColour().textColor">{{tag.name}}</span>
-<a [routerLink]="" *ngIf="clickable" class="badge" [style.background]="getColour().value" [style.color]="getColour().textColor">{{tag.name}}</a>
+<a [routerLink]="" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="getColour().value" [style.color]="getColour().textColor">{{tag.name}}</a>
--- a/src-ui/src/app/components/common/tag/tag.component.ts
+++ b/src-ui/src/app/components/common/tag/tag.component.ts
@@ -14,10 +14,10 @@ export class TagComponent implements OnInit {
  tag: PaperlessTag

  @Input()
-  clickable: boolean = false
+  linkTitle: string = ""

-  @Output()
-  click = new EventEmitter()
+  @Input()
+  clickable: boolean = false

  ngOnInit(): void {
  }
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/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';
@@ -7,17 +6,14 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata';
 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',
@@ -140,8 +136,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'])
    }
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -7,7 +7,12 @@
      <div class="card-body">

        <div class="d-flex justify-content-between align-items-center">
-          <h5 class="card-title">{{document.correspondent ? document.correspondent.name + ': ' : ''}}{{document.title}}<app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></h5>
+          <h5 class="card-title">    
+            <ng-container *ngIf="document.correspondent">
+              <a [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{document.correspondent.name}}</a>:
+            </ng-container>
+            {{document.title}}<app-tag [tag]="t" linkTitle="Filter by tag" *ngFor="let t of document.tags" class="ml-1" (click)="clickTag.emit(t)" [clickable]="true"></app-tag>
+          </h5>
          <h5 class="card-title" *ngIf="document.archive_serial_number">#{{document.archive_serial_number}}</h5>
        </div>
        <p class="card-text">
@@ -24,6 +29,13 @@
              </svg>
              Edit
            </a>
+            <a type="button" class="btn btn-sm btn-outline-secondary" [href]="getPreviewUrl()">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+              </svg>
+              View
+            </a>
            <a type="button" class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentService } from 'src/app/services/rest/document.service';

@Component({
@@ -18,6 +19,12 @@ export class DocumentCardLargeComponent implements OnInit {
  @Input()
  details: any

+  @Output()
+  clickTag = new EventEmitter<PaperlessTag>()
+
+  @Output()
+  clickCorrespondent = new EventEmitter<PaperlessDocument>()
+
  ngOnInit(): void {
  }

@@ -41,4 +48,8 @@ export class DocumentCardLargeComponent implements OnInit {
  getDownloadUrl() {
    return this.documentService.getDownloadUrl(this.document.id)
  }
+
+  getPreviewUrl() {
+    return this.documentService.getPreviewUrl(this.document.id)
+  }
 }
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -2,26 +2,34 @@
  <div class="card h-100 shadow-sm">
    <div class=" border-bottom doc-img pr-1" [ngStyle]="{'background-image': 'url(' + getThumbUrl() + ')'}">
      <div class="row" *ngFor="let t of document.tags">
-        <app-tag [tag]="t" class="col text-right"></app-tag>
+        <app-tag style="font-size: large;" [tag]="t" class="col text-right" (click)="clickTag.emit(t)" [clickable]="true" linkTitle="Filter by tag"></app-tag>
      </div>
    </div>
-
    
    <div class="card-body p-2">
      <p class="card-text">
-        <span class="font-weight-bold">{{document.correspondent? document.correspondent.name + ': ' : ''}}</span> {{document.title}}
+        <ng-container *ngIf="document.correspondent">
+          <a [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{document.correspondent.name}}</a>:
+        </ng-container>
+        {{document.title}}
      </p>
    </div>
    <div class="card-footer">

      <div class="d-flex justify-content-between align-items-center ml-n2">
        <div class="btn-group">
-          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
+          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
            </svg>
          </a>
-          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary">
+          <a [href]="getPreviewUrl()" class="btn btn-sm btn-outline-secondary" title="View in browser">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+              <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+            </svg>
+          </a>
+          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
              <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentService } from 'src/app/services/rest/document.service';

@Component({
@@ -14,6 +15,12 @@ export class DocumentCardSmallComponent implements OnInit {
  @Input()
  document: PaperlessDocument

+  @Output()
+  clickTag = new EventEmitter<PaperlessTag>()
+
+  @Output()
+  clickCorrespondent = new EventEmitter<PaperlessDocument>()
+
  ngOnInit(): void {
  }

@@ -24,4 +31,8 @@ export class DocumentCardSmallComponent implements OnInit {
  getDownloadUrl() {
    return this.documentService.getDownloadUrl(this.document.id)
  }
+
+  getPreviewUrl() {
+    return this.documentService.getPreviewUrl(this.document.id)
+  }
 }
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/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,16 +75,16 @@
 </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>

-<table class="table table-hover table-sm border shadow" *ngIf="displayMode == 'details'">
+<table class="table table-sm border shadow" *ngIf="displayMode == 'details'">
  <thead>
    <th class="d-none d-lg-table-cell">ASN</th>
    <th class="d-none d-md-table-cell">Correspondent</th>
@@ -91,20 +94,37 @@
    <th class="d-none d-xl-table-cell">Added</th>
  </thead>
  <tbody>
-    <tr *ngFor="let d of docs.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>
-      <td class="d-none d-xl-table-cell">{{d.document_type ? d.document_type.name : ''}}</td>
-      <td>{{d.created | date}}</td>
-      <td class="d-none d-xl-table-cell">{{d.added | date}}</td>
+    <tr *ngFor="let d of list.documents">
+      <td class="d-none d-lg-table-cell">
+        {{d.archive_serial_number}}
+      </td>
+      <td class="d-none d-md-table-cell">
+        <ng-container *ngIf="d.correspondent">
+          <a [routerLink]="" (click)="filterByCorrespondent(d.correspondent)" title="Filter by correspondent">{{d.correspondent.name}}</a>
+        </ng-container>
+      </td>
+      <td>
+        <a routerLink="/documents/{{d.id}}" title="Edit document">{{d.title}}</a>
+        <app-tag [tag]="t" *ngFor="let t of d.tags" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="filterByTag(t)"></app-tag>
+      </td>
+      <td class="d-none d-xl-table-cell">
+        <ng-container *ngIf="d.document_type">
+          <a [routerLink]="" (click)="filterByDocumentType(d.document_type)" title="Filter by document type">{{d.document_type.name}}</a>
+        </ng-container>
+      </td>
+      <td>
+        {{d.created | date}}
+      </td>
+      <td class="d-none d-xl-table-cell">
+        {{d.added | date}}
+      </td>
    </tr>
  </tbody>
 </table>


 <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>
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -1,11 +1,16 @@
 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 { FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, 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';
 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 +21,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 +33,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,41 +50,74 @@ 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()
    })
  }
+
+  filterByTag(t: PaperlessTag) {
+    if (this.filterRules.find(rule => rule.type.id == FILTER_HAS_TAG && rule.value == t.id)) {
+      return
+    }
+
+    this.filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_HAS_TAG), value: t.id})
+    this.applyFilterRules()
+  }
+
+  filterByCorrespondent(c: PaperlessCorrespondent) {
+    let existing_rule = this.filterRules.find(rule => rule.type.id == FILTER_CORRESPONDENT)
+    if (existing_rule) {
+      existing_rule.value = c.id
+    } else {
+      this.filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_CORRESPONDENT), value: c.id})
+    }
+    this.applyFilterRules()
+  }
+
+  filterByDocumentType(dt: PaperlessDocumentType) {
+    let existing_rule = this.filterRules.find(rule => rule.type.id == FILTER_DOCUMENT_TYPE)
+    if (existing_rule) {
+      existing_rule.value = dt.id
+    } else {
+      this.filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_DOCUMENT_TYPE), value: dt.id})
+    }
+    this.applyFilterRules()
+  }
+
 }
--- a/src-ui/src/app/components/search/search.component.scss
+++ b/src-ui/src/app/components/search/search.component.scss
@@ -11,5 +11,5 @@
 }

 .result-content-searching {
-    opacity: 0.2;
+    opacity: 0.3;
 }