feat: init MEL pages

apps/datahub/src/app/app.component.html

@@ -1,2 +1,4 @@
-<gn-ui-badge>Test MEL</gn-ui-badge>
-<router-outlet></router-outlet>
+<mel-datahub-header></mel-datahub-header>
+<div gnUiSearchRouterContainer="mainSearch">
+  <router-outlet></router-outlet>
+</div>

apps/datahub/src/app/app.module.ts

@@ -10,22 +10,40 @@ import {
   FeatureSearchModule,
   provideRepositoryUrl,
   RouterService,
+  ThemeService,
   TRANSLATE_DEFAULT_CONFIG,
   UiWidgetsModule,
 } from 'geonetwork-ui';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { SearchPageComponent } from './search/search-page/search-page.component';
 import { DatasetPageComponent } from './dataset/dataset-page/dataset-page.component';
+import { SearchHeaderComponent } from './search/search-header/search-header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SearchResultsComponent } from './search/search-results/search-results.component';
+import { HeaderComponent } from './common/header/header.component';
+import { HomePageComponent } from './home/home-page/home-page.component';
 import { AppRouterService } from './app.router.service';
+import { HomeHeaderComponent } from './home/home-header/home-header.component';
 import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    SearchPageComponent,
+    SearchHeaderComponent,
+    SearchResultsComponent,
+    HeaderComponent,
+    HomePageComponent,
+    HomeHeaderComponent,
+  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

apps/datahub/src/app/common/header/header.component.html

@@ -0,0 +1,5 @@
+<div class="h-16 px-8 bg-primary text-white flex items-center">
+  <div class="font-title uppercase text-lg font-bold" translate>
+    mel.common.header.title
+  </div>
+</div>

apps/datahub/src/app/common/header/header.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mel-datahub-header',
+  templateUrl: './header.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderComponent {}

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

@@ -0,0 +1,14 @@
+<div class="bg-beige">
+  <div class="pt-[139px]">
+    <h1 class="flex justify-center mel-page-title" translate="">
+      mel.datahub.home.title
+    </h1>
+    <div class="flex justify-center p-8 relative">
+      <gn-ui-fuzzy-search
+        class="w-[645px] text-[17px] pointer-events-auto"
+        (itemSelected)="onFuzzySearchSelection($event)"
+      ></gn-ui-fuzzy-search>
+    </div>
+    <div class="h-32"></div>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterFacade, SearchService } from 'geonetwork-ui';
+import { CatalogRecord } from 'geonetwork-ui/src/libs/common/domain/src/lib/record';
+import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/search';
+
+@Component({
+  selector: 'mel-datahub-home-header',
+  templateUrl: './home-header.component.html',
+  styles: `
+  ::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel {
+    margin-top: 10px !important;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
+  }
+`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomeHeaderComponent {
+  constructor(
+    public routerFacade: RouterFacade,
+    private searchService: SearchService
+  ) {}
+
+  onFuzzySearchSelection(record: CatalogRecord) {
+    this.routerFacade.goToMetadata(record);
+  }
+  clearSearchAndSort(sort: SortByField | string): void {
+    this.searchService.setSortAndFilters({}, sort as SortByField);
+  }
+}

apps/datahub/src/app/home/home-page/home-page.component.html

@@ -0,0 +1 @@
+<mel-datahub-home-header></mel-datahub-home-header>

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

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mel-datahub-home-page',
+  templateUrl: './home-page.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePageComponent {}

apps/datahub/src/app/search/search-header/search-header.component.html

@@ -0,0 +1,6 @@
+<div class="bg-beige">
+  <div class="pt-[68px] container mx-auto">
+    <h1 class="flex mel-page-title" translate="">mel.datahub.search.title</h1>
+    <div class="h-32"></div>
+  </div>
+</div>

apps/datahub/src/app/search/search-header/search-header.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterFacade, SearchService } from 'geonetwork-ui';
+import { CatalogRecord } from 'geonetwork-ui/src/libs/common/domain/src/lib/record';
+import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/search';
+
+@Component({
+  selector: 'mel-datahub-search-header',
+  templateUrl: './search-header.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchHeaderComponent {
+  constructor(
+    public routerFacade: RouterFacade,
+    private searchService: SearchService
+  ) {}
+
+  onFuzzySearchSelection(record: CatalogRecord) {
+    this.routerFacade.goToMetadata(record);
+  }
+  clearSearchAndSort(sort: SortByField | string): void {
+    this.searchService.setSortAndFilters({}, sort as SortByField);
+  }
+}

apps/datahub/src/app/search/search-page/search-page.component.html

@@ -1 +1,2 @@
-<p>search-page works!</p>
+<mel-datahub-search-header></mel-datahub-search-header>
+<mel-datahub-search-results></mel-datahub-search-results>

apps/datahub/src/app/search/search-page/search-page.component.ts

@@ -1,10 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'mel-datahub-search-page',
-  standalone: true,
-  imports: [CommonModule],
+  providers: [],
   templateUrl: './search-page.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/datahub/src/app/search/search-results/search-results.component.html

@@ -0,0 +1,12 @@
+<div class="container mx-auto mt-8">
+  <div class="mt-6 rounded-lg text-gray-800 p-4 bg-slate-100">
+    <gn-ui-results-hits></gn-ui-results-hits>
+  </div>
+  <div class="mt-8">
+    <gn-ui-results-list-container
+      showMore="button"
+      [metadataQualityDisplay]="metadataQualityDisplay"
+      (mdSelect)="onMetadataSelection($event)"
+    ></gn-ui-results-list-container>
+  </div>
+</div>

apps/datahub/src/app/search/search-results/search-results.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
+import {
+  MetadataQualityDisplay,
+  RouterFacade,
+  SearchFacade,
+} from 'geonetwork-ui'
+import { CatalogRecord } from 'geonetwork-ui/src/libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'mel-datahub-search-results',
+  templateUrl: './search-results.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchResultsComponent implements OnInit {
+  isQualitySortable = true
+  metadataQualityDisplay = {
+    widget: true,
+    title: true,
+    description: true,
+    contact: true,
+    keywords: true,
+    legalConstraints: true,
+    topic: true,
+    updateFrequency: true,
+    organisation: true,
+  } as MetadataQualityDisplay
+
+  constructor(
+    private searchRouter: RouterFacade,
+    private searchFacade: SearchFacade
+  ) {}
+  ngOnInit() {
+    this.searchFacade.setResultsLayout('CARD')
+  }
+
+  onMetadataSelection(metadata: CatalogRecord): void {
+    this.searchRouter.goToMetadata(metadata)
+  }
+}