Adds quick filters from document detail

src-ui/src/app/components/common/input/date/date.component.html

@@ -9,6 +9,11 @@
         <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
       </svg>
     </button>
+    <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" i18n-title title="Filter documents with this {{title}}">
+      <svg class="buttonicon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#filter" />
+      </svg>
+    </button>
   </div>
   <div class="invalid-feedback" i18n>Invalid date.</div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>

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

@@ -1,8 +1,16 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import {
   NgbDateAdapter,
   NgbDateParserFormatter,
+  NgbDateStruct,
 } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../abstract-input'
@@ -34,6 +42,12 @@ export class DateComponent
   @Input()
   suggestions: string[]
 
+  @Input()
+  showFilter: boolean = false
+
+  @Output()
+  filterDocuments = new EventEmitter<NgbDateStruct[]>()
+
   getSuggestions() {
     return this.suggestions == null
       ? []
@@ -80,4 +94,8 @@ export class DateComponent
       event.preventDefault()
     }
   }
+
+  onFilterDocuments() {
+    this.filterDocuments.emit([this.ngbDateParserFormatter.parse(this.value)])
+  }
 }

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

@@ -1,6 +1,6 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
   <label *ngIf="title" class="form-label" [for]="inputId">{{title}}</label>
-    <div [class.input-group]="allowCreateNew">
+    <div [class.input-group]="allowCreateNew || showFilter">
       <ng-select name="inputId" [(ngModel)]="value"
         [disabled]="disabled"
         [style.color]="textColor"
@@ -26,6 +26,11 @@
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
       </button>
+      <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" i18n-title title="Filter documents with this {{title}}">
+        <svg class="buttonicon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#filter" />
+        </svg>
+      </button>
     </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">

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

@@ -85,9 +85,15 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   bindLabel: string = 'name'
 
+  @Input()
+  showFilter: boolean = false
+
   @Output()
   createNew = new EventEmitter<string>()
 
+  @Output()
+  filterDocuments = new EventEmitter<any[]>()
+
   public addItemRef: (name) => void
 
   private _lastSearchTerm: string
@@ -134,4 +140,8 @@ export class SelectComponent extends AbstractInputComponent<number> {
       this.clearLastSearchTerm()
     }, 3000)
   }
+
+  onFilterDocuments() {
+    this.filterDocuments.emit([this.items.find((i) => i.id === this.value)])
+  }
 }

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -31,12 +31,16 @@
         </div>
       </ng-template>
     </ng-select>
-
     <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
       <svg class="buttonicon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#plus" />
       </svg>
     </button>
+    <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
+      <svg class="buttonicon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#filter" />
+      </svg>
+    </button>
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">

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

@@ -1,4 +1,11 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
@@ -57,6 +64,12 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   @Input()
   allowCreate: boolean = true
 
+  @Input()
+  showFilter: boolean = false
+
+  @Output()
+  filterDocuments = new EventEmitter<PaperlessTag[]>()
+
   value: number[]
 
   tags: PaperlessTag[]
@@ -133,4 +146,16 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
       this.clearLastSearchTerm()
     }, 3000)
   }
+
+  get hasPrivate(): boolean {
+    return this.value.some(
+      (t) => this.tags?.find((t2) => t2.id === t) === undefined
+    )
+  }
+
+  onFilterDocuments() {
+    this.filterDocuments.emit(
+      this.tags.filter((t) => this.value.includes(t.id))
+    )
+  }
 }