HTM-1701: remove filter validation and move filter state to core state (#1029)

Author: matthijsln

projects/core/src/lib/components/attribute-list/attribute-list-content/attribute-list-content.component.spec.ts

@@ -48,7 +48,10 @@ describe('AttributeListContent', () => {
         provideMockStore({
           initialState: {
             ...store,
-            filter: { verifiedCurrentFilterGroups: [] },
+            core: {
+              loadStatus: 'LOADED',
+              filters: { currentFilterGroups: [] },
+            },
             map: { layers: [] },
           },
         }),

projects/core/src/lib/components/attribute-list/attribute-list-export-button/attribute-list-export-button.component.spec.ts

@@ -9,7 +9,7 @@ import { AttributeListExportService, SupportedExportFormats } from '../services/
 import userEvent from '@testing-library/user-event';
 import { SharedImportsModule } from '@tailormap-viewer/shared';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { selectCQLFilters } from '../../../filter/state/filter.selectors';
+import { selectCQLFilters } from '../../../state/filter-state/filter.selectors';
 import { selectLayers } from '../../../map/state/map.selectors';
 
 const setup = async (layerId: string | null = null, supportedFormats: SupportedExportFormats[] = []) => {

projects/core/src/lib/components/attribute-list/attribute-list-export-button/attribute-list-export-button.component.ts

@@ -7,7 +7,7 @@ import { Store } from '@ngrx/store';
 import {
   selectColumnsForSelectedTab, selectSelectedTab, selectSelectedTabLayerId, selectSortForSelectedTab,
 } from '../state/attribute-list.selectors';
-import { selectCQLFilters } from '../../../filter/state/filter.selectors';
+import { selectCQLFilters } from '../../../state/filter-state/filter.selectors';
 import { selectLayers } from '../../../map/state/map.selectors';
 import { HiddenLayerFunctionality } from '@tailormap-viewer/api';
 

projects/core/src/lib/components/attribute-list/attribute-list/attribute-list.component.spec.ts

@@ -6,7 +6,7 @@ import { AttributeListComponent } from './attribute-list.component';
 import { AttributeListState, attributeListStateKey } from '../state/attribute-list.state';
 import { initialMapState, mapStateKey } from '../../../map/state/map.state';
 import {
-  AppLayerModel, getAppLayerModel, getLayerTreeNode, TAILORMAP_API_V1_SERVICE, TailormapApiConstants, TailormapApiV1MockService,
+  getAppLayerModel, getLayerTreeNode, TAILORMAP_API_V1_SERVICE, TailormapApiConstants, TailormapApiV1MockService,
 } from '@tailormap-viewer/api';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
@@ -22,14 +22,13 @@ import { attributeListReducer } from '../state/attribute-list.reducer';
 import { mapReducer } from '../../../map/state/map.reducer';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { filterStateKey, initialFilterState } from '../../../filter/state/filter.state';
-import { filterReducer } from '../../../filter/state/filter.reducer';
+import { initialFilterState } from '../../../state/filter-state/filter.state';
 import { AttributeListExportButtonComponent } from '../attribute-list-export-button/attribute-list-export-button.component';
 import { coreStateKey } from '../../../state/core.state';
 import { coreReducer } from '../../../state/core.reducer';
 import { ExtendedAppLayerModel } from '../../../map/models';
 import { CoreSharedModule } from '../../../shared';
-import { HttpClientTestingModule, provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withXsrfConfiguration } from '@angular/common/http';
 import { getMapServiceMock } from '../../../test-helpers/map-service.mock.spec';
 
@@ -49,11 +48,9 @@ const getStore = (
     },
     [coreStateKey]: {
       loadStatus: 'INITIAL',
+      filters: initialFilterState,
       viewer: {}, // <-- Ensure viewer is always present
     },
-    [filterStateKey]: {
-      ...initialFilterState,
-    },
   };
 };
 
@@ -112,7 +109,6 @@ describe('AttributeList', () => {
     const reducers = {
       [attributeListStateKey]: attributeListReducer,
       [mapStateKey]: mapReducer,
-      [filterStateKey]: filterReducer,
       [coreStateKey]: coreReducer,
     };
     await render(AttributeListComponent, {

projects/core/src/lib/components/filter/edit-attribute-filters/edit-attribute-filters.component.html

@@ -1,4 +1,4 @@
-<mat-expansion-panel class="edit-filter-expansion-panel" [expanded]="onlyGroupInListOnInit()">
+<mat-expansion-panel class="edit-filter-expansion-panel" [expanded]="expanded()">
   <mat-expansion-panel-header i18n="@@core.filter.edit-filters">Edit filters</mat-expansion-panel-header>
   @for (filter of editableFilters(); track filter.id) {
     <div class="edit-attribute-filters">

projects/core/src/lib/components/filter/edit-attribute-filters/edit-attribute-filters.component.ts

@@ -3,7 +3,7 @@ import {
   AttributeFilterModel, AttributeType, FilterConditionEnum, FilterToolEnum, SliderFilterInputModeEnum, UniqueValuesService,
 } from '@tailormap-viewer/api';
 import { Store } from '@ngrx/store';
-import { setSingleFilterDisabled, updateFilter } from '../../../filter/state/filter.actions';
+import { setSingleFilterDisabled, updateFilter } from '../../../state/filter-state/filter.actions';
 import { AttributeFilterHelper } from '@tailormap-viewer/shared';
 import { DateTime } from 'luxon';
 import { forkJoin, map, Observable, switchMap, take } from 'rxjs';
@@ -26,7 +26,7 @@ export class EditAttributeFiltersComponent {
   public editableFilters = input<AttributeFilterModel[]>([]);
   public filterGroupId = input<string | null>(null);
   public layerIds = input<string[]>([]);
-  public onlyGroupInListOnInit = input<boolean>(false);
+  public expanded = input<boolean>(false);
 
   public isSliderFilter(filter: AttributeFilterModel): boolean {
     return filter.editConfiguration?.filterTool === FilterToolEnum.SLIDER;

projects/core/src/lib/components/filter/filter-list-item/filter-list-item.component.html

@@ -25,7 +25,7 @@
           [editableFilters]="editableFilters"
           [filterGroupId]="filter.id"
           [layerIds]="filter.layerIds"
-          [onlyGroupInListOnInit]="onlyGroupInListOnInit"></tm-edit-attribute-filter>
+          [expanded]="editFiltersExpanded"></tm-edit-attribute-filter>
       </div>
     }
     <mat-card-actions align="end">

projects/core/src/lib/components/filter/filter-list-item/filter-list-item.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core
 import { ExtendedFilterGroupModel } from '../../../filter/models/extended-filter-group.model';
 import { FilterTypeEnum, FilterGroupModel, AttributeFilterModel } from '@tailormap-viewer/api';
 import { Store } from '@ngrx/store';
-import { toggleFilterDisabled } from '../../../filter/state/filter.actions';
+import { toggleFilterDisabled } from '../../../state/filter-state/filter.actions';
 import { AppLayerModel } from '@tailormap-viewer/api';
 import { setSelectedFilterGroup } from '../state/filter-component.actions';
 import { RemoveFilterService } from '../services/remove-filter.service';
@@ -31,7 +31,7 @@ export class FilterListItemComponent {
   }
 
   @Input()
-  public onlyGroupInListOnInit = false;
+  public editFiltersExpanded = false;
 
   private store$ = inject(Store);
   private removeFilterService = inject(RemoveFilterService);

projects/core/src/lib/components/filter/filter-list/filter-list.component.html

@@ -1,3 +1,4 @@
-@for (filter of (filters$ | async); track filter.id) {
-  <tm-filter-list-item [filterGroup]="filter" [onlyGroupInListOnInit]="onlyGroupInListOnInit"></tm-filter-list-item>
+@let filters = filters$ | async;
+@for (filter of filters; track filter.id) {
+  <tm-filter-list-item [filterGroup]="filter" [editFiltersExpanded]="filters?.length === 1"></tm-filter-list-item>
 }

projects/core/src/lib/components/filter/filter-list/filter-list.component.spec.ts

@@ -5,18 +5,13 @@ import { SharedImportsModule } from '@tailormap-viewer/shared';
 import { getFilterGroup } from '../../../../../../shared/src/lib/helpers/attribute-filter.helper.spec';
 import { getAppLayerModel } from '@tailormap-viewer/api';
 import { FilterListItemComponent } from '../filter-list-item/filter-list-item.component';
-import { selectFilterGroupsWithLayers } from '../../../filter/state/filter.selectors';
+import { selectFilterGroupsWithLayers } from '../../../state/filter-state/filter.selectors';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { FilterDescriptionComponent } from '../../../filter/filter-description/filter-description.component';
-import { AttributeFilterService } from '../../../services/attribute-filter.service';
-import { of } from 'rxjs';
 
 describe('FilterListComponent', () => {
 
   test('should render empty list', async () => {
-    const mockAttributeFilterService = {
-      addAttributeAliasesToFilters$: jest.fn().mockImplementation((filterGroups) => of(filterGroups)),
-    };
     await render(FilterListComponent, {
       imports: [ SharedImportsModule, MatIconTestingModule ],
       declarations: [ FilterListItemComponent, FilterDescriptionComponent ],
@@ -34,17 +29,13 @@ describe('FilterListComponent', () => {
             },
           ],
         }),
-        { provide: AttributeFilterService, useValue: mockAttributeFilterService },
       ],
     });
     expect(screen.queryByText('Attribute filter')).not.toBeInTheDocument();
     expect(screen.queryByTestId('filter-list-item')).toBeNull();
   });
 
   test('should render list with filters', async () => {
-    const mockAttributeFilterService = {
-      addAttributeAliasesToFilters$: jest.fn().mockImplementation((filterGroups) => of(filterGroups)),
-    };
     const store = provideMockStore({
       initialState: {},
       selectors: [
@@ -57,10 +48,7 @@ describe('FilterListComponent', () => {
       ],
     });
     await render(FilterListComponent, {
-      providers: [
-        store,
-        { provide: AttributeFilterService, useValue: mockAttributeFilterService },
-      ],
+      providers: [store],
       declarations: [ FilterListItemComponent, FilterDescriptionComponent ],
       imports: [ SharedImportsModule, MatIconTestingModule ],
     });