geonetwork-ui 2.9.0 → 2.10.0-dev.08a12212e

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -1,6 +1,4 @@
-import { HttpClient } from '@angular/common/http'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
-import { FileTranslateLoader } from './file.translate.loader'
 import {
   TranslateCompiler,
   TranslateDefaultParser,
@@ -9,26 +7,34 @@ import {
   TranslateParser,
 } from '@ngx-translate/core'
 import { Injectable } from '@angular/core'
+import { TRANSLATE_HTTP_LOADER_CONFIG } from '@ngx-translate/http-loader'
+import { HttpClient } from '@angular/common/http'
+import { FileTranslateLoader } from './file.translate.loader'
 
 export const DEFAULT_LANG = 'en'
 
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 
-export function HttpLoaderFactory(http: HttpClient) {
-  return new FileTranslateLoader(http, './assets/i18n/')
-}
-
 export const TRANSLATE_DEFAULT_CONFIG: TranslateModuleConfig = {
   compiler: {
     provide: TranslateCompiler,
     useClass: TranslateMessageFormatCompiler,
   },
-  loader: {
-    provide: TranslateLoader,
-    useFactory: HttpLoaderFactory,
-    deps: [HttpClient],
-  },
+  loader: [
+    {
+      provide: TRANSLATE_HTTP_LOADER_CONFIG,
+      useValue: {
+        prefix: './assets/i18n/',
+        suffix: '.json',
+      },
+    },
+    {
+      provide: TranslateLoader,
+      useClass: FileTranslateLoader,
+      deps: [HttpClient, TRANSLATE_HTTP_LOADER_CONFIG],
+    },
+  ],
 }
 
 @Injectable()

package/src/libs/util/i18n/src/lib/i18n.interceptor.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/common/http'
 import { DEFAULT_LANG } from './i18n.constants'
 import { Observable } from 'rxjs'
-import { Injectable, Injector, inject } from '@angular/core'
+import { inject, Injectable, Injector } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 
 @Injectable()
@@ -21,7 +21,7 @@ export class I18nInterceptor implements HttpInterceptor {
     const translate = this.injector.get(TranslateService)
     request = request.clone({
       setHeaders: {
-        'Accept-Language': translate.currentLang || DEFAULT_LANG,
+        'Accept-Language': translate.getCurrentLang() || DEFAULT_LANG,
       },
     })
     return next.handle(request)

package/src/libs/util/i18n/src/lib/i18n.providers.ts

@@ -1,7 +1,8 @@
 import {
-  APP_INITIALIZER,
   EnvironmentProviders,
+  inject,
   makeEnvironmentProviders,
+  provideAppInitializer,
   Provider,
 } from '@angular/core'
 import {
@@ -22,17 +23,16 @@ import {
 } from '@angular/common/http'
 import { I18nInterceptor } from './i18n.interceptor'
 
-function i18nInitializerFromLocalStorageFactory(translate: TranslateService) {
-  return () => {
-    translate.setDefaultLang(DEFAULT_LANG)
-    let storageLang = null
-    try {
-      storageLang = localStorage.getItem(LANGUAGE_STORAGE_KEY)
-    } catch (error) {
-      console.warn(error)
-    }
-    translate.use(storageLang || translate.getBrowserLang() || DEFAULT_LANG)
+function i18nInitializerFromLocalStorageFactory() {
+  const translate = inject(TranslateService)
+  translate.setFallbackLang(DEFAULT_LANG)
+  let storageLang = null
+  try {
+    storageLang = localStorage.getItem(LANGUAGE_STORAGE_KEY)
+  } catch (error) {
+    console.warn(error)
   }
+  translate.use(storageLang || translate.getBrowserLang() || DEFAULT_LANG)
 }
 
 export function provideI18n(
@@ -56,12 +56,9 @@ export function provideI18n(
     provideTranslateService(usedConfig),
   ]
   if (useLocalStorage) {
-    providers.push({
-      provide: APP_INITIALIZER,
-      useFactory: i18nInitializerFromLocalStorageFactory,
-      deps: [TranslateService],
-      multi: true,
-    })
+    providers.push(
+      provideAppInitializer(i18nInitializerFromLocalStorageFactory)
+    )
   }
 
   return makeEnvironmentProviders(providers)

package/src/libs/util/i18n/src/lib/test.translate.loader.ts

@@ -0,0 +1,48 @@
+import { inject, Injectable, InjectionToken } from '@angular/core'
+import {
+  provideTranslateService,
+  TranslateCompiler,
+  TranslateLoader,
+  TranslationObject,
+} from '@ngx-translate/core'
+import { Observable, of } from 'rxjs'
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
+
+/**
+ * This translate loader is used for testing purposes, it allows to provide translations directly in the test file without having to create JSON files
+ * Taken from https://github.com/mwootendev/ngx-translate-plugins/issues/87
+ */
+
+const TestTranslations = new InjectionToken<Record<string, TranslationObject>>(
+  'test-translations'
+)
+
+@Injectable()
+class TestTranslateLoader implements TranslateLoader {
+  translations = inject(TestTranslations)
+  getTranslation(lang: string): Observable<TranslationObject> {
+    return of(this.translations[lang] as TranslationObject)
+  }
+}
+
+export function provideTranslateTestingService(
+  translations: Record<string, TranslationObject>
+) {
+  return provideTranslateService({
+    loader: [
+      {
+        provide: TestTranslations,
+        useValue: translations,
+      },
+      {
+        provide: TranslateLoader,
+        useClass: TestTranslateLoader,
+      },
+    ],
+    fallbackLang: 'en',
+    compiler: {
+      provide: TranslateCompiler,
+      useClass: TranslateMessageFormatCompiler,
+    },
+  })
+}

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

@@ -171,6 +171,28 @@ export const FORMATS = {
   },
 } as const
 
+marker('downloads.format.csv')
+marker('downloads.format.excel')
+marker('downloads.format.geojson')
+marker('downloads.format.json')
+marker('downloads.format.shp')
+marker('downloads.format.gml')
+marker('downloads.format.kml')
+marker('downloads.format.gpkg')
+marker('downloads.format.zip')
+marker('downloads.format.pdf')
+marker('downloads.format.jpg')
+marker('downloads.format.png')
+marker('downloads.format.tiff')
+marker('downloads.format.svg')
+marker('downloads.format.dxf')
+marker('downloads.format.html')
+marker('downloads.format.xml')
+marker('downloads.format.fgb')
+marker('downloads.format.jsonfg')
+marker('downloads.format.webp')
+marker('downloads.format.postgis')
+
 export type FileFormat = keyof typeof FORMATS
 
 export function getFormatPriority(linkFormat: FileFormat): number {
@@ -266,7 +288,7 @@ export function checkFileFormat(
       new RegExp(`[./]${format}`, 'i').test(link.name.toLowerCase())) ||
     ('url' in link &&
       new RegExp(`[./]${format}`, 'i').test(link.url.toString())) ||
-    ('name' in link && link.name.toLowerCase().includes(format))
+    ('name' in link && new RegExp(`\\b${format}\\b`, 'i').test(link.name))
   )
 }
 

package/src/libs/util/shared/src/lib/record/quality-score.util.ts

@@ -3,27 +3,41 @@ import {
   RecordKind,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
+type TValidatorEntry = {
+  validator: (metadata: Partial<CatalogRecord>) => boolean
+  alias?: string
+}
+
 type TValidatorMapper = {
-  [key: string]: (metadata: Partial<CatalogRecord>) => boolean
+  [key: string]: TValidatorEntry
 }
 
 const ValidatorMapper: TValidatorMapper = {
-  title: (record) => !!record?.title,
-  abstract: (record) => !!record?.abstract,
-  keywords: (record) => (record?.keywords?.length ?? 0) > 0,
-  legalConstraints: (record) =>
-    !!(
-      record?.legalConstraints?.length &&
-      record.legalConstraints.some((c) => c?.text?.trim().length > 0)
-    ),
-  contacts: (record) =>
-    !!record?.contacts?.[0]?.email &&
-    record.contacts[0].email !== 'missing@missing.com',
-  updateFrequency: (record) =>
-    !!record?.updateFrequency && record.updateFrequency !== 'unknown',
-  topics: (record) => (record?.topics?.length ?? 0) > 0,
-  organisation: (record) => !!record?.contacts?.[0]?.organization?.name,
-  source: (record) => !!record?.extras?.sourcesIdentifiers,
+  title: { validator: (record) => !!record?.title },
+  abstract: { validator: (record) => !!record?.abstract },
+  keywords: { validator: (record) => (record?.keywords?.length ?? 0) > 0 },
+  legalConstraints: {
+    validator: (record) =>
+      !!(
+        record?.legalConstraints?.length &&
+        record.legalConstraints.some((c) => c?.text?.trim().length > 0)
+      ),
+  },
+  contacts: {
+    validator: (record) =>
+      !!record?.contacts?.[0]?.email &&
+      record.contacts[0].email !== 'missing@missing.com',
+  },
+  updateFrequency: {
+    validator: (record) =>
+      !!record?.updateFrequency && record.updateFrequency !== 'unknown',
+  },
+  topics: { validator: (record) => (record?.topics?.length ?? 0) > 0 },
+  organisation: {
+    validator: (record) => !!record?.contacts?.[0]?.organization?.name,
+    alias: 'contacts',
+  },
+  source: { validator: (record) => !!record?.extras?.sourcesIdentifiers },
 } as const
 
 export type ValidatorMapperKeys = keyof typeof ValidatorMapper & string
@@ -67,6 +81,7 @@ export function getQualityValidators(
 
   return filteredProps.map((name) => ({
     name,
-    validator: () => ValidatorMapper[name](record),
+    validator: () => ValidatorMapper[name].validator(record),
+    alias: ValidatorMapper[name].alias,
   }))
 }

package/src/libs/util/shared/src/lib/services/date.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { type Locale } from 'date-fns/locale'
 import { formatDistance } from 'date-fns/formatDistance'
@@ -30,13 +30,13 @@ export class DateService {
     locale: string
     dateObj: Date
   } {
-    const locale = this.translateService.currentLang || DEFAULT_LANGUAGE
+    const locale = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE
     const dateObj = this.getDateObject(date)
     return { locale, dateObj }
   }
 
   private async getDateLocale(): Promise<Locale> {
-    const lang = this.translateService.currentLang || DEFAULT_LANGUAGE
+    const lang = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE
     const locales = await this.dateLocales
     return locales[lang]
   }

package/src/libs/util/shared/src/lib/utils/geojson.ts

@@ -1,4 +1,11 @@
-import type { Feature, FeatureCollection, Geometry, Position } from 'geojson'
+import type {
+  Feature,
+  FeatureCollection,
+  Geometry,
+  Polygon,
+  Position,
+} from 'geojson'
+import type { DatasetSpatialExtent } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 /**
  * @returns The geometry if available, otherwise null.
@@ -94,3 +101,53 @@ export function getGeometryBoundingBox(geometry: Geometry): BoundingBox {
       return coordinatesReducer(emptyExtent, geometry.coordinates)
   }
 }
+
+/**
+ * Builds the closed GeoJSON Polygon matching the given bounding box.
+ */
+export function bboxToPolygon(bbox: BoundingBox): Polygon {
+  const [minX, minY, maxX, maxY] = bbox
+  return {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [minX, minY],
+        [minX, maxY],
+        [maxX, maxY],
+        [maxX, minY],
+        [minX, minY],
+      ],
+    ],
+  }
+}
+
+/**
+ * Returns the geometry carried by a spatial extent, falling back to the polygon
+ * derived from its bounding box. Returns null when the extent has neither.
+ */
+export function spatialExtentToGeometry(
+  extent: DatasetSpatialExtent
+): Geometry | null {
+  if (extent.geometry) return extent.geometry
+  if (extent.bbox) return bboxToPolygon(extent.bbox)
+  return null
+}
+
+/**
+ * Converts a list of dataset spatial extents into a GeoJSON FeatureCollection,
+ * e.g. to be used as the data source of a map layer.
+ */
+export function spatialExtentsToFeatureCollection(
+  extents: DatasetSpatialExtent[]
+): FeatureCollection {
+  return {
+    type: 'FeatureCollection',
+    features: extents.reduce<Feature[]>((features, extent) => {
+      const geometry = spatialExtentToGeometry(extent)
+      if (geometry) {
+        features.push({ type: 'Feature', properties: {}, geometry })
+      }
+      return features
+    }, []),
+  }
+}

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

@@ -13,3 +13,4 @@ export * from './sort-by'
 export * from './strip-html'
 export * from './temporal-extent-union'
 export * from './url'
+export * from './user-display'

package/src/libs/util/shared/src/lib/utils/user-display.ts

@@ -0,0 +1,32 @@
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+import { Individual } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+export function getIndividualDisplayName(individual: Individual): string {
+  const nameParts = [individual.firstName, individual.lastName]
+    .filter(Boolean)
+    .join(' ')
+  const orgPart = individual.organization?.name
+    ? ` (${individual.organization.name})`
+    : ''
+  if (nameParts) return `${nameParts}${orgPart}`
+  return individual.organization?.name ?? individual.email ?? ''
+}
+
+export function getAddressLines(address: string | undefined): string[] {
+  return address
+    ? address
+        .split(',')
+        .map((part) => part.trim())
+        .filter(Boolean)
+    : []
+}
+
+export function toIndividual(user: UserModel): Individual {
+  return {
+    firstName: user.name,
+    lastName: user.surname,
+    email: user.email,
+    role: 'unspecified',
+    organization: user.organisation ? { name: user.organisation } : undefined,
+  }
+}

package/style.css

@@ -1,4 +1,3 @@
 @import 'tippy.js/dist/tippy.css';
 @import 'ol/ol.css';
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
 @import './tailwind.base.css';

package/tailwind.base.css

@@ -74,7 +74,10 @@
     --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
+    --disabled-opacity: var(--gn-ui-button-disabled-opacity, 0.5);
+    --justify: var(--gn-ui-button-justify, center);
+    justify-content: var(--justify);
+    @apply flex flex-row items-center
       text-[length:--font-size] leading-none
       text-[color:--color]
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
@@ -82,7 +85,7 @@
       hover:bg-[--bg-hover] focus:bg-[--bg-hover] active:bg-[--background]
       outline-none
       relative
-      disabled:opacity-50 disabled:pointer-events-none
+      disabled:opacity-[--disabled-opacity] disabled:pointer-events-none
       focus:z-10 active:z-10 hover:z-10;
   }
   /* makes sure icons will not make the buttons grow vertically */
@@ -116,6 +119,12 @@
     border-gray-100 focus:ring-4 focus:ring-gray-50;
   }
 
+  .gn-ui-btn-gray-light {
+    @apply gn-ui-btn text-black
+    bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 active:bg-gray-200
+    border-gray-50 focus:ring-4 focus:ring-gray-100;
+  }
+
   .gn-ui-btn-black {
     @apply gn-ui-btn text-white
     bg-black hover:bg-gray-950 focus:bg-gray-950 active:bg-gray-900
@@ -134,6 +143,12 @@
       bg-white border-white focus:ring-4 focus:ring-gray-300;
   }
 
+  .gn-ui-btn-primary-light {
+    @apply gn-ui-btn text-primary-darkest
+      bg-primary-white hover:bg-primary focus:bg-primary hover:text-white focus:text-white active:bg-primary-darker
+      border-transparent;
+  }
+
   .gn-ui-card-s {
     @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];
   }
@@ -169,9 +184,18 @@
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
     --opacity: var(--gn-ui-badge-opacity, 0.7);
+    text-transform: inherit;
     @apply opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-[--font-weight] text-[length:--text-size] text-[color:--text-color] bg-[color:--background-color] flex justify-center items-center content-center;
   }
+  .gn-ui-badge-clickable {
+    @apply gn-ui-badge hover:bg-primary focus:bg-primary active:bg-primary-darker
+    hover:text-white active:text-white focus:text-white
+    transition-all duration-100
+    outline-none
+    relative
+    focus:z-10 active:z-10 hover:z-10;
+  }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */
   .gn-ui-badge ng-icon {
     margin-top: -0.325em;