Merge pull request #9 from camptocamp/dataset-smart

Set up dataset page
camptocamp · Feb 1, 2024 · 9b63169 · 9b63169
2 parents 44e96a1 + d020e7b
commit 9b63169
Show file tree

Hide file tree

Showing 9 changed files with 462 additions and 420 deletions.
diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts
@@ -6,13 +6,15 @@ import {
   DefaultRouterModule,
   FeatureAuthModule,
   FeatureCatalogModule,
+  FeatureRecordModule,
   FeatureSearchModule,
   provideGn4,
   provideRepositoryUrl,
   RouterService,
   ThemeService,
   TRANSLATE_DEFAULT_CONFIG,
   UiElementsModule,
+  UiLayoutModule,
   UiWidgetsModule,
 } from 'geonetwork-ui'
 import {
@@ -22,7 +24,6 @@ import {
 } 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'
@@ -42,6 +43,8 @@ import { ResultsListGridComponent } from './common/results-list/results-list-gri
 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'
+import { MatTabsModule } from '@angular/material/tabs'
+import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.component'
 
 @NgModule({
   declarations: [
@@ -59,19 +62,20 @@ import { ResultsCardSearchComponent } from './common/results-list-item/results-c
     ResultsCardFavoriteComponent,
     ResultsCardLastCreatedComponent,
     ResultsCardSearchComponent,
+    DatasetPageComponent,
+    DatasetApisComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     UiWidgetsModule,
     UiElementsModule,
+    UiLayoutModule,
     FeatureSearchModule,
     FeatureCatalogModule,
+    FeatureRecordModule,
     MatIconModule,
-    RouterModule.forRoot([], {
-      initialNavigation: 'enabledBlocking',
-      scrollPositionRestoration: 'enabled',
-    }),
+    MatTabsModule,
     TranslateModule.forRoot({
       ...TRANSLATE_DEFAULT_CONFIG,
       loader: {
@@ -84,14 +88,17 @@ import { ResultsCardSearchComponent } from './common/results-list-item/results-c
       {
         metaReducers: [],
         runtimeChecks: {
-          strictActionImmutability: true,
-          strictStateImmutability: true,
+          strictActionImmutability: false,
+          strictStateImmutability: false,
         },
       }
     ),
     EffectsModule.forRoot([]),
-    StoreRouterConnectingModule.forRoot(),
     StoreDevtoolsModule.instrument({ logOnly: !isDevMode() }),
+    RouterModule.forRoot([], {
+      initialNavigation: 'enabledBlocking',
+      scrollPositionRestoration: 'enabled',
+    }),
     DefaultRouterModule.forRoot({
       searchStateId: 'mainSearch',
       searchRouteComponent: SearchPageComponent,

diff --git a/apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.html b/apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.html
@@ -0,0 +1,63 @@
+<div class="container-lg px-4 lg:mx-auto">
+  <p
+    class="font-title text-[28px] font-medium mt-8 mb-5 text-title text-center sm:mt-12 sm:mb-[-22px] sm:text-left"
+    translate
+  >
+    mel.record.metadata.api
+  </p>
+  <gn-ui-carousel
+    containerClass="gap-4 py-10"
+    stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto"
+  >
+    <gn-ui-api-card
+      *ngFor="let link of apiLinks$ | async; let first = first; let last = last"
+      [title]="link.name"
+      [link]="link"
+      [currentLink]="selectedApiLink"
+      class="w-80"
+      [ngClass]="{
+        'mr-[var(--container-outside-width)]': last,
+        'ml-[var(--container-outside-width)]': first,
+        'card-shadow': link !== selectedApiLink || !selectedApiLink,
+        'bg-neutral-100': link === selectedApiLink
+      }"
+      (openRecordApiForm)="openRecordApiForm($event)"
+    >
+    </gn-ui-api-card>
+  </gn-ui-carousel>
+</div>
+<div
+  class="content overflow-hidden transition-all duration-300"
+  [ngClass]="selectedApiLink ? 'ease-in' : 'ease-out'"
+  [style.maxHeight]="maxHeight"
+  [style.opacity]="opacity"
+>
+  <div class="bg-primary-opacity-10 py-8">
+    <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto">
+      <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted">
+        <p class="text-[21px] text-title font-title" translate>
+          mel.record.metadata.api.form.title
+        </p>
+        <button
+          type="button"
+          class="flex items-center gap-0.5 text-primary group"
+          (click)="closeRecordApiForm()"
+        >
+          <div
+            class="text-sm font-medium opacity-50 group-hover:opacity-100 uppercase tracking-wide mt-0.5"
+            translate
+          >
+            mel.record.metadata.api.form.closeButton
+          </div>
+          <mat-icon
+            class="!w-5 !h-5 text-xl font-bold material-symbols-outlined !flex items-center"
+            >close</mat-icon
+          >
+        </button>
+      </div>
+      <gn-ui-record-api-form
+        [apiLink]="selectedApiLink"
+      ></gn-ui-record-api-form>
+    </div>
+  </div>
+</div>
diff --git a/apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.ts b/apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.ts
@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'
+import { MdViewFacade } from 'geonetwork-ui'
+import { DatasetServiceDistribution } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+import { Observable } from 'rxjs'
+
+@Component({
+  selector: 'mel-datahub-dataset-apis',
+  templateUrl: './dataset-apis.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatasetApisComponent implements OnInit {
+  maxHeight = '0px'
+  opacity = 0
+  selectedApiLink: DatasetServiceDistribution
+  apiLinks$ = this.facade.apiLinks$ as Observable<DatasetServiceDistribution[]>
+  constructor(public facade: MdViewFacade) {}
+
+  ngOnInit(): void {
+    this.setStyle(undefined)
+    this.selectedApiLink = undefined
+  }
+
+  openRecordApiForm(link: DatasetServiceDistribution) {
+    this.selectedApiLink = link
+    this.setStyle(link)
+  }
+
+  closeRecordApiForm() {
+    this.selectedApiLink = undefined
+    this.setStyle(undefined)
+  }
+
+  setStyle(link: DatasetServiceDistribution) {
+    this.maxHeight = link === undefined ? '0px' : '500px'
+    this.opacity = link === undefined ? 0 : 1
+  }
+}
diff --git a/apps/datahub/src/app/dataset/dataset-page/dataset-page.component.html b/apps/datahub/src/app/dataset/dataset-page/dataset-page.component.html
@@ -1 +1,137 @@
-<p>dataset-page works!</p>
+@if ((facade.error$ | async) === null) {
+<div class="container-lg px-4 mb-9 mt-8 sm:mb-16 sm:mt-10 lg:mx-auto">
+  @if ((facade.isPresent$ | async) === true) {
+  <div class="grid gap-8 grid-cols-1 sm:gap-6 sm:grid-cols-3">
+    <!-- TODO: create corresponding UI component -->
+    <div class="sm:col-span-2">
+      <div class="sm:block mb-4">{{ (facade.metadata$ | async).title }}</div>
+      <div class="sm:block">{{ (facade.metadata$ | async).abstract }}</div>
+    </div>
+    <!-- TODO: create corresponding UI component -->
+    <div>
+      <div translate="">mel.dataset.informations</div>
+      <div>{{ (facade.metadata$ | async).recordUpdated }}</div>
+      <div>{{ (facade.metadata$ | async).keywords }}</div>
+      <div>{{ (facade.metadata$ | async).themes }}</div>
+      <div>{{ (facade.metadata$ | async).licenses }}</div>
+      <div>{{ (facade.metadata$ | async).ownerOrganization?.name }}</div>
+    </div>
+  </div>
+  }
+</div>
+@if ((displayMap$ | async) || (displayData$ | async)) {
+<!-- TODO: try to adapt tab layout to fit MEL -->
+<div style="height: 612px">
+  <div class="pt-8 overflow-visible sm:pt-5" style="height: 512px">
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div
+          class="text-[28px] text-title font-title transform sm:translate-y-10"
+          translate
+        >
+          mel.record.metadata.preview
+        </div>
+        <mat-tab-group
+          (selectedIndexChange)="onTabIndexChange($event)"
+          [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+          animationDuration="200ms"
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+        >
+          <mat-tab [disabled]="(displayMap$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label sm:ml-32" translate
+                >mel.record.tab.map</span
+              >
+            </ng-template>
+            @if(displayMap$ | async) {
+            <div class="block" style="height: 500px">
+              <gn-ui-map-view></gn-ui-map-view>
+            </div>
+            }
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate
+                >mel.record.tab.data</span
+              >
+            </ng-template>
+            @if(displayData$ | async) {
+            <div class="block">
+              <gn-ui-data-view mode="table"></gn-ui-data-view>
+            </div>
+            }
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate
+                >mel.record.tab.chart</span
+              >
+            </ng-template>
+            @if(displayData$ | async) {
+            <div class="block">
+              <gn-ui-data-view mode="chart"></gn-ui-data-view>
+            </div>
+            }
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </div>
+  </div>
+</div>
+} @if((selectedTabIndex$ | async) === 2) {
+<!-- TODO: create corresponding UI component or provide GN_UI_VERSION-->
+<gn-ui-data-view-share></gn-ui-data-view-share>
+}
+<div class="lg:mx-auto">
+  @if(displayApi$ | async) {
+  <div class="block mt-6">
+    <!-- TODO: create corresponding components, uses GN-UI components for now -->
+    <mel-datahub-dataset-apis></mel-datahub-dataset-apis>
+  </div>
+  }
+</div>
+@if(displayRelated$ | async) {
+<!-- TODO: create corresponding UI component-->
+<div>
+  <div>
+    <div class="h-48 overflow-visible">
+      <div class="container-lg px-4 lg:mx-auto">
+        <div>
+          <p
+            class="font-title text-[28px] text-title font-medium mt-6 sm:mt-10 mb-4 text-center sm:text-left"
+            translate
+          >
+            mel.record.metadata.related
+          </p>
+          <div
+            class="mb-4 flex flex-wrap gap-6 justify-center sm:justify-start"
+          >
+            <gn-ui-related-record-card
+              *ngFor="let record of facade.related$ | async"
+              [record]="record"
+            >
+            </gn-ui-related-record-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-primary">
+    <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
+  </div>
+</div>
+} } @else {
+<div class="mt-12 p-4 max-w-[600px] m-auto text-[13px]">
+  @if((facade.error$ | async).notFound) {
+  <gn-ui-search-results-error
+    [type]="errorTypes.RECORD_NOT_FOUND"
+    [recordId]="(facade.metadata$ | async).uniqueIdentifier"
+  ></gn-ui-search-results-error>
+  } @else if((facade.error$ | async).otherError) {}
+  <gn-ui-search-results-error
+    [type]="errorTypes.RECEIVED_ERROR"
+    [error]="(facade.error$ | async).otherError"
+  ></gn-ui-search-results-error>
+</div>
+}
diff --git a/apps/datahub/src/app/dataset/dataset-page/dataset-page.component.ts b/apps/datahub/src/app/dataset/dataset-page/dataset-page.component.ts
@@ -1,12 +1,46 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { ErrorType, MdViewFacade } from 'geonetwork-ui'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 
 @Component({
   selector: 'mel-datahub-dataset-page',
-  standalone: true,
-  imports: [CommonModule],
   templateUrl: './dataset-page.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatasetPageComponent {}
+export class DatasetPageComponent {
+  displayMap$ = combineLatest([
+    this.facade.mapApiLinks$,
+    this.facade.geoDataLinks$,
+  ]).pipe(
+    map(
+      ([mapLinks, geoDataLinks]) =>
+        mapLinks?.length > 0 || geoDataLinks?.length > 0
+    )
+  )
+  displayData$ = combineLatest([
+    this.facade.dataLinks$,
+    this.facade.geoDataLinks$,
+  ]).pipe(
+    map(
+      ([dataLinks, geoDataLinks]) =>
+        dataLinks?.length > 0 || geoDataLinks?.length > 0
+    )
+  )
+  displayApi$ = this.facade.apiLinks$.pipe(map((links) => links?.length > 0))
+  displayRelated$ = this.facade.related$.pipe(
+    map((records) => records?.length > 0)
+  )
+  errorTypes = ErrorType
+  selectedTabIndex$ = new BehaviorSubject(0)
+
+  constructor(public facade: MdViewFacade, private route: ActivatedRoute) {}
+
+  onTabIndexChange(index: number): void {
+    this.selectedTabIndex$.next(index)
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 0)
+  }
+}
diff --git a/apps/datahub/src/assets/i18n/en_MEL.json b/apps/datahub/src/assets/i18n/en_MEL.json
@@ -1,5 +1,14 @@
 {
   "mel.common.header.title": "",
   "mel.datahub.home.title": "",
-  "mel.datahub.search.title": ""
+  "mel.datahub.search.title": "",
+  "mel.dataset.informations": "",
+  "mel.record.metadata.api": "",
+  "mel.record.metadata.api.form.closeButton": "",
+  "mel.record.metadata.api.form.title": "",
+  "mel.record.metadata.preview": "",
+  "mel.record.metadata.related": "",
+  "mel.record.tab.chart": "",
+  "mel.record.tab.data": "",
+  "mel.record.tab.map": ""
 }