refactor search-result panel

src/app/pages/portal/panels/panels-handler/panels/search-results/search-results-panel.component.html

@@ -1,15 +1,33 @@
-<igo-search-results
-  [store]="searchState.store"
-  showIcons="true"
-  [term]="searchState.searchTerm$ | async"
-  placeholder="false"
-  (searchTermChange)="onSearchTermChange($event)"
-  (featureSelected)="close()"
-  (resultFocus)="onResult(searchResultActions.Focus, $event)"
-  (resultSelect)="onResult(searchResultActions.Select, $event)"
-  (resultUnfocus)="onResult(searchResultActions.Unfocus, $event)"
-  (resultMouseenter)="onResult(searchResultActions.Focus, $event)"
-  (resultMouseleave)="onResult(searchResultActions.Unfocus, $event)"
-  (moreResults)="onResult(searchResultActions.Search, $event)"
->
-</igo-search-results>
+@if (searchState.store.empty$ | async) {
+  <div style="margin: 20px">
+    <section>
+      <h5>
+        {{ 'igo.integration.searchResultsTool.noResults' | translate }}
+      </h5>
+      <h6>
+        {{ 'igo.integration.searchResultsTool.doSearch' | translate }}
+      </h6>
+      <p
+        [innerHTML]="'igo.integration.searchResultsTool.examples' | translate"
+      ></p>
+    </section>
+  </div>
+}
+<!-- todo necessaire mais je ne comprends pas pourquoi -->
+@if ((searchState.store.empty$ | async) === false) {
+  <igo-search-results
+    [map]="map"
+    [store]="searchState.store"
+    showIcons="true"
+    [term]="searchState.searchTerm$ | async"
+    placeholder="false"
+    (searchTermChange)="onSearchTermChange($event)"
+    (resultFocus)="onResult(searchResultActions.Focus, $event)"
+    (resultSelect)="onResult(searchResultActions.Select, $event)"
+    (resultUnfocus)="onResult(searchResultActions.Unfocus, $event)"
+    (resultMouseenter)="onResult(searchResultActions.Focus, $event)"
+    (resultMouseleave)="onResult(searchResultActions.Unfocus, $event)"
+    (moreResults)="onMoreResults($event)"
+  >
+  </igo-search-results>
+}

src/app/pages/portal/panels/panels-handler/panels/search-results/search-results-panel.component.ts

@@ -1,7 +1,9 @@
 import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
@@ -12,17 +14,23 @@ import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 
-import { IgoMap, Layer, SearchResultsComponent } from '@igo2/geo';
+import {
+  FeatureMotion,
+  IgoMap,
+  Layer,
+  Research,
+  SearchResult,
+  SearchResultsComponent
+} from '@igo2/geo';
 import { SearchState } from '@igo2/integration';
 
 import { TranslateModule } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
 
 import { SearchResultAction } from '../../panels-handler.enum';
 import {
-  onResultFocus,
-  onResultSelect,
-  onResultUnfocus,
-  onSearch
+  onResultSelectOrFocus,
+  onResultUnfocus
 } from './search-results-panel.utils';
 
 @Component({
@@ -42,40 +50,58 @@ import {
 })
 export class SearchResultPanelComponent implements OnInit, OnDestroy {
   public searchResultActions = SearchResultAction;
+  private empty$$: Subscription;
 
   @Input() map: IgoMap;
   @Input() searchState: SearchState;
+  @Input() expanded: boolean;
 
+  @Output() opened = new EventEmitter();
   @Output() closed = new EventEmitter();
 
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.empty$$ = this.searchState.store.empty$.subscribe((e) => {
+      if (!e && !this.expanded) {
+        this.opened.emit();
+      }
+    });
+  }
 
-  ngOnDestroy() {}
+  ngOnDestroy() {
+    this.empty$$.unsubscribe();
+  }
 
   onSearchTermChange(term: string) {
     this.searchState.setSearchTerm(term);
   }
 
-  onResult(searchResultAction: SearchResultAction, event) {
-    console.log('searchResultAction', searchResultAction, event);
+  onResult(searchResultAction: SearchResultAction, searchResult: SearchResult) {
     switch (searchResultAction) {
       case SearchResultAction.Focus:
-        onResultFocus();
-        break;
-      case SearchResultAction.Search:
-        onSearch();
+        onResultSelectOrFocus(searchResult, this.map, this.searchState, {
+          featureMotion: FeatureMotion.None
+        });
         break;
       case SearchResultAction.Select:
-        onResultSelect();
+        onResultSelectOrFocus(searchResult, this.map, this.searchState);
         this.close();
         break;
       case SearchResultAction.Unfocus:
-        onResultUnfocus();
+        onResultUnfocus(searchResult, this.map, this.searchState);
         break;
     }
   }
+  onMoreResults(event: { research: Research; results: SearchResult[] }) {
+    const results = event.results;
+    this.searchState.store.state.updateAll({ focused: false, selected: false });
+    const newResults = this.searchState.store.entities$.value
+      .filter((result: SearchResult) => result.source !== event.research.source)
+      .concat(results);
+    this.searchState.store.updateMany(newResults);
+    // todo scroll into view
+  }
 
   close() {
     this.closed.emit();

src/app/pages/portal/panels/panels-handler/panels/search-results/search-results-panel.utils.ts

@@ -1,12 +1,71 @@
-export function onResultFocus() {
-  console.log('onResultFocus');
+import {
+  FEATURE,
+  Feature,
+  FeatureMotion,
+  IgoMap,
+  SearchResult,
+  getCommonVectorSelectedStyle
+} from '@igo2/geo';
+import { SearchState } from '@igo2/integration';
+
+import olFeature from 'ol/Feature';
+import type { default as OlGeometry } from 'ol/geom/Geometry';
+
+export function onResultSelectOrFocus(
+  result: SearchResult,
+  map: IgoMap,
+  searchState: SearchState,
+  options?: { featureMotion?: FeatureMotion }
+) {
+  if (result.meta.dataType === FEATURE && result.data.geometry) {
+    result.data.meta.style = getCommonVectorSelectedStyle(
+      Object.assign(
+        {},
+        { feature: result.data as Feature | olFeature<OlGeometry> },
+        searchState.searchOverlayStyleFocus,
+        result.style?.focus ? result.style.focus : {}
+      )
+    );
+
+    const feature = map.searchResultsOverlay.dataSource.ol.getFeatureById(
+      result.meta.id
+    );
+    if (feature) {
+      feature.setStyle(result.data.meta.style);
+      return;
+    }
+    map.searchResultsOverlay.addFeature(
+      result.data as Feature,
+      options?.featureMotion
+    );
+  }
 }
-export function onResultSelect() {
-  console.log('onResultSelect');
-}
-export function onResultUnfocus() {
-  console.log('onResultUnfocus');
-}
-export function onSearch() {
-  console.log('onSearch');
+
+export function onResultUnfocus(
+  result: SearchResult,
+  map: IgoMap,
+  searchState: SearchState
+) {
+  if (result.meta.dataType !== FEATURE) {
+    return;
+  }
+
+  if (searchState.store.state.get(result).selected) {
+    const feature = map.searchResultsOverlay.dataSource.ol.getFeatureById(
+      result.meta.id
+    );
+    if (feature) {
+      const style = getCommonVectorSelectedStyle(
+        Object.assign(
+          {},
+          { feature: result.data as Feature | olFeature<OlGeometry> },
+          searchState.searchOverlayStyleFocus,
+          result.style?.focus ? result.style.focus : {}
+        )
+      );
+      feature.setStyle(style);
+    }
+    return;
+  }
+  map.searchResultsOverlay.removeFeature(result.data as Feature);
 }