geonetwork-ui 2.4.0-dev.f6f2f023 → 2.4.0-dev.fdf8f64b

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

@@ -1,6 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
@@ -12,15 +18,17 @@ import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/in
   imports: [DropdownSelectorComponent],
 })
 export class FormFieldLicenseComponent {
-  @Input() control!: FormControl
   @Input() label: string
+  @Input() value: Array<Constraint>
+
+  @Output() valueChange: EventEmitter<Array<Constraint>> = new EventEmitter()
 
   get selected() {
-    return this.control.value[0]?.text
+    return this.value[0]?.text
   }
 
   onSelectValue(value: unknown) {
-    this.control.setValue([{ text: value }])
+    this.valueChange.emit([{ text: value as string }])
   }
 
   choices = [

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

@@ -0,0 +1 @@
+<gn-ui-map-container [context]="mapContext$ | async"></gn-ui-map-container>

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

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Geometry } from 'geojson'
+import GeoJSON, { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
+import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { Polygon } from 'ol/geom'
+import {
+  createViewFromLayer,
+  MapContext,
+  MapContextLayer,
+} from '@geospatial-sdk/core'
+import { MapContainerComponent } from '../../../../../../../../../libs/ui/map/src'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { switchMap } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-form-field-map-container',
+  standalone: true,
+  imports: [CommonModule, MapContainerComponent],
+  templateUrl: './form-field-map-container.component.html',
+  styleUrls: ['./form-field-map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldMapContainerComponent {
+  @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
+    this.spatialExtents$.next(value)
+  }
+  spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
+  mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
+    switchMap(async (extents) => {
+      if (extents.length === 0) {
+        return null // null extent means default view
+      }
+      const featureCollection: GeoJSONFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      }
+      extents.forEach((extent) => {
+        if (extent.geometry) {
+          featureCollection.features.push({
+            type: 'Feature',
+            properties: {},
+            geometry: extent.geometry,
+          })
+        } else if (extent.bbox?.length >= 0) {
+          featureCollection.features.push({
+            type: 'Feature',
+            properties: {},
+            geometry: this.bboxCoordsToGeometry(extent.bbox),
+          })
+        }
+      })
+
+      const layer: MapContextLayer = {
+        type: 'geojson',
+        data: featureCollection,
+        label: 'Spatial extents',
+        style: {
+          'stroke-color': 'black',
+          'stroke-width': 2,
+        },
+      }
+      const view = await createViewFromLayer(layer)
+      return {
+        view,
+        layers: [layer],
+      }
+    })
+  )
+
+  error = ''
+
+  bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
+    const geometry = new Polygon([
+      [
+        [bbox[0], bbox[1]],
+        [bbox[0], bbox[3]],
+        [bbox[2], bbox[3]],
+        [bbox[2], bbox[1]],
+        [bbox[0], bbox[1]],
+      ],
+    ])
+
+    return new GeoJSON().writeGeometryObject(geometry)
+  }
+}

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

@@ -0,0 +1,43 @@
+<gn-ui-file-input
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  (fileChange)="handleFileChange($event)"
+  (uploadCancel)="handleUploadCancel()"
+  [uploadProgress]="uploadProgress"
+  (urlChange)="handleUrlChange($event)"
+></gn-ui-file-input>
+<div class="h-[8px]"></div>
+<gn-ui-sortable-list
+  [items]="linkResources"
+  (itemsOrderChange)="handleResourcesChange($event)"
+  [elementTemplate]="template"
+>
+</gn-ui-sortable-list>
+<ng-template #template let-onlineResource let-index="index">
+  <gn-ui-online-resource-card
+    [onlineResource]="onlineResource"
+    (modifyClick)="handleResourceModify(onlineResource, index)"
+  ></gn-ui-online-resource-card>
+</ng-template>
+
+<ng-template #dialogTemplate let-onlineResource>
+  <div class="flex flex-col gap-[16px]">
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.title
+      </h3>
+      <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+    </div>
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.description
+      </h3>
+      <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+    </div>
+    <span class="w-full border-b border-gray-300"></span>
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="true"
+      [value]="onlineResource.url"
+    ></gn-ui-url-input>
+  </div>
+</ng-template>

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

@@ -0,0 +1,185 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import {
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileInputComponent,
+  TextAreaComponent,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
+import {
+  ModalDialogComponent,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/layout/src'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { Subscription } from 'rxjs'
+import { MatDialog } from '@angular/material/dialog'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-online-link-resources',
+  templateUrl: './form-field-online-link-resources.component.html',
+  styleUrls: ['./form-field-online-link-resources.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FileInputComponent,
+    CommonModule,
+    SortableListComponent,
+    OnlineResourceCardComponent,
+    TextInputComponent,
+    TextAreaComponent,
+    UrlInputComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldOnlineLinkResourcesComponent {
+  @Input() metadataUuid: string
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources
+    this.linkResources = onlineResources.filter(
+      (res): res is OnlineLinkResource => res.type === 'link'
+    )
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<OnlineResource>
+
+  private allResources: OnlineResource[] = []
+  linkResources: OnlineLinkResource[] = []
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private platformService: PlatformServiceInterface,
+    private cd: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            const newResource: OnlineLinkResource = {
+              type: 'link',
+              url: new URL(event.attachment.url),
+              name: event.attachment.fileName,
+            }
+            this.valueChange.emit([...this.allResources, newResource])
+          }
+        },
+        error: (error: Error) => this.handleError(error.message),
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const name = url.split('/').pop()
+      const newLink: OnlineLinkResource = {
+        type: 'link',
+        url: new URL(url),
+        name,
+      }
+      this.valueChange.emit([...this.allResources, newLink])
+    } catch (e) {
+      this.handleError((e as Error).message)
+    }
+  }
+
+  handleResourcesChange(items: unknown[]) {
+    const links = items as OnlineResource[]
+    const newResources = [
+      ...this.allResources.filter((r) => r.type !== 'link'),
+      ...links,
+    ]
+    this.valueChange.emit(newResources)
+  }
+
+  handleResourceModify(resource: OnlineLinkResource, index: number) {
+    this.openEditDialog(resource, index)
+  }
+
+  private handleError(error: string) {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant(
+        'editor.record.onlineResourceError.title'
+      ),
+      text: `${this.translateService.instant(
+        'editor.record.onlineResourceError.body'
+      )} ${error}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.onlineResourceError.closeMessage'
+      ),
+    })
+  }
+
+  private openEditDialog(resource: OnlineLinkResource, index: number) {
+    const resourceCopy = {
+      ...resource,
+    }
+    this.dialog
+      .open(ModalDialogComponent, {
+        width: '800px',
+        data: {
+          title: this.translateService.instant(
+            'editor.record.form.field.onlineResource.dialogTitle'
+          ),
+          body: this.dialogTemplate,
+          bodyContext: resourceCopy,
+          confirmText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.confirm'
+          ),
+          cancelText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.cancel'
+          ),
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed: boolean) => {
+        if (!confirmed) return
+        const newLinks = [...this.linkResources]
+        newLinks.splice(index, 1, resourceCopy)
+        this.valueChange.emit([
+          ...this.allResources.filter((r) => r.type !== 'link'),
+          ...newLinks,
+        ])
+      })
+  }
+}

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

@@ -0,0 +1,71 @@
+<gn-ui-switch-toggle
+  [options]="typeOptions"
+  (selectedValue)="onSelectedTypeChange($event.value)"
+  extraClasses="grow"
+  data-cy="online-resources-type"
+></gn-ui-switch-toggle>
+<div class="h-[8px]"></div>
+<gn-ui-file-input
+  *ngIf="selectedType === 'download'"
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  (fileChange)="handleFileChange($event)"
+  (uploadCancel)="handleUploadCancel()"
+  [uploadProgress]="uploadProgress"
+  (urlChange)="handleDownloadUrlChange($event)"
+></gn-ui-file-input>
+<div
+  *ngIf="selectedType === 'service'"
+  class="w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]"
+>
+  <gn-ui-online-service-resource-input
+    [service]="newService"
+  ></gn-ui-online-service-resource-input>
+  <span class="w-full border-b border-gray-300"></span>
+  <gn-ui-url-input
+    class="w-full"
+    [urlCanParse]="true"
+    (valueChange)="handleServiceUrlChange($event)"
+  ></gn-ui-url-input>
+</div>
+<div class="h-[8px]"></div>
+<gn-ui-sortable-list
+  [items]="notLinkResources"
+  (itemsOrderChange)="handleResourcesChange($event)"
+  [elementTemplate]="template"
+>
+</gn-ui-sortable-list>
+<ng-template #template let-onlineResource let-index="index">
+  <gn-ui-online-resource-card
+    [onlineResource]="onlineResource"
+    (modifyClick)="handleResourceModify(onlineResource, index)"
+  ></gn-ui-online-resource-card>
+</ng-template>
+
+<ng-template #dialogTemplate let-onlineResource>
+  <div class="flex flex-col gap-[16px]">
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.title
+      </h3>
+      <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+    </div>
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.description
+      </h3>
+      <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+    </div>
+    <ng-container *ngIf="onlineResource.type === 'service'">
+      <span class="w-full border-b border-gray-300"></span>
+      <gn-ui-online-service-resource-input
+        [service]="onlineResource"
+      ></gn-ui-online-service-resource-input>
+    </ng-container>
+    <span class="w-full border-b border-gray-300"></span>
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="true"
+      [value]="onlineResource.url"
+    ></gn-ui-url-input>
+  </div>
+</ng-template>

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

@@ -0,0 +1,241 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  DatasetDownloadDistribution,
+  DatasetServiceDistribution,
+  OnlineResource,
+  ServiceEndpoint,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import {
+  FileInputComponent,
+  SwitchToggleComponent,
+  SwitchToggleOption,
+  TextAreaComponent,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import {
+  ModalDialogComponent,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/layout/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { Subscription } from 'rxjs'
+import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
+import { OnlineServiceResourceInputComponent } from '../../../online-service-resource-input/online-service-resource-input.component'
+
+type OnlineNotLinkResource =
+  | DatasetDownloadDistribution
+  | DatasetServiceDistribution
+  | ServiceEndpoint
+
+@Component({
+  selector: 'gn-ui-form-field-online-resources',
+  templateUrl: './form-field-online-resources.component.html',
+  styleUrls: ['./form-field-online-resources.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    SwitchToggleComponent,
+    FileInputComponent,
+    OnlineServiceResourceInputComponent,
+    UrlInputComponent,
+    SortableListComponent,
+    OnlineResourceCardComponent,
+    TextInputComponent,
+    TextAreaComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldOnlineResourcesComponent {
+  @Input() metadataUuid: string
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources
+    this.notLinkResources = onlineResources.filter(
+      (res): res is OnlineNotLinkResource => res.type !== 'link'
+    )
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<OnlineResource>
+
+  typeOptions: SwitchToggleOption[] = [
+    {
+      label: marker('editor.record.form.field.onlineResource.toggle.dataset'),
+      value: 'download',
+      checked: true,
+    },
+    {
+      label: marker('editor.record.form.field.onlineResource.toggle.service'),
+      value: 'service',
+      checked: false,
+    },
+  ]
+  selectedType: 'download' | 'service' = 'download'
+
+  private allResources: OnlineResource[] = []
+  notLinkResources: OnlineNotLinkResource[] = []
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+  newService = {
+    type: 'service',
+    accessServiceProtocol: 'ogcFeatures',
+    identifierInService: '',
+  } as Omit<DatasetServiceDistribution, 'url'>
+
+  protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private platformService: PlatformServiceInterface,
+    private cd: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
+
+  onSelectedTypeChange(selectedType: unknown) {
+    this.selectedType = selectedType as 'download' | 'service'
+  }
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            const newResource: DatasetDownloadDistribution = {
+              type: 'download',
+              url: new URL(event.attachment.url),
+              name: event.attachment.fileName,
+              sizeBytes: event.sizeBytes, // WARNING: this is the only time that sizeBytes is set
+            }
+            this.valueChange.emit([...this.allResources, newResource])
+          }
+        },
+        error: (error: Error) => this.handleError(error.message),
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleDownloadUrlChange(url: string) {
+    try {
+      const name = url.split('/').pop()
+      const newLink: DatasetDownloadDistribution = {
+        type: 'download',
+        url: new URL(url),
+        name,
+      }
+      this.valueChange.emit([...this.allResources, newLink])
+    } catch (e) {
+      this.handleError((e as Error).message)
+    }
+  }
+
+  handleServiceUrlChange(url: string) {
+    this.valueChange.emit([
+      ...this.allResources,
+      {
+        ...this.newService,
+        url: new URL(url),
+      },
+    ])
+  }
+
+  handleServiceModify(
+    oldService: DatasetServiceDistribution,
+    newService: DatasetServiceDistribution
+  ) {
+    oldService.accessServiceProtocol = newService.accessServiceProtocol
+    oldService.identifierInService = newService.identifierInService
+    oldService.url = newService.url
+  }
+
+  handleResourcesChange(items: unknown[]) {
+    const notLinks = items as OnlineNotLinkResource[]
+    const newResources = [
+      ...this.allResources.filter((r) => r.type === 'link'),
+      ...notLinks,
+    ]
+    this.valueChange.emit(newResources)
+  }
+
+  handleResourceModify(resource: OnlineNotLinkResource, index: number) {
+    this.openEditDialog(resource, index)
+  }
+
+  private handleError(error: string) {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant(
+        'editor.record.onlineResourceError.title'
+      ),
+      text: `${this.translateService.instant(
+        'editor.record.onlineResourceError.body'
+      )} ${error}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.onlineResourceError.closeMessage'
+      ),
+    })
+  }
+
+  private openEditDialog(resource: OnlineNotLinkResource, index: number) {
+    const resourceCopy = {
+      ...resource,
+    }
+    this.dialog
+      .open(ModalDialogComponent, {
+        width: '800px',
+        data: {
+          title: this.translateService.instant(
+            'editor.record.form.field.onlineResource.dialogTitle'
+          ),
+          body: this.dialogTemplate,
+          bodyContext: resourceCopy,
+          confirmText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.confirm'
+          ),
+          cancelText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.cancel'
+          ),
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed: boolean) => {
+        if (!confirmed) return
+        const newNotLinks = [...this.notLinkResources]
+        newNotLinks.splice(index, 1, resourceCopy)
+        this.valueChange.emit([
+          ...this.allResources.filter((r) => r.type === 'link'),
+          ...newNotLinks,
+        ])
+      })
+  }
+}

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

@@ -0,0 +1,6 @@
+<gn-ui-check-toggle
+  [label]="'editor.record.form.classification.opendata' | translate"
+  [value]="openData"
+  (toggled)="onOpenDataToggled($event)"
+  data-cy="openDataToggle"
+></gn-ui-check-toggle>