geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.1d2ade24e

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

@@ -1,5 +1,14 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  ServiceProtocol,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  OgcApiEndpoint,
+  WfsEndpoint,
+  WmsEndpoint,
+  WmtsEndpoint,
+} from '@camptocamp/ogc-client'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -7,7 +16,7 @@ export const FORMATS = {
   csv: {
     extensions: ['csv'],
     priority: 1,
-    color: '#559d7f',
+    color: '#a6d6c0',
     mimeTypes: ['text/csv', 'application/csv'],
   },
   excel: {
@@ -19,7 +28,7 @@ export const FORMATS = {
       'openxmlformats-officedocument',
     ],
     priority: 2,
-    color: '#0f4395',
+    color: '#acc5e4',
     mimeTypes: [
       'application/vnd.ms-excel',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@@ -28,31 +37,31 @@ export const FORMATS = {
   geojson: {
     extensions: ['geojson'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/geo+json', 'application/vnd.geo+json'],
   },
   json: {
     extensions: ['json'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/json'],
   },
   shp: {
     extensions: ['shp', 'shape', 'zipped-shapefile'],
     priority: 4,
-    color: '#328556',
+    color: '#b2d8ba',
     mimeTypes: ['x-gis/x-shapefile'],
   },
   gml: {
     extensions: ['gml'],
     priority: 5,
-    color: '#c92bce',
+    color: '#e3b3e5',
     mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
   },
   kml: {
     extensions: ['kml', 'kmz'],
     priority: 6,
-    color: '#348009',
+    color: '#c1e6a0',
     mimeTypes: [
       'application/vnd.google-earth.kml+xml',
       'application/vnd.google-earth.kmz',
@@ -61,55 +70,55 @@ export const FORMATS = {
   gpkg: {
     extensions: ['gpkg', 'geopackage'],
     priority: 7,
-    color: '#ea79ba',
+    color: '#f7cce6',
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
     extensions: ['zip', 'tar.gz'],
     priority: 8,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
     priority: 9,
-    color: '#db544a',
+    color: '#f5b2a3',
     mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
     priority: 9,
-    color: '#673ab7',
+    color: '#d1c1e9',
     mimeTypes: ['image/jpg'],
   },
   svg: {
     extensions: ['svg'],
     priority: 10,
-    color: '#d98294',
+    color: '#f3c1c9',
     mimeTypes: ['image/svg+xml'],
   },
   dxf: {
     extensions: ['dxf'],
     priority: 11,
-    color: '#de630b',
+    color: '#f6ceac',
     mimeTypes: ['application/x-dxf', 'image/x-dxf'],
   },
   html: {
     extensions: ['html', 'htm'],
     priority: 12,
-    color: '#f2bb3a',
+    color: '#FFF2CC',
     mimeTypes: ['text/html'],
   },
   fgb: {
     extensions: ['fgb', 'flatgeobuf'],
     priority: 13,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/flatgeobuf'],
   },
   jsonfg: {
     extensions: ['jsonfg', 'jsonfgc'],
     priority: 14,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: [
       'application/vnd.ogc.fg+json',
       'application/vnd.ogc.fg+json;compatibility=geojson',
@@ -131,14 +140,14 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetDistribution): number {
+export function getLinkPriority(link: DatasetOnlineResource): number {
   return getFormatPriority(getFileFormat(link))
 }
 
 export function getFileFormatFromServiceOutput(
   serviceOutput: string
 ): FileFormat | null {
-  function formatMatcher(format: typeof FORMATS[FileFormat]): boolean {
+  function formatMatcher(format: (typeof FORMATS)[FileFormat]): boolean {
     const output = serviceOutput.toLowerCase()
     return (
       format.extensions.some((extension: string) =>
@@ -155,7 +164,7 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetDistribution): FileFormat {
+export function getFileFormat(link: DatasetOnlineResource): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -172,7 +181,7 @@ export function getFileFormat(link: DatasetDistribution): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -194,7 +203,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -214,7 +223,7 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetDistribution): string {
+export function getLinkLabel(link: DatasetOnlineResource): string {
   let format = ''
   switch (link.type) {
     case 'service':
@@ -242,6 +251,44 @@ export function getLinkLabel(link: DatasetDistribution): string {
   return format ? `${label} (${format})` : label
 }
 
+export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
+  switch (serviceProtocol) {
+    case 'ogcFeatures': {
+      const layers = await new OgcApiEndpoint(url).allCollections
+      return layers
+    }
+    case 'wfs': {
+      const endpointWfs = await new WfsEndpoint(url).isReady()
+      return endpointWfs.getFeatureTypes()
+    }
+    case 'wms': {
+      const endpointWms = await new WmsEndpoint(url).isReady()
+      return endpointWms
+        .getLayers()
+        .flatMap(wmsLayerFlatten)
+        .filter((l) => l.name)
+    }
+    case 'wmts': {
+      const endpointWmts = await new WmtsEndpoint(url).isReady()
+      return endpointWmts.getLayers()
+    }
+    default:
+      return undefined
+  }
+}
+
+function wmsLayerFlatten(layerFull) {
+  const layer = {
+    title: layerFull.title,
+    name: layerFull.name,
+    abstract: layerFull.abstract,
+  }
+
+  return 'children' in layerFull && Array.isArray(layerFull.children)
+    ? [layer, ...layerFull.children.flatMap(wmsLayerFlatten)]
+    : [layer]
+}
+
 export function getMimeTypeForFormat(format: FileFormat): string | null {
   return format in FORMATS ? FORMATS[format.toLowerCase()].mimeTypes[0] : null
 }

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

@@ -1,4 +1,5 @@
 import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
+import { Location } from '@angular/common'
 
 export const PROXY_PATH = new InjectionToken<string>('proxyPath')
 
@@ -6,7 +7,10 @@ export const PROXY_PATH = new InjectionToken<string>('proxyPath')
   providedIn: 'root',
 })
 export class ProxyService {
-  constructor(@Optional() @Inject(PROXY_PATH) private proxyPath: string) {}
+  constructor(
+    @Optional() @Inject(PROXY_PATH) private proxyPath: string,
+    private location: Location
+  ) {}
 
   /**
    * Transforms the URL to go through a proxy specified with the PROXY_PATH
@@ -16,7 +20,7 @@ export class ProxyService {
   getProxiedUrl(url: string): string {
     if (!this.proxyPath) return url
     const urlObj = new URL(url)
-    const current = window.location
+    const current = new URL(this.location.path(), window.location.href)
     const proxyUrl = new URL(this.proxyPath, current.toString()).toString()
     if (
       current.hostname === urlObj.hostname &&
@@ -28,7 +32,7 @@ export class ProxyService {
     if (url.indexOf(proxyUrl) === 0) return url
     return new URL(
       `${this.proxyPath}${encodeURIComponent(url)}`,
-      window.location.toString()
+      window.location.href
     ).toString()
   }
 }

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

@@ -109,6 +109,7 @@ export class ThemeService {
     applyColor('gray-700', scale(0.7))
     applyColor('gray-800', scale(0.8))
     applyColor('gray-900', scale(0.9))
+    applyColor('gray-950', scale(0.95))
 
     if (mainFont) {
       document.documentElement.style.setProperty(`--font-family-main`, mainFont)

package/src/libs/util/shared/src/lib/utils/bytes-convert.ts

@@ -1,3 +1,6 @@
-export function megabytesToBytes(megabytes) {
+export function megabytesToBytes(megabytes: number) {
   return megabytes * 1048576
 }
+export function bytesToMegabytes(bytes: number) {
+  return bytes / 1048576
+}

package/src/libs/util/shared/src/lib/utils/format-fields.ts

@@ -0,0 +1,11 @@
+export function formatUserInfo(
+  userInfo: string | unknown,
+  displayCount = false
+): string {
+  const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
+  const count = displayCount ? ` ${infos[3].split(' ')[1]}` : ''
+  if (infos && infos.length === 4) {
+    return `${infos[2]} ${infos[1]}${count}`
+  }
+  return undefined
+}

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

@@ -1,8 +1,10 @@
 export * from './bytes-convert'
 export * from './event'
+export * from './format-fields'
 export * from './fuzzy-filter'
 export * from './geojson'
 export * from './image-resize'
+export * from './no-duplicate-file-name'
 export * from './parse'
 export * from './remove-whitespace'
 export * from './sort-by'

package/src/libs/util/shared/src/lib/utils/no-duplicate-file-name.ts

@@ -0,0 +1,23 @@
+export function noDuplicateFileName(
+  fileName: string,
+  fileNameList: string[]
+): string {
+  if (fileNameList.includes(fileName)) {
+    const fileNameParts = fileName.split('.')
+    let extension = ''
+    let baseName = fileName
+
+    if (fileNameParts.length > 1) {
+      extension = fileNameParts.pop() as string
+      baseName = fileNameParts.join('.')
+    }
+
+    if (extension) {
+      fileName = `${baseName}_${Date.now()}.${extension}`
+    } else {
+      fileName = `${baseName}_${Date.now()}`
+    }
+  }
+
+  return fileName
+}

package/src/libs/util/shared/src/lib/utils/temporal-extent-union.ts

@@ -1,4 +1,9 @@
-export function getTemporalRangeUnion(ranges) {
+export function getTemporalRangeUnion(
+  ranges: {
+    start?: Date
+    end?: Date
+  }[]
+) {
   let earliestStartDate = Infinity
   let latestEndDate = -Infinity
   if (ranges.length) {

package/tailwind.base.config.js

@@ -30,6 +30,7 @@ module.exports = {
           700: 'var(--color-gray-700)',
           800: 'var(--color-gray-800)',
           900: 'var(--color-gray-900)',
+          950: 'var(--color-gray-950)',
         },
         orange: {
           50: '#fff8f1',
@@ -43,6 +44,8 @@ module.exports = {
           800: '#8a2c0d',
           900: '#73230d',
         },
+        purple: '#9747FF',
+        'purple-light': '#DDC3FF',
       },
       fontFamily: {
         sans: 'var(--font-family-main, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")',

package/tailwind.base.css

@@ -4,6 +4,16 @@
 
 /* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
 @layer components {
+  .container-sm {
+    max-width: 640px;
+  }
+  .container-md {
+    max-width: 768px;
+  }
+  .container-lg {
+    max-width: 1024px;
+  }
+
   /* TODO: add prefix */
   .card-shadow {
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
@@ -65,19 +75,17 @@
       text-[length:--font-size] leading-none
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
       bg-[--background] transition-all duration-100
-      focus:outline-none
-      disabled:opacity-50 disabled:pointer-events-none;
+      outline-none
+      relative
+      disabled:opacity-50 disabled:pointer-events-none
+      focus:z-10 active:z-10 hover:z-10;
   }
   /* makes sure icons will not make the buttons grow vertically */
-  .gn-ui-btn mat-icon.mat-icon {
-    margin-top: -0.325em;
-    margin-bottom: -0.325em;
+  .gn-ui-btn ng-icon {
+    margin-top: -0.5em;
+    margin-bottom: -0.5em;
     flex-shrink: 0;
   }
-  /* makes spinners appear in the right color */
-  .gn-ui-btn mat-spinner circle {
-    stroke: currentColor !important;
-  }
 
   .gn-ui-btn-default {
     @apply gn-ui-btn text-white
@@ -97,6 +105,18 @@
       border 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;
+  }
+
+  .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;
+  }
+
   .gn-ui-btn-outline {
     @apply gn-ui-btn text-main
     hover:text-primary-darker focus:text-primary-darker active:text-primary-black
@@ -109,22 +129,35 @@
       border border-white focus:ring-4 focus:ring-gray-300;
   }
 
+  /* DROPDOWN MULTISELECT CLASS */
+  .gn-ui-multiselect-counter {
+    --text-color: var(--gn-ui-multiselect-counter-text-color, white);
+    --background-color: var(
+      --gn-ui-multiselect-counter-background-color,
+      var(--color-primary-lightest)
+    );
+    @apply bg-[color:--background-color] text-[color:--text-color];
+  }
+
   /* BADGE CLASS */
   .gn-ui-badge {
     --rounded: var(--gn-ui-badge-rounded, 0.25em);
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
+    --font-weight: var(--gn-ui-badge-font-weight, 500);
+    --text-size: var(--gn-ui-badge-text-size, 0.875em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
-    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
-      font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
+    --opacity: var(--gn-ui-badge-opacity, 0.7);
+    @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;
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */
-  .gn-ui-badge mat-icon.mat-icon {
+  .gn-ui-badge ng-icon {
     margin-top: -0.325em;
     margin-bottom: -0.325em;
     flex-shrink: 0;
     vertical-align: middle;
-    font-size: 1.4em;
+    font-size: 1.1em;
     width: 1em;
     height: 1em;
   }
@@ -134,10 +167,33 @@
     @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
   }
 
+  /* GENERIC TEXT INPUT (textarea, text field, url input...) */
+  .gn-ui-text-input {
+    --rounded: var(--gn-ui-text-input-rounded, 0.25em);
+    --padding: var(--gn-ui-text-input-padding, 0.6em);
+    --font-size: var(--gn-ui-text-input-font-size, 1em);
+    --border-size: var(--gn-ui-text-input-border-size, 2px);
+    @apply appearance-none border-[length:--border-size] p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
+    text-[length:--font-size] leading-none border-gray-300 text-main placeholder-gray-800
+    focus:outline-none focus:border-main hover:border-main
+    disabled:cursor-not-allowed disabled:border-gray-100 disabled:placeholder-gray-300 disabled:text-gray-700 disabled:bg-white;
+  }
+
+  /* GENERIC CARD */
+  .gn-ui-card {
+    @apply flex flex-row border border-gray-200 rounded-xl p-4 gap-2 w-full;
+  }
+
   /* TODO: add prefix */
   .card-icon {
     @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
   }
+
+  /* makes spinners appear in the right color */
+  mat-spinner circle,
+  mat-progress-spinner circle {
+    stroke: currentColor !important;
+  }
 }
 
 html {