geonetwork-ui 2.6.0-dev.01d2b5fc0 → 2.6.0-dev.025a2f85d

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -26,8 +26,6 @@ import {
   SpinningLoaderComponent,
   UiWidgetsModule,
 } from '../../../../../libs/ui/widgets/src'
-import { RecordsRepositoryInterface } from '../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
-import { Gn4Repository } from '../../../../../libs/api/repository/src'
 import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
 
 @NgModule({
@@ -72,11 +70,5 @@ import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.c
     SearchStateContainerDirective,
     FilterDropdownComponent,
   ],
-  providers: [
-    {
-      provide: RecordsRepositoryInterface,
-      useClass: Gn4Repository,
-    },
-  ],
 })
 export class FeatureSearchModule {}

package/src/libs/feature/search/src/lib/record-url.token.ts

@@ -1,4 +1,13 @@
 import { InjectionToken } from '@angular/core'
 
 // expects the replacement key ${uuid}
-export const RECORD_URL_TOKEN = new InjectionToken<string>('record-url-token')
+export const RECORD_DATASET_URL_TOKEN = new InjectionToken<string>(
+  'record-dataset-url-token'
+)
+export const RECORD_SERVICE_URL_TOKEN = new InjectionToken<string>(
+  'record-service-url-token'
+)
+
+export const RECORD_REUSE_URL_TOKEN = new InjectionToken<string>(
+  'record-reuse-url-token'
+)

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.css

@@ -0,0 +1,6 @@
+:host {
+  --gn-ui-button-height: 24px;
+  --gn-ui-button-width: 24px;
+  --gn-ui-button-color: var(--color-secondary);
+  --gn-ui-button-border-width: 0px;
+}

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -16,6 +16,7 @@
         type="secondary"
         (buttonClick)="onShowMore()"
         extraClass="m-auto !p-[22px]"
+        [style.--gn-ui-button-width]="!auto"
       >
         <span class="uppercase font-medium tracking-widest" translate
           >results.showMore</span

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -17,7 +17,11 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '../../../../../../libs/ui/search/src'
-import { RECORD_URL_TOKEN } from '../record-url.token'
+import {
+  RECORD_DATASET_URL_TOKEN,
+  RECORD_SERVICE_URL_TOKEN,
+  RECORD_REUSE_URL_TOKEN,
+} from '../record-url.token'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
@@ -49,8 +53,12 @@ export class ResultsListContainerComponent implements OnInit {
     @Inject(RESULTS_LAYOUT_CONFIG)
     private resultsLayoutConfig: ResultsLayoutConfigModel,
     @Optional()
-    @Inject(RECORD_URL_TOKEN)
-    private recordUrlTemplate: string
+    @Inject(RECORD_DATASET_URL_TOKEN)
+    private recordDatasetUrlTemplate: string,
+    @Inject(RECORD_SERVICE_URL_TOKEN)
+    private recordServiceUrlTemplate: string,
+    @Inject(RECORD_REUSE_URL_TOKEN)
+    private recordReuseUrlTemplate: string
   ) {}
 
   ngOnInit(): void {
@@ -103,7 +111,18 @@ export class ResultsListContainerComponent implements OnInit {
   }
 
   getRecordUrl(metadata: CatalogRecord) {
-    if (!this.recordUrlTemplate) return null
-    return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier)
+    const tokenMap = {
+      dataset: this.recordDatasetUrlTemplate,
+      service: this.recordServiceUrlTemplate,
+      reuse: this.recordReuseUrlTemplate,
+    }
+    if (
+      !this.recordDatasetUrlTemplate &&
+      !this.recordServiceUrlTemplate &&
+      !this.recordReuseUrlTemplate
+    )
+      return null
+    const urlKind = tokenMap[metadata.kind]
+    return urlKind.replace('${uuid}', metadata.uniqueIdentifier)
   }
 }

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,6 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
-  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1"
+  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1 rounded-lg"
 >
 </gn-ui-dropdown-selector>

package/src/libs/ui/elements/src/index.ts

@@ -23,3 +23,5 @@ export * from './lib/ui-elements.module'
 export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
+export * from './lib/internal-link-card/internal-link-card.component'
+export * from './lib/service-capabilities/service-capabilities.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,13 +1,66 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
+  class="group flex justify-between rounded filter overflow-hidden"
+  [ngClass]="cardClass"
 >
-  <div
-    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
-  >
-    {{ link.name || link.description }}
+  <ng-container *ngIf="size !== 'S'">
+    <div>
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </div>
+    <div class="flex items-center">
+      <ng-container *ngTemplateOutlet="buttons"></ng-container>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="size === 'S'">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </ng-container>
+</div>
+
+<ng-template #buttons>
+  <div class="flex flex-row gap-2">
+    <gn-ui-copy-text-button
+      [text]="link.url"
+      [tooltipText]="'tooltip.url.copy' | translate"
+      [displayText]="false"
+      class="border border-gray-300 rounded-lg pt-1 px-2 h-[34px]"
+    ></gn-ui-copy-text-button>
+    <button
+      *ngIf="displayApiFormButton"
+      type="button"
+      class="gn-ui-card-icon"
+      [ngClass]="{
+        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+          displayText,
+      }"
+      [matTooltip]="
+        !currentlyActive
+          ? ('record.metadata.api.form.openForm' | translate)
+          : ('record.metadata.api.form.closeForm' | translate)
+      "
+      matTooltipPosition="above"
+      (click)="openRecordApiFormPanel()"
+    >
+      <ng-icon
+        class="pointer-events-none align-middle card-icon"
+        name="iconoirSettings"
+        [ngClass]="{
+          'text-secondary opacity-100': currentlyActive,
+        }"
+      ></ng-icon>
+    </button>
   </div>
-  <div class="">
-    <div class="flex flex-row justify-between">
+</ng-template>
+
+<ng-template #content>
+  <div>
+    <div class="gn-ui-card-title">
+      {{ link.description || link.name }}
+    </div>
+    <div class="gn-ui-card-detail">
+      {{ link.name }}
+    </div>
+  </div>
+  <div class="flex flex-row justify-between">
+    <div class="flex flex-row gap-2.5 items-center pt-1">
       <span
         *ngIf="link.accessServiceProtocol !== 'GPFDL'"
         class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
@@ -26,36 +79,9 @@
       >
         record.metadata.api.gpfdl</span
       >
-      <div class="flex flex-row gap-2 items-center">
-        <gn-ui-copy-text-button
-          [text]="link.url"
-          [tooltipText]="'tooltip.url.copy' | translate"
-          [displayText]="false"
-        ></gn-ui-copy-text-button>
-        <button
-          *ngIf="displayApiFormButton"
-          type="button"
-          [ngClass]="{
-            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-              displayText,
-          }"
-          [matTooltip]="
-            !currentlyActive
-              ? ('record.metadata.api.form.openForm' | translate)
-              : ('record.metadata.api.form.closeForm' | translate)
-          "
-          matTooltipPosition="above"
-          (click)="openRecordApiFormPanel()"
-        >
-          <ng-icon
-            class="pointer-events-none align-middle card-icon"
-            name="matMoreHoriz"
-            [ngClass]="{
-              'text-secondary opacity-100': currentlyActive,
-            }"
-          ></ng-icon>
-        </button>
-      </div>
+    </div>
+    <div *ngIf="size === 'S'">
+      <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/api-card/api-card.component.ts

@@ -14,7 +14,9 @@ import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
+import { iconoirSettings } from '@ng-icons/iconoir'
+
+type CardSize = 'L' | 'M' | 'S' | 'XS'
 
 @Component({
   selector: 'gn-ui-api-card',
@@ -31,18 +33,40 @@ import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
   ],
   viewProviders: [
     provideIcons({
-      matMoreHoriz,
+      iconoirSettings,
     }),
   ],
 })
 export class ApiCardComponent implements OnInit, OnChanges {
+  private _size: 'L' | 'M' | 'S' | 'XS'
   @Input() link: DatasetServiceDistribution
   @Input() currentLink: DatasetServiceDistribution
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'gn-ui-card-l py-2 px-5 flex-row',
+    M: 'gn-ui-card-m py-2 px-5 flex-row',
+    S: 'gn-ui-card-s p-4 flex-col',
+    XS: 'gn-ui-card-xs py-2 px-5 flex-row',
+  }
+
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value]
+  }
+  get size(): 'L' | 'M' | 'S' | 'XS' {
+    return this._size
+  }
+  cardClass = ''
   displayApiFormButton: boolean
   currentlyActive = false
   @Output() openRecordApiForm: EventEmitter<DatasetServiceDistribution> =
     new EventEmitter<DatasetServiceDistribution>()
 
+  get generatedText() {
+    return this.link.accessServiceProtocol === 'wfs'
+      ? 'datahub.search.filter.generatedByWfs'
+      : 'datahub.search.filter.generatedByAPI'
+  }
+
   ngOnInit() {
     this.displayApiFormButton =
       this.link.accessServiceProtocol === 'ogcFeatures' ||

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,36 +1,36 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex justify-between card-shadow px-6 py-5 cursor-pointer"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
   rel="noopener"
+  [ngClass]="cardClass"
 >
-  <div class="grow-1 w-full overflow-hidden">
-    <div
-      class="text-21 text-black truncate font-title w-11/12"
-      [title]="link.description || link.name"
-    >
+  <div class="flex flex-col justify-between">
+    <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
-    <div class="pt-1">
+    <div class="gn-ui-card-detail">
+      {{ link.name }}
+    </div>
+    <div class="flex flex-row gap-2 items-center pt-1">
       <span
         class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
       >
-      <span
-        class="pl-2 inline-flex items-center text-gray-800 text-sm"
-        *ngIf="isFromApi"
-        translate=""
+      <span class="text-gray-800 text-xs" *ngIf="isFromApi" translate=""
         >datahub.search.filter.generatedByAPI</span
       >
     </div>
   </div>
-  <div class="shrink-1 w-14 flex flex-col justify-center items-center">
-    <ng-icon
-      class="!w-8 !h-8 card-icon text-3xl"
-      name="matCloudDownloadOutline"
-    >
-    </ng-icon>
+  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+    <div class="gn-ui-card-icon">
+      <ng-icon
+        class="inline-block card-icon align-middle"
+        name="iconoirDownload"
+      >
+      </ng-icon>
+    </div>
   </div>
 </a>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -9,7 +9,9 @@ import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/
 import { TranslateModule } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
+import { iconoirDownload } from '@ng-icons/iconoir'
+
+type CardSize = 'L' | 'M' | 'S' | 'XS'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -20,15 +22,31 @@ import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
   standalone: true,
   viewProviders: [
     provideIcons({
-      matCloudDownloadOutline,
+      iconoirDownload,
     }),
   ],
 })
 export class DownloadItemComponent {
+  private _size: 'L' | 'M' | 'S' | 'XS'
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromApi: boolean
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'gn-ui-card-l py-2 px-5',
+    M: 'gn-ui-card-m py-2 px-5',
+    S: 'gn-ui-card-s p-4',
+    XS: 'gn-ui-card-xs py-2 px-5',
+  }
+
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value]
+  }
+  get size(): 'L' | 'M' | 'S' | 'XS' {
+    return this._size
+  }
+  cardClass = ''
   @Output() exportUrl = new EventEmitter<string>()
 
   openUrl() {

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -1,22 +1,22 @@
 <div
-  class="flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2"
+  class="flex flex-wrap justify-between items-center pb-4"
   *ngIf="links && links.length > 0"
 >
-  <p
-    class="font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left"
+  <div
+    class="font-title text-xl text-title font-medium mr-4 text-center sm:text-left"
     translate
   >
     record.metadata.download
-  </p>
+  </div>
   <div
-    class="flex flex-wrap justify-start sm:justify-end sm:pb-4"
+    class="flex flex-wrap justify-start sm:justify-end"
     data-cy="download-format-filters"
   >
     <gn-ui-button
       class="m-1 format-filter"
       [extraClass]="
         '!px-[12px] !py-[8px] !text-[15px]' +
-        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')
+        (isFilterActive(format) ? ' opacity-100' : ' opacity-60')
       "
       (buttonClick)="toggleFilterFormat(format)"
       [attr.data-format]="format"
@@ -28,6 +28,7 @@
 </div>
 <div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
   <gn-ui-download-item
+    size="L"
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.html

@@ -0,0 +1,156 @@
+<div
+  class="rounded-lg group card-shadow cursor-pointer overflow-hidden hover:bg-gray-50"
+  [ngClass]="cardClass"
+>
+  <div class="flex flex-row justify-between w-full">
+    <div
+      *ngIf="shouldShowThumbnail"
+      [ngClass]="thumbnailContainerClass"
+      class="mr-4 flex flex-col"
+    >
+      <gn-ui-thumbnail
+        class="w-full h-full object-cover"
+        [thumbnailUrl]="record.overviews?.[0]?.url?.toString() || ''"
+        [fit]="'cover'"
+      ></gn-ui-thumbnail>
+    </div>
+    <div
+      class="flex flex-col flex-1 relative"
+      [ngClass]="{
+        'justify-between': record.ownerOrganization?.name && size !== 'XS',
+      }"
+    >
+      <div class="flex items-center space-x-2">
+        <span
+          *ngIf="getKindInfo().text"
+          class="badge-btn text-white text-xs px-2 py-0.5 font-bold shrink-0 bg-primary leading-tight flex items-center justify-evenly h-6 min-h-6"
+        >
+          <ng-icon
+            class="text-[0.9em] text-white mr-1"
+            [name]="getKindInfo().icon"
+          ></ng-icon>
+          <span class="font-medium text-white text-xs" translate>
+            {{ getKindInfo().text }}
+          </span>
+        </span>
+        <span
+          *ngIf="isGeodata"
+          class="badge-btn text-black text-xs px-2 py-0.5 font-bold shrink-0 bg-primary-white leading-tight flex items-center justify-evenly h-6 min-h-6"
+          [ngClass]="size === 'L' ? 'w-[164px]' : 'w-8'"
+        >
+          <ng-icon
+            class="text-[0.9em] text-primary-darkest"
+            name="matLocationSearchingOutline"
+          ></ng-icon>
+          <ng-container *ngIf="size === 'L'">
+            <span
+              class="font-medium text-primary-darkest text-xs ml-1"
+              translate
+            >
+              record.metadata.type
+            </span>
+          </ng-container>
+        </span>
+        <div class="flex items-center">
+          <gn-ui-metadata-quality
+            [smaller]="true"
+            [metadata]="record"
+            [metadataQualityDisplay]="metadataQualityDisplay"
+          ></gn-ui-metadata-quality>
+        </div>
+        <div class="absolute top-0 right-0 items-center">
+          <ng-container
+            *ngIf="size !== 'XS'"
+            [ngTemplateOutlet]="favoriteTemplate"
+            [ngTemplateOutletContext]="{ $implicit: record }"
+          ></ng-container>
+        </div>
+      </div>
+      <div
+        class="font-medium text-title group-hover:text-primary overflow-hidden break-words"
+        [ngClass]="getTitleClass()"
+      >
+        {{ record.title }}
+      </div>
+      <div
+        *ngIf="size === 'L'"
+        class="mt-1 mb-2 font-normal text-xs text-gray-900 line-clamp-2 overflow-hidden"
+      >
+        <gn-ui-markdown-parser
+          [textContent]="abstract"
+          [whitoutStyles]="true"
+        ></gn-ui-markdown-parser>
+      </div>
+      <div
+        *ngIf="size !== 'XS' && record.ownerOrganization?.name"
+        class="flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2"
+      >
+        <div class="flex items-center flex-1 min-w-0">
+          <div
+            class="w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3"
+          >
+            <gn-ui-thumbnail
+              [thumbnailUrl]="
+                record.ownerOrganization?.logoUrl?.toString() || ''
+              "
+              [fit]="'contain'"
+              class="w-full h-full rounded-lg"
+            ></gn-ui-thumbnail>
+          </div>
+          <div *ngIf="organization?.name" class="flex-1 w-0 overflow-hidden">
+            <div
+              class="text-xs text-black font-normal leading-tight truncate"
+              translate
+            >
+              record.card.metadata.contact
+            </div>
+            <div class="text-xl text-primary-black font-medium truncate">
+              {{ organization.name }}
+            </div>
+          </div>
+        </div>
+        <div *ngIf="size === 'L'" class="ml-2 flex space-x-2">
+          <div *ngIf="organization?.website" class="flex">
+            <button
+              [title]="organization.website"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest"
+              (click)="openExternalUrl($event, organization.website)"
+            >
+              <ng-icon name="iconoirInternet"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.email" class="flex">
+            <button
+              [title]="contacts[0].email"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest"
+              data-cy="contact-email"
+              (click)="openMailto($event, contacts[0].email)"
+            >
+              <ng-icon name="matEmailOutline"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.phone" class="flex">
+            <button
+              [title]="'Copy to clipboard'"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group"
+              data-cy="contact-phone"
+              (click)="copyToClipboard($event, contacts[0].phone)"
+            >
+              <ng-icon name="matPhoneOutline"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.address" class="flex">
+            <button
+              [title]="'Copy to clipboard'"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group"
+              data-cy="contact-phone"
+              (click)="copyToClipboard($event, contacts[0].address)"
+            >
+              <ng-icon name="matLocationOnOutline"></ng-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>