Feature/add reset filters button to assistant (#2936)

* Add reset filters button

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a button to reset the active filters in the assistant (experimental)
+
 ### Changed
 
 - Migrated the portfolio allocations to work with the filters of the assistant (experimental)

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;
   }

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>

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 {