geonetwork-ui 2.4.0-dev.613f7319 → 2.4.0-dev.618ec561

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -14,7 +14,9 @@ import {
   UpdateFrequencyCode,
   UpdateFrequencyCustom,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThesaurusModel } from '../../../../../../libs/common/domain/src/lib/model/thesaurus'
 import format from 'date-fns/format'
+import { Geometry } from 'geojson'
 import {
   ChainableFunction,
   fallback,
@@ -44,8 +46,8 @@ import {
   setTextContent,
 } from '../xml-utils'
 import { readKind } from './read-parts'
+import { writeGeometry } from './utils/geometry'
 import { namePartsToFull } from './utils/individual-name'
-import { ThesaurusModel } from '../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 export function writeCharacterString(
   text: string
@@ -101,6 +103,14 @@ export function writeDate(
   )
 }
 
+export function writeDecimal(
+  decimal: number
+): ChainableFunction<XmlElement, XmlElement> {
+  return tap(
+    pipe(findChildOrCreate('gco:Decimal'), setTextContent(decimal.toString()))
+  )
+}
+
 export function getProgressCode(status: RecordStatus): string {
   switch (status) {
     case 'completed':
@@ -1184,3 +1194,62 @@ export function writeTemporalExtents(
     )
   )(rootEl)
 }
+
+export function writeSpatialExtents(record: DatasetRecord, rootEl: XmlElement) {
+  const appendBoundingPolygon = (geometry?: Geometry) => {
+    if (!geometry) return null
+    return pipe(
+      createElement('gmd:EX_BoundingPolygon'),
+      appendChildren(
+        pipe(
+          createElement('gmd:polygon'),
+          appendChildren(() => writeGeometry(geometry))
+        )
+      )
+    )
+  }
+
+  const appendGeographicBoundingBox = (
+    bbox?: [number, number, number, number]
+  ) => {
+    if (!bbox) return null
+    return pipe(
+      createElement('gmd:EX_GeographicBoundingBox'),
+      appendChildren(
+        pipe(createElement('gmd:westBoundLongitude'), writeDecimal(bbox[0])),
+        pipe(createElement('gmd:eastBoundLongitude'), writeDecimal(bbox[2])),
+        pipe(createElement('gmd:southBoundLatitude'), writeDecimal(bbox[1])),
+        pipe(createElement('gmd:northBoundLatitude'), writeDecimal(bbox[3]))
+      )
+    )
+  }
+
+  const appendGeographicDescription = (description?: string) => {
+    if (!description) return null
+    return pipe(
+      createElement('gmd:EX_GeographicDescription'),
+      createChild('gmd:geographicIdentifier'),
+      createChild('gmd:MD_Identifier'),
+      createChild('gmd:code'),
+      writeCharacterString(description)
+    )
+  }
+
+  pipe(
+    findOrCreateIdentification(),
+    findNestedChildOrCreate('gmd:extent', 'gmd:EX_Extent'),
+    removeChildrenByName('gmd:geographicElement'),
+    appendChildren(
+      ...record.spatialExtents.map((extent) =>
+        pipe(
+          createElement('gmd:geographicElement'),
+          appendChildren(
+            appendBoundingPolygon(extent.geometry),
+            appendGeographicBoundingBox(extent.bbox),
+            appendGeographicDescription(extent.description)
+          )
+        )
+      )
+    )
+  )(rootEl)
+}

package/src/libs/api/metadata-converter/src/lib/xml-utils.ts

@@ -6,6 +6,7 @@ import {
   XmlText,
 } from '@rgrove/parse-xml'
 import { ChainableFunction, fallback } from './function-utils'
+
 export { XmlDocument, XmlElement } from '@rgrove/parse-xml'
 
 export class XmlParseError extends Error {
@@ -115,6 +116,10 @@ export function allChildrenElement(element: XmlElement): Array<XmlElement> {
   ] as Array<XmlElement>
 }
 
+export function firstChildElement(element: XmlElement): XmlElement {
+  return allChildrenElement(element)[0] ?? null
+}
+
 /**
  * Will return all matching elements nested according to the given
  * names (similar to a path), starting form the input element;
@@ -228,6 +233,7 @@ export function xmlToString(
 ${padding}<${el.name}${attrs}/>
 ${parentPadding}`
   }
+
   return `
 ${padding}<${el.name}${attrs}>${children}</${el.name}>
 ${parentPadding}`
@@ -307,11 +313,13 @@ function getTreeRoot(element: XmlElement): XmlElement {
 
 // stays on the parent element
 // if the given elements are part of a subtree, will add the root of subtree
+// will filter out falsy elements
 export function appendChildren(
   ...childrenFns: Array<ChainableFunction<void, XmlElement>>
 ): ChainableFunction<XmlElement, XmlElement> {
   return (element) => {
     if (!element) return null
+    childrenFns = childrenFns.filter((fn) => fn)
     element.children.push(...childrenFns.map((fn) => fn()).map(getTreeRoot))
     element.children.forEach((el) => (el.parent = element))
     return element

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -159,7 +159,8 @@ export interface GraphicOverview {
 }
 
 export interface DatasetSpatialExtent {
-  geometry: Geometry
+  bbox?: [number, number, number, number]
+  geometry?: Geometry
   description?: string
 }
 

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -7201,11 +7201,7 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = [
-      'application/xml',
-      'application/json',
-      'application/x-www-form-urlencoded',
-    ]
+    const consumes: string[] = ['application/xml']
     const httpContentTypeSelected: string | undefined =
       this.configuration.selectHeaderContentType(consumes)
     if (httpContentTypeSelected !== undefined) {

package/src/libs/data-access/gn4/src/spec.yaml

@@ -1832,14 +1832,6 @@ paths:
             schema:
               type: string
               description: XML fragment.
-          application/json:
-            schema:
-              type: string
-              description: XML fragment.
-          application/x-www-form-urlencoded:
-            schema:
-              type: string
-              description: XML fragment.
       responses:
         default:
           description: default response

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -1,8 +1,10 @@
 <gn-ui-image-input
   [maxSizeMB]="5"
   [previewUrl]="resourceUrl"
-  [altText]="resourceFileName"
+  [altText]="resourceAltText"
+  [formControl]="formControl"
   (fileChange)="handleFileChange($event)"
   (urlChange)="handleUrlChange($event)"
+  (altTextChange)="handleAltTextChange($event)"
   (delete)="handleDelete()"
 ></gn-ui-image-input>

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -2,12 +2,24 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
+  OnChanges,
   OnInit,
+  Output,
+  SimpleChanges,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
 import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+import { FormControl } from '@angular/forms'
+import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib/model/record'
+
+const extractFileNameFromUrl = (url: string): string => {
+  const pattern = new RegExp(`attachments/([^/?#]+)(?:[/?#]|$)`, 'i')
+  const match = url.match(pattern)
+  return match ? match[1] : ''
+}
 
 @Component({
   selector: 'gn-ui-overview-upload',
@@ -17,11 +29,15 @@ import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
   styleUrls: ['./overview-upload.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverviewUploadComponent implements OnInit {
+export class OverviewUploadComponent implements OnInit, OnChanges {
   @Input() metadataUuid: string
+  @Input() formControl!: FormControl
+  @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
+  @Output() altTextChange: EventEmitter<string> = new EventEmitter()
 
-  resourceFileName: string
-  resourceUrl: string
+  resourceAltText = '' // = ressourceFileName by default
+  resourceFileName = ''
+  resourceUrl: URL
 
   constructor(
     private recordsApiService: RecordsApiService,
@@ -29,42 +45,122 @@ export class OverviewUploadComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.recordsApiService
-      .getAllResources(this.metadataUuid)
-      .subscribe((resources) => {
-        this.resourceFileName = resources[0]?.filename
-        this.resourceUrl = resources[0]?.url
+    this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
+      next: (resources) => {
+        if (resources && resources.length > 0) {
+          this.resourceUrl = new URL(resources[0]?.url)
+          this.resourceAltText =
+            this.resourceAltText === ''
+              ? resources[0].filename
+              : this.resourceAltText
+          this.resourceFileName = extractFileNameFromUrl(resources[0]?.url)
+        } else {
+          this.resourceUrl = null
+          this.resourceAltText = ''
+          this.resourceFileName = ''
+        }
+
         this.cd.markForCheck()
-      })
+      },
+      error: this.errorHandle,
+    })
   }
 
   handleFileChange(file: File) {
     this.recordsApiService
       .putResource(this.metadataUuid, file, 'public')
-      .subscribe((resource) => {
-        this.resourceFileName = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .subscribe({
+        next: (resource) => {
+          this.resourceUrl = new URL(resource.url)
+          this.resourceAltText = resource.filename
+
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
 
   handleUrlChange(url: string) {
     this.recordsApiService
       .putResourceFromURL(this.metadataUuid, url, 'public')
-      .subscribe((resource) => {
-        this.resourceFileName = resource.filename
-        this.resourceUrl = resource.url
-        this.cd.markForCheck()
+      .subscribe({
+        next: (resource) => {
+          this.resourceUrl = new URL(resource.url)
+          this.resourceAltText = resource.filename
+
+          this.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
 
+  handleAltTextChange(newAltText: string) {
+    this.resourceAltText = newAltText
+
+    this.overviewChange.emit({
+      url: this.resourceUrl,
+      description: this.resourceAltText,
+    })
+    this.cd.markForCheck()
+  }
+
   handleDelete() {
     this.recordsApiService
       .delResource(this.metadataUuid, this.resourceFileName)
-      .subscribe(() => {
-        this.resourceFileName = null
-        this.resourceUrl = null
-        this.cd.markForCheck()
+      .subscribe({
+        next: () => {
+          this.resourceAltText = null
+          this.resourceUrl = null
+
+          this.overviewChange.emit(null)
+
+          this.cd.markForCheck()
+        },
+        error: this.errorHandle,
       })
   }
+
+  private errorHandle = (error: never) => {
+    console.error(error)
+
+    this.resourceUrl = null
+    this.resourceAltText = ''
+    this.resourceFileName = ''
+
+    this.overviewChange.emit(null)
+
+    this.cd.markForCheck()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const overviewChanges = changes['formControl']
+    if (
+      overviewChanges &&
+      overviewChanges.currentValue !== overviewChanges.previousValue
+    ) {
+      let overview: GraphicOverview
+      if (
+        overviewChanges.currentValue.value &&
+        overviewChanges.currentValue.value.length > 0
+      ) {
+        overview = overviewChanges.currentValue.value[0] as GraphicOverview
+      } else {
+        return
+      }
+      if (overview.description && overview.description !== '') {
+        this.resourceAltText = overview.description
+        this.cd.markForCheck()
+      }
+    }
+  }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.html

@@ -0,0 +1,5 @@
+<gn-ui-overview-upload
+  [metadataUuid]="metadataUuid"
+  [formControl]="control"
+  (overviewChange)="handleOverviewChange($event)"
+></gn-ui-overview-upload>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
+import { FormControl } from '@angular/forms'
+import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'gn-ui-form-field-overviews',
+  templateUrl: './form-field-overviews.component.html',
+  styleUrls: ['./form-field-overviews.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, OverviewUploadComponent],
+})
+export class FormFieldOverviewsComponent {
+  @Input() metadataUuid: string
+  @Input() control!: FormControl
+
+  handleOverviewChange(overView: GraphicOverview | null) {
+    this.control.setValue(overView ? [overView] : [])
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -76,6 +76,12 @@
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
+  <ng-container *ngIf="isGraphicOverview">
+    <gn-ui-form-field-overviews
+      [control]="formControl"
+      [metadataUuid]="metadataUuid$ | async"
+    ></gn-ui-form-field-overviews>
+  </ng-container>
   <ng-container *ngIf="isKeywords">
     <gn-ui-form-field-keywords
       [control]="formControl"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -28,6 +28,9 @@ import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/for
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 import { CatalogRecordKeys } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
+import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
+import { map, take } from 'rxjs/operators'
+import { EditorFacade } from '../../../+state/editor.facade'
 import { FormFieldConfig } from '../../../models'
 
 @Component({
@@ -55,6 +58,7 @@ import { FormFieldConfig } from '../../../models'
     FormFieldArrayComponent,
     FormFieldKeywordsComponent,
     TranslateModule,
+    FormFieldOverviewsComponent,
   ],
 })
 export class FormFieldComponent {
@@ -70,9 +74,14 @@ export class FormFieldComponent {
 
   @ViewChild('titleInput') titleInput: ElementRef
 
+  metadataUuid$ = this.facade.record$.pipe(
+    take(1),
+    map((record) => record.uniqueIdentifier)
+  )
+
   formControl = new FormControl()
 
-  constructor() {
+  constructor(private facade: EditorFacade) {
     this.valueChange = this.formControl.valueChanges
   }
 
@@ -101,6 +110,9 @@ export class FormFieldComponent {
   get isSpatialExtentField() {
     return this.model === 'spatialExtents'
   }
+  get isGraphicOverview() {
+    return this.model === 'overviews'
+  }
   get isSimpleField() {
     return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
   }

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts

@@ -24,6 +24,7 @@ export class RecordFormComponent {
     if (!model) {
       return
     }
+    console.log(newValue)
     this.facade.updateRecordField(model, newValue)
   }
 

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -83,6 +83,13 @@ export const RECORD_ABSTRACT_FIELD: EditorField = {
   },
 }
 
+export const RECORD_GRAPHICAL_OVERVIEW_FIELD: EditorField = {
+  model: 'overviews',
+  formFieldConfig: {
+    labelKey: marker('editor.record.form.field.overviews'),
+  },
+}
+
 /************************************************************
  ***************          SECTIONS          *****************
  ************************************************************
@@ -90,7 +97,11 @@ export const RECORD_ABSTRACT_FIELD: EditorField = {
 
 export const TITLE_SECTION: EditorSection = {
   hidden: false,
-  fields: [RECORD_TITLE_FIELD, RECORD_ABSTRACT_FIELD],
+  fields: [
+    RECORD_TITLE_FIELD,
+    RECORD_ABSTRACT_FIELD,
+    RECORD_GRAPHICAL_OVERVIEW_FIELD,
+  ],
 }
 
 export const ABOUT_SECTION: EditorSection = {

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -32,7 +32,7 @@ import { ProxyService } from '../../../../../../libs/util/shared/src'
 import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
 import { LONLAT_CRS_CODES } from '../constant/projections'
 import { fromEPSGCode, register } from 'ol/proj/proj4'
-import proj4 from 'proj4/dist/proj4'
+import proj4 from 'proj4'
 import { defaults as defaultControls } from 'ol/control/defaults'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
@@ -220,11 +220,15 @@ export class MapUtilsService {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
-    // transform an array of geojson geometries into a bbox
+    // extend all the spatial extents into an including bbox
     const totalExtent = record.spatialExtents.reduce(
       (prev, curr) => {
-        const geom = GEOJSON.readGeometry(curr.geometry)
-        return extend(prev, geom.getExtent())
+        if ('bbox' in curr) return extend(prev, curr.bbox)
+        else if ('geometry' in curr) {
+          const geom = GEOJSON.readGeometry(curr.geometry)
+          return extend(prev, geom.getExtent())
+        }
+        return prev
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,5 +1,8 @@
 <div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
+  <p
+    *ngIf="helperText"
+    class="flex-none mb-2 font-medium text-sm text-gray-900"
+  >
     {{ helperText }}
   </p>
   <div class="flex-1" [hidden]="preview">

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,7 +1,7 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <div>
+      <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
@@ -47,19 +47,23 @@
       </ng-template>
     </ng-container>
     <ng-container *ngIf="legalConstraints.length">
-      <gn-ui-markdown-parser
-        *ngFor="let constraint of legalConstraints"
-        [textContent]="constraint"
-      >
-      </gn-ui-markdown-parser>
+      <div class="mb-6">
+        <gn-ui-markdown-parser
+          *ngFor="let constraint of legalConstraints"
+          [textContent]="constraint"
+        >
+        </gn-ui-markdown-parser>
+      </div>
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
         <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
           record.metadata.otherConstraints
         </h5>
-        <gn-ui-markdown-parser [textContent]="constraint">
-        </gn-ui-markdown-parser>
+        <div class="mb-6">
+          <gn-ui-markdown-parser [textContent]="constraint">
+          </gn-ui-markdown-parser>
+        </div>
       </div>
     </ng-container>
 

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -21,8 +21,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +34,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>