From ee7492cf52e05c450b64b226aff5392fd4ac69c1 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 13 Dec 2020 15:38:28 -0800
Subject: [PATCH] Clear date filter buttons

---
 .../filter-dropdown-date.component.html       | 22 ++++++++++++--
 .../filter-dropdown-date.component.scss       |  4 +++
 .../filter-dropdown-date.component.ts         | 16 ++++++++--
 .../services/filter-editor-view.service.ts    | 29 +++++++++++++------
 4 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
index e41f7c7ab..7b83f6619 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
@@ -15,7 +15,15 @@
           <ng-container *ngIf="!isStringRange(range)"> days</ng-container>
         </button>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div class="mb-1"><small>Before</small></div>
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div>Before</div>
+            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+              <svg width="0.8em" height="0.8em" 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>
+              <small>Clear</small>
+            </a>
+          </div>
           <div class="input-group input-group-sm">
             <input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpBefore="ngbDatepicker">
             <div class="input-group-append">
@@ -29,8 +37,16 @@
           </div>
         </div>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div class="mb-1"><small>After</small></div>
-          <div class="input-group">
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div>After</div>
+            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
+              <svg width="0.8em" height="0.8em" 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>
+              <small>Clear</small>
+            </a>
+          </div>
+          <div class="input-group input-group-sm">
             <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpAfter="ngbDatepicker">
             <div class="input-group-append">
               <button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
index 67edb9bf8..3bdedd8a0 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
@@ -1,3 +1,7 @@
 .date-filter {
   min-width: 250px;
+
+  .btn-link {
+    line-height: 1;
+  }
 }
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
index e5f9675d1..f69028bf0 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
@@ -43,8 +43,12 @@ export class FilterDropdownDateComponent {
   ngOnChanges(changes: SimpleChange) {
     // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
     let dateString: string = ''
-    let dateAfterChange: SimpleChange = changes['dateAfter']
-    let dateBeforeChange: SimpleChange = changes['dateBefore']
+    let dateAfterChange: SimpleChange
+    let dateBeforeChange: SimpleChange
+    if (changes) {
+      dateAfterChange = changes['dateAfter']
+      dateBeforeChange = changes['dateBefore']
+    }
 
     if (this.dpBefore && this.dpAfter) {
       let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
@@ -93,4 +97,12 @@ export class FilterDropdownDateComponent {
     let emitter = this._dateAfter && NgbDate.from(this._dateAfter).equals(date) ? this.dateAfterSet : this.dateBeforeSet
     emitter.emit(date)
   }
+
+  clearAfter() {
+    this.dateAfterSet.next()
+  }
+
+  clearBefore() {
+    this.dateBeforeSet.next()
+  }
 }
diff --git a/src-ui/src/app/services/filter-editor-view.service.ts b/src-ui/src/app/services/filter-editor-view.service.ts
index 0893fff2e..b50391376 100644
--- a/src-ui/src/app/services/filter-editor-view.service.ts
+++ b/src-ui/src/app/services/filter-editor-view.service.ts
@@ -155,23 +155,27 @@ export class FilterEditorViewService {
     } : undefined
   }
 
-  setDateCreatedBefore(date: NgbDateStruct) {
-    this.setDate(date, FILTER_CREATED_BEFORE)
+  setDateCreatedBefore(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
+    else this.clearDateFilter(FILTER_CREATED_BEFORE)
   }
 
-  setDateCreatedAfter(date: NgbDateStruct) {
-    this.setDate(date, FILTER_CREATED_AFTER)
+  setDateCreatedAfter(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
+    else this.clearDateFilter(FILTER_CREATED_AFTER)
   }
 
-  setDateAddedBefore(date: NgbDateStruct) {
-    this.setDate(date, FILTER_ADDED_BEFORE)
+  setDateAddedBefore(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
+    else this.clearDateFilter(FILTER_ADDED_BEFORE)
   }
 
-  setDateAddedAfter(date: NgbDateStruct) {
-    this.setDate(date, FILTER_ADDED_AFTER)
+  setDateAddedAfter(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
+    else this.clearDateFilter(FILTER_ADDED_AFTER)
   }
 
-  setDate(date: NgbDateStruct, dateRuleTypeID: number) {
+  setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) {
     let filterRules = this.filterRules
     let existingRule = filterRules.find(rule => rule.type.id == dateRuleTypeID)
     let newValue = `${date.year}-${date.month.toString().padStart(2,'0')}-${date.day.toString().padStart(2,'0')}` // YYYY-MM-DD
@@ -184,4 +188,11 @@ export class FilterEditorViewService {
 
     this.filterRules = filterRules
   }
+
+  clearDateFilter(dateRuleTypeID: number) {
+    let filterRules = this.filterRules
+    let existingRule = filterRules.find(rule => rule.type.id == dateRuleTypeID)
+    filterRules.splice(filterRules.indexOf(existingRule), 1)
+    this.filterRules = filterRules
+  }
 }