From e02034ecc3fcce2360e249ace9820f93a9c1a2b0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:57:23 +0100
Subject: [PATCH] Add apply filters button

---
 .../components/header/header.component.html   |  4 +-
 .../components/header/header.component.scss   |  4 --
 apps/client/src/styles.scss                   |  4 ++
 .../src/lib/assistant/assistant.component.ts  | 40 +++++++++----------
 libs/ui/src/lib/assistant/assistant.html      | 16 ++++++--
 5 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index e192d7fee..6a00f492c 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -10,7 +10,7 @@
         <gf-logo class="px-2" [label]="pageTitle" />
       </a>
     </div>
-    <span class="spacer"></span>
+    <span class="gf-spacer"></span>
     <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
@@ -324,7 +324,7 @@
         />
       </a>
     </div>
-    <span class="spacer"></span>
+    <span class="gf-spacer"></span>
     <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index c5b299e12..0c6557ddd 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -38,10 +38,6 @@
         }
       }
     }
-
-    .spacer {
-      flex: 1 1 auto;
-    }
   }
 }
 
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 3aaf768c2..f4a50549b 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -379,6 +379,10 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
+.gf-spacer {
+  flex: 1 1 auto;
+}
+
 .gf-table {
   @include gf-table;
 }
diff --git a/libs/ui/src/lib/assistant/assistant.component.ts b/libs/ui/src/lib/assistant/assistant.component.ts
index cdb1ebe20..e95ff74e8 100644
--- a/libs/ui/src/lib/assistant/assistant.component.ts
+++ b/libs/ui/src/lib/assistant/assistant.component.ts
@@ -22,7 +22,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { Filter, User } from '@ghostfolio/common/interfaces';
 import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
-import { Account, AssetClass, Tag } from '@prisma/client';
+import { Account, AssetClass } from '@prisma/client';
 import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
@@ -158,25 +158,6 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
       };
     });
 
-    this.filterForm.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ account, assetClass, tag }) => {
-        this.filtersChanged.emit([
-          {
-            id: account,
-            type: 'ACCOUNT'
-          },
-          {
-            id: assetClass,
-            type: 'ASSET_CLASS'
-          },
-          {
-            id: tag,
-            type: 'TAG'
-          }
-        ]);
-      });
-
     this.searchFormControl.valueChanges
       .pipe(
         map((searchTerm) => {
@@ -260,6 +241,25 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     this.changeDetectorRef.markForCheck();
   }
 
+  public onApplyFilters() {
+    this.filtersChanged.emit([
+      {
+        id: this.filterForm.get('account').value,
+        type: 'ACCOUNT'
+      },
+      {
+        id: this.filterForm.get('assetClass').value,
+        type: 'ASSET_CLASS'
+      },
+      {
+        id: this.filterForm.get('tag').value,
+        type: 'TAG'
+      }
+    ]);
+
+    this.onCloseAssistant();
+  }
+
   public onChangeDateRange(dateRangeString: string) {
     this.dateRangeChanged.emit(dateRangeString as DateRange);
   }
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index d78c899f0..6889d7348 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -148,17 +148,25 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div>
+      <div class="d-flex w-100">
         <button
-          class="w-100"
-          color="primary"
           i18n
-          mat-flat-button
+          mat-button
           [disabled]="!hasFilter(filterForm.value)"
           (click)="onResetFilters()"
         >
           Reset Filters
         </button>
+        <span class="gf-spacer"></span>
+        <button
+          color="primary"
+          i18n
+          mat-flat-button
+          [disabled]="!filterForm.dirty"
+          (click)="onApplyFilters()"
+        >
+          Apply Filters
+        </button>
       </div>
     </div>
   </form>