From 0f635d1bb2f51e6bbbe20cc4a00ec43e7ab9cfc2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Wed, 9 Dec 2020 00:40:23 -0800
Subject: [PATCH] Clear button & visual tweaks

---
 .../document-list.component.html              | 49 ++++++++++++-------
 .../document-list.component.scss              |  5 ++
 .../document-list/document-list.component.ts  |  9 +++-
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 586ef8cfb..c0f2332b4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -78,12 +78,14 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="filterTagsText" placeholder="Filter tags">
           <ng-container *ngIf="(tags | filter: filterTagsText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let tag of tags | filter: filterTagsText; let i = index" (click)="toggleFilterByTag(tag.id)">
-              <svg *ngIf="currentViewIncludesTag(tag.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
-              </svg>
-              {{tag.name}}
-              <span class="badge bg-primary text-light rounded-pill">{{tag.document_count}}</span>
+            <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let tag of tags | filter: filterTagsText; let i = index" (click)="toggleFilterByTag(tag.id)">
+              <div class="selected-icon mr-1">
+                <svg *ngIf="currentViewIncludesTag(tag.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+                </svg>
+              </div>
+              <div>{{tag.name}}</div>
+              <div class="badge bg-primary text-light rounded-pill ml-auto">{{tag.document_count}}</div>
             </button>
           </ng-container>
         </div>
@@ -96,12 +98,14 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="filterCorrespondentsText" placeholder="Filter correspondents">
           <ng-container *ngIf="(correspondents | filter: filterCorrespondentsText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: filterCorrespondentsText; let i = index" (click)="toggleFilterByCorrespondent(correspondent.id)">
-              <svg *ngIf="currentViewIncludesCorrespondent(correspondent.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
-              </svg>
-              {{correspondent.name}}
-              <span class="badge bg-primary text-light rounded-pill">{{correspondent.document_count}}</span>
+            <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: filterCorrespondentsText; let i = index" (click)="toggleFilterByCorrespondent(correspondent.id)">
+              <div class="selected-icon mr-1">
+                <svg *ngIf="currentViewIncludesCorrespondent(correspondent.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+                </svg>
+              </div>
+              <div>{{correspondent.name}}</div>
+              <div class="badge bg-primary text-light rounded-pill ml-auto">{{correspondent.document_count}}</div>
             </button>
           </ng-container>
         </div>
@@ -114,18 +118,27 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="filterDocumentTypesText" placeholder="Filter tags">
           <ng-container *ngIf="(documentTypes | filter: filterDocumentTypesText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: filterDocumentTypesText; let i = index" (click)="toggleFilterByDocumentType(documentType.id)">
-              <svg *ngIf="currentViewIncludesDocumentType(documentType.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
-              </svg>
-              {{documentType.name}}
-              <span class="badge bg-primary text-light rounded-pill">{{documentType.document_count}}</span>
+            <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: filterDocumentTypesText; let i = index" (click)="toggleFilterByDocumentType(documentType.id)">
+              <div class="selected-icon mr-1">
+                <svg *ngIf="currentViewIncludesDocumentType(documentType.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+                </svg>
+              </div>
+              <div>{{documentType.name}}</div>
+              <div class="badge bg-primary text-light rounded-pill ml-auto">{{documentType.document_count}}</div>
             </button>
           </ng-container>
         </div>
       </div>
     </div>
 
+    <button class="btn-link border-0 bg-transparent ml-3 text-muted" *ngIf="currentViewIncludesQuickFilter()" (click)="filterEditor.clearClicked()">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+      </svg>
+      Clear
+    </button>
+
   </div>
 </div>
 
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 2d6fc29ef..ee3736d3d 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -1,4 +1,9 @@
 .quick-filter {
   min-width: 250px;
   max-height: 400px;
+
+  .selected-icon {
+    min-width: 1em;
+    min-height: 1em;
+  }
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 5e5134dc7..22ee6ca2d 100644
--- 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,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -17,6 +17,7 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { FilterEditorComponent } from 'src/app/components/filter-editor/filter-editor.component';
 
 @Component({
   selector: 'app-document-list',
@@ -45,6 +46,8 @@ export class DocumentListComponent implements OnInit {
   correspondents: PaperlessCorrespondent[] = []
   documentTypes: PaperlessDocumentType[] = []
 
+  @ViewChild(FilterEditorComponent) filterEditor;
+  
   get isFiltered() {
     return this.list.filterRules?.length > 0
   }
@@ -210,4 +213,8 @@ export class DocumentListComponent implements OnInit {
     return this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id) !== -1
   }
 
+  currentViewIncludesQuickFilter() {
+    return this.list.filterRules.find(rule => rule.type.id == FILTER_HAS_TAG || rule.type.id == FILTER_CORRESPONDENT || rule.type.id == FILTER_DOCUMENT_TYPE) !== undefined
+  }
+
 }