Add apply filters button

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

apps/client/src/app/components/header/header.component.scss

@@ -38,10 +38,6 @@
         }
       }
     }
-
-    .spacer {
-      flex: 1 1 auto;
-    }
   }
 }
 

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

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

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>