Merge pull request #649 from geonetwork/add-carrousel-component

Datahub / show links and APIs as a carousel

apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts

@@ -93,15 +93,15 @@ describe('dataset pages', () => {
           .filter(':visible')
           .as('navBtns')
         cy.get('@navBtns').eq(3).click()
-        cy.get('gn-ui-data-otherlinks').should('be.visible')
+        cy.get('datahub-record-otherlinks').should('be.visible')
       })
     })
   })
 
   describe('ABOUT SECTION : display & functions', () => {
     describe('display', () => {
       it('should display the description', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
           .find('gn-ui-content-ghost')
@@ -112,25 +112,25 @@ describe('dataset pages', () => {
           })
       })
       it('should display the contact details', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-contact')
           .should('have.length', 1)
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-contact')
           .children('div')
           .children('a')
           .eq(0)
           .invoke('text')
           .should('include', '@')
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-catalog')
           .should('have.length', 1)
       })
       it('should display the catalog details', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-catalog')
           .children('div')
@@ -142,7 +142,7 @@ describe('dataset pages', () => {
           })
       })
       it('should display the keywords', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
           .children('div')
@@ -151,7 +151,7 @@ describe('dataset pages', () => {
           .should('have.length.gt', 0)
       })
       it('should display the lineage and usage tabs', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
           .find('gn-ui-expandable-panel')
@@ -161,7 +161,7 @@ describe('dataset pages', () => {
       let targetLink
       let keyword
       it('should go to provider website on click', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-contact')
           .children('div')
@@ -178,7 +178,7 @@ describe('dataset pages', () => {
           })
       })
       it('should go to dataset search page when clicking on org name and filter by org', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-contact')
           .children('div')
@@ -189,7 +189,7 @@ describe('dataset pages', () => {
         cy.url().should('include', '/search?publisher=')
       })
       it('should go to dataset search page when clicking on keyword and filter by keyword', () => {
-        cy.get('gn-ui-record-metadata')
+        cy.get('datahub-record-metadata')
           .find('[id="about"]')
           .find('gn-ui-metadata-info')
           .children('div')
@@ -214,7 +214,7 @@ describe('dataset pages', () => {
 
   describe('PREVIEW SECTION : display & functions', () => {
     beforeEach(() => {
-      cy.get('gn-ui-record-metadata')
+      cy.get('datahub-record-metadata')
         .find('[id="preview"]')
         .first()
         .as('previewSection')
@@ -323,14 +323,14 @@ describe('dataset pages', () => {
   describe('DOWNLOADS : display & functions', () => {
     describe('display', () => {
       it('should have at least one download button', () => {
-        cy.get('gn-ui-data-downloads')
+        cy.get('datahub-record-downloads')
           .find('gn-ui-download-item')
           .should('have.length.gt', 0)
       })
       it('should have one button per download type + all and others', () => {
         cy.get('[data-cy="download-format"]').then((format) => {
           const formatString = format.text()
-          cy.get('gn-ui-data-downloads')
+          cy.get('datahub-record-downloads')
             .find('gn-ui-button')
             .children('button')
             .then((btn) => {
@@ -356,7 +356,7 @@ describe('dataset pages', () => {
       })
       describe('features', () => {
         it('filters the download list on format filter click', () => {
-          cy.get('gn-ui-data-downloads')
+          cy.get('datahub-record-downloads')
             .find('gn-ui-button')
             .children('button')
             .eq(1)
@@ -373,7 +373,7 @@ describe('dataset pages', () => {
           })
         })
         it('downloads a file on click', () => {
-          cy.get('gn-ui-data-downloads')
+          cy.get('datahub-record-downloads')
             .find('gn-ui-download-item')
             .first()
             .click()
@@ -391,21 +391,21 @@ describe('dataset pages', () => {
   describe('LINKS : display & functions', () => {
     describe('display', () => {
       it('should have external, API and internal links with one option', () => {
-        cy.get('gn-ui-data-otherlinks')
+        cy.get('datahub-record-otherlinks')
           .find('gn-ui-link-card')
           .should('have.length.gt', 0)
-        cy.get('gn-ui-data-apis')
+        cy.get('datahub-record-apis')
           .find('gn-ui-api-card')
           .should('have.length.gt', 0)
         cy.get('#related-records')
-          .find('gn-ui-related-records')
+          .find('datahub-record-related-records')
           .find('gn-ui-related-record-card')
           .should('have.length.gt', 0)
       })
     })
     describe('features', () => {
       it('goes to external link on click', () => {
-        cy.get('gn-ui-data-otherlinks')
+        cy.get('datahub-record-otherlinks')
           .find('gn-ui-link-card')
           .first()
           .children('a')
@@ -420,7 +420,7 @@ describe('dataset pages', () => {
           })
       })
       it('copies the API path on click', () => {
-        cy.get('gn-ui-data-apis')
+        cy.get('datahub-record-apis')
           .find('gn-ui-copy-text-button')
           .find('button')
           .first()
@@ -437,7 +437,7 @@ describe('dataset pages', () => {
       it('goes to dataset on click', () => {
         let targetLink
         cy.get('#related-records')
-          .find('gn-ui-related-records')
+          .find('datahub-record-related-records')
           .find('gn-ui-related-record-card')
           .first()
           .children('a')
@@ -458,7 +458,7 @@ describe('dataset pages', () => {
 describe('record with file distributions', () => {
   beforeEach(() => {
     cy.visit('/dataset/n_tri_lill_inondable_s_059')
-    cy.get('gn-ui-record-metadata')
+    cy.get('datahub-record-metadata')
       .find('[id="preview"]')
       .first()
       .as('previewSection')

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

@@ -70,6 +70,12 @@ import { METADATA_LANGUAGE } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { GN_UI_VERSION } from '@geonetwork-ui/feature/record'
 import { LOGIN_URL } from '@geonetwork-ui/api/repository/gn4'
+import { RecordRelatedRecordsComponent } from './record/record-related-records/record-related-records.component'
+import { RecordMetadataComponent } from './record/record-metadata/record-metadata.component'
+import { RecordOtherlinksComponent } from './record/record-otherlinks/record-otherlinks.component'
+import { RecordDownloadsComponent } from './record/record-downloads/record-downloads.component'
+import { RecordApisComponent } from './record/record-apis/record-apis.component'
+import { MatTabsModule } from '@angular/material/tabs'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -89,6 +95,11 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     LastCreatedComponent,
     KeyFiguresComponent,
     NavigationMenuComponent,
+    RecordRelatedRecordsComponent,
+    RecordMetadataComponent,
+    RecordOtherlinksComponent,
+    RecordDownloadsComponent,
+    RecordApisComponent,
   ],
   imports: [
     BrowserModule,
@@ -128,6 +139,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     FormsModule,
     UiInputsModule,
     UiCatalogModule,
+    MatTabsModule,
   ],
   providers: [
     { provide: RouterService, useClass: DatahubRouterService },

apps/datahub/src/app/record/record-apis/record-apis.component.html

@@ -0,0 +1,25 @@
+<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
+>
+  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 facade.apiLinks$ | async;
+      let first = first;
+      let last = last
+    "
+    [link]="link"
+    class="w-80"
+    [ngClass]="{
+      'mr-[var(--container-outside-width)]': last,
+      'ml-[var(--container-outside-width)]': first
+    }"
+  >
+  </gn-ui-api-card>
+</gn-ui-carousel>

libs/feature/record/src/lib/data-apis/data-apis.component.spec.ts → apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts

@@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Subject } from 'rxjs'
-import { MdViewFacade } from '../state'
-
-import { DataApisComponent } from './data-apis.component'
+import { RecordApisComponent } from './record-apis.component'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 class MdViewFacadeMock {
   apiLinks$ = new Subject()
 }
 
 describe('DataApisComponent', () => {
-  let component: DataApisComponent
-  let fixture: ComponentFixture<DataApisComponent>
+  let component: RecordApisComponent
+  let fixture: ComponentFixture<RecordApisComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DataApisComponent],
+      declarations: [RecordApisComponent],
       providers: [
         {
           provide: MdViewFacade,
@@ -25,7 +24,7 @@ describe('DataApisComponent', () => {
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DataApisComponent)
+    fixture = TestBed.createComponent(RecordApisComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

apps/datahub/src/app/record/record-apis/record-apis.component.ts

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
+
+@Component({
+  selector: 'datahub-record-apis',
+  templateUrl: './record-apis.component.html',
+  styleUrls: ['./record-apis.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordApisComponent {
+  constructor(public facade: MdViewFacade) {}
+}

libs/feature/record/src/lib/data-downloads/data-downloads.component.spec.ts → apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts

@@ -5,12 +5,12 @@ import {
   tick,
 } from '@angular/core/testing'
 import { BehaviorSubject, of, throwError } from 'rxjs'
-import { MdViewFacade } from '../state'
-import { DataDownloadsComponent } from './data-downloads.component'
+import { RecordDownloadsComponent } from './record-downloads.component'
 import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core'
 import { By } from '@angular/platform-browser'
 import { DataService } from '@geonetwork-ui/feature/dataviz'
 import { DatasetDistribution } from '@geonetwork-ui/common/domain/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 // This is used to work around a very weird bug when comparing URL objects would fail
 // if the `searchParams` of the object wasn't accessed beforehand in some cases...
@@ -58,6 +58,7 @@ class DataServiceMock {
 }
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-download-item',
   template: '<div></div>',
 })
@@ -66,20 +67,21 @@ export class MockDownloadsListItemComponent {
 }
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-popup-alert',
   template: '<div></div>',
 })
 export class MockPopupAlertComponent {}
 
 describe('DataDownloadsComponent', () => {
-  let component: DataDownloadsComponent
-  let fixture: ComponentFixture<DataDownloadsComponent>
+  let component: RecordDownloadsComponent
+  let fixture: ComponentFixture<RecordDownloadsComponent>
   let facade
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
-        DataDownloadsComponent,
+        RecordDownloadsComponent,
         MockDownloadsListItemComponent,
         MockPopupAlertComponent,
       ],
@@ -99,7 +101,7 @@ describe('DataDownloadsComponent', () => {
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DataDownloadsComponent)
+    fixture = TestBed.createComponent(RecordDownloadsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

libs/feature/record/src/lib/data-downloads/data-downloads.component.ts → apps/datahub/src/app/record/record-downloads/record-downloads.component.ts

@@ -3,19 +3,19 @@ import { DataService } from '@geonetwork-ui/feature/dataviz'
 import { getFileFormat, getLinkPriority } from '@geonetwork-ui/util/shared'
 import { combineLatest, of } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
-import { MdViewFacade } from '../state'
 import {
   DatasetDistribution,
   DatasetServiceDistribution,
 } from '@geonetwork-ui/common/domain/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 @Component({
-  selector: 'gn-ui-data-downloads',
-  templateUrl: './data-downloads.component.html',
-  styleUrls: ['./data-downloads.component.css'],
+  selector: 'datahub-record-downloads',
+  templateUrl: './record-downloads.component.html',
+  styleUrls: ['./record-downloads.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DataDownloadsComponent {
+export class RecordDownloadsComponent {
   constructor(public facade: MdViewFacade, private dataService: DataService) {}
 
   error: string = null

libs/feature/record/src/lib/record-metadata/record-metadata.component.css → apps/datahub/src/app/record/record-metadata/record-metadata.component.css

@@ -33,3 +33,18 @@
 .tab-header-label {
   @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
 }
+
+:host {
+  --container-outside-width: calc(50vw - 1024px / 2);
+}
+@media (max-width: 1024px) {
+  :host {
+    --container-outside-width: 1rem;
+  }
+}
+
+/deep/ gn-ui-carousel {
+  display: block;
+  margin-left: calc(-1 * var(--container-outside-width));
+  margin-right: calc(-1 * var(--container-outside-width));
+}