geonetwork-ui 2.9.0-dev.5eea424ca → 2.9.0-dev.6da5cd143

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { WmsEndpoint, LayerStyle } from '@camptocamp/ogc-client'
 import {
   BehaviorSubject,
   combineLatest,
@@ -40,6 +41,7 @@ import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
+  MapContextLayerWms,
   SourceLoadErrorEvent,
 } from '@geospatial-sdk/core'
 import {
@@ -77,6 +79,7 @@ marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
 marker('dataset.error.restrictedAccess')
 marker('map.select.style')
+marker('map.style.default')
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -231,6 +234,14 @@ export class MapViewComponent implements AfterViewInit {
     })
   )
 
+  isWmsStyleMode$ = this.selectedSourceLink$.pipe(
+    map(
+      (src) => src?.type === 'service' && src?.accessServiceProtocol === 'wms'
+    ),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
   styleLinks$ = this.selectedSourceLink$.pipe(
     switchMap((src) => {
       if (
@@ -262,6 +273,22 @@ export class MapViewComponent implements AfterViewInit {
           })
         )
       }
+      if (
+        src &&
+        src.type === 'service' &&
+        src.accessServiceProtocol === 'wms'
+      ) {
+        return from(new WmsEndpoint(src.url.toString()).isReady()).pipe(
+          map((endpoint) => {
+            const layer = endpoint.getLayerByName(src.name)
+            return layer?.styles || []
+          }),
+          catchError((error) => {
+            this.handleError(error)
+            return of([])
+          })
+        )
+      }
       return of([])
     }),
     tap((styles) => {
@@ -274,33 +301,57 @@ export class MapViewComponent implements AfterViewInit {
     shareReplay(1)
   )
 
-  styleDropdownChoices$ = this.styleLinks$.pipe(
-    map((links) =>
+  styleDropdownChoices$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+  ]).pipe(
+    map(([links, isWmsStyleMode]) =>
       links.length
         ? links.map((link, index) => ({
-            label: getLinkLabel(link),
+            label: isWmsStyleMode
+              ? (link as LayerStyle).title || (link as LayerStyle).name
+              : getLinkLabel(link as DatasetOnlineResource),
             value: index,
           }))
         : [
             {
-              label: '\u00A0\u00A0\u00A0\u00A0',
+              label: this.translateService.instant('map.style.default'),
               value: 0,
             },
           ]
     )
   )
 
+  selectedWmsStyleName$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
+  ]).pipe(
+    map(([styles, isWmsStyleMode, styleIdx]) =>
+      isWmsStyleMode && Array.isArray(styles)
+        ? (styles[styleIdx] as LayerStyle)?.name
+        : undefined
+    )
+  )
+
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
     this.selectedStyleId$.pipe(distinctUntilChanged()),
+    this.isWmsStyleMode$,
   ]).pipe(
-    map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
+    map(([src, styles, styleIdx, isWmsStyleMode]) =>
+      !isWmsStyleMode && styles.length ? styles[styleIdx] : src
+    ),
     shareReplay(1)
   )
 
-  currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
-    switchMap(([link, excludeWfs]) => {
+  currentLayers$ = combineLatest([
+    this.selectedLink$,
+    this.excludeWfs$,
+    this.selectedWmsStyleName$,
+  ]).pipe(
+    switchMap(([link, excludeWfs, wmsStyleName]) => {
       if (!link) {
         return of([])
       }
@@ -315,6 +366,11 @@ export class MapViewComponent implements AfterViewInit {
         return of([])
       }
       return this.getLayerFromLink(link).pipe(
+        map((layer) =>
+          wmsStyleName && layer.type === 'wms'
+            ? { ...layer, style: wmsStyleName }
+            : layer
+        ),
         map((layer) => [layer]),
         catchError((e) => {
           this.handleError(e)
@@ -394,7 +450,7 @@ export class MapViewComponent implements AfterViewInit {
         url: link.url.toString(),
         type: 'wms',
         name: link.name,
-      })
+      } as MapContextLayerWms)
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'tms'

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

@@ -1,6 +1,5 @@
-import { ModuleWithProviders, NgModule, inject } from '@angular/core'
+import { inject, ModuleWithProviders, NgModule } from '@angular/core'
 import { RouteReuseStrategy } from '@angular/router'
-import { EffectsModule } from '@ngrx/effects'
 import {
   FullRouterStateSerializer,
   routerReducer,
@@ -11,8 +10,9 @@ import { ROUTER_STATE_KEY } from './constants'
 import { RouterService } from './router.service'
 import { SearchRouteReuseStrategy } from './SearchRouteReuseStrategy'
 import { RouterFacade } from './state/router.facade'
-import { RouterEffects } from './state/router.effects'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
+import { RouterEffects } from './state/router.effects'
+import { EffectsModule } from '@ngrx/effects'
 
 @NgModule({
   imports: [

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

@@ -1,10 +1,10 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_ORGANIZATION,
+  ROUTER_ROUTE_REUSE,
   ROUTER_ROUTE_SEARCH,
   ROUTER_ROUTE_SERVICE,
-  ROUTER_ROUTE_REUSE,
 } from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'

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

@@ -64,7 +64,7 @@
     <div class="flex flex-row gap-2.5 items-center pt-1">
       @if (link.accessServiceProtocol !== 'GPFDL') {
         <span
-          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"
+          class="bg-primary/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"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"
@@ -76,7 +76,7 @@
       }
       @if (link.accessServiceProtocol === 'GPFDL') {
         <span
-          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"
+          class="bg-primary/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"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.ts

@@ -45,13 +45,12 @@ export class ApplicationBannerComponent {
         this.icon = 'matWarning'
         break
       case 'light':
-        this.msgClass =
-          'bg-primary-opacity-10 border-primary-lightest text-black'
+        this.msgClass = 'bg-primary/10 border-primary-lightest text-black'
         this.icon = 'matInfoOutline'
         break
       case 'secondary':
       default:
-        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.msgClass = 'bg-primary/50 border-primary-darker text-black'
         this.icon = 'matWarningAmberOutline'
         break
     }

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

@@ -6,7 +6,7 @@
       </div>
       <button
         (click)="resetUrl()"
-        class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
+        class="bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
       >
         <p class="text-[13px] uppercase" translate>
           record.metadata.api.form.reset

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -1,6 +1,6 @@
 @if (apiLinks.length > 0) {
   <div style="height: 652px" id="preview">
-    <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+    <div class="bg-primary/10 overflow-visible" style="height: 420px">
       <div class="container-lg px-4 lg:mx-auto">
         <div>
           <div class="gn-ui-section-title mb-6" translate>

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -50,7 +50,7 @@ export function dragPanCondition(
 
 export function mouseWheelZoomCondition(
   this: MouseWheelZoom,
-  event: MapBrowserEvent<UIEvent>
+  event: MapBrowserEvent<WheelEvent>
 ) {
   if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
     this.getMap().dispatchEvent('mapmuted')

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

@@ -70,8 +70,11 @@ export function getCustomTranslations(langCode: string): CustomTranslations {
 
 let appConfigLoaded = false
 
-export function loadAppConfig() {
-  return fetch('assets/configuration/default.toml')
+export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
+  console.log(
+    `[geonetwork-ui] Loading application configuration from ${configUrl}`
+  )
+  return fetch(configUrl)
     .then((resp) => {
       if (!resp.ok) throw new Error('Configuration file could not be loaded')
       return resp.text()
@@ -229,6 +232,7 @@ export function loadAppConfig() {
           'record_kind_quick_filter',
           'filter_geometry_data',
           'filter_geometry_url',
+          'do_not_use_default_search_preset',
           'search_preset',
           'advanced_filters',
           'limit',
@@ -252,6 +256,8 @@ export function loadAppConfig() {
                 parsedSearchSection.record_kind_quick_filter,
               FILTER_GEOMETRY_DATA: parsedSearchSection.filter_geometry_data,
               FILTER_GEOMETRY_URL: parsedSearchSection.filter_geometry_url,
+              DO_NOT_USE_DEFAULT_SEARCH_PRESET:
+                !!parsedSearchSection.do_not_use_default_search_preset,
               SEARCH_PRESET: parsedSearchParams.map((param) => ({
                 sort: param.sort,
                 name: param.name,

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

@@ -40,6 +40,7 @@ fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans"
 [search]
 record_kind_quick_filter = false
 filter_geometry_url = 'https://my.domain.org/geom.json'
+do_not_use_default_search_preset = false
 advanced_filters = ['publicationYear', 'documentStandard', 'inspireKeyword', 'topic', 'license']
 
 [[search_preset]]

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

@@ -58,6 +58,7 @@ export interface SearchConfig {
   RECORD_KIND_QUICK_FILTER?: boolean
   FILTER_GEOMETRY_URL?: string
   FILTER_GEOMETRY_DATA?: string
+  DO_NOT_USE_DEFAULT_SEARCH_PRESET?: boolean
   SEARCH_PRESET?: SearchPreset[]
   ADVANCED_FILTERS?: []
   LIMIT?: number

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

@@ -10,26 +10,6 @@ export class ThemeService {
     return document.documentElement.style.getPropertyValue(`--color-${name}`)
   }
 
-  static generateBgOpacityClasses(
-    colorName,
-    colorValue,
-    opacities = [0, 10, 25, 50, 75]
-  ) {
-    const color = chroma(colorValue)
-    const styleElement = document.createElement('style')
-    styleElement.innerHTML = opacities.reduce((cssRules, opacity) => {
-      cssRules += `.bg-${colorName}-opacity-${opacity}{background-color:${color
-        .alpha(opacity / 100)
-        .css()};}`
-
-      cssRules += `.hover-bg-${colorName}-opacity-${opacity}:hover {background-color:${color
-        .alpha(opacity / 100)
-        .css()};}`
-      return cssRules
-    }, '')
-    document.getElementsByTagName('head')[0].appendChild(styleElement)
-  }
-
   static applyCssVariables(
     primaryColor: string,
     secondaryColor: string,
@@ -39,13 +19,19 @@ export class ThemeService {
     titleFont?: string,
     fontsStylesheetUrl?: string
   ) {
-    const applyColor = (name: string, color) => {
+    const applyColor = (name: string, color, includeRawValues?: boolean) => {
       document.documentElement.style.setProperty(`--color-${name}`, color.css())
+      if (includeRawValues) {
+        document.documentElement.style.setProperty(
+          `--color-raw-${name}`,
+          color.css().replace(/^rgba?\((.*)\)/, '$1')
+        )
+      }
     }
 
     const black = chroma('black')
     const white = chroma('white')
-    applyColor('primary', chroma(primaryColor))
+    applyColor('primary', chroma(primaryColor), true)
     applyColor(
       'primary-lighter',
       chroma.scale([primaryColor, white]).mode('lab')(0.3)
@@ -70,7 +56,7 @@ export class ThemeService {
       'primary-black',
       chroma.scale([primaryColor, black]).mode('lab')(0.85)
     )
-    applyColor('secondary', chroma(secondaryColor))
+    applyColor('secondary', chroma(secondaryColor), true)
     applyColor(
       'secondary-lighter',
       chroma.scale([secondaryColor, white]).mode('lab')(0.3)

package/tailwind.base.config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
@@ -8,14 +9,14 @@ module.exports = {
         'primary-white': 'var(--color-primary-white)',
         'primary-lightest': 'var(--color-primary-lightest)',
         'primary-lighter': 'var(--color-primary-lighter)',
-        primary: 'var(--color-primary)',
+        primary: 'rgb(var(--color-raw-primary) / <alpha-value>)', // supports opacity
         'primary-darker': 'var(--color-primary-darker)',
         'primary-darkest': 'var(--color-primary-darkest)',
         'primary-black': 'var(--color-primary-black)',
         'secondary-white': 'var(--color-secondary-white)',
         'secondary-lightest': 'var(--color-secondary-lightest)',
         'secondary-lighter': 'var(--color-secondary-lighter)',
-        secondary: 'var(--color-secondary)',
+        secondary: 'rgb(var(--color-raw-secondary) / <alpha-value>)', // supports opacity
         'secondary-darker': 'var(--color-secondary-darker)',
         'secondary-darkest': 'var(--color-secondary-darkest)',
         'secondary-black': 'var(--color-secondary-black)',

package/translations/de.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Die URL des OGC API-Dienstes eingeben",
   "map.select.layer": "Datenquelle",
   "map.select.style": "Style",
+  "map.style.default": "Standard",
   "map.wfs.urlInput.hint": "Die WFS URL eingeben",
   "map.wms.urlInput.hint": "Die WMS URL eingeben",
   "multiselect.filter.placeholder": "Suche",
@@ -604,6 +605,7 @@
   "search.filters.producerOrg": "Herausgeber",
   "search.filters.publicationYear": "Veröffentlichungsjahr",
   "search.filters.publisherOrg": "Vertreiber",
+  "search.filters.recordKind": "",
   "search.filters.recordKind.all": "Alle",
   "search.filters.recordKind.dataset": "Datensätze",
   "search.filters.recordKind.reuse": "Wiederverwendungen",
@@ -642,7 +644,6 @@
   "service.metadata.spatialExtent": "Räumliche Ausdehnung",
   "share.tab.permalink": "Teilen",
   "share.tab.webComponent": "Integrieren",
-  "stac.filter.reset": "Filter zurücksetzen",
   "stac.filter.enable": "",
   "stac.filter.reset": "",
   "stac.results.noResults": "Ihre Suchfilter lieferten keine Ergebnisse",

package/translations/en.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Enter OGC API service URL",
   "map.select.layer": "Data source",
   "map.select.style": "Style",
+  "map.style.default": "Default",
   "map.wfs.urlInput.hint": "Enter WFS service URL",
   "map.wms.urlInput.hint": "Enter WMS service URL",
   "multiselect.filter.placeholder": "Search",

package/translations/es.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Por defecto",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/fr.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Entrez l'URL du service OGC API",
   "map.select.layer": "Source de données",
   "map.select.style": "Style",
+  "map.style.default": "Par défaut",
   "map.wfs.urlInput.hint": "Entrez l'URL du service WFS",
   "map.wms.urlInput.hint": "Entrez l'URL du service WMS",
   "multiselect.filter.placeholder": "Rechercher",

package/translations/it.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Inserisci URL del servizio OGC API",
   "map.select.layer": "Sorgente dati",
   "map.select.style": "Style",
+  "map.style.default": "Predefinito",
   "map.wfs.urlInput.hint": "Inserisci URL del servizio WFS",
   "map.wms.urlInput.hint": "Inserisci URL del servizio WMS",
   "multiselect.filter.placeholder": "Cerca",

package/translations/nl.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Standaard",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/pt.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Padrão",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/sk.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "Zdroj dát",
   "map.select.style": "",
+  "map.style.default": "Predvolené",
   "map.wfs.urlInput.hint": "Zadajte URL adresu služby WFS",
   "map.wms.urlInput.hint": "Zadajte URL adresu služby WMS",
   "multiselect.filter.placeholder": "Hľadať",