geonetwork-ui 2.4.0-dev.344a92f2 → 2.4.0-dev.3b6b95eb

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

@@ -0,0 +1,170 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import {
+  Individual,
+  Organization,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+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 { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
+import { map } from 'rxjs/operators'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-form-field-contacts',
+  templateUrl: './form-field-contacts.component.html',
+  styleUrls: ['./form-field-contacts.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    TranslateModule,
+    ContactCardComponent,
+    SortableListComponent,
+  ],
+})
+export class FormFieldContactsComponent implements OnDestroy, OnChanges {
+  @Input() value: Individual[]
+  @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
+
+  contacts: Individual[] = []
+
+  subscription: Subscription = new Subscription()
+
+  allUsers$: Observable<UserModel[]>
+
+  allOrganizations: Map<string, Organization> = new Map()
+
+  constructor(
+    private platformServiceInterface: PlatformServiceInterface,
+    private organizationsServiceInterface: OrganizationsServiceInterface,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.allUsers$ = this.platformServiceInterface.getUsers()
+  }
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    const contactsChanges = changes['value']
+
+    if (contactsChanges.firstChange) {
+      this.allOrganizations = new Map<string, Organization>(
+        (
+          await firstValueFrom(
+            this.organizationsServiceInterface.organisations$
+          )
+        ).map((organization) => [organization.name, organization])
+      )
+    }
+
+    if (contactsChanges.currentValue !== contactsChanges.previousValue) {
+      this.updateContacts()
+
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  updateContacts() {
+    this.contacts = this.value.reduce((acc, contact) => {
+      const completeOrganization = this.allOrganizations.get(
+        contact.organization.name
+      )
+
+      const updatedContact = {
+        ...contact,
+        organization:
+          completeOrganization ??
+          ({ name: contact.organization.name } as Organization),
+      }
+
+      acc.push(updatedContact)
+
+      return acc
+    }, [] as Individual[])
+  }
+
+  handleContactsChanged(items: unknown[]) {
+    const contacts = items as Individual[]
+
+    this.contacts = contacts
+
+    this.valueChange.emit(contacts)
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  displayWithFn: (user: UserModel) => string = (user) =>
+    `${user.name} ${user.surname} ${
+      user.organisation ? `(${user.organisation})` : ''
+    }`
+
+  /**
+   * gn-ui-autocomplete
+   */
+  autoCompleteAction = (query: string) => {
+    const fuzzyFilter = createFuzzyFilter(query)
+    return this.allUsers$.pipe(
+      switchMap((users) => [
+        users.filter((user) => fuzzyFilter(user.username)),
+      ]),
+      map((results) => results.slice(0, 10)),
+      debounceTime(300),
+      distinctUntilChanged()
+    )
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  addContact(contact: UserModel) {
+    const newContact = {
+      firstName: contact.name ?? '',
+      lastName: contact.surname ?? '',
+      organization:
+        this.allOrganizations.get(contact.organisation) ??
+        ({ name: contact.organisation } as Organization),
+      email: contact.email ?? '',
+      role: 'point_of_contact',
+      address: '',
+      phone: '',
+      position: '',
+    } as Individual
+
+    this.valueChange.emit([...this.value, newContact])
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}

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

@@ -44,7 +44,7 @@
       <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
         <gn-ui-sortable-list
           [items]="contacts"
-          (itemsOrderChange)="handleContactsChanged($event)"
+          (itemsOrderChange)="handleContactsChanged($event, role)"
           [elementTemplate]="contactTemplate"
         ></gn-ui-sortable-list>
         <ng-template #contactTemplate let-contact>

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

@@ -109,15 +109,14 @@ export class FormFieldContactsForResourceComponent
 
   updateContactsForRessource() {
     this.contactsForRessourceByRole = this.value.reduce((acc, contact) => {
-      const completeOrganization = this.allOrganizations.get(
-        contact.organization.name
-      )
+      const completeOrganization = contact.organization
+        ? this.allOrganizations.get(contact.organization.name)
+        : null
+      const organization = completeOrganization ?? contact.organization
 
       const updatedContact = {
         ...contact,
-        organization:
-          completeOrganization ??
-          ({ name: contact.organization.name } as Organization),
+        ...(organization && { organization }),
       }
 
       if (!acc.has(contact.role)) {
@@ -147,9 +146,8 @@ export class FormFieldContactsForResourceComponent
     this.valueChange.emit(newContactsforRessource)
   }
 
-  handleContactsChanged(items: unknown[]) {
+  handleContactsChanged(items: unknown[], role: Role) {
     const contacts = items as Individual[]
-    const role = contacts[0].role
 
     this.contactsForRessourceByRole.set(role, contacts)
 

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

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

@@ -1,95 +1,41 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } 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 GeoJSON, { 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'
+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, FeatureMapModule],
+  imports: [CommonModule, MapContainerComponent],
   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,
-    })
+export class FormFieldMapContainerComponent {
+  @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
+    this.spatialExtents$.next(value)
   }
-
-  ngOnChanges(): void {
-    this.mapFacade.removeLayer(0)
-
-    if (this.spatialExtents) {
+  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: [],
       }
-
-      this.spatialExtents.forEach((extent) => {
+      extents.forEach((extent) => {
         if (extent.geometry) {
           featureCollection.features.push({
             type: 'Feature',
@@ -104,13 +50,26 @@ export class FormFieldMapContainerComponent implements OnChanges {
           })
         }
       })
-      this.mapFacade.addLayer({
-        type: MapContextLayerTypeEnum.GEOJSON,
+
+      const layer: MapContextLayer = {
+        type: 'geojson',
         data: featureCollection,
-        title: 'Spatial extents',
-      })
-    }
-  }
+        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([
       [
@@ -122,7 +81,6 @@ export class FormFieldMapContainerComponent implements OnChanges {
       ],
     ])
 
-    const geoJSONGeom = new GeoJSON().writeGeometryObject(geometry)
-    return geoJSONGeom
+    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

@@ -20,15 +20,24 @@
 </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>
+  <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

@@ -16,6 +16,7 @@ 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'
@@ -43,6 +44,7 @@ import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
     OnlineResourceCardComponent,
     TextInputComponent,
     TextAreaComponent,
+    UrlInputComponent,
     TranslateModule,
   ],
 })
@@ -61,7 +63,7 @@ export class FormFieldOnlineLinkResourcesComponent {
 
   private allResources: OnlineResource[] = []
   linkResources: OnlineLinkResource[] = []
-  uploadProgress = undefined
+  uploadProgress?: number = undefined
   uploadSubscription: Subscription = null
 
   protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
@@ -94,7 +96,7 @@ export class FormFieldOnlineLinkResourcesComponent {
             this.valueChange.emit([...this.allResources, newResource])
           }
         },
-        error: (error: Error) => this.handleError(error.message),
+        error: (error: Error) => this.handleError(error),
       })
   }
 
@@ -115,7 +117,7 @@ export class FormFieldOnlineLinkResourcesComponent {
       }
       this.valueChange.emit([...this.allResources, newLink])
     } catch (e) {
-      this.handleError((e as Error).message)
+      this.handleError(e as Error)
     }
   }
 
@@ -132,8 +134,9 @@ export class FormFieldOnlineLinkResourcesComponent {
     this.openEditDialog(resource, index)
   }
 
-  private handleError(error: string) {
+  private handleError(error: Error) {
     this.uploadProgress = undefined
+    this.cd.detectChanges()
     this.notificationsService.showNotification({
       type: 'error',
       title: this.translateService.instant(
@@ -141,7 +144,7 @@ export class FormFieldOnlineLinkResourcesComponent {
       ),
       text: `${this.translateService.instant(
         'editor.record.onlineResourceError.body'
-      )} ${error}`,
+      )} ${error.message}`,
       closeMessage: this.translateService.instant(
         'editor.record.onlineResourceError.closeMessage'
       ),
@@ -154,6 +157,7 @@ export class FormFieldOnlineLinkResourcesComponent {
     }
     this.dialog
       .open(ModalDialogComponent, {
+        width: '800px',
         data: {
           title: this.translateService.instant(
             'editor.record.form.field.onlineResource.dialogTitle'

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>