geonetwork-ui 2.4.0-dev.2cc6f5b1 → 2.4.0-dev.344a92f2

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

@@ -1,44 +1,40 @@
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnDestroy,
+  OnChanges,
   OnInit,
+  Output,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
-import {
-  AutocompleteComponent,
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../../../../../libs/ui/inputs/src'
-import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
 import {
   Individual,
   Organization,
   Role,
   RoleLabels,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
+import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import {
   debounceTime,
   distinctUntilChanged,
   firstValueFrom,
-  Observable,
-  Subscription,
   switchMap,
 } from 'rxjs'
-import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
-import { ContactCardComponent } from '../../../contact-card/contact-card.component'
-import {
-  DynamicElement,
-  SortableListComponent,
-} from '../../../../../../../../../libs/ui/elements/src'
-import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
+import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -55,21 +51,17 @@ import { map } from 'rxjs/operators'
     TranslateModule,
     ContactCardComponent,
     SortableListComponent,
+    MatIconModule,
   ],
 })
 export class FormFieldContactsForResourceComponent
-  implements OnInit, OnDestroy
+  implements OnChanges, OnInit
 {
-  @Input() control: FormControl<Individual[]>
-
-  subscription: Subscription = new Subscription()
-
-  allUsers$: Observable<UserModel[]>
+  @Input() value: Individual[]
+  @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contactsForRessourceByRole: Map<Role, Individual[]> = new Map()
 
-  contactsAsDynElemByRole: Map<Role, DynamicElement[]> = new Map()
-
   rolesToPick: Role[] = [
     'resource_provider',
     'custodian',
@@ -84,10 +76,13 @@ export class FormFieldContactsForResourceComponent
 
   constructor(
     private platformServiceInterface: PlatformServiceInterface,
-    private organizationsServiceInterface: OrganizationsServiceInterface,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    this.allUsers$ = this.platformServiceInterface.getUsers()
+    private organizationsServiceInterface: OrganizationsServiceInterface
+  ) {}
+
+  ngOnChanges() {
+    this.updateContactsForRessource()
+    this.manageRoleSectionsToDisplay(this.value)
+    this.filterRolesToPick()
   }
 
   async ngOnInit(): Promise<void> {
@@ -97,20 +92,8 @@ export class FormFieldContactsForResourceComponent
       ).map((organization) => [organization.name, organization])
     )
     this.updateContactsForRessource()
-    this.manageRoleSectionsToDisplay(this.control.value)
+    this.manageRoleSectionsToDisplay(this.value)
     this.filterRolesToPick()
-
-    this.changeDetectorRef.markForCheck()
-
-    this.subscription.add(
-      this.control.valueChanges.subscribe((contactsForResource) => {
-        this.updateContactsForRessource()
-        this.manageRoleSectionsToDisplay(contactsForResource)
-        this.filterRolesToPick()
-
-        this.changeDetectorRef.markForCheck()
-      })
-    )
   }
 
   addRoleToDisplay(roleToAdd: string) {
@@ -125,31 +108,7 @@ export class FormFieldContactsForResourceComponent
   }
 
   updateContactsForRessource() {
-    this.contactsForRessourceByRole = this.control.value.reduce(
-      (acc, contact) => {
-        const completeOrganization = this.allOrganizations.get(
-          contact.organization.name
-        )
-
-        const updatedContact = {
-          ...contact,
-          organization:
-            completeOrganization ??
-            ({ name: contact.organization.name } as Organization),
-        }
-
-        if (!acc.has(contact.role)) {
-          acc.set(contact.role, [])
-        }
-
-        acc.get(contact.role).push(updatedContact)
-
-        return acc
-      },
-      new Map<Role, Individual[]>()
-    )
-
-    this.contactsAsDynElemByRole = this.control.value.reduce((acc, contact) => {
+    this.contactsForRessourceByRole = this.value.reduce((acc, contact) => {
       const completeOrganization = this.allOrganizations.get(
         contact.organization.name
       )
@@ -161,24 +120,14 @@ export class FormFieldContactsForResourceComponent
           ({ name: contact.organization.name } as Organization),
       }
 
-      const contactAsDynElem = {
-        component: ContactCardComponent,
-        inputs: {
-          contact: updatedContact,
-          removable: false,
-        },
-      } as DynamicElement
-
       if (!acc.has(contact.role)) {
         acc.set(contact.role, [])
       }
 
-      acc.get(contact.role).push(contactAsDynElem)
+      acc.get(contact.role).push(updatedContact)
 
       return acc
-    }, new Map<Role, DynamicElement[]>())
-
-    this.changeDetectorRef.markForCheck()
+    }, new Map<Role, Individual[]>())
   }
 
   manageRoleSectionsToDisplay(contactsForResource: Individual[]) {
@@ -194,26 +143,21 @@ export class FormFieldContactsForResourceComponent
   }
 
   removeContact(index: number) {
-    const newContactsforRessource = this.control.value.filter(
-      (_, i) => i !== index
-    )
-    this.control.setValue(newContactsforRessource)
+    const newContactsforRessource = this.value.filter((_, i) => i !== index)
+    this.valueChange.emit(newContactsforRessource)
   }
 
-  handleContactsChanged(event: DynamicElement[]) {
-    const newContactsOrdered = event.map(
-      (contactAsDynElem) => contactAsDynElem.inputs['contact']
-    ) as Individual[]
-
-    const role = newContactsOrdered[0].role
+  handleContactsChanged(items: unknown[]) {
+    const contacts = items as Individual[]
+    const role = contacts[0].role
 
-    this.contactsForRessourceByRole.set(role, newContactsOrdered)
+    this.contactsForRessourceByRole.set(role, contacts)
 
     const newControlValue = Array.from(
       this.contactsForRessourceByRole.values()
     ).flat()
 
-    this.control.setValue(newControlValue)
+    this.valueChange.emit(newControlValue)
   }
 
   protected roleToLabel(role: string): string {
@@ -233,7 +177,7 @@ export class FormFieldContactsForResourceComponent
    */
   autoCompleteAction = (query: string) => {
     const fuzzyFilter = createFuzzyFilter(query)
-    return this.allUsers$.pipe(
+    return this.platformServiceInterface.getUsers().pipe(
       switchMap((users) => [
         users.filter((user) => fuzzyFilter(user.username)),
       ]),
@@ -246,26 +190,23 @@ export class FormFieldContactsForResourceComponent
   /**
    * gn-ui-autocomplete
    */
-  addContact(contact: UserModel, role: string) {
+  addContact(contact: unknown, role: string) {
+    const newContact = contact as UserModel
     const newContactsForRessource = {
-      firstName: contact.name ?? '',
-      lastName: contact.surname ?? '',
+      firstName: newContact.name ?? '',
+      lastName: newContact.surname ?? '',
       organization:
-        this.allOrganizations.get(contact.organisation) ??
-        ({ name: contact.organisation } as Organization),
-      email: contact.email ?? '',
+        this.allOrganizations.get(newContact.organisation) ??
+        ({ name: newContact.organisation } as Organization),
+      email: newContact.email ?? '',
       role,
       address: '',
       phone: '',
       position: '',
     } as Individual
 
-    const newControlValue = [...this.control.value, newContactsForRessource]
-
-    this.control.setValue(newControlValue)
-  }
+    const newControlValue = [...this.value, newContactsForRessource]
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.valueChange.emit(newControlValue)
   }
 }

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

@@ -0,0 +1,4 @@
+<gn-ui-date-picker
+  [date]="value"
+  (dateChange)="valueChange.emit($event)"
+></gn-ui-date-picker>

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

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-form-field-date-updated',
+  templateUrl: './form-field-date-updated.component.html',
+  styleUrls: ['./form-field-date-updated.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DatePickerComponent],
+})
+export class FormFieldDateUpdatedComponent {
+  @Input() value: Date
+  @Output() valueChange: EventEmitter<Date> = new EventEmitter()
+}

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

@@ -1,19 +1,10 @@
 <div class="flex flex-col gap-3">
-  <gn-ui-autocomplete
-    [placeholder]="'Search for keywords in all thesaurus'"
-    [displayWithFn]="displayWithFn"
-    [action]="autoCompleteAction"
-    (itemSelected)="handleItemSelection($event)"
-    [preventCompleteOnSelection]="true"
-    [minCharacterCount]="0"
+  <gn-ui-generic-keywords
+    [keywords]="filteredKeywords"
+    [keywordTypes]="keywordTypes"
+    [placeholder]="'editor.form.keywords.placeholder' | translate"
+    (changedKeywords)="handleKeywordsChange($event)"
     [allowSubmit]="false"
-  ></gn-ui-autocomplete>
-  <div class="flex gap-2 flex-wrap">
-    <gn-ui-badge
-      *ngFor="let keyword of control.value; let index = index"
-      [removable]="true"
-      (badgeRemoveClicked)="removeKeyword(index)"
-      >{{ keyword.label }}</gn-ui-badge
-    >
-  </div>
+  >
+  </gn-ui-generic-keywords>
 </div>

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

@@ -1,17 +1,25 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import {
   AutocompleteComponent,
   DropdownSelectorComponent,
   UiInputsModule,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
-import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-
-type AutocompleteItem = { title: string; value: Keyword }
+import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { firstValueFrom, map } from 'rxjs'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
+import { all } from 'ol/loadingstrategy'
 
 @Component({
   selector: 'gn-ui-form-field-keywords',
@@ -25,55 +33,46 @@ type AutocompleteItem = { title: string; value: Keyword }
     CommonModule,
     UiWidgetsModule,
     AutocompleteComponent,
+    GenericKeywordsComponent,
+    TranslateModule,
   ],
 })
 export class FormFieldKeywordsComponent {
-  @Input() control: FormControl<Keyword[]>
+  @Input() value: Keyword[]
+  @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
-  displayWithFn = (item: AutocompleteItem) => {
-    return `${item.title} (${item.value.thesaurus?.name})`
-  }
+  keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
 
-  autoCompleteAction = (query: string) => {
-    return this.platformService
-      .searchKeywords(query, ['temporal', 'theme', 'other'])
-      .pipe(
-        map((keywords) =>
-          keywords.map((keyword) => {
-            return { title: keyword.label, value: keyword }
-          })
-        )
-      )
+  get filteredKeywords(): Keyword[] {
+    return (
+      this.value?.filter(
+        (keyword) =>
+          keyword.type !== 'place' && // filter out place keywords
+          !SPATIAL_SCOPES.some(
+            (spatialScope) => spatialScope.label === keyword.label
+          ) // filter out keywords matching spatialScope keys
+      ) || []
+    )
   }
 
-  constructor(private platformService: PlatformServiceInterface) {}
+  constructor(private editorFacade: EditorFacade) {}
 
-  handleItemSelection(item: AutocompleteItem) {
-    this.addKeyword(item.value)
-  }
-
-  addKeyword(keyword: Keyword) {
-    const addedKeywords = [...this.control.value, keyword]
-
-    // remove duplicates from keyword
-    const filteredKeywords = addedKeywords.filter((value, index, self) => {
-      return (
-        index ===
-        self.findIndex(
-          (t) =>
-            t?.label === value?.label &&
-            t?.thesaurus?.id === value?.thesaurus?.id &&
-            t?.type === value?.type
+  async handleKeywordsChange(keywords: Keyword[]) {
+    const filteredKeywords = await firstValueFrom(
+      this.editorFacade.record$.pipe(
+        map((record) =>
+          record.keywords.filter(
+            (k) =>
+              k.type === 'place' || // get back place keyword
+              SPATIAL_SCOPES.some(
+                (spatialScope) => spatialScope.label === k.label // get back spatialScope keywords
+              )
+          )
         )
       )
-    })
-
-    this.control.setValue(filteredKeywords)
-  }
-
-  removeKeyword(index: number) {
-    const removeKeywords = this.control.value.filter((_, i) => i !== index)
+    )
 
-    this.control.setValue(removeKeywords)
+    const allKeywords = [...filteredKeywords, ...keywords]
+    this.valueChange.emit(allKeywords)
   }
 }

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

@@ -0,0 +1,8 @@
+:host {
+  display: grid; /* this is required to be able to size the dropdown */
+}
+
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

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,4 @@
+<gn-ui-map-context
+  [context]="mapContext$ | async"
+  [mapConfig]="mapConfig"
+></gn-ui-map-context>

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,128 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { catchError, from, map, Observable, of, switchMap } from 'rxjs'
+import {
+  DEFAULT_BASELAYER_CONTEXT,
+  FeatureMapModule,
+  MapContextLayerTypeEnum,
+  MapContextModel,
+  MapFacade,
+  MapStyleService,
+  MapUtilsService,
+} from '../../../../../../../../../libs/feature/map/src'
+import { Fill, Stroke, Style } from 'ol/style'
+import { getOptionalMapConfig, MapConfig } from '../../../../../../../../../libs/util/app-config/src'
+import { Geometry } from 'geojson'
+import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
+import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { Polygon } from 'ol/geom'
+import GeoJSON from 'ol/format/GeoJSON'
+
+@Component({
+  selector: 'gn-ui-form-field-map-container',
+  standalone: true,
+  imports: [CommonModule, FeatureMapModule],
+  templateUrl: './form-field-map-container.component.html',
+  styleUrls: ['./form-field-map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldMapContainerComponent implements OnChanges {
+  @Input() spatialExtents: DatasetSpatialExtent[]
+
+  error = ''
+  mapContext$: Observable<MapContextModel> = this.mapFacade.layers$.pipe(
+    switchMap((layers) =>
+      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
+        catchError(() => {
+          this.error = 'The layer has no extent'
+          return of(undefined)
+        }),
+        map((extent) => {
+          return {
+            layers: [DEFAULT_BASELAYER_CONTEXT, ...layers],
+            view: {
+              extent: extent,
+            },
+          } as MapContextModel
+        })
+      )
+    )
+  )
+
+  mapConfig: MapConfig = getOptionalMapConfig()
+
+  constructor(
+    private mapFacade: MapFacade,
+    private mapUtils: MapUtilsService,
+    private styleService: MapStyleService
+  ) {
+    const fill = new Fill({
+      color: 'transparent',
+    })
+    const stroke = new Stroke({
+      color: 'black',
+      width: 2,
+    })
+    const styles = [
+      new Style({
+        fill: fill,
+        stroke: stroke,
+      }),
+    ]
+    this.styleService.styles.default = this.styleService.createStyleFunction({
+      ...this.styleService.createGeometryStyles({ color: 'black' }),
+      polygon: styles,
+    })
+  }
+
+  ngOnChanges(): void {
+    this.mapFacade.removeLayer(0)
+
+    if (this.spatialExtents) {
+      const featureCollection: GeoJSONFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      }
+
+      this.spatialExtents.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),
+          })
+        }
+      })
+      this.mapFacade.addLayer({
+        type: MapContextLayerTypeEnum.GEOJSON,
+        data: featureCollection,
+        title: 'Spatial extents',
+      })
+    }
+  }
+  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]],
+      ],
+    ])
+
+    const geoJSONGeom = new GeoJSON().writeGeometryObject(geometry)
+    return geoJSONGeom
+  }
+}

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,34 @@
+<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>
+  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+    editor.record.form.field.onlineResource.edit.title
+  </h3>
+  <gn-ui-text-input
+    extraClass="mb-[16px]"
+    [(value)]="onlineResource.name"
+  ></gn-ui-text-input>
+  <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>
+</ng-template>