feat: added method to save state

Author: Anlanther

src/app/app.component.html

@@ -1 +1,4 @@
-<app-form-filter></app-form-filter>
+<app-form-filter
+  [widgetInput]="filterState()"
+  (savedState)="updateSavedState($event)"
+></app-form-filter>

src/app/app.component.ts

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { FILTER_INPUT } from './dummy-data/fund-input-dummy';
 import { FormFilterModule } from './form-filter/form-filter.module';
+import { SavedFilter } from './form-filter/models/saved-filter.model';
+import { WidgetInput } from './models/widget-input.model';
 
 @Component({
   selector: 'app-root',
   imports: [FormFilterModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {}
+export class AppComponent {
+  filterState = signal<WidgetInput>(FILTER_INPUT);
+
+  updateSavedState(savedState: SavedFilter) {
+    this.filterState.update((state) => ({
+      ...state,
+      state: savedState,
+    }));
+
+    console.log('Saved state:', savedState);
+  }
+}

src/app/dummy-data/fund-input-dummy.ts

@@ -0,0 +1,20 @@
+import { FilterKey } from '../form-filter/constants/filter-key.enum';
+import { SavedFilter } from '../form-filter/models/saved-filter.model';
+import { WidgetInput } from '../models/widget-input.model';
+
+const SAVED_FILTERS: SavedFilter = {
+  [FilterKey.Country]: {
+    filterForm: {
+      [FilterKey.Country]: ['USA', 'Canada'],
+      key: FilterKey.Country,
+    },
+    filterConfig: {
+      displayName: 'Country',
+    },
+  },
+};
+
+export const FILTER_INPUT: WidgetInput = {
+  id: '1',
+  state: SAVED_FILTERS,
+};

src/app/form-filter/components/industry-filter/industry-filter.component.ts

@@ -57,7 +57,7 @@ export class IndustryFilterComponent implements OnInit, OnDestroy {
   initialiseForm() {
     this.parentFormGroup.addControl(
       this.controlKey(),
-      new FormControl([], { nonNullable: true }),
+      new FormControl('', { nonNullable: true }),
     );
   }
 

src/app/form-filter/constants/filter-default-map.constant.ts

@@ -28,7 +28,10 @@ export const FILTER_DEFAULTS: SavedFilter = {
     },
   },
   [FilterKey.Rating]: {
-    filterForm: { [FilterKey.Rating]: [], key: FilterKey.Rating },
+    filterForm: {
+      [FilterKey.Rating]: { a: false, b: false, c: false },
+      key: FilterKey.Rating,
+    },
     filterConfig: {
       displayName: 'Rating',
     },

src/app/form-filter/form-filter.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, input, OnDestroy, OnInit, output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { distinctUntilChanged, map, Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, map, Observable, Subscription, tap } from 'rxjs';
 import { FilterBroadcast } from '../models/broadcast-type.model';
+import { WidgetInput } from '../models/widget-input.model';
 import { FILTER_DEFAULTS } from './constants/filter-default-map.constant';
 import { FilterKey } from './constants/filter-key.enum';
 import { ActiveFilterConfig } from './models/active-filter-config.model';
@@ -10,25 +11,16 @@ import { SavedFilter } from './models/saved-filter.model';
 import { BroadcastFactoryService } from './services/broadcast-factory.service';
 import { FormFilterStateService } from './state/form-filter-state.service';
 
-const SAVED_FILTERS: SavedFilter = {
-  [FilterKey.Country]: {
-    filterForm: {
-      [FilterKey.Country]: ['USA', 'Canada'],
-      key: FilterKey.Country,
-    },
-    filterConfig: {
-      displayName: 'Country',
-    },
-  },
-};
-
 @Component({
   standalone: false,
   selector: 'app-form-filter',
   templateUrl: './form-filter.component.html',
   styleUrl: './form-filter.component.scss',
 })
 export class FormFilterComponent implements OnInit, OnDestroy {
+  widgetInput = input.required<WidgetInput>();
+  savedState = output<SavedFilter>();
+
   activeFilters$: Observable<{ key: FilterKey; value: ActiveFilterConfig }[]>;
   filterOptions$: Observable<FilterOption[]>;
 
@@ -92,6 +84,19 @@ export class FormFilterComponent implements OnInit, OnDestroy {
           );
         }),
     );
+
+    this.subs.add(
+      this.stateService.activeFilters$
+        .pipe(
+          distinctUntilChanged((prev, curr) => {
+            return JSON.stringify(prev) === JSON.stringify(curr);
+          }),
+          tap((activeFilters) => {
+            this.savedState.emit(activeFilters);
+          }),
+        )
+        .subscribe(),
+    );
   }
 
   ngOnInit(): void {
@@ -103,16 +108,18 @@ export class FormFilterComponent implements OnInit, OnDestroy {
   }
 
   initialiseFilters() {
+    const savedFilters = this.widgetInput().state as SavedFilter;
+
     const inactiveFilterOptions: FilterOption[] = Object.entries(
       FILTER_DEFAULTS,
     )
-      .filter(([key]) => !SAVED_FILTERS[key as FilterKey])
+      .filter(([key]) => !savedFilters[key as FilterKey])
       .map(([key, { filterConfig }]) => ({
         key: key as FilterKey,
         displayName: filterConfig.displayName,
       }));
 
-    const activeFilters: SavedFilter = Object.entries(SAVED_FILTERS).reduce(
+    const activeFilters: SavedFilter = Object.entries(savedFilters).reduce(
       (acc, [key, value]) => {
         const defaultConfig = FILTER_DEFAULTS[key as FilterKey];
         if (!defaultConfig) {

src/app/form-filter/models/filter-form.model.ts

@@ -29,5 +29,5 @@ export interface CompanyFilter {
 
 export interface RatingFilter {
   key: FilterKey.Rating;
-  [FilterKey.Rating]: string[];
+  [FilterKey.Rating]: { a: boolean; b: boolean; c: boolean };
 }

src/app/form-filter/state/form-filter-state.service.ts

@@ -66,7 +66,10 @@ export class FormFilterStateService extends ComponentStore<FormFilterState> {
         ...state.activeFilters,
         [updatedFilter.key]: {
           ...state.activeFilters[updatedFilter.key],
-          filterForm: { [updatedFilter.key]: updatedFilter.value },
+          filterForm: {
+            [updatedFilter.key]: updatedFilter.value,
+            key: updatedFilter.key,
+          },
         },
       },
     }),

src/app/models/widget-input.model.ts

@@ -0,0 +1,4 @@
+export interface WidgetInput {
+  id: string;
+  state: unknown;
+}