Merge pull request #340 from swisstopo/hotfix/clear-selected-asset

Hotfix: Clear Selected Asset in Search

libs/asset-viewer/src/lib/components/asset-search-detail/asset-search-detail.component.html

@@ -4,17 +4,14 @@
 <ng-template #detail>
   <div class="header">
     <span translate="search.detailedInformation"></span>
-    <a
-      [routerLink]="['.']"
-      [queryParams]="{ assetId: undefined }"
-      (click)="resetAssetDetail()"
-      queryParamsHandling="merge"
+    <button
+      (click)="clearSelectedAsset()"
       asset-sg-icon-button
       class="close-button"
       [attr.alt]="'search.closeAssetDetails' | translate"
     >
       <svg-icon key="close"></svg-icon>
-    </a>
+    </button>
   </div>
   <div class="asset-detail-scroll-container">
     <div class="asset-detail">

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

@@ -39,8 +39,8 @@ export class AssetSearchDetailComponent {
 
   public loadingState = this.store.select(selectAssetDetailLoadingState);
 
-  public resetAssetDetail() {
-    this.store.dispatch(actions.resetAssetDetail());
+  public clearSelectedAsset() {
+    this.store.dispatch(actions.clearSelectedAsset());
   }
 
   public searchForReferenceAsset(assetId: number) {

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

@@ -23,7 +23,7 @@ export class AssetSearchFilterListComponent<T> {
       activeValues.add(filter.value);
     }
     this.store.dispatch(
-      actions.search({
+      actions.mergeQuery({
         query: { [filter.queryKey]: activeValues.size > 0 ? [...activeValues] : undefined },
       })
     );

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

@@ -93,7 +93,7 @@ export class AssetSearchRefineComponent implements OnInit, OnDestroy, AfterViewI
   }
 
   public removePolygon() {
-    this.store.dispatch(actions.removePolygon());
+    this.store.dispatch(actions.clearPolygon());
   }
 
   public toggleDrawPolygon() {
@@ -108,7 +108,7 @@ export class AssetSearchRefineComponent implements OnInit, OnDestroy, AfterViewI
 
   public updateSearch(filterConfiguration: Partial<AssetSearchQuery>) {
     if (this.isFiltersOpen) {
-      this.store.dispatch(actions.search({ query: filterConfiguration }));
+      this.store.dispatch(actions.mergeQuery({ query: filterConfiguration }));
     }
   }
 

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

@@ -4,7 +4,7 @@
       {{ "search.searchResults" | translate }}:
       <asset-sg-animate-number [nextValue]="(total$ | async) ?? 0" />
     </div>
-    <button asset-sg-icon-button style="width: unset" (click)="toggleResultsOpen(isResultsOpen)">
+    <button asset-sg-icon-button style="width: unset" (click)="toggleResultsOpen()">
       <span> {{ (isResultsOpen ? "search.hideTable" : "search.showTable") | translate }} </span>
       <svg-icon [key]="isResultsOpen ? 'arrow-down' : 'arrow-up'"></svg-icon>
     </button>

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

@@ -68,8 +68,8 @@ export class AssetSearchResultsComponent implements OnInit, OnDestroy {
     this._store.dispatch(actions.assetClicked({ assetId }));
   }
 
-  public toggleResultsOpen(isCurrentlyOpen: boolean) {
-    this._store.dispatch(actions.manualToggleResult());
+  public toggleResultsOpen() {
+    this._store.dispatch(actions.toggleResults());
   }
 
   public onScroll(event: Event) {

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

@@ -10,6 +10,7 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
+import { AuthService } from '@asset-sg/auth';
 import { AppPortalService, AppState, LifecycleHooks, LifecycleHooksDirective } from '@asset-sg/client-shared';
 import { AssetEditDetail } from '@asset-sg/shared';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -22,13 +23,15 @@ import {
   asyncScheduler,
   combineLatest,
   filter,
+  identity,
   map,
   Observable,
   observeOn,
   partition,
   share,
   Subject,
   switchMap,
+  take,
   withLatestFrom,
 } from 'rxjs';
 
@@ -92,9 +95,14 @@ export class AssetViewerPageComponent implements OnInit, OnDestroy {
   public assetsForPicker$: Observable<AssetEditDetail[]>;
   public highlightedAssetId: number | null = null;
 
+  private readonly authService = inject(AuthService);
+
   public ngOnInit() {
-    this._store.dispatch(actions.initializeSearch());
     this._store.dispatch(actions.openFilters());
+
+    this.authService.isInitialized$.pipe(filter(identity), take(1)).subscribe(() => {
+      this._store.dispatch(actions.initialize());
+    });
     this._appPortalService.setAppBarPortalContent(null);
   }
 
@@ -154,8 +162,8 @@ export class AssetViewerPageComponent implements OnInit, OnDestroy {
       .pipe(
         map(
           flow(
-            O.map((text) => actions.search({ query: { text } })),
-            O.getOrElseW(() => actions.clearSearchText())
+            O.map((text) => actions.mergeQuery({ query: { text } })),
+            O.getOrElseW(() => actions.mergeQuery({ query: { text: '' } }))
           )
         )
       )

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

@@ -189,7 +189,7 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy {
         )
         .subscribe(([polygon, _]) =>
           this.store.dispatch(
-            searchActions.search({
+            searchActions.mergeQuery({
               query: { polygon: polygon },
             })
           )

libs/asset-viewer/src/lib/services/asset-search.service.ts

@@ -25,15 +25,15 @@ export class AssetSearchService {
     );
   }
 
-  public loadAssetDetailData(assetId: number): Observable<AssetEditDetail> {
+  public searchStats(searchQuery: AssetSearchQuery): Observable<AssetSearchStats> {
     return this._httpClient
-      .get(`/api/asset-edit/${assetId}`)
-      .pipe(map((res) => (AssetEditDetail.decode(res) as E.Right<AssetEditDetail>).right));
+      .post('/api/assets/search/stats', searchQuery)
+      .pipe(map((res) => plainToInstance(AssetSearchStatsDTO, res)));
   }
 
-  public updateSearchResultStats(searchQuery: AssetSearchQuery): Observable<AssetSearchStats> {
+  public fetchAssetEditDetail(assetId: number): Observable<AssetEditDetail> {
     return this._httpClient
-      .post('/api/assets/search/stats', searchQuery)
-      .pipe(map((res) => plainToInstance(AssetSearchStatsDTO, res)));
+      .get(`/api/asset-edit/${assetId}`)
+      .pipe(map((res) => (AssetEditDetail.decode(res) as E.Right<AssetEditDetail>).right));
   }
 }

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

@@ -1,41 +1,53 @@
 import { AssetEditDetail, AssetSearchQuery, AssetSearchResult, AssetSearchStats } from '@asset-sg/shared';
+import { AssetId } from '@asset-sg/shared/v2';
 import { createAction, props } from '@ngrx/store';
 import { AllStudyDTOs } from '../../models';
 
+export const initialize = createAction('[Asset Search] Initialize');
+export const runInitialSearch = createAction(
+  '[Asset Search] Run Initial Search',
+  props<{
+    assetId: number | undefined;
+    query: AssetSearchQuery;
+  }>()
+);
 export const search = createAction(
   '[Asset Search] Search',
   props<{
-    query: Partial<AssetSearchQuery>;
+    query: AssetSearchQuery;
   }>()
 );
-export const updateStats = createAction(
-  '[Asset Search] Update search stats',
+export const mergeQuery = createAction(
+  '[Asset Search] Merge Query',
   props<{
-    searchStats: AssetSearchStats;
+    query: AssetSearchQuery;
   }>()
 );
-export const updateSearchResults = createAction(
-  '[Asset Search] Update search results',
+export const executeSearch = createAction('[Asset Search] Execute Search', props<{ query: AssetSearchQuery }>());
+
+export const updateResults = createAction(
+  '[Asset Search] Update Results',
   props<{
-    searchResults: AssetSearchResult;
+    results: AssetSearchResult;
   }>()
 );
-export const clearSearchText = createAction('[Asset Search] Clear search text');
-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 Search] Show Asset Detail', props<{ assetId: number }>());
-export const updateAssetDetail = createAction(
-  '[Asset Search] Update Asset Detail',
-  props<{ assetDetail: AssetEditDetail }>()
+export const updateStats = createAction(
+  '[Asset Search] Update Stats',
+  props<{
+    stats: AssetSearchStats;
+  }>()
 );
-export const resetAssetDetail = createAction('[Asset Search] Reset Asset Detail');
+export const resetSearch = createAction('[Asset Search] Reset Search');
+
+export const assetClicked = createAction('[Asset Search] Asset Clicked', props<{ assetId: number }>());
+export const selectAsset = createAction('[Asset Search] Select Asset', props<{ assetId: AssetId }>());
+export const setSelectedAsset = createAction('[Asset Search] Set Selected Asset', props<{ asset: AssetEditDetail }>());
+export const clearSelectedAsset = createAction('[Asset Search] Clear Selected Asset');
+export const clearPolygon = createAction('[Asset Search] Clear Polygon');
+export const setStudies = createAction('[Asset Search] Set 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');
+export const toggleResults = createAction('[Asset Search] Toggle Results');