feat(home): implement 'routing' to datahub

Author: tkohr

apps/home/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="h-full flex flex-col">
-  <div class="flex-grow" gnUiSearchRouterContainer="mainSearch">
-    <router-outlet></router-outlet>
+  <div class="flex-grow" gnUiSearchStateContainer="mainSearch">
+    <mel-datahub-home-page></mel-datahub-home-page>
   </div>
   <mel-datahub-footer></mel-datahub-footer>
 </div>

apps/home/src/app/app.module.ts

@@ -1,9 +1,7 @@
 import { importProvidersFrom, isDevMode, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import { RouterModule } from '@angular/router'
 import { AppComponent } from './app.component'
 import {
-  DefaultRouterModule,
   FeatureAuthModule,
   FeatureCatalogModule,
   FeatureRecordModule,
@@ -20,7 +18,6 @@ import {
   UiInputsModule,
   UiWidgetsModule,
   UiMapModule,
-  RouterService,
 } from 'geonetwork-ui'
 import {
   TranslateLoader,
@@ -41,7 +38,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { HomePageComponent } from './home/home-page/home-page.component'
-import { AppRouterService } from './app.router.service'
 
 @NgModule({
   declarations: [AppComponent, HomeHeaderComponent, HomePageComponent],
@@ -85,21 +81,11 @@ import { AppRouterService } from './app.router.service'
     ),
     EffectsModule.forRoot([]),
     StoreDevtoolsModule.instrument({ logOnly: !isDevMode() }),
-    DefaultRouterModule.forRoot({
-      searchStateId: 'mainSearch',
-      searchRouteComponent: HomePageComponent,
-      recordRouteComponent: HomePageComponent,
-    }),
-    RouterModule.forRoot([], {
-      initialNavigation: 'enabledBlocking',
-      scrollPositionRestoration: 'enabled',
-    }),
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),
     provideGn4(),
     provideRepositoryUrl(() => '/geonetwork/srv/api'),
-    { provide: RouterService, useClass: AppRouterService },
     {
       provide: LOGIN_URL,
       useFactory: () => '${current_url}?login',

apps/home/src/app/app.router.service.ts

@@ -6,11 +6,12 @@ <h1 class="flex justify-center mel-page-title" translate="">
     <div class="flex justify-center pt-8 pb-24 relative">
       <mel-datahub-fuzzy-search
         class="mel-fuzzy-search"
+        (inputSubmitted)="onFuzzySearchSubmit($event)"
         (itemSelected)="onFuzzySearchSelection($event)"
         [autoFocus]="true"
       ></mel-datahub-fuzzy-search>
     </div>
-    <div class="max-w-[1182px] mx-auto" gnUiSearchStateContainer="headerHome">
+    <div class="max-w-[1182px] mx-auto">
       <div class="sm:ml-16">
         <div class="mel-title-line"></div>
         <div class="text-2xl font-title" translate="">
@@ -23,7 +24,7 @@ <h1 class="flex justify-center mel-page-title" translate="">
       ></mel-datahub-results-list-carousel>
     </div>
     <div class="flex justify-end mt-4">
-      <a routerLink="/search">
+      <a [href]="HREF_ROUTE_SEARCH">
         <mel-datahub-button
           [label]="'mel.homepage.visit.catalog' | translate"
           [icon]="'arrow'"

apps/home/src/app/home/home-header/home-header.component.html

@@ -1,5 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { RouterFacade, SearchService } from 'geonetwork-ui'
+import { SearchService } from 'geonetwork-ui'
+import {
+  DATAHUB_ROOT,
+  DATAHUB_ROUTE_SEARCH,
+  goFromHomeToRecord,
+  goFromHomeToSearch,
+} from '@mel-dataplatform/mel'
 import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/search'
 
@@ -17,14 +23,18 @@ import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/sear
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeHeaderComponent {
-  constructor(
-    public routerFacade: RouterFacade,
-    private searchService: SearchService
-  ) {}
+  HREF_ROUTE_SEARCH = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_SEARCH}`
+
+  constructor(private searchService: SearchService) {}
 
   onFuzzySearchSelection(record: CatalogRecord) {
-    this.routerFacade.goToMetadata(record)
+    goFromHomeToRecord(record)
+  }
+
+  onFuzzySearchSubmit(query: string) {
+    goFromHomeToSearch(query)
   }
+
   clearSearchAndSort(sort: SortByField | string): void {
     this.searchService.setSortAndFilters({}, sort as SortByField)
   }

apps/home/src/app/home/home-header/home-header.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 
 @Component({
   selector: 'mel-datahub-home-page',

apps/home/src/app/home/home-page/home-page.component.ts

@@ -1,2 +1,3 @@
 export * from './lib/mel.module'
 export * from './lib/embedded.translate.loader'
+export * from './lib/route.utils'

libs/mel/src/index.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, Input, OnDestroy, OnInit, Optional } from '@angular/core'
 import { Store } from '@ngrx/store'
 import {
   FIELDS_BRIEF,
@@ -13,6 +13,7 @@ import {
   Keyword,
 } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 import { Subscription } from 'rxjs'
+import { goFromHomeToRecord, goFromHomeToSearch } from '../route.utils'
 
 @Component({
   selector: 'mel-datahub-results-list',
@@ -30,7 +31,7 @@ export class ResultsListComponent implements OnInit, OnDestroy {
   constructor(
     protected searchService: SearchService,
     protected searchFacade: SearchFacade,
-    protected routerFacade: RouterFacade,
+    @Optional() protected routerFacade: RouterFacade,
     protected favoritesService: FavoritesService,
     protected store: Store<SearchState>
   ) {}
@@ -57,10 +58,14 @@ export class ResultsListComponent implements OnInit, OnDestroy {
   }
 
   onInfoKeywordClick(keyword: Keyword) {
-    this.routerFacade.updateSearch({ q: keyword.label })
+    this.routerFacade
+      ? this.routerFacade.updateSearch({ q: keyword.label })
+      : goFromHomeToSearch(keyword.label)
   }
 
   onMetadataSelection(metadata: CatalogRecord): void {
-    this.routerFacade.goToMetadata(metadata)
+    this.routerFacade
+      ? this.routerFacade.goToMetadata(metadata)
+      : goFromHomeToRecord(metadata)
   }
 }

libs/mel/src/lib/results-list/results-list.component.ts

@@ -0,0 +1,13 @@
+import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+
+export const DATAHUB_ROOT = '/catalogue'
+export const DATAHUB_ROUTE_DATASET = 'dataset'
+export const DATAHUB_ROUTE_SEARCH = 'search'
+
+export function goFromHomeToRecord(record: CatalogRecord) {
+  window.location.href = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_DATASET}/${record.uniqueIdentifier}`
+}
+
+export function goFromHomeToSearch(query: string) {
+  window.location.href = `${DATAHUB_ROOT}/${DATAHUB_ROUTE_SEARCH}?q=${query}`
+}

libs/mel/src/lib/route.utils.ts

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "start": "nx serve mel-datahub",
-    "home": "nx serve home",
+    "home": "nx serve home --port 4201",
     "format": "nx format:write",
     "format:check": "nx format:check",
     "lint:all": "nx run-many --target=lint",