geonetwork-ui 2.6.0-dev.f073bbb4e → 2.6.1-dev.0811518a1

package/src/libs/util/i18n/src/lib/language-codes.ts

@@ -1,4 +1,6 @@
-export const LANG_3_TO_2_MAPPER = {
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+const LANG_3_TO_2_MAPPER = {
   eng: 'en',
   dut: 'nl',
   fre: 'fr',
@@ -15,6 +17,17 @@ export const LANG_3_TO_2_MAPPER = {
   chi: 'zh',
   slo: 'sk',
   roh: 'rm',
+  ara: 'ar',
+  dan: 'da',
+  nor: 'no',
+  pol: 'pl',
+  swe: 'sv',
+  tur: 'tr',
+  arm: 'hy',
+  aze: 'az',
+  geo: 'ka',
+  ukr: 'uk',
+  wel: 'cy',
 }
 
 export const LANGUAGE_NAMES = {
@@ -33,7 +46,18 @@ export const LANGUAGE_NAMES = {
   ru: 'Русский',
   zh: '中文',
   sk: 'Slovenčina',
-  roh: 'Rumantsch',
+  rm: 'Rumantsch',
+  ar: 'العربية',
+  da: 'Dansk',
+  no: 'Norsk',
+  pl: 'Polski',
+  sv: 'Swedish',
+  tr: 'Türkçe',
+  hy: 'հայերեն',
+  az: 'Azərbaycan dili',
+  ka: 'ქართული',
+  uk: 'українська',
+  wel: 'Cymraeg',
 }
 
 export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
@@ -42,3 +66,44 @@ export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
   },
   {}
 )
+
+export function getLang3FromLang2(lang2: string): string {
+  return LANG_2_TO_3_MAPPER[lang2] ?? lang2
+}
+
+export function getLang2FromLang3(lang3: string): string {
+  return LANG_3_TO_2_MAPPER[lang3] ?? lang3
+}
+
+export function getLocalizedIndexKey(lang2: string): string {
+  const lang3 = getLang3FromLang2(lang2)
+  return lang3 ? `lang${lang3}` : null
+}
+
+marker('language.en')
+marker('language.nl')
+marker('language.fr')
+marker('language.de')
+marker('language.ko')
+marker('language.es')
+marker('language.cs')
+marker('language.ca')
+marker('language.fi')
+marker('language.is')
+marker('language.it')
+marker('language.pt')
+marker('language.ru')
+marker('language.zh')
+marker('language.sk')
+marker('language.rm')
+marker('language.ar')
+marker('language.da')
+marker('language.no')
+marker('language.pl')
+marker('language.sv')
+marker('language.tr')
+marker('language.hy')
+marker('language.az')
+marker('language.ka')
+marker('language.uk')
+marker('language.cy')

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

@@ -1,5 +1,6 @@
-export * from './lib/util-shared.module'
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
 export * from './lib/image-fallback.directive'
+export * from './lib/gn-ui-version'
+export * from './lib/record.util'

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'
+    ? '2.6.x'
+    : `v${packageJson.version}`

package/src/libs/util/shared/src/lib/image-fallback.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core'
 
 @Directive({
   selector: 'img[gnUiImageFallback]',
+  standalone: true,
 })
 export class ImageFallbackDirective {
   @Input() fallbackUrl: string

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/src/libs/util/shared/src/lib/record.util.ts

@@ -0,0 +1,114 @@
+import {
+  BaseRecord,
+  CatalogRecord,
+  Constraint,
+  DatasetDownloadDistribution,
+  DatasetServiceDistribution,
+  DatasetSpatialExtent,
+  Keyword,
+  LanguageCode,
+  OnlineLinkResource,
+  Organization,
+  ServiceEndpoint,
+} from '../../../../../libs/common/domain/src/lib/model/record'
+
+type TranslatedRecordObjects =
+  | BaseRecord
+  | Constraint
+  | Keyword
+  | DatasetServiceDistribution
+  | DatasetDownloadDistribution
+  | OnlineLinkResource
+  | ServiceEndpoint
+  | DatasetSpatialExtent
+  | Organization
+
+export function updateLanguages<T extends CatalogRecord>(
+  record: T,
+  defaultLanguage: LanguageCode,
+  otherLanguages: LanguageCode[]
+): T {
+  function updateFieldTranslations<T extends TranslatedRecordObjects>(
+    target: T,
+    fieldName: string
+  ): T {
+    const fieldTranslations = {}
+    for (const lang of otherLanguages) {
+      const prevValue =
+        record.defaultLanguage === lang
+          ? target[fieldName]
+          : target.translations?.[fieldName]?.[lang]
+      fieldTranslations[lang] = prevValue ?? ''
+    }
+    const defaultPrevValue =
+      record.defaultLanguage === defaultLanguage
+        ? target[fieldName]
+        : target.translations?.[fieldName]?.[defaultLanguage]
+    return {
+      ...target,
+      [fieldName]: defaultPrevValue ?? '',
+      translations: {
+        ...target.translations,
+        [fieldName]: fieldTranslations,
+      },
+    }
+  }
+  function updateTranslations<T extends TranslatedRecordObjects>(
+    target: T,
+    fieldNames: string[]
+  ): T {
+    let result: T = target
+    for (const field of fieldNames) {
+      result = updateFieldTranslations(result, field)
+    }
+    return result
+  }
+
+  const updatedRecord = updateTranslations(record, [
+    'title',
+    'abstract',
+    'lineage',
+  ])
+  updatedRecord.keywords = updatedRecord.keywords.map((k) =>
+    updateTranslations(k, ['label', 'description'])
+  )
+  updatedRecord.onlineResources = updatedRecord.onlineResources.map((o) =>
+    updateTranslations(o, ['name', 'description'])
+  )
+  updatedRecord.licenses = updatedRecord.licenses.map((l) =>
+    updateTranslations(l, ['text'])
+  )
+  updatedRecord.legalConstraints = updatedRecord.legalConstraints.map((c) =>
+    updateTranslations(c, ['text'])
+  )
+  updatedRecord.securityConstraints = updatedRecord.securityConstraints.map(
+    (c) => updateTranslations(c, ['text'])
+  )
+  updatedRecord.otherConstraints = updatedRecord.otherConstraints.map((c) =>
+    updateTranslations(c, ['text'])
+  )
+  updatedRecord.contacts = updatedRecord.contacts.map((c) => ({
+    ...c,
+    organization: updateTranslations(c.organization, ['name']),
+  }))
+  updatedRecord.contactsForResource = updatedRecord.contactsForResource.map(
+    (c) => ({
+      ...c,
+      organization: updateTranslations(c.organization, ['name']),
+    })
+  )
+  updatedRecord.ownerOrganization = updateTranslations(
+    updatedRecord.ownerOrganization,
+    ['name']
+  )
+
+  if (updatedRecord.kind === 'dataset') {
+    updatedRecord.spatialExtents = updatedRecord.spatialExtents.map((e) =>
+      updateTranslations(e, ['description'])
+    )
+  }
+
+  updatedRecord.defaultLanguage = defaultLanguage
+  updatedRecord.otherLanguages = otherLanguages
+  return updatedRecord
+}

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];
+      bg-white 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 {
@@ -192,7 +185,7 @@
 
   /* TODO: replace by gn-ui-badge class above */
   .badge-btn {
-    @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
+    @apply flex items-center justify-center px-4 py-1 rounded backdrop-blur;
   }
 
   /* GENERIC TEXT INPUT (textarea, text field, url input...) */
@@ -222,6 +215,11 @@
   mat-progress-spinner circle {
     stroke: currentColor !important;
   }
+
+  /* Section title */
+  .gn-ui-section-title {
+    @apply text-title font-medium pt-9 text-[28px];
+  }
 }
 
 html {