Dont open filters after someone manually changed them

apps/client-asset-sg/src/app/components/menu-bar/menu-bar.component.html

@@ -16,39 +16,28 @@
     [disabled]="true"
     aria-disabled="true"
     class="menu-bar-item"
-    [ngClass]="{ active: (isFavouritesActive$ | async) }"
+    routerLinkActive="active"
   >
     <svg-icon key="favourite" />
     <span translate>menuBar.favourites</span>
   </a>
-  <ng-container *canCreate="AssetEditPolicy">
-    <button
-      asset-sg-reset
-      class="menu-bar-item active"
-      *ngIf="isEditActive$ | async; else notAssetEditActive"
-      [disabled]="true"
-    >
-      <svg-icon key="edit" />
-      <span translate>menuBar.admin</span>
-    </button>
-    <ng-template #notAssetEditActive>
-      <a
-        [routerLink]="[_translateService.currentLang, 'asset-admin']"
-        asset-sg-reset
-        class="menu-bar-item"
-        [ngClass]="{ active: (isEditActive$ | async) }"
-      >
-        <svg-icon key="edit" />
-        <span translate>menuBar.admin</span>
-      </a>
-    </ng-template>
-  </ng-container>
+
+  <a
+    *canCreate="AssetEditPolicy"
+    [routerLink]="[_translateService.currentLang, 'asset-admin']"
+    asset-sg-reset
+    class="menu-bar-item"
+    routerLinkActive="active"
+  >
+    <svg-icon key="edit" />
+    <span translate>menuBar.admin</span>
+  </a>
   <a
     *adminOnly
     [routerLink]="[_translateService.currentLang, 'admin']"
     asset-sg-reset
     class="menu-bar-item"
-    [class]="{ active: (isAdminActive$ | async) }"
+    routerLinkActive="active"
   >
     <svg-icon key="user-management" />
     <span translate>menuBar.userManagement</span>
@@ -60,7 +49,7 @@
     [routerLink]="[_translateService.currentLang, 'profile']"
     asset-sg-reset
     class="menu-bar-item"
-    [ngClass]="{ active: (isProfileActive$ | async) }"
+    routerLinkActive="active"
   >
     <svg-icon key="profile" />
     <span translate>menuBar.profile</span>

apps/client-asset-sg/src/app/components/menu-bar/menu-bar.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component, HostBinding, inject } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { appSharedStateActions, fromAppShared } from '@asset-sg/client-shared';
+import { appSharedStateActions, assetsPageMatcher, fromAppShared } from '@asset-sg/client-shared';
 import { AssetEditPolicy } from '@asset-sg/shared/v2';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
-import queryString from 'query-string';
-import { filter, map, shareReplay } from 'rxjs';
+import { filter, map } from 'rxjs';
 
 import { AppState } from '../../state/app-state';
 
@@ -24,30 +23,13 @@ export class MenuBarComponent {
   private _store = inject(Store<AppState>);
 
   public userExists$ = this._store.select(fromAppShared.selectIsAnonymousMode).pipe(map((anonymous) => !anonymous));
-  public isAssetsActive$ = this.createIsRouteActive$((url) => Boolean(url.match(/^\/\w\w$/)));
-  public isEditActive$ = this.isSegmentActive('asset-admin');
-  public isFavouritesActive$ = this.isSegmentActive('favourites');
-  public isAdminActive$ = this.isSegmentActive('admin');
-  public isProfileActive$ = this.isSegmentActive('profile');
-
-  private createIsRouteActive$(fn: (url: string) => boolean) {
-    const o$ = this._router.events.pipe(
-      filter((event) => event instanceof NavigationEnd),
-      map(() => {
-        const { url } = queryString.parseUrl(this._router.url);
-        return fn(url);
-      }),
-      shareReplay({ bufferSize: 1, refCount: true })
-    );
-    o$.pipe(untilDestroyed(this)).subscribe();
-    return o$;
-  }
-
-  private isSegmentActive(segment: string) {
-    return this.createIsRouteActive$((url) => {
-      return Boolean(url.match(`^/\\w\\w/${segment}`));
-    });
-  }
+  public isAssetsActive$ = this._router.events.pipe(
+    filter((event) => event instanceof NavigationEnd),
+    map(() => {
+      const segments = this._router.parseUrl(this._router.url).root.children['primary'].segments;
+      return assetsPageMatcher(segments) !== null;
+    })
+  );
 
   public openAssetDrawer() {
     this._store.dispatch(appSharedStateActions.toggleSearchFilter());

libs/asset-viewer/src/lib/components/asset-search-results/asset-search-results.component.ts

@@ -69,11 +69,7 @@ export class AssetSearchResultsComponent implements OnInit, OnDestroy {
   }
 
   public toggleResultsOpen(isCurrentlyOpen: boolean) {
-    if (isCurrentlyOpen) {
-      this._store.dispatch(actions.closeResults());
-    } else {
-      this._store.dispatch(actions.openResults());
-    }
+    this._store.dispatch(actions.manualToggleResult());
   }
 
   public onScroll(event: Event) {

libs/asset-viewer/src/lib/components/map/map.component.ts

@@ -13,7 +13,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { AppState } from '@asset-sg/client-shared';
-import { isNotNull } from '@asset-sg/core';
+import { arrayEqual, isNotNull } from '@asset-sg/core';
 import { filterNullish } from '@asset-sg/shared/v2';
 import { Store } from '@ngrx/store';
 import { asapScheduler, distinctUntilChanged, filter, first, pairwise, skip, Subscription, take, takeLast } from 'rxjs';
@@ -182,18 +182,13 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy {
         this.controls.draw.setPolygon(polygon ?? null);
       })
     );
-    this.controls.draw.polygon$
-      .pipe(
-        filterNullish(),
-        distinctUntilChanged((a, b) => this.equalsCheck(a, b))
+    this.controls.draw.polygon$.pipe(filterNullish(), distinctUntilChanged(arrayEqual)).subscribe((polygon) =>
+      this.store.dispatch(
+        searchActions.search({
+          query: { polygon: polygon },
+        })
       )
-      .subscribe((polygon) =>
-        this.store.dispatch(
-          searchActions.search({
-            query: { polygon: polygon },
-          })
-        )
-      );
+    );
   }
 
   private handleHighlightedAssetIdChange() {
@@ -204,10 +199,6 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
-  private equalsCheck<T>(a: T[] | null, b: T[] | null) {
-    return !!a && !!b && a.length === b.length && a.every((v, i) => v === b[i]);
-  }
-
   @HostBinding('class.is-loading')
   get isLoading(): boolean {
     return !this.isInitialized;

libs/asset-viewer/src/lib/state/asset-search/asset-search.actions.ts

@@ -25,16 +25,17 @@ export const resetSearch = createAction('[Asset Search] Reset Search');
 export const removePolygon = createAction('[Asset Search] Remove polygon');
 export const initializeSearch = createAction('[Asset Search] Initialize search');
 export const assetClicked = createAction('[Asset Search] Asset clicked', props<{ assetId: number }>());
-export const showAssetDetail = createAction('[Asset Viewer] Show Asset Detail', props<{ assetId: number }>());
+export const showAssetDetail = createAction('[Asset Search] Show Asset Detail', props<{ assetId: number }>());
 export const updateAssetDetail = createAction(
   '[Asset Search] Update Asset Detail',
   props<{ assetDetail: AssetEditDetail }>()
 );
 export const resetAssetDetail = createAction('[Asset Search] Reset Asset Detail');
-export const openFilters = createAction('[Asset Viewer] Open Filters');
-export const closeFilters = createAction('[Asset Viewer] Close Filters');
-export const openResults = createAction('[Asset Viewer] Open Results');
-export const closeResults = createAction('[Asset Viewer] Close Results');
-export const setStudies = createAction('[Asset Viewer] Load Studies', props<{ studies: AllStudyDTOs }>());
+export const openFilters = createAction('[Asset Search] Open Filters');
+export const closeFilters = createAction('[Asset Search] Close Filters');
+export const openResults = createAction('[Asset Search] Open Results');
+export const closeResults = createAction('[Asset Search] Close Results');
+export const setStudies = createAction('[Asset Search] Load Studies', props<{ studies: AllStudyDTOs }>());
 export const loadSearch = createAction('[Asset Search] Load Search', props<{ query: AssetSearchQuery }>());
 export const updateQueryParams = createAction('[Asset Search] Update Query Params');
+export const manualToggleResult = createAction('[Asset Search] Manual Toggle Params');

libs/asset-viewer/src/lib/state/asset-search/asset-search.effects.ts

@@ -9,7 +9,7 @@ import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
 import { ROUTER_NAVIGATED } from '@ngrx/router-store';
 import { Store } from '@ngrx/store';
 import * as D from 'io-ts/Decoder';
-import { EMPTY, filter, map, merge, of, share, switchMap, withLatestFrom } from 'rxjs';
+import { EMPTY, filter, map, merge, of, share, switchMap, takeUntil, withLatestFrom } from 'rxjs';
 
 import { AllStudyService } from '../../services/all-study.service';
 import { AssetSearchService } from '../../services/asset-search.service';
@@ -113,11 +113,21 @@ export class AssetSearchEffects {
   public openSearchResults$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(actions.updateSearchResults),
+      takeUntil(this.actions$.pipe(ofType(actions.manualToggleResult))),
       withLatestFrom(this.store.select(selectAssetSearchNoActiveFilters)),
       map(([_, showStudies]) => (showStudies ? actions.closeResults() : actions.openResults()))
     );
   });
 
+  public closeSearchResults$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(actions.updateSearchResults),
+      withLatestFrom(this.store.select(selectAssetSearchNoActiveFilters)),
+      filter(([_, showStudies]) => showStudies),
+      map(() => actions.closeResults())
+    );
+  });
+
   public loadStudies$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(actions.initializeSearch),
@@ -161,7 +171,7 @@ export class AssetSearchEffects {
         this.store.select(selectAssetSearchQuery),
         this.store.select(selectAssetSearchResultData).pipe(map((r) => r.length > 0))
       ),
-      filter(([params, query]) => !deepEqual(params.query, query)),
+      filter(([params, storeQuery]) => !deepEqual(params.query, storeQuery)),
       map(([params, storeQuery, searchResultsLoaded]) => {
         const paramsEmpty = Object.values(params.query).every((v) => v == null);
         if (paramsEmpty) {
@@ -180,10 +190,10 @@ export class AssetSearchEffects {
   public readAssetIdQueryParam$ = createEffect(() =>
     this.queryParams$.pipe(
       withLatestFrom(this.store.select(selectCurrentAssetDetail)),
-      filter(([params, assetDetail]) => params.assetId !== assetDetail?.assetId),
-      map(([params, storeAsset]) => {
+      filter(([params, storeAssetDetail]) => params.assetId !== storeAssetDetail?.assetId),
+      map(([params, storeAssetDetail]) => {
         const paramsEmpty = Object.values(params.query).every((v) => v == null);
-        const assetId = paramsEmpty ? storeAsset?.assetId : params.assetId;
+        const assetId = paramsEmpty ? storeAssetDetail?.assetId : params.assetId;
         return assetId === undefined ? actions.resetAssetDetail() : actions.showAssetDetail({ assetId });
       })
     )

libs/asset-viewer/src/lib/state/asset-search/asset-search.reducer.ts

@@ -150,5 +150,6 @@ export const assetSearchReducer = createReducer(
   ),
   on(actions.openResults, (state): AssetSearchState => ({ ...state, isResultsOpen: true })),
   on(actions.closeResults, (state): AssetSearchState => ({ ...state, isResultsOpen: false })),
+  on(actions.manualToggleResult, (state): AssetSearchState => ({ ...state, isResultsOpen: !state.isResultsOpen })),
   on(actions.setStudies, (state, { studies }): AssetSearchState => ({ ...state, studies }))
 );

libs/client-shared/src/lib/state/app-shared-state.selectors.ts

@@ -1,5 +1,6 @@
 import { Contact, emptyValueItem, ReferenceData, valueItemRecordToArray } from '@asset-sg/shared';
 import * as RD from '@devexperts/remote-data-ts';
+import { getRouterSelectors } from '@ngrx/router-store';
 import { createSelector } from '@ngrx/store';
 import * as A from 'fp-ts/Array';
 import { flow, pipe } from 'fp-ts/function';
@@ -94,3 +95,16 @@ export const selectRDReferenceDataVM = createSelector(
 );
 
 export const selectLocale = createSelector(appSharedFeature, (state) => (state.lang === 'en' ? 'en-GB' : 'de-CH'));
+
+export const {
+  selectCurrentRoute, // select the current route
+  selectFragment, // select the current route fragment
+  selectQueryParams, // select the current route query params
+  selectQueryParam, // factory function to select a query param
+  selectRouteParams, // select the current route params
+  selectRouteParam, // factory function to select a route param
+  selectRouteData, // select the current route data
+  selectRouteDataParam, // factory function to select a route data param
+  selectUrl, // select the current url
+  selectTitle, // select the title if available
+} = getRouterSelectors();

libs/core/src/lib/utils/eq.ts

@@ -62,3 +62,7 @@ export function deepEqual(obj1: any, obj2: any): boolean {
   // If all checks pass, the objects are deep equal.
   return true;
 }
+
+export function arrayEqual<T>(a: T[] | null, b: T[] | null) {
+  return !!a && !!b && a.length === b.length && a.every((v, i) => v === b[i]);
+}