From d4c86f1204a5b7ae845a1b6b87a8e2b7d2441290 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:19:42 +0100
Subject: [PATCH] Add reset filters button

---
 .../src/lib/assistant/assistant.component.ts  | 21 +++++++++
 libs/ui/src/lib/assistant/assistant.html      | 46 ++++++++++---------
 libs/ui/src/lib/assistant/assistant.scss      |  2 +-
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/libs/ui/src/lib/assistant/assistant.component.ts b/libs/ui/src/lib/assistant/assistant.component.ts
index 79ecce4b5..19cbaefcb 100644
--- a/libs/ui/src/lib/assistant/assistant.component.ts
+++ b/libs/ui/src/lib/assistant/assistant.component.ts
@@ -216,6 +216,12 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     );
   }
 
+  public hasFilter(aFormValue: { [key: string]: string }) {
+    return Object.values(aFormValue).some((value) => {
+      return !!value;
+    });
+  }
+
   public async initialize() {
     this.isLoading = true;
     this.keyManager = new FocusKeyManager(this.assistantListItems).withWrap();
@@ -249,6 +255,21 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     this.closed.emit();
   }
 
+  public onResetFilters() {
+    this.filtersChanged.emit([
+      {
+        id: null,
+        type: 'ACCOUNT'
+      },
+      {
+        id: null,
+        type: 'TAG'
+      }
+    ]);
+
+    this.onCloseAssistant();
+  }
+
   public setIsOpen(aIsOpen: boolean) {
     this.isOpen = aIsOpen;
   }
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index cf1c99ef3..682d2227e 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -91,33 +91,25 @@
     *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
     class="filter-container"
   >
+    <div class="p-3">
+      <mat-form-field appearance="outline" class="w-100 without-hint">
+        <mat-label i18n>Date Range</mat-label>
+        <mat-select
+          [formControl]="dateRangeFormControl"
+          (selectionChange)="onChangeDateRange($event.value)"
+        >
+          @for (range of dateRangeOptions; track range) {
+          <mat-option [value]="range.value">{{ range.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
     <mat-tab-group
       animationDuration="0"
       mat-align-tabs="start"
       [mat-stretch-tabs]="false"
       (click)="$event.stopPropagation();"
     >
-      <mat-tab>
-        <ng-template mat-tab-label
-          ><ion-icon name="calendar-clear-outline" /><span
-            class="d-none d-sm-block ml-2"
-            i18n
-            >Date Range</span
-          ></ng-template
-        >
-        <div class="p-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-select
-              [formControl]="dateRangeFormControl"
-              (selectionChange)="onChangeDateRange($event.value)"
-            >
-              @for (range of dateRangeOptions; track range) {
-              <mat-option [value]="range.value">{{ range.label }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label
           ><ion-icon name="albums-outline" /><span
@@ -161,5 +153,17 @@
         </div>
       </mat-tab>
     </mat-tab-group>
+    <div class="p-3">
+      <button
+        class="w-100"
+        color="primary"
+        i18n
+        mat-flat-button
+        [disabled]="!hasFilter(filterForm.value)"
+        (click)="onResetFilters()"
+      >
+        Reset Filters
+      </button>
+    </div>
   </div>
 </form>
diff --git a/libs/ui/src/lib/assistant/assistant.scss b/libs/ui/src/lib/assistant/assistant.scss
index a2b6f1fa2..5003d1c39 100644
--- a/libs/ui/src/lib/assistant/assistant.scss
+++ b/libs/ui/src/lib/assistant/assistant.scss
@@ -3,7 +3,7 @@
 
   .filter-container {
     .mat-mdc-tab-group {
-      max-height: 40vh;
+      max-height: 20vh;
     }
 
     ::ng-deep {