Merge pull request geonetwork#765 from geonetwork/DH/redesign-header

[Datahub] [Resdesign] Header section
IGNF · Jan 22, 2024 · 9ae0a68 · 9ae0a68
2 parents 886aae6 + b1d76bb
commit 9ae0a68
Show file tree

Hide file tree

Showing 20 changed files with 173 additions and 64 deletions.
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -73,6 +73,15 @@ describe('dataset pages', () => {
           .children('header')
           .find('gn-ui-navigation-button')
       })
+      it('should display the data type, last update and status', () => {
+        cy.visit('/dataset/01491630-78ce-49f3-b479-4b30dabc4c69')
+        cy.get('datahub-header-record')
+          .children('header')
+          .find('.font-title')
+          .next()
+          .as('infoBar')
+        cy.get('@infoBar').children('div').should('have.length', 3)
+      })
       it('should return to the dataset list', () => {
         cy.get('datahub-header-record')
           .children('header')
@@ -81,22 +90,6 @@ describe('dataset pages', () => {
         cy.url().should('include', '/search')
       })
     })
-    describe('navigation bar', () => {
-      it('should display the navigation  bar with 4 sections', () => {
-        cy.get('datahub-navigation-bar')
-          .find('button')
-          .filter(':visible')
-          .should('have.length', 4)
-      })
-      it('should scroll down/up to the clicked section', () => {
-        cy.get('datahub-navigation-bar')
-          .find('button')
-          .filter(':visible')
-          .as('navBtns')
-        cy.get('@navBtns').eq(3).click()
-        cy.get('datahub-record-otherlinks').should('be.visible')
-      })
-    })
   })
 
   describe('ABOUT SECTION : display & functions', () => {

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -1,36 +1,62 @@
-<header class="w-full h-[231px]" [style.background]="backgroundCss">
+<header class="w-full h-[255px]" [style.background]="backgroundCss">
   <div
-    class="h-full container-lg mx-auto flex flex-col justify-center relative"
+    class="h-full container-lg mx-auto flex flex-col justify-between relative"
   >
-    <gn-ui-favorite-star
-      *ngIf="metadata?.uniqueIdentifier"
-      [record]="metadata"
-      class="absolute text-background top-[0.85em] right-[0.85em]"
-      [style.color]="foregroundColor"
-      [style.--star-toggle-enabled-color]="'var(--color-primary)'"
-      [style.--star-toggle-disabled-color]="foregroundColor"
-    ></gn-ui-favorite-star>
+    <div class="flex flex-row justify-between content-center mt-3">
+      <div class="ml-4">
+        <gn-ui-navigation-button
+          (click)="back()"
+          [label]="'datahub.search.back' | translate"
+          [icon]="'arrow_back'"
+        >
+        </gn-ui-navigation-button>
+      </div>
+      <div class="flex flex-row mr-6 content-center gap-3">
+        <gn-ui-favorite-star
+          *ngIf="metadata?.uniqueIdentifier"
+          [record]="metadata"
+          [displayCount]="false"
+          class="flex text-background content-center"
+          [style.color]="foregroundColor"
+          [style.--star-toggle-enabled-color]="foregroundColor"
+          [style.--star-toggle-disabled-color]="foregroundColor"
+        ></gn-ui-favorite-star>
+        <gn-ui-language-switcher
+          *ngIf="showLanguageSwitcher"
+          class="language-switcher text-[13px] text-white bg-opacity-0 border border-white rounded mt-0.5"
+        ></gn-ui-language-switcher>
+      </div>
+    </div>
     <div
       *ngIf="metadata"
-      class="font-title text-center px-2 text-[28px] mb-[41px] line-clamp-4 sm:mx-48"
+      class="font-title text-[28px] max-w-screen-sm line-clamp-4 ml-4"
       [style.color]="foregroundColor"
     >
       {{ metadata.title }}
     </div>
-
-    <div class="absolute" style="left: 16px; top: 16px">
-      <gn-ui-navigation-button
-        (click)="back()"
-        [label]="'datahub.search.back' | translate"
-        [icon]="'navigate_before'"
+    <div class="flex flex-row text-white gap-2 mb-4 ml-4">
+      <div
+        *ngIf="(isGeodata$ | async) === true"
+        class="flex flex-row bg-primary-darker rounded"
       >
-      </gn-ui-navigation-button>
+        <span class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
+          my_location
+        </span>
+        <p class="text-white ml-2 mr-2" translate>record.metadata.type</p>
+      </div>
+      <div *ngIf="metadata.recordUpdated" class="flex flex-row gap-1">
+        <p class="text-white" translate>record.metadata.lastUpdate</p>
+        <p class="text-white">
+          {{ lastUpdate }}
+        </p>
+      </div>
+      <div *ngIf="metadata.status" class="flex flex-row gap-2">
+        <p>•</p>
+        <p
+          class="text-white"
+          [innerHTML]="'domain.record.status.' + metadata.status | translate"
+        ></p>
+      </div>
     </div>
   </div>
 </header>
-
-<div
-  class="container-lg mt-[-40px] z-20 sticky lg:mx-auto inset-x-0 top-[10px]"
->
-  <datahub-navigation-bar></datahub-navigation-bar>
-</div>
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.spec.ts b/apps/datahub/src/app/record/header-record/header-record.component.spec.ts
@@ -1,7 +1,10 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 import { SearchService } from '@geonetwork-ui/feature/search'
 import { TranslateModule } from '@ngx-translate/core'
+import { BehaviorSubject } from 'rxjs'
 
 import { HeaderRecordComponent } from './header-record.component'
 
@@ -10,11 +13,22 @@ jest.mock('@geonetwork-ui/util/app-config', () => ({
     HEADER_BACKGROUND: 'red',
     HEADER_FOREGROUND_COLOR: 'white',
   }),
+  getGlobalConfig() {
+    return {
+      LANGUAGES: ['en', 'es'],
+    }
+  },
 }))
 
 const searchServiceMock = {
   updateFilters: jest.fn(),
 }
+
+class MdViewFacadeMock {
+  mapApiLinks$ = new BehaviorSubject([])
+  geoDataLinks$ = new BehaviorSubject([])
+}
+
 describe('HeaderRecordComponent', () => {
   let component: HeaderRecordComponent
   let fixture: ComponentFixture<HeaderRecordComponent>
@@ -24,13 +38,22 @@ describe('HeaderRecordComponent', () => {
       declarations: [HeaderRecordComponent],
       imports: [TranslateModule.forRoot()],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [{ provide: SearchService, useValue: searchServiceMock }],
+      providers: [
+        { provide: SearchService, useValue: searchServiceMock },
+        {
+          provide: MdViewFacade,
+          useClass: MdViewFacadeMock,
+        },
+      ],
     }).compileComponents()
   })
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderRecordComponent)
     component = fixture.componentInstance
+    component.metadata = {
+      ...DATASET_RECORDS[0],
+    }
     fixture.detectChanges()
   })
 

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.ts b/apps/datahub/src/app/record/header-record/header-record.component.ts
@@ -1,7 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { SearchService } from '@geonetwork-ui/feature/search'
-import { getThemeConfig } from '@geonetwork-ui/util/app-config'
-import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
+import { getGlobalConfig, getThemeConfig } from '@geonetwork-ui/util/app-config'
+import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import { combineLatest, map } from 'rxjs'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'datahub-header-record',
@@ -10,13 +13,34 @@ import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderRecordComponent {
-  @Input() metadata: CatalogRecord
+  @Input() metadata: DatasetRecord
   backgroundCss =
     getThemeConfig().HEADER_BACKGROUND ||
     `center /cover url('assets/img/header_bg.webp')`
   foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
+  showLanguageSwitcher = getGlobalConfig().LANGUAGES?.length > 0
 
-  constructor(private searchService: SearchService) {}
+  constructor(
+    private searchService: SearchService,
+    public facade: MdViewFacade,
+    private translateService: TranslateService
+  ) {}
+
+  isGeodata$ = combineLatest([
+    this.facade.mapApiLinks$,
+    this.facade.geoDataLinks$,
+  ]).pipe(
+    map(
+      ([mapLinks, geoDataLinks]) =>
+        mapLinks?.length > 0 || geoDataLinks?.length > 0
+    )
+  )
+
+  get lastUpdate() {
+    return this.metadata.recordUpdated.toLocaleDateString(
+      this.translateService.currentLang
+    )
+  }
 
   back() {
     this.searchService.updateFilters({})

diff --git a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html
@@ -1,10 +1,18 @@
-<div>
-  <span class="align-text-top mr-1.5 favorite-count" *ngIf="hasFavoriteCount">{{
-    favoriteCount
-  }}</span>
+<div class="flex flex-row content-center">
+  <span
+    class="align-text-top mr-1.5 mt-1.5 favorite-count"
+    *ngIf="hasFavoriteCount && displayCount"
+    >{{ favoriteCount }}</span
+  >
   <gn-ui-star-toggle
     [toggled]="isFavorite$ | async"
     (newValue)="toggleFavorite($event)"
     [disabled]="loading || (isAnonymous$ | async)"
+    class="mt-1"
   ></gn-ui-star-toggle>
+  <span
+    class="align-text-top ml-1.5 favorite-count mt-1.5"
+    *ngIf="!displayCount"
+    translate="datahub.record.addToFavorites"
+  ></span>
 </div>
diff --git a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts
@@ -66,6 +66,7 @@ describe('FavoriteStarComponent', () => {
     favoritesService = TestBed.inject(FavoritesService)
     fixture = TestBed.createComponent(FavoriteStarComponent)
     component = fixture.componentInstance
+    component.displayCount = 'true'
     fixture.detectChanges()
     starToggle = fixture.debugElement.query(
       By.directive(StarToggleComponent)

diff --git a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts
@@ -24,6 +24,7 @@ import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
+  @Input() displayCount? = true
   @Input() set record(value) {
     this.record_ = value
     this.favoriteCount =

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html
@@ -5,5 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
+  [extraBtnClass]="'flex justify-items-center text-white !pl-2 !py-1'"
 >
 </gn-ui-dropdown-selector>
diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts
@@ -34,7 +34,7 @@ export class LanguageSwitcherComponent implements OnInit {
   ngOnInit(): void {
     const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
     this.languageList = languages.map((language) => ({
-      label: `language.${language}`,
+      label: `${language}`.toUpperCase(),
       value: language,
     }))
   }

diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
@@ -1,6 +1,11 @@
 <button
-  class="group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded"
+  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
-  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
+    icon
+  }}</mat-icon>
+  <span
+    class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
+    >{{ label.toUpperCase() }}</span
+  >
 </button>
diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.spec.ts b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.spec.ts
@@ -17,6 +17,8 @@ describe('NavigationButtonComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NavigationButtonComponent)
     component = fixture.componentInstance
+    component.icon = 'navigate_before'
+    component.label = 'Retours aux résultats'
     fixture.detectChanges()
   })
 

diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css
@@ -11,6 +11,7 @@ mat-icon {
   font-size: 1.5em;
   margin-top: -0.1em;
   font-variation-settings: 'opsz' 40;
+  stroke: var(--color-primary-darker);
 }
 
 .star-filled {

diff --git a/translations/de.json b/translations/de.json
@@ -115,6 +115,7 @@
   "datahub.news.contact.title": "",
   "datahub.news.feed": "Nachrichtenfeed",
   "datahub.news.figures": "Indikatoren",
+  "datahub.record.addToFavorites": "",
   "datahub.search.back": "Zurück zu den Ergebnissen",
   "datahub.search.filter.all": "Alle",
   "datahub.search.filter.generatedByWfs": "Generiert durch API",
@@ -222,6 +223,7 @@
   "record.metadata.formats": "",
   "record.metadata.isOpenData": "Open Data",
   "record.metadata.keywords": "Stichworte",
+  "record.metadata.lastUpdate": "",
   "record.metadata.links": "Links",
   "record.metadata.noUsage": "Für diesen Datensatz sind keine Verwendungsbedingungen angegeben.",
   "record.metadata.origin": "Über die Daten",
@@ -248,6 +250,7 @@
   "record.metadata.related": "Ähnliche Datensätze",
   "record.metadata.sheet": "Weitere Informationen erhalten Sie unter :",
   "record.metadata.title": "Titel",
+  "record.metadata.type": "",
   "record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
   "record.metadata.updateStatus": "Aktualisierungsstatus der Daten",
   "record.metadata.updatedOn": "Letzte Aktualisierung der Dateninformationen",

diff --git a/translations/en.json b/translations/en.json
@@ -115,7 +115,8 @@
   "datahub.news.contact.title": "A specific need?",
   "datahub.news.feed": "News feed",
   "datahub.news.figures": "Indicators",
-  "datahub.search.back": "Back to results",
+  "datahub.record.addToFavorites": "Add to favorites",
+  "datahub.search.back": "Back",
   "datahub.search.filter.all": "All",
   "datahub.search.filter.generatedByWfs": "generated by an API",
   "datahub.search.filter.others": "Others",
@@ -222,6 +223,7 @@
   "record.metadata.formats": "Formats",
   "record.metadata.isOpenData": "Open Data",
   "record.metadata.keywords": "Keywords",
+  "record.metadata.lastUpdate": "Last updated on",
   "record.metadata.links": "Links",
   "record.metadata.noUsage": "No usage conditions specified for this record.",
   "record.metadata.origin": "About the data",
@@ -248,6 +250,7 @@
   "record.metadata.related": "Related records",
   "record.metadata.sheet": "More information available from:",
   "record.metadata.title": "Title",
+  "record.metadata.type": "Geographical dataset",
   "record.metadata.updateFrequency": "Data Update Frequency",
   "record.metadata.updateStatus": "Data Update Status",
   "record.metadata.updatedOn": "Last Data Information Update",

diff --git a/translations/es.json b/translations/es.json
@@ -115,6 +115,7 @@
   "datahub.news.contact.title": "",
   "datahub.news.feed": "",
   "datahub.news.figures": "",
+  "datahub.record.addToFavorites": "",
   "datahub.search.back": "",
   "datahub.search.filter.all": "",
   "datahub.search.filter.generatedByWfs": "",
@@ -222,6 +223,7 @@
   "record.metadata.formats": "",
   "record.metadata.isOpenData": "",
   "record.metadata.keywords": "",
+  "record.metadata.lastUpdate": "",
   "record.metadata.links": "",
   "record.metadata.noUsage": "",
   "record.metadata.origin": "",
@@ -248,6 +250,7 @@
   "record.metadata.related": "",
   "record.metadata.sheet": "",
   "record.metadata.title": "",
+  "record.metadata.type": "",
   "record.metadata.updateFrequency": "",
   "record.metadata.updateStatus": "",
   "record.metadata.updatedOn": "",