geonetwork-ui 2.6.0-dev.502fa026d → 2.6.0-dev.76a84fb05

package/src/libs/feature/router/src/lib/default/router.config.ts

@@ -4,6 +4,8 @@ export interface RouterConfigModel {
   searchStateId: string
   searchRouteComponent: Type<any>
   recordRouteComponent: Type<any>
+  serviceRouteComponent: Type<any>
+  reuseRouteComponent: Type<any>
   organizationRouteComponent: Type<any>
 }
 

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -3,6 +3,8 @@ import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_ORGANIZATION,
   ROUTER_ROUTE_SEARCH,
+  ROUTER_ROUTE_SERVICE,
+  ROUTER_ROUTE_REUSE,
 } from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
@@ -34,6 +36,14 @@ export class RouterService {
         path: `${ROUTER_ROUTE_DATASET}/:metadataUuid`,
         component: this.routerConfig.recordRouteComponent,
       },
+      {
+        path: `${ROUTER_ROUTE_SERVICE}/:metadataUuid`,
+        component: this.routerConfig.recordRouteComponent,
+      },
+      {
+        path: `${ROUTER_ROUTE_REUSE}/:metadataUuid`,
+        component: this.routerConfig.recordRouteComponent,
+      },
       {
         path: `${ROUTER_ROUTE_ORGANIZATION}/:name`,
         component: this.routerConfig.organizationRouteComponent,

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -7,6 +7,8 @@ import { distinctUntilChanged, filter, map, take } from 'rxjs/operators'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_SEARCH,
+  ROUTER_ROUTE_SERVICE,
+  ROUTER_ROUTE_REUSE,
   SearchRouteParams,
 } from '../constants'
 import {
@@ -32,12 +34,19 @@ export class RouterFacade {
     map(expandQueryParams)
   )
 
+  routeMap = {
+    dataset: ROUTER_ROUTE_DATASET,
+    service: ROUTER_ROUTE_SERVICE,
+    reuse: ROUTER_ROUTE_REUSE,
+  }
+
   constructor(
     private store: Store<RouterReducerState>,
     private routerService: RouterService
   ) {}
 
   goToMetadata(metadata: CatalogRecord) {
+    const selectedRoute = this.routeMap[metadata.kind] || ROUTER_ROUTE_DATASET
     this.pathParams$
       .pipe(
         take(1),
@@ -45,7 +54,7 @@ export class RouterFacade {
       )
       .subscribe(() => {
         this.go({
-          path: `${ROUTER_ROUTE_DATASET}/${metadata.uniqueIdentifier}`,
+          path: `${selectedRoute}/${metadata.uniqueIdentifier}`,
         })
         this.store.dispatch(
           MdViewActions.setIncompleteMetadata({ incomplete: metadata })

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-row items-center">
   <span
-    class="align-text-top mr-1.5"
+    class="align-text-top mr-1.5 mt-0.5"
     data-test="favorite-count"
     *ngIf="hasFavoriteCount && displayCount"
     >{{ favoriteCount }}</span
@@ -10,10 +10,4 @@
     (newValue)="toggleFavorite($event)"
     [disabled]="loading || (isAnonymous$ | async)"
   ></gn-ui-star-toggle>
-  <span
-    class="align-text-top ml-1.5"
-    data-test="favorite-count"
-    *ngIf="!displayCount"
-    translate="datahub.record.addToFavorites"
-  ></span>
 </div>

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -8,9 +8,15 @@ import {
   OnDestroy,
   ViewChild,
 } from '@angular/core'
-import { map, pairwise, withLatestFrom } from 'rxjs/operators'
+import {
+  map,
+  pairwise,
+  startWith,
+  switchMap,
+  withLatestFrom,
+} from 'rxjs/operators'
 import tippy from 'tippy.js'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { StarToggleComponent } from '../../../../../../../libs/ui/inputs/src'
 import { Observable, Subscription } from 'rxjs'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
@@ -24,7 +30,7 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./favorite-star.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, StarToggleComponent],
+  imports: [CommonModule, StarToggleComponent, TranslateModule],
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   @Input() displayCount? = true
@@ -46,11 +52,13 @@ export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   favoriteCount: number | null
   loading = false
   loginUrl = this.authService.loginUrl
-  loginMessage$: Observable<string> = this.translateService.get(
-    'favorite.not.authenticated.tooltip',
-    {
-      link: this.loginUrl,
-    }
+  loginMessage$: Observable<string> = this.translateService.onLangChange.pipe(
+    startWith(null), // make sure to wait for translations to be loaded with and without language change
+    switchMap(() =>
+      this.translateService.get('favorite.not.authenticated.tooltip', {
+        link: this.loginUrl,
+      })
+    )
   )
   @ViewChild(StarToggleComponent, { read: ElementRef })
   starToggleRef: ElementRef

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)"