[Datahub]: Add a list layout to other links section when many links are present

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

@@ -25,11 +25,19 @@ import {
   RECORD_URL_TOKEN,
 } from '@geonetwork-ui/feature/search'
 import {
+  LinkCardComponent,
   THUMBNAIL_PLACEHOLDER,
   UiElementsModule,
 } from '@geonetwork-ui/ui/elements'
-import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
-import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
+import {
+  PreviousNextButtonsComponent,
+  UiInputsModule,
+} from '@geonetwork-ui/ui/inputs'
+import {
+  BlockListComponent,
+  CarouselComponent,
+  UiLayoutModule,
+} from '@geonetwork-ui/ui/layout'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
 import {
   getGlobalConfig,
@@ -83,6 +91,7 @@ import { RecordApisComponent } from './record/record-apis/record-apis.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
+import { LetDirective } from '@ngrx/component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -150,6 +159,11 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     UiCatalogModule,
     MatTabsModule,
     UiWidgetsModule,
+    LinkCardComponent,
+    CarouselComponent,
+    BlockListComponent,
+    PreviousNextButtonsComponent,
+    LetDirective,
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),

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

@@ -1,37 +1,34 @@
-<div class="container-lg px-4 lg:mx-auto">
+<div class="flex flex-row gap-x-4 items-center justify-center md:justify-start">
   <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"
+    class="font-title text-[28px] font-medium text-title text-center 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
-      "
-      [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>
+  <gn-ui-previous-next-buttons
+    *ngIf="hasPagination"
+    [isFirst]="isFirstStep"
+    [isLast]="isLastStep"
+    (directionButtonClicked)="changeStepOrPage($event)"
+  ></gn-ui-previous-next-buttons>
 </div>
+<gn-ui-carousel (currentStepChange)="updateView()" containerClass="gap-4 py-10">
+  <gn-ui-api-card
+    *ngFor="let link of apiLinks$ | async"
+    [title]="link.name"
+    [link]="link"
+    [currentLink]="selectedApiLink"
+    class="w-[320px]"
+    [ngClass]="{
+      'card-shadow': link !== selectedApiLink || !selectedApiLink,
+      'bg-neutral-100': link === selectedApiLink
+    }"
+    (openRecordApiForm)="openRecordApiForm($event)"
+  >
+  </gn-ui-api-card>
+</gn-ui-carousel>
 <div
-  class="content overflow-hidden transition-all duration-300"
+  class="content transition-all duration-300 w-screen mx-auto -ml-[calc(50vw-50%)] overflow-hidden"
   [ngClass]="selectedApiLink ? 'ease-in' : 'ease-out'"
   [style.maxHeight]="maxHeight"
   [style.opacity]="opacity"
@@ -55,8 +52,8 @@
           </div>
           <mat-icon
             class="!w-5 !h-5 text-xl font-bold material-symbols-outlined !flex items-center"
-            >close</mat-icon
-          >
+            >close
+          </mat-icon>
         </button>
       </div>
       <gn-ui-record-api-form

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

@@ -1,6 +1,13 @@
-import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
 import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import { CarouselComponent } from '@geonetwork-ui/ui/layout'
 
 @Component({
   selector: 'datahub-record-apis',
@@ -9,16 +16,40 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecordApisComponent implements OnInit {
+  @ViewChild(CarouselComponent) carousel: CarouselComponent
+
   maxHeight = '0px'
   opacity = 0
   selectedApiLink: DatasetServiceDistribution
-  constructor(public facade: MdViewFacade) {}
+
+  apiLinks$ = this.facade.apiLinks$
+
+  constructor(
+    private facade: MdViewFacade,
+    private changeDetector: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.setStyle(undefined)
     this.selectedApiLink = undefined
   }
 
+  get hasPagination() {
+    return this.carousel?.stepsCount > 1
+  }
+
+  updateView() {
+    this.changeDetector.detectChanges()
+  }
+
+  get isFirstStep() {
+    return this.carousel?.isFirstStep
+  }
+
+  get isLastStep() {
+    return this.carousel?.isLastStep
+  }
+
   openRecordApiForm(link: DatasetServiceDistribution) {
     this.selectedApiLink = link
     this.setStyle(link)
@@ -33,4 +64,12 @@ export class RecordApisComponent implements OnInit {
     this.maxHeight = link === undefined ? '0px' : '500px'
     this.opacity = link === undefined ? 0 : 1
   }
+
+  changeStepOrPage(direction: string) {
+    if (direction === 'next') {
+      this.carousel?.slideToNext()
+    } else {
+      this.carousel?.slideToPrevious()
+    }
+  }
 }

apps/datahub/src/app/record/record-metadata/record-metadata.component.css

@@ -33,18 +33,3 @@
 .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;
-  }
-}
-
-:host ::ng-deep gn-ui-carousel {
-  display: block;
-  margin-left: calc(-1 * var(--container-outside-width));
-  margin-right: calc(-1 * var(--container-outside-width));
-}

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

@@ -117,19 +117,20 @@
     class="container-lg px-4 lg:mx-auto"
     *ngIf="displayDownload$ | async"
   >
-    <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
+    <datahub-record-downloads
+      class="block mt-[72px]"
+    ></datahub-record-downloads>
   </div>
 
   <div id="links" class="lg:mx-auto">
     <div class="container-lg px-4 lg:mx-auto" *ngIf="displayOtherLinks | async">
-      <datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
+      <datahub-record-otherlinks
+        class="block mt-[72px]"
+      ></datahub-record-otherlinks>
     </div>
 
-    <div *ngIf="displayApi$ | async">
-      <datahub-record-apis
-        [isPanelOpen]="isPanelOpen"
-        class="block mt-6"
-      ></datahub-record-apis>
+    <div class="container-lg px-4 lg:mx-auto" *ngIf="displayApi$ | async">
+      <datahub-record-apis class="block mt-[32px]"></datahub-record-apis>
     </div>
   </div>
 
@@ -148,7 +149,7 @@
     </div>
   </div>
 </div>
-<div id="userFeedbacks" class="bg-primary-opacity-10 py-16">
+<div id="userFeedbacks" class="bg-primary-opacity-10 py-16 mt-[32px]">
   <div class="container-lg px-4 lg:mx-auto">
     <datahub-record-user-feedbacks
       [organisationName$]="organisationName$"

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

@@ -1,26 +1,39 @@
-<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.links
-</p>
-<gn-ui-carousel
-  containerClass="gap-4 py-10"
-  stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto"
->
-  <gn-ui-link-card
-    *ngFor="
-      let link of facade.otherLinks$ | async;
-      let first = first;
-      let last = last
-    "
-    [title]="link.name"
-    [link]="link"
-    class="w-80"
-    [ngClass]="{
-      'mr-[var(--container-outside-width)]': last,
-      'ml-[var(--container-outside-width)]': first
-    }"
+<div class="flex flex-row gap-x-4 items-center justify-center md:justify-start">
+  <p
+    class="font-title text-[28px] font-medium text-title text-center sm:text-left"
+    translate
   >
-  </gn-ui-link-card>
-</gn-ui-carousel>
+    record.metadata.links
+  </p>
+  <gn-ui-previous-next-buttons
+    *ngIf="hasPagination"
+    [isFirst]="isFirstStepOrPage"
+    [isLast]="isLastStepOrPage"
+    (directionButtonClicked)="changeStepOrPage($event)"
+  ></gn-ui-previous-next-buttons>
+</div>
+<ng-container *ngrxLet="otherLinks$ as otherLinks">
+  <gn-ui-block-list
+    containerClass="gap-4 py-10"
+    *ngIf="otherLinks.length >= 10; else carouselTemplate"
+  >
+    <gn-ui-link-card
+      #block
+      *ngFor="let otherLink of otherLinks"
+      [link]="otherLink"
+      [compact]="true"
+    ></gn-ui-link-card>
+  </gn-ui-block-list>
+  <ng-template #carouselTemplate>
+    <gn-ui-carousel
+      containerClass="gap-4 pt-[26px] pb-[38px]"
+      (currentStepChange)="updateView()"
+    >
+      <gn-ui-link-card
+        *ngFor="let otherLink of otherLinks; let first = first; let last = last"
+        [link]="otherLink"
+        class="w-80"
+      ></gn-ui-link-card>
+    </gn-ui-carousel>
+  </ng-template>
+</ng-container>

apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { Subject } from 'rxjs'
+import { BehaviorSubject } from 'rxjs'
 import { RecordOtherlinksComponent } from './record-otherlinks.component'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 class MdViewFacadeMock {
-  otherLinks$ = new Subject()
+  otherLinks$ = new BehaviorSubject([])
 }
-describe('DataOtherlinksComponent', () => {
+describe('RecordOtherlinksComponent', () => {
   let component: RecordOtherlinksComponent
   let fixture: ComponentFixture<RecordOtherlinksComponent>
 

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

@@ -1,12 +1,58 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ViewChild,
+} from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import { BlockListComponent, CarouselComponent } from '@geonetwork-ui/ui/layout'
 
 @Component({
   selector: 'datahub-record-otherlinks',
   templateUrl: './record-otherlinks.component.html',
   styleUrls: ['./record-otherlinks.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordOtherlinksComponent {
-  constructor(public facade: MdViewFacade) {}
+export class RecordOtherlinksComponent implements AfterViewInit {
+  otherLinks$ = this.facade.otherLinks$
+
+  @ViewChild(CarouselComponent) carousel: CarouselComponent
+  @ViewChild(BlockListComponent) list: BlockListComponent
+
+  constructor(
+    public facade: MdViewFacade,
+    private changeDetector: ChangeDetectorRef
+  ) {}
+
+  get isFirstStepOrPage() {
+    return this.carousel?.isFirstStep ?? this.list?.isFirstPage ?? true
+  }
+
+  get isLastStepOrPage() {
+    return this.carousel?.isLastStep ?? this.list?.isLastPage ?? false
+  }
+
+  get hasPagination() {
+    return (this.carousel?.stepsCount || this.list?.pagesCount) > 1
+  }
+
+  changeStepOrPage(direction: string) {
+    if (direction === 'next') {
+      this.list?.nextPage()
+      this.carousel?.slideToNext()
+    } else {
+      this.carousel?.slideToPrevious()
+      this.list?.previousPage()
+    }
+  }
+
+  updateView() {
+    this.changeDetector.detectChanges()
+  }
+
+  ngAfterViewInit() {
+    // this is required to show the pagination correctly
+    this.changeDetector.detectChanges()
+  }
 }

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

@@ -1,4 +1,4 @@
-<div id="record-page">
+<div id="record-page" class="overflow-hidden">
   <datahub-header-record
     [metadata]="mdViewFacade.metadata$ | async"
   ></datahub-header-record>

libs/feature/record/src/lib/state/mdview.facade.ts

@@ -8,7 +8,6 @@ import { DatavizConfigurationModel } from '@geonetwork-ui/common/domain/model/da
 import {
   CatalogRecord,
   UserFeedback,
-  UserFeedbackViewModel,
 } from '@geonetwork-ui/common/domain/model/record'
 import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'