Merge pull request #5 from camptocamp/search-states

Set up search states and base components

README.md

@@ -4,16 +4,20 @@
 
 ✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
 
-
 ## Start the app
 
 To start the development server run `nx serve datahub`. Open your browser and navigate to http://localhost:4200/. Happy coding!
 
-
 ## Generate code
 
 If you happen to use Nx plugins, you can leverage code generators that might come with it.
 
+To generate a component from the root dir for instance, run the following command:
+
+```
+npx nx g @nx/angular:component [my-component] --module=app.module --directory=apps/datahub/src/app/[my-component-location]
+```
+
 Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
 
 Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).

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

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
 
 @Component({
-  selector: 'mel-dataplatform-root',
+  selector: 'mel-datahub-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
 export class AppComponent {
-  title = 'datahub';
+  title = 'datahub'
 }

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

@@ -12,6 +12,7 @@ import {
   RouterService,
   ThemeService,
   TRANSLATE_DEFAULT_CONFIG,
+  UiElementsModule,
   UiWidgetsModule,
 } from 'geonetwork-ui'
 import {
@@ -34,6 +35,13 @@ import { AppRouterService } from './app.router.service'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { MatIconModule } from '@angular/material/icon'
 import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
+import { ResultsListComponent } from './common/results-list/results-list.component'
+import { ResultsListItemComponent } from './common/results-list-item/results-list-item.component'
+import { ResultsListCarouselComponent } from './common/results-list/results-list-carousel/results-list-carousel.component'
+import { ResultsListGridComponent } from './common/results-list/results-list-grid/results-list-grid.component'
+import { ResultsCardFavoriteComponent } from './common/results-list-item/results-card-favorite/results-card-favorite.component'
+import { ResultsCardLastCreatedComponent } from './common/results-list-item/results-card-last-created/results-card-last-created.component'
+import { ResultsCardSearchComponent } from './common/results-list-item/results-card-search/results-card-search.component'
 
 @NgModule({
   declarations: [
@@ -44,11 +52,19 @@ import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
     HeaderComponent,
     HomePageComponent,
     HomeHeaderComponent,
+    ResultsListComponent,
+    ResultsListCarouselComponent,
+    ResultsListGridComponent,
+    ResultsListItemComponent,
+    ResultsCardFavoriteComponent,
+    ResultsCardLastCreatedComponent,
+    ResultsCardSearchComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     UiWidgetsModule,
+    UiElementsModule,
     FeatureSearchModule,
     FeatureCatalogModule,
     MatIconModule,

apps/datahub/src/app/common/embedded.translate.loader.ts

@@ -7,7 +7,7 @@ import fr from 'node_modules/geonetwork-ui/translations/fr.json'
 import { dropEmptyTranslations } from 'geonetwork-ui'
 
 export class MelEmbeddedTranslateLoader implements TranslateLoader {
-  getTranslation(lang: string): Observable<any> {
+  getTranslation(lang: string): Observable<Record<string, string>> {
     const langs = { en: { ...en, ...en_MEL }, fr: { ...fr, ...fr_MEL } }
     const translations = langs[lang.substring(0, 2)]
     return of(translations).pipe(map(dropEmptyTranslations))

apps/datahub/src/app/common/results-list-item/results-card-favorite/results-card-favorite.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-green-200 rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-favorite/results-card-favorite.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-favorite',
+  templateUrl: './results-card-favorite.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsCardFavoriteComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-blue-200 rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-last-created',
+  templateUrl: './results-card-last-created.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsCardLastCreatedComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-search/results-card-search.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-search',
+  templateUrl: './results-card-search.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsCardSearchComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-list-item.component.ts

@@ -0,0 +1,11 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'mel-datahub-results-list-item',
+  template: '',
+})
+export class ResultsListItemComponent {
+  @Input() record: CatalogRecord
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+}

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html

@@ -0,0 +1,18 @@
+<div class="relative">
+  <div class="flex gap-4 p-4">
+    @for (record of searchFacade.results$ | async; track
+    record.uniqueIdentifier) { @if (favoritesOnly) {
+    <mel-datahub-results-card-favorite
+      [style]="'height: 12em;'"
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-favorite>
+    } @else {
+    <mel-datahub-results-card-last-created
+      [style]="'height: 12em;'"
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-last-created>
+    } }
+  </div>
+</div>

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ResultsListComponent } from '../results-list.component'
+
+@Component({
+  selector: 'mel-datahub-results-list-carousel',
+  templateUrl: './results-list-carousel.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsListCarouselComponent extends ResultsListComponent {}

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html

@@ -0,0 +1,12 @@
+<div class="relative">
+  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+    @for (record of searchFacade.results$ | async; track
+    record.uniqueIdentifier) {
+    <mel-datahub-results-card-search
+      [style]="'height: 24em;'"
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-search>
+    }
+  </div>
+</div>

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ResultsListComponent } from '../results-list.component'
+
+@Component({
+  selector: 'mel-datahub-results-list-grid',
+  templateUrl: './results-list-grid.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsListGridComponent extends ResultsListComponent {}

apps/datahub/src/app/common/results-list/results-list.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Store } from '@ngrx/store'
+import {
+  FIELDS_BRIEF,
+  RouterFacade,
+  SearchFacade,
+  SearchState,
+} from 'geonetwork-ui'
+import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'mel-datahub-results-list',
+  template: '',
+})
+export class ResultsListComponent implements OnInit {
+  @Input() favoritesOnly = false
+  @Input() numberOfResults = 10
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    private routerFacade: RouterFacade,
+    private store: Store<SearchState>
+  ) {}
+
+  ngOnInit() {
+    if (this.favoritesOnly) this.searchFacade.setFavoritesOnly(true)
+    this.searchFacade
+      .setConfigRequestFields([...FIELDS_BRIEF, 'createDate', 'changeDate'])
+      .setPageSize(this.numberOfResults)
+      .setSortBy(['desc', 'createDate'])
+  }
+
+  onMetadataSelection(metadata: CatalogRecord): void {
+    this.routerFacade.goToMetadata(metadata)
+  }
+}

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

@@ -10,6 +10,10 @@ <h1 class="flex justify-center mel-page-title" translate="">
         [autoFocus]="true"
       ></gn-ui-fuzzy-search>
     </div>
-    <div class="h-32"></div>
+    <div class="h-64" gnUiSearchStateContainer="headerHome">
+      <mel-datahub-results-list-carousel
+        [numberOfResults]="6"
+      ></mel-datahub-results-list-carousel>
+    </div>
   </div>
 </div>

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

@@ -1,6 +1,11 @@
 <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 class="h-64" gnUiSearchStateContainer="headerSearch">
+      <mel-datahub-results-list-carousel
+        [numberOfResults]="10"
+        [favoritesOnly]="true"
+      ></mel-datahub-results-list-carousel>
+    </div>
   </div>
 </div>

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

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

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

@@ -3,10 +3,8 @@
     <gn-ui-results-hits></gn-ui-results-hits>
   </div>
   <div class="mt-8">
-    <gn-ui-results-list-container
-      showMore="button"
-      [metadataQualityDisplay]="true"
-      (mdSelect)="onMetadataSelection($event)"
-    ></gn-ui-results-list-container>
+    <mel-datahub-results-list-grid
+      [numberOfResults]="18"
+    ></mel-datahub-results-list-grid>
   </div>
 </div>

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

@@ -1,25 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
-import { RouterFacade, SearchFacade } from 'geonetwork-ui'
-import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 
 @Component({
   selector: 'mel-datahub-search-results',
   templateUrl: './search-results.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchResultsComponent implements OnInit {
-  isQualitySortable = true
-
-  constructor(
-    private searchRouter: RouterFacade,
-    private searchFacade: SearchFacade
-  ) {}
-  ngOnInit() {
-    this.searchFacade.setResultsLayout('CARD')
-  }
-
-  onMetadataSelection(metadata: CatalogRecord): void {
-    this.searchRouter.goToMetadata(metadata)
-  }
-}
+export class SearchResultsComponent {}

apps/datahub/src/index.html

@@ -17,6 +17,6 @@
     />
   </head>
   <body>
-    <mel-dataplatform-root></mel-dataplatform-root>
+    <mel-datahub-root></mel-datahub-root>
   </body>
 </html>