geonetwork-ui 2.4.0-dev.e1bb65c4 → 2.4.0-dev.e550c0b3

package/src/libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  AfterViewInit,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  Renderer2,
+  ViewContainerRef,
+  EmbeddedViewRef,
+} from '@angular/core'
+import tippy, { Instance } from 'tippy.js'
+
+@Component({
+  selector: 'gn-ui-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.css'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
+  @Input() content: string | TemplateRef<any>
+  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+
+  private tippyInstance: Instance
+  private view: EmbeddedViewRef<any>
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private renderer: Renderer2
+  ) {}
+
+  private getContent(): string | HTMLElement {
+    if (this.content instanceof TemplateRef) {
+      if (this.view) {
+        this.view.destroy()
+      }
+      this.view = this.viewContainerRef.createEmbeddedView(this.content)
+      this.view.detectChanges()
+      const wrapper = this.renderer.createElement('div') // Create a wrapper div
+      this.view.rootNodes.forEach((node) => {
+        this.renderer.appendChild(wrapper, node) // Append each root node to the wrapper
+      })
+      return wrapper
+    }
+    return this.content
+  }
+
+  ngAfterViewInit(): void {
+    this.tippyInstance = tippy(this.popoverContent.nativeElement as Element, {
+      content: this.getContent(),
+      allowHTML: true,
+      theme: this.theme,
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['theme']) {
+      this.theme = changes['theme'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setProps({ theme: this.theme })
+      }
+    }
+    if (changes['content']) {
+      this.content = changes['content'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setContent(this.getContent())
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.tippyInstance) {
+      this.tippyInstance.destroy()
+    }
+    if (this.view) {
+      this.view.destroy()
+    }
+  }
+}

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

@@ -1,3 +1,4 @@
 export * from './lib/app-config'
 export * from './lib/fixtures'
 export * from './lib/model'
+export * from './lib/map-layers'

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

@@ -1,6 +1,6 @@
 import { MapConfig } from './model'
 
-export const CONFIG_OK = `
+export const okAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -63,9 +63,9 @@ my.sample.text = "Un bon exemple de texte."
 "my.quoted.text" = 'du texte entre guillements.'
 `
 
-export const CONFIG_WITH_TRANSLATIONS = CONFIG_OK
+export const appConfigWithTranslationFixture = () => okAppConfigFixture()
 
-export const CONFIG_MINIMAL = `
+export const minimalAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -77,7 +77,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const MAP_CONFIG_FIXTURE: MapConfig = {
+export const mapConfigFixture = (): MapConfig => ({
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
@@ -101,15 +101,15 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
       NAME: 'some_layername',
     },
   ],
-}
+})
 
-export const CONFIG_MALFORMED = `
+export const malformedConfigFixture = () => `
 {
   "I thought": "we were still doing json"
 }
 `
 
-export const CONFIG_MISSING_MANDATORY = `
+export const missingMandatoryConfigFixture = () => `
 [theme]
 primary_color = "#093564"
 secondary_color = "#c2e9dc"
@@ -117,7 +117,7 @@ background_color = "#fdfbff"
 main_font = 'sans-serif'
 `
 
-export const CONFIG_WRONG_LANGUAGE_CODE = `
+export const wrongLanguageCodeConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -132,7 +132,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const CONFIG_UNRECOGNIZED_KEYS = `
+export const unrecognizedKeysConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="

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

@@ -0,0 +1,31 @@
+import { LayerConfig } from './model'
+import { MapContextLayer } from '@geospatial-sdk/core'
+
+export function getMapContextLayerFromConfig(
+  config: LayerConfig
+): MapContextLayer {
+  switch (config.TYPE) {
+    case 'wms':
+      return {
+        type: 'wms',
+        url: config.URL,
+        name: config.NAME,
+      }
+    case 'wfs':
+      return {
+        type: 'wfs',
+        url: config.URL,
+        featureType: config.NAME,
+      }
+    case 'xyz':
+      return {
+        type: config.TYPE,
+        url: config.URL,
+      }
+    case 'geojson':
+      return {
+        type: config.TYPE,
+        ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
+      }
+  }
+}

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

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
+
 export enum LinkUsage {
   API = 'api',
   MAP_API = 'mapapi',
@@ -15,7 +16,7 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetDistribution): LinkUsage[] {
+  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
     switch (link.type) {
       case 'service': {
         switch (link.accessServiceProtocol) {
@@ -51,7 +52,7 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetDistribution, usage: LinkUsage) {
+  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

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

@@ -1,5 +1,5 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -131,7 +131,7 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetDistribution): number {
+export function getLinkPriority(link: DatasetOnlineResource): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -155,7 +155,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 +172,7 @@ export function getFileFormat(link: DatasetDistribution): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -194,7 +194,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -214,7 +214,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':

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/index.ts

@@ -3,6 +3,7 @@ export * from './event'
 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/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',

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,8 +75,10 @@
       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 {
@@ -74,10 +86,6 @@
     margin-bottom: -0.325em;
     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
@@ -113,10 +133,12 @@
   .gn-ui-badge {
     --rounded: var(--gn-ui-badge-rounded, 0.25em);
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
+    --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-medium 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 {
@@ -134,10 +156,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 {