geonetwork-ui 2.3.0-dev.c3722986 → 2.3.0-dev.cc25794c

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

@@ -0,0 +1,97 @@
+<div class="flex flex-col h-full">
+  <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
+    <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+  </ng-container>
+  <ng-template #withGenericWrapper>
+    <gn-ui-form-field-wrapper
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    >
+      <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+    </gn-ui-form-field-wrapper>
+  </ng-template>
+</div>
+
+<ng-template #fieldContent>
+  <ng-container *ngIf="isTitle">
+    <div class="flex justify-between items-center gap-3">
+      <h2
+        #titleInput
+        class="grow text-3xl font-normal"
+        [gnUiEditableLabel]="true"
+        (editableLabelChanged)="formControl.setValue($event)"
+      >
+        {{ formControl.value }}
+      </h2>
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+        (click)="focusTitleInput()"
+        >edit</span
+      >
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2"
+        [matTooltip]="config.hintKey | translate"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="isAbstract">
+    <gn-ui-form-field-rich
+      class="h-[8rem]"
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    ></gn-ui-form-field-rich>
+  </ng-container>
+  <ng-container *ngIf="isLicenses">
+    <gn-ui-form-field-license
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+    ></gn-ui-form-field-license>
+  </ng-container>
+  <ng-container *ngIf="isResourceUpdated">
+    <gn-ui-form-field-resource-updated
+      [control]="formControl"
+    ></gn-ui-form-field-resource-updated>
+  </ng-container>
+  <ng-container *ngIf="isUpdateFrequency">
+    <gn-ui-form-field-update-frequency
+      [control]="formControl"
+    ></gn-ui-form-field-update-frequency>
+  </ng-container>
+  <ng-container *ngIf="isSimpleField">
+    <gn-ui-form-field-simple
+      [type]="simpleType"
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-simple>
+  </ng-container>
+  <ng-container *ngIf="isFileField">
+    <gn-ui-form-field-file
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-file>
+  </ng-container>
+  <ng-container *ngIf="isArrayField">
+    <gn-ui-form-field-array></gn-ui-form-field-array>
+  </ng-container>
+  <ng-container *ngIf="isObjectField">
+    <gn-ui-form-field-object></gn-ui-form-field-object>
+  </ng-container>
+  <ng-container *ngIf="isSpatialExtentField">
+    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
+  </ng-container>
+  <ng-container *ngIf="isTemporalExtentField">
+    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>
+  </ng-container>
+  <div
+    *ngIf="isFieldInvalid && config.invalidHintKey"
+    class="mt-2 text-pink-500 text-sm field-invalid-hint"
+  >
+    {{ config.invalidHintKey | translate }}
+  </div>
+</ng-template>

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

@@ -0,0 +1,142 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { Observable } from 'rxjs'
+import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
+import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
+import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
+import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
+import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.component'
+import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
+import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
+import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
+import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
+import { FormFieldConfig } from './form-field.model'
+import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
+
+@Component({
+  selector: 'gn-ui-form-field',
+  templateUrl: './form-field.component.html',
+  styleUrls: ['./form-field.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    EditableLabelDirective,
+    MatIconModule,
+    MatTooltipModule,
+    FormFieldWrapperComponent,
+    FormFieldLicenseComponent,
+    FormFieldResourceUpdatedComponent,
+    FormFieldUpdateFrequencyComponent,
+    FormFieldSimpleComponent,
+    FormFieldRichComponent,
+    FormFieldObjectComponent,
+    FormFieldSpatialExtentComponent,
+    FormFieldTemporalExtentComponent,
+    FormFieldFileComponent,
+    FormFieldArrayComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldComponent {
+  @Input() model: string
+  @Input() config: FormFieldConfig
+  @Input() set value(v: unknown) {
+    this.formControl.setValue(v, {
+      emitEvent: false,
+    })
+  }
+  @Output() valueChange: Observable<unknown>
+
+  @ViewChild('titleInput') titleInput: ElementRef
+
+  formControl = new FormControl()
+
+  constructor() {
+    this.valueChange = this.formControl.valueChanges
+  }
+
+  focusTitleInput() {
+    this.titleInput.nativeElement.children[0].focus()
+  }
+
+  get simpleType() {
+    return this.config.type as
+      | 'date'
+      | 'url'
+      | 'text'
+      | 'number'
+      | 'list'
+      | 'toggle'
+  }
+
+  get isSimpleField() {
+    return (
+      this.config.type === 'text' ||
+      this.config.type === 'number' ||
+      this.config.type === 'date' ||
+      this.config.type === 'list' ||
+      this.config.type === 'url' ||
+      this.config.type === 'toggle'
+    )
+  }
+  get isFileField() {
+    return this.config.type === 'file'
+  }
+  get isSpatialExtentField() {
+    return this.config.type === 'spatial_extent'
+  }
+  get isTemporalExtentField() {
+    return this.config.type === 'temporal_extent'
+  }
+  get isArrayField() {
+    return this.config.type === 'array'
+  }
+  get isObjectField() {
+    return this.config.type === 'object'
+  }
+
+  get isFieldOk() {
+    return !this.config.locked && !this.config.invalid
+  }
+  get isFieldLocked() {
+    return this.config.locked
+  }
+  get isFieldInvalid() {
+    return !this.config.locked && this.config.invalid
+  }
+
+  get isTitle() {
+    return this.model === 'title'
+  }
+  get isAbstract() {
+    return this.model === 'abstract'
+  }
+  get isLicenses() {
+    return this.model === 'licenses'
+  }
+  get isResourceUpdated() {
+    return this.model === 'resourceUpdated'
+  }
+  get isUpdateFrequency() {
+    return this.model === 'updateFrequency'
+  }
+
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
+  }
+}

package/src/libs/feature/editor/src/lib/{record-form → components/record-form}/record-form.component.html

@@ -2,6 +2,7 @@
   <ng-container *ngFor="let field of fields$ | async; trackBy: fieldTracker">
     <gn-ui-form-field
       *ngIf="field.config.formFieldConfig && !field.config.hidden"
+      [model]="field.config.model"
       [config]="field.config.formFieldConfig"
       [value]="field.value"
       (valueChange)="handleFieldValueChange(field, $event)"

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

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
-import { EditorFacade } from '../+state/editor.facade'
-import { EditorFieldState, EditorFieldValue } from '../models/fields.model'
+import { EditorFacade } from '../../+state/editor.facade'
+import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
+import { FormFieldComponent } from './form-field'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -10,7 +10,7 @@ import { EditorFieldState, EditorFieldValue } from '../models/fields.model'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiInputsModule],
+  imports: [CommonModule, FormFieldComponent],
 })
 export class RecordFormComponent {
   fields$ = this.facade.recordFields$

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -1,20 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatFormFieldModule } from '@angular/material/form-field'
-import { WizardComponent } from './components/wizard/wizard.component'
-import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
-import { CommonModule } from '@angular/common'
-import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
-import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
-import * as fromEditor from './+state/editor.reducer'
+import { StoreModule } from '@ngrx/store'
+import { TranslateModule } from '@ngx-translate/core'
 import { EditorEffects } from './+state/editor.effects'
 import { EditorFacade } from './+state/editor.facade'
+import * as fromEditor from './+state/editor.reducer'
+import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
+import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
+import { WizardComponent } from './components/wizard/wizard.component'
 
 @NgModule({
   declarations: [
@@ -42,5 +42,5 @@ import { EditorFacade } from './+state/editor.facade'
   providers: [EditorFacade],
 })
 export class FeatureEditorModule {}
-export * from './services/wizard.service'
 export * from './models/index'
+export * from './services/wizard.service'

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

@@ -1,3 +1,4 @@
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { EditorFieldsConfig } from './models/fields.model'
 
 export const DEFAULT_FIELDS: EditorFieldsConfig = [
@@ -32,4 +33,25 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
     },
     onSaveProcess: '${dateNow()}',
   },
+  {
+    model: 'licenses',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.license'),
+      type: 'list',
+    },
+  },
+  {
+    model: 'resourceUpdated',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.resourceUpdated'),
+      type: 'date',
+    },
+  },
+  {
+    model: 'updateFrequency',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.updateFrequency'),
+      type: 'text',
+    },
+  },
 ]

package/src/libs/feature/editor/src/lib/models/fields.model.ts

@@ -1,4 +1,4 @@
-import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
+import { FormFieldConfig } from '../components/record-form/form-field'
 
 // Expressions should be enclosed in `${}` to be recognized as such
 // eg. ${dateNow()}

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-2 my-2">
   <div class="flex items-center gap-4">
-    <div class="flex-grow rounded-md border-2 border-gray-200">
+    <div class="grow rounded-md border-2 border-gray-200">
       <gn-ui-drag-and-drop-file-input
         (fileChange)="handleFileChange($event)"
         [accept]="acceptedMimeType.join(',')"

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.css

@@ -0,0 +1,7 @@
+.dropdown-content {
+  display: none;
+}
+
+.relative:hover .dropdown-content {
+  display: block;
+}

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html

@@ -4,8 +4,7 @@
     (valueChange)="urlChange.next($event)"
     [hint]="'map.ogc.urlInput.hint' | translate"
     class="w-96"
-  >
-  </gn-ui-text-input>
+  ></gn-ui-text-input>
 </div>
 
 <div *ngIf="errorMessage" class="text-red-500 mt-2">
@@ -16,21 +15,36 @@
   <p class="loading-message" translate>map.loading.service</p>
 </div>
 
-<div *ngIf="!loading && layers.length > 0">
-  <h2 class="font-bold" translate>map.layers.available</h2>
-  <ng-container *ngFor="let layer of layers">
-    <div class="flex items-center justify-between my-2 layer-item-tree">
-      <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
-        {{ layer }}
-      </p>
-      <gn-ui-button
-        class="layer-add-btn"
-        type="primary"
-        (buttonClick)="addLayer(layer)"
-        extraClass="text-sm !px-2 !py-1"
-        translate
-        ><span translate> map.layer.add </span></gn-ui-button
+<ng-container *ngFor="let layer of layers">
+  <div
+    *ngIf="shouldDisplayLayer(layer)"
+    class="flex items-center justify-between my-2 layer-item-tree"
+  >
+    <div class="flex flex-col items-start w-full">
+      <p
+        class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap"
+        [title]="layer.name"
       >
+        {{ layer.name }}
+      </p>
+      <div class="flex justify-between items-center w-full">
+        <gn-ui-dropdown-selector
+          [title]="'Add Layer As' | translate"
+          [choices]="getLayerChoices(layer)"
+          (selectValue)="onLayerTypeSelect(layer.name, $event)"
+          [selected]="selectedLayerTypes[layer.name]"
+          extraBtnClass="w-6 h-5 !text-sm !px-2 !py-1"
+        ></gn-ui-dropdown-selector>
+        <gn-ui-button
+          class="layer-add-btn"
+          type="primary"
+          (buttonClick)="addLayer(layer.name, selectedLayerTypes[layer.name])"
+          extraClass="text-sm !px-2 !py-1"
+          translate
+        >
+          <span translate>map.layer.add</span>
+        </gn-ui-button>
+      </div>
     </div>
-  </ng-container>
-</div>
+  </div>
+</ng-container>

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -14,7 +14,7 @@ import {
   MapContextLayerTypeEnum,
 } from '../map-context/map-context.model'
 import { TranslateModule } from '@ngx-translate/core'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { MapLayer } from '../+state/map.models'
 
@@ -30,18 +30,16 @@ export class AddLayerFromOgcApiComponent implements OnInit {
   @Output() layerAdded = new EventEmitter<MapLayer>()
 
   urlChange = new Subject<string>()
-  layerUrl = ''
   loading = false
-  layers: string[] = []
-  ogcEndpoint: OgcApiEndpoint = null
+  layers: any[] = []
   errorMessage: string | null = null
+  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => {
       this.loadLayers()
-      this.changeDetectorRef.detectChanges() // manually trigger change detection
     })
   }
 
@@ -49,14 +47,13 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     this.errorMessage = null
     try {
       this.loading = true
-      if (this.ogcUrl.trim() === '') {
+      if (!this.ogcUrl.trim()) {
         this.layers = []
         return
       }
-      this.ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
-
-      // Currently only supports feature collections
-      this.layers = await this.ogcEndpoint.featureCollections
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      this.layers = await ogcEndpoint.allCollections
+      this.setDefaultLayerTypes()
     } catch (error) {
       const err = error as Error
       this.layers = []
@@ -67,14 +64,72 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     }
   }
 
-  async addLayer(layer: string) {
-    this.layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer)
+  setDefaultLayerTypes() {
+    this.layers.forEach((layer) => {
+      const choices = this.getLayerChoices(layer)
+      if (choices.length > 0) {
+        this.selectedLayerTypes[layer.name] = choices[0].value
+      }
+    })
+  }
 
-    const layerToAdd: MapContextLayerModel = {
-      name: layer,
-      url: this.layerUrl,
-      type: MapContextLayerTypeEnum.OGCAPI,
+  getLayerChoices(layer: any) {
+    const choices = []
+    if (layer.hasRecords) {
+      choices.push({ label: 'Records', value: 'record' })
+    }
+    if (layer.hasFeatures) {
+      choices.push({ label: 'Features', value: 'features' })
+    }
+    if (layer.hasVectorTiles) {
+      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' })
+    }
+    if (layer.hasMapTiles) {
+      choices.push({ label: 'Map Tiles', value: 'mapTiles' })
+    }
+    return choices
+  }
+
+  shouldDisplayLayer(layer: any) {
+    return (
+      layer.hasRecords ||
+      layer.hasFeatures ||
+      layer.hasVectorTiles ||
+      layer.hasMapTiles
+    )
+  }
+
+  onLayerTypeSelect(layerName: string, selectedType: any) {
+    this.selectedLayerTypes[layerName] = selectedType
+      ? selectedType
+      : this.getLayerChoices(layerName)[0]?.value
+  }
+
+  async addLayer(layer: string, layerType: any) {
+    try {
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      let layerUrl: string
+
+      if (layerType === 'vectorTiles') {
+        layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+      } else if (layerType === 'mapTiles') {
+        layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+          outputFormat: 'json',
+        })
+      }
+
+      const layerToAdd: MapContextLayerModel = {
+        name: layer,
+        url: layerUrl,
+        type: MapContextLayerTypeEnum.OGCAPI,
+        layerType: layerType,
+      }
+      this.layerAdded.emit({ ...layerToAdd, title: layer })
+    } catch (error) {
+      const err = error as Error
+      console.error('Error adding layer:', err.message)
     }
-    this.layerAdded.emit({ ...layerToAdd, title: layer })
   }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -20,29 +20,35 @@ export interface MapContextLayerWmsModel {
   type: 'wms'
   url: string
   name: string
+  attributions?: string
 }
 
 export interface MapContextLayerWmtsModel {
   type: 'wmts'
   url: string
   name: string
+  attributions?: string
 }
 
 interface MapContextLayerWfsModel {
   type: 'wfs'
   url: string
   name: string
+  attributions?: string
 }
 
 export interface MapContextLayerOgcapiModel {
   type: 'ogcapi'
   url: string
   name: string
+  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
+  attributions?: string
 }
 
 interface LayerXyzModel {
   type: 'xyz'
   name?: string
+  attributions?: string
 }
 interface LayerXyzModelWithUrl extends LayerXyzModel {
   url: string
@@ -58,6 +64,7 @@ export type MapContextLayerXyzModel =
 
 interface LayerGeojson {
   type: 'geojson'
+  attributions?: string
 }
 interface LayerGeojsonWithUrl extends LayerGeojson {
   url: string