geonetwork-ui 2.6.0-dev.b306f1194 → 2.6.0-dev.ceb4be4c1

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  Output,
+} from '@angular/core'
+import { Choice } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-results-hits-search-kind',
+  templateUrl: './results-hits-search-kind.component.html',
+})
+export class ResultsHitsSearchKindComponent implements OnChanges {
+  @Input() selected: string[] = []
+  @Input() choices: Choice[] = []
+  @Output() selectionChanged = new EventEmitter<string[]>()
+
+  availableChoices: Choice[] = []
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.choices && changes.choices.currentValue) {
+      this.availableChoices = this.buildFilterChoices(this.choices)
+    }
+  }
+
+  buildFilterChoices(availableValues: Choice[]) {
+    return [
+      ...[
+        {
+          label: 'all',
+          value: 'all',
+        },
+      ],
+      ...availableValues,
+    ]
+  }
+
+  onSelectedValues(values: string[]) {
+    const selectedValues = values.includes('all') ? [] : values
+
+    this.selectionChanged.emit(selectedValues)
+  }
+
+  isSelectedChoice(choiceValue: string) {
+    return this.selected.includes(choiceValue)
+  }
+
+  isAllChoice(choiceValue: string) {
+    return this.selected.length === 0 && choiceValue === 'all'
+  }
+}

package/src/libs/ui/search/src/lib/results-list/results-layout.config.ts

@@ -32,9 +32,9 @@ export const DEFAULT_RESULTS_LAYOUT_CONFIG: ResultsLayoutConfigModel = {
   ),
   ROW: new ResultsLayoutConfigItem(
     RecordPreviewRowComponent,
-    'pt-4 pb-5 sm:py-7',
+    'py-2',
     '',
-    'grid grid-cols-1 divide-y divide-gray-300'
+    'grid grid-cols-1 divide-y divide-gray-100'
   ),
   FEED: new ResultsLayoutConfigItem(
     RecordPreviewFeedComponent,

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

@@ -6,6 +6,7 @@
       *ngFor="let record of records"
     >
       <gn-ui-results-list-item
+        [attr.data-cy]="record.uniqueIdentifier"
         [record]="record"
         [layoutConfig]="layoutConfig"
         [metadataQualityDisplay]="metadataQualityDisplay"

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

@@ -3,7 +3,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   TemplateRef,
 } from '@angular/core'

package/src/libs/ui/search/src/lib/results-table/results-table.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-height: 40px;
+  --gn-ui-button-width: 40px;
+}

package/src/libs/ui/search/src/lib/results-table/results-table.component.html

@@ -9,10 +9,10 @@
       <ng-icon
         name="iconoirLock"
         class="text-purple"
-        *ngIf="!item.extras?.edit && !isDraftPage"
+        *ngIf="(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'"
       ></ng-icon>
       <gn-ui-checkbox
-        *ngIf="item.extras?.edit || isDraftPage"
+        *ngIf="(item.extras?.edit || isDraftPage) && item.kind === 'dataset'"
         [checked]="isChecked(item)"
         (changed)="handleRecordSelectedChange($event, item)"
         class="-m-2"
@@ -143,21 +143,34 @@
   <gn-ui-interactive-table-column>
     <ng-template #header> </ng-template>
     <ng-template #cell let-item>
-      <gn-ui-button
-        cdkOverlayOrigin
-        #actionMenuButton
-        (buttonClick)="openActionMenu(item, template)"
-        type="light"
-        data-test="record-menu-button"
-        [disabled]="!item.extras?.edit && !isDraftPage"
-      >
+      <div class="flex justify-end items-center gap-4 w-full">
+        <!-- IS MULTILINGUAL -->
         <ng-icon
-          [ngClass]="{
-            'text-purple-light': !item.extras?.edit && !isDraftPage,
-          }"
-          name="matMoreVert"
+          *ngIf="isMultilingual(item)"
+          data-cy="multilingual-indicator"
+          name="iconoirTranslate"
+          [attr.title]="getTxtHoverMultilingual(item)"
         ></ng-icon>
-      </gn-ui-button>
+        <!-- MORE ACTIONS MENU BUTTON -->
+        <gn-ui-button
+          cdkOverlayOrigin
+          #actionMenuButton
+          (buttonClick)="openActionMenu(item, template)"
+          type="light"
+          data-test="record-menu-button"
+          [disabled]="
+            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'
+          "
+        >
+          <ng-icon
+            [ngClass]="{
+              'text-purple-light':
+                (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
+            }"
+            name="matMoreVert"
+          ></ng-icon>
+        </gn-ui-button>
+      </div>
       <ng-template #template>
         <gn-ui-action-menu
           [canDuplicate]="canDuplicate(item) && !isDuplicating"

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -28,16 +28,11 @@ import {
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { ActionMenuComponent } from './action-menu/action-menu.component'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
-import { iconoirUser, iconoirLock } from '@ng-icons/iconoir'
-import {
-  CdkConnectedOverlay,
-  CdkOverlayOrigin,
-  Overlay,
-  OverlayRef,
-} from '@angular/cdk/overlay'
+import { iconoirUser, iconoirLock, iconoirTranslate } from '@ng-icons/iconoir'
+import { CdkOverlayOrigin, Overlay, OverlayRef } from '@angular/cdk/overlay'
 import { TemplatePortal } from '@angular/cdk/portal'
 import { matMoreVert } from '@ng-icons/material-icons/baseline'
 
@@ -57,7 +52,9 @@ import { matMoreVert } from '@ng-icons/material-icons/baseline'
     NgIconComponent,
     CdkOverlayOrigin,
   ],
-  providers: [provideIcons({ iconoirUser, iconoirLock, matMoreVert })],
+  providers: [
+    provideIcons({ iconoirUser, iconoirLock, iconoirTranslate, matMoreVert }),
+  ],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
@@ -89,7 +86,8 @@ export class ResultsTableComponent {
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
     private cdr: ChangeDetectorRef,
-    private dateService: DateService
+    private dateService: DateService,
+    private translateService: TranslateService
   ) {}
 
   openActionMenu(item, template) {
@@ -174,8 +172,9 @@ export class ResultsTableComponent {
   }
 
   handleRecordClick(item: CatalogRecord) {
-    if (item?.extras?.edit || this.isDraftPage)
+    if ((item?.extras?.edit || this.isDraftPage) && item.kind === 'dataset') {
       this.recordClick.emit(item as CatalogRecord)
+    }
   }
 
   handleDuplicate(item: unknown) {
@@ -218,4 +217,16 @@ export class ResultsTableComponent {
   handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
     this.recordsSelectedChange.emit([[record], selected])
   }
+
+  isMultilingual(record: CatalogRecord): boolean {
+    return record.otherLanguages.length > 0
+  }
+
+  getTxtHoverMultilingual(record: CatalogRecord) {
+    return this.translateService.instant('dashboard.records.isMultilingual', {
+      languages: [...[record.defaultLanguage], ...record.otherLanguages].join(
+        ', '
+      ),
+    })
+  }
 }

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

@@ -11,6 +11,7 @@ import { RecordPreviewRowComponent } from './record-preview-row/record-preview-r
 import { RecordPreviewTextComponent } from './record-preview-text/record-preview-text.component'
 import { RecordPreviewTitleComponent } from './record-preview-title/record-preview-title.component'
 import { ResultsHitsNumberComponent } from './results-hits-number/results-hits-number.component'
+import { ResultsHitsSearchKindComponent } from './results-hits-search-kind/results-hits-search-kind.component'
 import {
   DEFAULT_RESULTS_LAYOUT_CONFIG,
   RESULTS_LAYOUT_CONFIG,
@@ -24,6 +25,7 @@ import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import {
   MetadataQualityComponent,
   UiElementsModule,
+  KindBadgeComponent,
 } from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { CommonModule } from '@angular/common'
@@ -48,6 +50,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     RecordMetricComponent,
     ResultsListComponent,
     ResultsHitsNumberComponent,
+    ResultsHitsSearchKindComponent,
     ResultsListItemComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
@@ -74,6 +77,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
       matFace,
       matHomeWorkOutline,
     }),
+    KindBadgeComponent,
     MetadataQualityComponent,
   ],
   exports: [
@@ -86,6 +90,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     FacetsModule,
     RecordPreviewComponent,
     ResultsHitsNumberComponent,
+    ResultsHitsSearchKindComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
   ],

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -3,8 +3,9 @@
   <ng-container *ngSwitchCase="'light'">
     <div class="flex items-center relative">
       <div
-        class="flex-shrink-0 {{ color.text }} text-xs font-medium mr-2
+        class="flex-shrink-0 {{ color.text }} font-medium mr-2
              text-opacity-100 !text-slate-800"
+        data-cy="progressPercentage"
       >
         {{ progress }}%
       </div>

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -99,6 +99,7 @@ export function loadAppConfig() {
           'metadata_language',
           'login_url',
           'logout_url',
+          'settings_url',
           'web_component_embedder_url',
           'languages',
           'contact_email',

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -7,6 +7,7 @@ proxy_path = "/proxy/?url="
 metadata_language = "fre"
 login_url = "/cas/login?service="
 logout_url = "/geonetwork/signout"
+settings_url = "/geonetwork/settings"
 web_component_embedder_url = "/datahub/wc-embedder.html"
 
 [map]

package/src/libs/util/shared/src/index.ts

@@ -3,3 +3,4 @@ export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
 export * from './lib/image-fallback.directive'
+export * from './lib/gn-ui-version'

package/src/libs/util/shared/src/lib/gn-ui-version.ts

@@ -0,0 +1,8 @@
+import packageJson from '../../../../../package.json'
+
+export const GEONETWORK_UI_VERSION = packageJson.version
+
+export const GEONETWORK_UI_TAG_NAME =
+  GEONETWORK_UI_VERSION.split('-')[1] === 'dev'
+    ? 'main'
+    : `v${packageJson.version}`

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  ServiceOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
 
 export enum LinkUsage {
@@ -16,8 +19,11 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
+  getUsagesForLink(
+    link: DatasetOnlineResource | ServiceOnlineResource
+  ): LinkUsage[] {
     switch (link.type) {
+      case 'endpoint':
       case 'service': {
         switch (link.accessServiceProtocol) {
           case 'esriRest':
@@ -25,7 +31,10 @@ export class LinkClassifierService {
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
           case 'wms':
           case 'wmts':
+          case 'tms':
             return [LinkUsage.API, LinkUsage.MAP_API]
+          case 'maplibre-style':
+            return [LinkUsage.GEODATA]
           case 'ogcFeatures':
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
           case 'GPFDL':
@@ -54,7 +63,10 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
+  hasUsage(
+    link: DatasetOnlineResource | ServiceOnlineResource,
+    usage: LinkUsage
+  ) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,6 +1,7 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   DatasetOnlineResource,
+  ServiceOnlineResource,
   ServiceProtocol,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -140,7 +141,9 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetOnlineResource): number {
+export function getLinkPriority(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -164,7 +167,9 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetOnlineResource): FileFormat {
+export function getFileFormat(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -181,7 +186,7 @@ export function getFileFormat(link: DatasetOnlineResource): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetOnlineResource,
+  link: DatasetOnlineResource | ServiceOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -203,7 +208,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetOnlineResource,
+  link: DatasetOnlineResource | ServiceOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -225,7 +230,9 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetOnlineResource): string {
+export function getLinkLabel(
+  link: DatasetOnlineResource | ServiceOnlineResource
+): string {
   let format = ''
   switch (link.type) {
     case 'service':
@@ -240,6 +247,9 @@ export function getLinkLabel(link: DatasetOnlineResource): string {
           case 'wmts':
             format = 'WMTS'
             break
+          case 'tms':
+            format = 'TMS'
+            break
           case 'esriRest':
             format = 'REST'
             break
@@ -249,7 +259,7 @@ export function getLinkLabel(link: DatasetOnlineResource): string {
     default:
       format = getFileFormat(link)
   }
-  const label = link.description || link.name
+  const label = link.description || ('name' in link ? link.name : '')
   return format ? `${label} (${format})` : label
 }
 
@@ -261,14 +271,25 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
     }
     case 'wfs': {
       const endpointWfs = await new WfsEndpoint(url).isReady()
-      return endpointWfs.getFeatureTypes()
+      const featureTypes = await endpointWfs.getFeatureTypes()
+      const layers = await Promise.all(
+        featureTypes.map(async (collection) => {
+          return await endpointWfs.getFeatureTypeFull(collection.name)
+        })
+      )
+      return layers
     }
     case 'wms': {
       const endpointWms = await new WmsEndpoint(url).isReady()
-      return endpointWms
-        .getLayers()
-        .flatMap(wmsLayerFlatten)
-        .filter((l) => l.name)
+      const layers = (
+        await endpointWms
+          .getLayers()
+          .flatMap(wmsLayerFlatten)
+          .filter((l) => l.name)
+      ).map((collection) => {
+        return endpointWms.getLayerByName(collection.name)
+      })
+      return layers
     }
     case 'wmts': {
       const endpointWmts = await new WmtsEndpoint(url).isReady()
@@ -279,7 +300,7 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
   }
 }
 
-function wmsLayerFlatten(layerFull) {
+export function wmsLayerFlatten(layerFull) {
   const layer = {
     title: layerFull.title,
     name: layerFull.name,

package/tailwind.base.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   theme: {
     extend: {
+      screens: {
+        xs: '320px',
+      },
       colors: {
         'primary-white': 'var(--color-primary-white)',
         'primary-lightest': 'var(--color-primary-lightest)',

package/tailwind.base.css

@@ -66,15 +66,20 @@
   /* this is a base class, do not use it directly */
   .gn-ui-btn {
     --rounded: var(--gn-ui-button-rounded, 0.25em);
+    --border-width: var(--gn-ui-button-border-width, 1px);
     --padding: var(--gn-ui-button-padding, 1em);
     --width: var(--gn-ui-button-width, auto);
     --height: var(--gn-ui-button-height, auto);
-    --background: var(--gn-ui-button-background, --color-background);
+    --background: var(--gn-ui-button-background, var(--color-background));
+    --bg-hover: var(--gn-ui-button-bg-hover, var(--color-background));
     --font-size: var(--gn-ui-button-font-size, 1em);
+    --color: var(--gn-ui-button-color, var(--color-main));
     @apply flex flex-row items-center justify-center
       text-[length:--font-size] leading-none
+      text-[color:--color]
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
-      bg-[--background] transition-all duration-100
+      border-[length:--border-width] bg-[--background] transition-all duration-100
+      hover:bg-[--bg-hover] focus:bg-[--bg-hover] active:bg-[--background]
       outline-none
       relative
       disabled:opacity-50 disabled:pointer-events-none
@@ -89,60 +94,48 @@
 
   .gn-ui-btn-default {
     @apply gn-ui-btn text-white
-      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
-      border border-gray-700 focus:ring-4 focus:ring-gray-200;
+      bg-gray-700 hover:bg-gray-800 hover:!text-white active:bg-gray-900
+      border-gray-700 focus:ring-4 focus:ring-gray-200 focus:text-gray-900;
   }
 
   .gn-ui-btn-primary {
     @apply gn-ui-btn text-white
       bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
-      border border-primary focus:ring-4 focus:ring-primary-lightest;
+      border-primary focus:ring-4 focus:ring-primary-lightest;
   }
 
   .gn-ui-btn-secondary {
     @apply gn-ui-btn text-white
       bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
-      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
+      border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
   .gn-ui-btn-gray {
     @apply gn-ui-btn text-black
     bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 active:bg-gray-300
-    border border-gray-100 focus:ring-4 focus:ring-gray-50;
+    border-gray-100 focus:ring-4 focus:ring-gray-50;
   }
 
   .gn-ui-btn-black {
     @apply gn-ui-btn text-white
     bg-black hover:bg-gray-950 focus:bg-gray-950 active:bg-gray-900
-    border border-black focus:ring-4 focus:ring-gray-300;
+    border-black focus:ring-4 focus:ring-gray-300;
   }
 
   .gn-ui-btn-outline {
-    @apply gn-ui-btn text-main
+    @apply gn-ui-btn
     hover:text-primary-darker focus:text-primary-darker active:text-primary-black
-    border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
+    border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
   }
 
   .gn-ui-btn-light {
-    @apply gn-ui-btn text-main
+    @apply gn-ui-btn
       hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
-      border border-white focus:ring-4 focus:ring-gray-300;
-  }
-
-  .gn-ui-card-xs {
-    @apply min-h-[68px] md:w-[487px];
+      border-white focus:ring-4 focus:ring-gray-300;
   }
 
   .gn-ui-card-s {
-    @apply min-h-[135px] md:w-80;
-  }
-
-  .gn-ui-card-m {
-    @apply min-h-[68px] md:w-[487px];
-  }
-
-  .gn-ui-card-l {
-    @apply min-h-[68px] md:w-[992px];
+    @apply min-h-[64px] w-full xs:min-w-[260px] xs:max-w-[280px] sm:min-w-[300px] sm:max-w-[500px] md:min-w-[230px];
   }
 
   .gn-ui-card-title {
@@ -225,7 +218,7 @@
 
   /* Section title */
   .gn-ui-section-title {
-    @apply text-title font-medium pt-9 text-[28px] container-lg px-4 lg:mx-auto;
+    @apply text-title font-medium pt-9 text-[28px];
   }
 }