geonetwork-ui 2.3.2 → 2.4.0-dev.0925104f

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

@@ -1,13 +1,16 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnInit,
+  Output,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
 import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-overview-upload',
@@ -17,54 +20,94 @@ import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
   styleUrls: ['./overview-upload.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverviewUploadComponent implements OnInit {
+export class OverviewUploadComponent {
   @Input() metadataUuid: string
+  _overview: GraphicOverview | null
+  @Input()
+  set overview(value: GraphicOverview | null) {
+    this._overview = value
+    if (this._overview) {
+      this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
+        next: (resources) => {
+          const resource = resources.find(
+            (r) => r.url === this._overview.url.toString()
+          )
+          if (resource) {
+            this.resourceFileName = resource.filename
+          }
+        },
+        error: this.errorHandle,
+      })
+      this.resourceUrl = this._overview.url.toString()
+      this.altText = this._overview.description
+    } else {
+      this.resourceUrl = ''
+      this.resourceFileName = ''
+      this.altText = ''
+    }
+  }
+
+  @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
 
-  resourceFileName: string
   resourceUrl: string
+  resourceFileName: string
+  altText: string
 
   constructor(
     private recordsApiService: RecordsApiService,
-    private cd: ChangeDetectorRef
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
-  ngOnInit(): void {
-    this.recordsApiService
-      .getAllResources(this.metadataUuid)
-      .subscribe((resources) => {
-        this.resourceFileName = resources[0]?.filename
-        this.resourceUrl = resources[0]?.url
-        this.cd.markForCheck()
-      })
-  }
-
   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.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+        },
+        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.overviewChange.emit({
+            url: new URL(resource.url),
+            description: resource.filename,
+          })
+        },
+        error: this.errorHandle,
       })
   }
 
+  handleAltTextChange(newAltText: string) {
+    this.overviewChange.emit({
+      url: new URL(this.resourceUrl),
+      description: newAltText,
+    })
+  }
+
   handleDelete() {
-    this.recordsApiService
-      .delResource(this.metadataUuid, this.resourceFileName)
-      .subscribe(() => {
-        this.resourceFileName = null
-        this.resourceUrl = null
-        this.cd.markForCheck()
-      })
+    this.overviewChange.emit(null)
+  }
+
+  private errorHandle = (error) => {
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant('editor.record.resourceError.title'),
+      text: `${this.translateService.instant(
+        'editor.record.resourceError.body'
+      )} ${error.message}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.resourceError.closeMessage'
+      ),
+    })
   }
 }

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

@@ -0,0 +1,76 @@
+<div class="flex flex-col gap-3">
+  <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
+    <ng-container *ngFor="let role of rolesToPick">
+      <gn-ui-button
+        extraClass="px-2 py-1.5"
+        (buttonClick)="addRoleToDisplay(role)"
+      >
+        <div class="flex flex-row gap-1 items-center">
+          <span class="text-primary text-[20px] leading-[0] font-bold pb-[5px]"
+            >&#8330;</span
+          >
+          <span class="font-bold" translate>{{ roleToLabel(role) }}</span>
+        </div>
+      </gn-ui-button>
+    </ng-container>
+  </div>
+  <div
+    class="mt-8"
+    *ngIf="
+      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;
+      else noContact
+    "
+    data-test="displayedRoles"
+  >
+    <div
+      *ngFor="
+        let role of roleSectionsToDisplay;
+        let index = index;
+        let isLast = last
+      "
+      class="flex flex-col gap-4"
+    >
+      <div class="flex flex-row justify-between">
+        <span class="font-bold text-base" translate>{{
+          roleToLabel(role)
+        }}</span>
+      </div>
+
+      <gn-ui-autocomplete
+        [placeholder]="'Choose a contact'"
+        [action]="autoCompleteAction"
+        (itemSelected)="addContact($event, role)"
+        [displayWithFn]="displayWithFn"
+        [minCharacterCount]="1"
+        [clearOnSelection]="true"
+      >
+      </gn-ui-autocomplete>
+
+      <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
+        <ng-container *ngIf="contacts.length > 1">
+          <gn-ui-sortable-list
+            [elements]="contactsAsDynElemByRole.get(role)"
+            (elementsChange)="handleContactsChanged($event)"
+          ></gn-ui-sortable-list>
+        </ng-container>
+        <ng-container *ngIf="contacts.length === 1">
+          <ng-container *ngFor="let contact of contacts">
+            <gn-ui-contact-card
+              [contact]="contact"
+              (contactRemoved)="removeContact(index)"
+            ></gn-ui-contact-card> </ng-container
+        ></ng-container>
+      </ng-container>
+
+      <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
+    </div>
+  </div>
+  <ng-template #noContact>
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  </ng-template>
+</div>

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

@@ -0,0 +1,249 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+} from '@angular/core'
+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 {
+  DynamicElement,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/elements/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,
+  switchMap,
+} from 'rxjs'
+import { map } from 'rxjs/operators'
+import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+
+@Component({
+  selector: 'gn-ui-form-field-contacts-for-resource',
+  templateUrl: './form-field-contacts-for-resource.component.html',
+  styleUrls: ['./form-field-contacts-for-resource.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    TranslateModule,
+    ContactCardComponent,
+    SortableListComponent,
+  ],
+})
+export class FormFieldContactsForResourceComponent
+  implements OnChanges, OnInit
+{
+  @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',
+    'owner',
+    'point_of_contact',
+    'author',
+  ]
+
+  roleSectionsToDisplay: Role[] = []
+
+  allOrganizations: Map<string, Organization> = new Map()
+
+  constructor(
+    private platformServiceInterface: PlatformServiceInterface,
+    private organizationsServiceInterface: OrganizationsServiceInterface
+  ) {}
+
+  ngOnChanges() {
+    this.updateContactsForRessource()
+    this.manageRoleSectionsToDisplay(this.value)
+    this.filterRolesToPick()
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.allOrganizations = new Map<string, Organization>(
+      (
+        await firstValueFrom(this.organizationsServiceInterface.organisations$)
+      ).map((organization) => [organization.name, organization])
+    )
+    this.updateContactsForRessource()
+    this.manageRoleSectionsToDisplay(this.value)
+    this.filterRolesToPick()
+  }
+
+  addRoleToDisplay(roleToAdd: string) {
+    this.roleSectionsToDisplay.push(roleToAdd)
+    this.filterRolesToPick()
+  }
+
+  filterRolesToPick() {
+    this.rolesToPick = this.rolesToPick.filter(
+      (role) => !this.roleSectionsToDisplay.includes(role)
+    )
+  }
+
+  updateContactsForRessource() {
+    this.contactsForRessourceByRole = this.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.value.reduce((acc, contact) => {
+      const completeOrganization = this.allOrganizations.get(
+        contact.organization.name
+      )
+
+      const updatedContact = {
+        ...contact,
+        organization:
+          completeOrganization ??
+          ({ 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)
+
+      return acc
+    }, new Map<Role, DynamicElement[]>())
+  }
+
+  manageRoleSectionsToDisplay(contactsForResource: Individual[]) {
+    const roles = contactsForResource.map(
+      (contact: Individual) => contact.role
+    ) as Role[]
+
+    roles.forEach((role: Role) => {
+      if (!this.roleSectionsToDisplay.includes(role)) {
+        this.roleSectionsToDisplay.push(role)
+      }
+    })
+  }
+
+  removeContact(index: number) {
+    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
+
+    this.contactsForRessourceByRole.set(role, newContactsOrdered)
+
+    const newControlValue = Array.from(
+      this.contactsForRessourceByRole.values()
+    ).flat()
+
+    this.valueChange.emit(newControlValue)
+  }
+
+  protected roleToLabel(role: string): string {
+    return RoleLabels.get(role)
+  }
+
+  /**
+   * 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.platformServiceInterface.getUsers().pipe(
+      switchMap((users) => [
+        users.filter((user) => fuzzyFilter(user.username)),
+      ]),
+      map((results) => results.slice(0, 10)),
+      debounceTime(300),
+      distinctUntilChanged()
+    )
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  addContact(contact: unknown, role: string) {
+    const newContact = contact as UserModel
+    const newContactsForRessource = {
+      firstName: newContact.name ?? '',
+      lastName: newContact.surname ?? '',
+      organization:
+        this.allOrganizations.get(newContact.organisation) ??
+        ({ name: newContact.organisation } as Organization),
+      email: newContact.email ?? '',
+      role,
+      address: '',
+      phone: '',
+      position: '',
+    } as Individual
+
+    const newControlValue = [...this.value, newContactsForRessource]
+
+    this.valueChange.emit(newControlValue)
+  }
+}

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

@@ -0,0 +1,9 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-generic-keywords
+    [keywords]="value"
+    [keywordTypes]="keywordTypes"
+    [placeholder]="placeholder | translate"
+    (changedKeywords)="handleKeywordsChange($event)"
+  >
+  </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

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common'
+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 { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+
+@Component({
+  selector: 'gn-ui-form-field-keywords',
+  templateUrl: './form-field-keywords.component.html',
+  styleUrls: ['./form-field-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    GenericKeywordsComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldKeywordsComponent {
+  @Input() value: Keyword[]
+  @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
+
+  keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
+  placeholder = 'editor.form.keywords.placeholder'
+
+  handleKeywordsChange(keywords: Keyword[]) {
+    this.valueChange.emit(keywords)
+  }
+}

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
+  }
+}