feat(dh): btns and cards for custom api urls

geonetwork · Nov 13, 2023 · ecc14a3 · ecc14a3
1 parent 5f1c197
commit ecc14a3
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 24 deletions.
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.css b/apps/datahub/src/app/record/record-apis/record-apis.component.css
@@ -0,0 +1,4 @@
+.tab-header-label {
+    @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
+  }
+
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html
@@ -1,25 +1,71 @@
-<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
-    }"
+<div class="flex flex-row">
+  <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
   >
-  </gn-ui-api-card>
-</gn-ui-carousel>
+    record.metadata.api
+  </p>
+  <mat-tab-group
+    (selectedIndexChange)="onTabIndexChange($event)"
+    animationDuration="200ms"
+    mat-stretch-tabs="false"
+    mat-align-tabs="start"
+  >
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span class="tab-header-label sm:ml-32" translate
+          >URLS PREDEFINIES</span
+        >
+      </ng-template>
+      <div class="block py-10">
+        <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
+            "
+            [custom]="false"
+            [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>
+      </div>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span class="tab-header-label" translate>URLS PERSONNALISEES</span>
+      </ng-template>
+      <div class="block py-10">
+        <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
+            "
+            [custom]="true"
+            [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>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.ts
@@ -1,5 +1,6 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import { BehaviorSubject } from 'rxjs'
 
 @Component({
   selector: 'datahub-record-apis',
@@ -8,5 +9,13 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecordApisComponent {
+  selectedTabIndex$ = new BehaviorSubject(0)
   constructor(public facade: MdViewFacade) {}
+
+  onTabIndexChange(index: number): void {
+    this.selectedTabIndex$.next(index)
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 0)
+  }
 }
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.html b/libs/ui/elements/src/lib/api-card/api-card.component.html
@@ -14,10 +14,28 @@
         >{{ link.accessServiceProtocol.toUpperCase() }}</span
       >
       <gn-ui-copy-text-button
+        *ngIf="!custom"
         [text]="link.url.toString()"
         [tooltipText]="'tooltip.url.copy' | translate"
         [displayText]="false"
       ></gn-ui-copy-text-button>
+      <button
+        *ngIf="custom"
+        type="button"
+        (click)="copyText($event)"
+        [ngClass]="{
+          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+            displayText
+        }"
+        mat-raised-button
+        [matTooltip]="'Open the custom panel'"
+        matTooltipPosition="above"
+      >
+        <mat-icon
+          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+          >more_horiz</mat-icon
+        >
+      </button>
     </div>
   </div>
 </div>
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.ts b/libs/ui/elements/src/lib/api-card/api-card.component.ts
@@ -9,4 +9,5 @@ import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
 })
 export class ApiCardComponent {
   @Input() link: DatasetServiceDistribution
+  @Input() custom: boolean
 }