geonetwork-ui 2.4.0-dev.27089d81 → 2.4.0-dev.2cc6f5b1

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,271 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} 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 { 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'
+
+@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 OnInit, OnDestroy
+{
+  @Input() control: FormControl<Individual[]>
+
+  subscription: Subscription = new Subscription()
+
+  allUsers$: Observable<UserModel[]>
+
+  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,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.allUsers$ = this.platformServiceInterface.getUsers()
+  }
+
+  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.control.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) {
+    this.roleSectionsToDisplay.push(roleToAdd)
+    this.filterRolesToPick()
+  }
+
+  filterRolesToPick() {
+    this.rolesToPick = this.rolesToPick.filter(
+      (role) => !this.roleSectionsToDisplay.includes(role)
+    )
+  }
+
+  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) => {
+      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[]>())
+
+    this.changeDetectorRef.markForCheck()
+  }
+
+  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.control.value.filter(
+      (_, i) => i !== index
+    )
+    this.control.setValue(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.control.setValue(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.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, role: string) {
+    const newContactsForRessource = {
+      firstName: contact.name ?? '',
+      lastName: contact.surname ?? '',
+      organization:
+        this.allOrganizations.get(contact.organisation) ??
+        ({ name: contact.organisation } as Organization),
+      email: contact.email ?? '',
+      role,
+      address: '',
+      phone: '',
+      position: '',
+    } as Individual
+
+    const newControlValue = [...this.control.value, newContactsForRessource]
+
+    this.control.setValue(newControlValue)
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}

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

@@ -4,7 +4,7 @@
     [displayWithFn]="displayWithFn"
     [action]="autoCompleteAction"
     (itemSelected)="handleItemSelection($event)"
-    [clearOnSelection]="true"
+    [preventCompleteOnSelection]="true"
     [minCharacterCount]="0"
     [allowSubmit]="false"
   ></gn-ui-autocomplete>

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

@@ -35,13 +35,15 @@ export class FormFieldKeywordsComponent {
   }
 
   autoCompleteAction = (query: string) => {
-    return this.platformService.searchKeywords(query).pipe(
-      map((keywords) =>
-        keywords.map((keyword) => {
-          return { title: keyword.label, value: keyword }
-        })
+    return this.platformService
+      .searchKeywords(query, ['temporal', 'theme', 'other'])
+      .pipe(
+        map((keywords) =>
+          keywords.map((keyword) => {
+            return { title: keyword.label, value: keyword }
+          })
+        )
       )
-    )
   }
 
   constructor(private platformService: PlatformServiceInterface) {}

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

@@ -0,0 +1,5 @@
+<gn-ui-overview-upload
+  [metadataUuid]="metadataUuid"
+  [formControl]="control"
+  (overviewChange)="handleOverviewChange($event)"
+></gn-ui-overview-upload>

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

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
+import { FormControl } from '@angular/forms'
+import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'gn-ui-form-field-overviews',
+  templateUrl: './form-field-overviews.component.html',
+  styleUrls: ['./form-field-overviews.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, OverviewUploadComponent],
+})
+export class FormFieldOverviewsComponent {
+  @Input() metadataUuid: string
+  @Input() control!: FormControl
+
+  handleOverviewChange(overView: GraphicOverview | null) {
+    this.control.setValue(overView ? [overView] : [])
+  }
+}

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

@@ -62,9 +62,9 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
     )
   }
 
-  onElementsChange(elements: any) {
+  onElementsChange(elements: { inputs: Record<string, unknown> }[]) {
     this.array.clear({ emitEvent: false })
-    elements.forEach((e: any, i: number) =>
+    elements.forEach((e, i) =>
       this.array.push(e.inputs.control, {
         emitEvent: i === elements.length - 1,
       })
@@ -95,7 +95,7 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
 
   private resetValueFromInput(value) {
     this.array.clear({ emitEvent: false })
-    this.elements = []
+    let newElements = []
     value.forEach((v: any) => {
       if ('start' in v && 'end' in v) {
         const rangeControl = new FormControl({
@@ -103,8 +103,8 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
           end: v.end,
         })
         this.array.push(rangeControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
+        newElements = [
+          ...newElements,
           {
             component: FormFieldTemporalExtentsRangeComponent,
             inputs: {
@@ -115,8 +115,8 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
       } else {
         const dateControl = new FormControl({ start: v.start })
         this.array.push(dateControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
+        newElements = [
+          ...newElements,
           {
             component: FormFieldTemporalExtentsDateComponent,
             inputs: {
@@ -126,5 +126,6 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
         ]
       }
     })
+    this.elements = newElements
   }
 }

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

@@ -4,8 +4,8 @@
   </ng-container>
   <ng-template #withGenericWrapper>
     <gn-ui-form-field-wrapper
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
+      [label]="config.labelKey! | translate"
+      [hint]="config.hintKey! | translate"
     >
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
@@ -15,14 +15,14 @@
 <ng-template #fieldContent>
   <ng-container *ngIf="isTitle">
     <div class="flex justify-between items-center gap-3">
-      <h2
+      <span
         #titleInput
-        class="grow text-3xl font-normal"
+        class="grow font-title text-3xl font-normal"
         [gnUiEditableLabel]="true"
         (editableLabelChanged)="formControl.setValue($event)"
       >
         {{ formControl.value }}
-      </h2>
+      </span>
       <span
         class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
         (click)="focusTitleInput()"
@@ -30,7 +30,7 @@
       >
       <span
         class="material-symbols-outlined gn-ui-icon-small m-2"
-        [matTooltip]="config.hintKey | translate"
+        [matTooltip]="config.hintKey! | translate"
         matTooltipPosition="above"
       >
         help
@@ -41,14 +41,14 @@
     <gn-ui-form-field-rich
       class="h-[8rem]"
       [control]="formControl"
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
+      [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"
+      [label]="config.labelKey! | translate"
     ></gn-ui-form-field-license>
   </ng-container>
   <ng-container *ngIf="isResourceUpdated">
@@ -76,9 +76,20 @@
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
+  <ng-container *ngIf="isGraphicOverview">
+    <gn-ui-form-field-overviews
+      [control]="formControl"
+      [metadataUuid]="metadataUuid$ | async"
+    ></gn-ui-form-field-overviews>
+  </ng-container>
   <ng-container *ngIf="isKeywords">
     <gn-ui-form-field-keywords
       [control]="formControl"
     ></gn-ui-form-field-keywords>
   </ng-container>
+  <ng-container *ngIf="isContactsForResource">
+    <gn-ui-form-field-contacts-for-resource
+      [control]="formControl"
+    ></gn-ui-form-field-contacts-for-resource>
+  </ng-container>
 </ng-template>

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

@@ -25,10 +25,14 @@ import { FormFieldObjectComponent } from './form-field-object/form-field-object.
 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 { FormFieldConfig } from './form-field.model'
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
 import { CatalogRecordKeys } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
+import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
+import { map, take } from 'rxjs/operators'
+import { EditorFacade } from '../../../+state/editor.facade'
+import { FormFieldConfig } from '../../../models'
+import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -55,6 +59,8 @@ import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-key
     FormFieldArrayComponent,
     FormFieldKeywordsComponent,
     TranslateModule,
+    FormFieldOverviewsComponent,
+    FormFieldContactsForResourceComponent,
   ],
 })
 export class FormFieldComponent {
@@ -65,13 +71,19 @@ export class FormFieldComponent {
       emitEvent: false,
     })
   }
+
   @Output() valueChange: Observable<unknown>
 
   @ViewChild('titleInput') titleInput: ElementRef
 
+  metadataUuid$ = this.facade.record$.pipe(
+    take(1),
+    map((record) => record.uniqueIdentifier)
+  )
+
   formControl = new FormControl()
 
-  constructor() {
+  constructor(private facade: EditorFacade) {
     this.valueChange = this.formControl.valueChanges
   }
 
@@ -100,6 +112,9 @@ export class FormFieldComponent {
   get isSpatialExtentField() {
     return this.model === 'spatialExtents'
   }
+  get isGraphicOverview() {
+    return this.model === 'overviews'
+  }
   get isSimpleField() {
     return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated'
   }
@@ -109,6 +124,9 @@ export class FormFieldComponent {
   get isKeywords() {
     return this.model === 'keywords'
   }
+  get isContactsForResource() {
+    return this.model === 'contactsForResource'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'

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

@@ -9,4 +9,3 @@ export * from './form-field-object/form-field-object.component'
 export * from './form-field-array/form-field-array.component'
 export * from './form-field-spatial-extent/form-field-spatial-extent.component'
 export * from './form-field.component'
-export * from './form-field.model'

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

@@ -1,11 +1,51 @@
-<div class="flex flex-col gap-6 p-6">
-  <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)"
-    ></gn-ui-form-field>
-  </ng-container>
-</div>
+<ng-container>
+  <div class="flex flex-col gap-6 p-8">
+    <ng-container
+      *ngFor="
+        let section of facade.currentSections$ | async;
+        trackBy: sectionTracker
+      "
+    >
+      <ng-container *ngIf="!section.hidden">
+        <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+          <div
+            class="flex flex-col gap-2"
+            [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+          >
+            <div
+              *ngIf="section.labelKey"
+              class="text-2xl font-title text-secondary"
+              translate
+            >
+              {{ section.labelKey }}
+            </div>
+            <div
+              *ngIf="section.descriptionKey"
+              class="text-secondary-lightest"
+              translate
+            >
+              {{ section.descriptionKey }}
+            </div>
+          </div>
+          <ng-container
+            *ngFor="
+              let field of section.fieldsWithValues;
+              trackBy: fieldTracker
+            "
+          >
+            <ng-container *ngIf="!field.config.hidden">
+              <gn-ui-form-field
+                [model]="field.config.model!"
+                [config]="field.config.formFieldConfig"
+                [value]="field.value"
+                (valueChange)="
+                  handleFieldValueChange(field.config.model!, $event)
+                "
+              ></gn-ui-form-field>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+  </div>
+</ng-container>

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

@@ -1,8 +1,13 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
-import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
+import { EditorFieldValue } from '../../models'
 import { FormFieldComponent } from './form-field'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  EditorFieldWithValue,
+  EditorSectionWithValues,
+} from '../../+state/editor.models'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -10,21 +15,23 @@ import { FormFieldComponent } from './form-field'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent],
+  imports: [CommonModule, FormFieldComponent, TranslateModule],
 })
 export class RecordFormComponent {
-  fields$ = this.facade.recordFields$
-
   constructor(public facade: EditorFacade) {}
 
-  handleFieldValueChange(field: EditorFieldState, newValue: EditorFieldValue) {
-    if (!field.config.model) {
+  handleFieldValueChange(model: string, newValue: EditorFieldValue) {
+    if (!model) {
       return
     }
-    this.facade.updateRecordField(field.config.model, newValue)
+    this.facade.updateRecordField(model, newValue)
   }
 
-  fieldTracker(index: number, field: EditorFieldState) {
+  fieldTracker(index: number, field: EditorFieldWithValue): any {
     return field.config.model
   }
+
+  sectionTracker(index: number, section: EditorSectionWithValues): any {
+    return section.labelKey
+  }
 }

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -1,4 +1,4 @@
-import { EditorFieldState, EditorFieldValue } from './models/fields.model'
+import { EditorFieldState, EditorFieldValue } from './models/'
 
 export type ExpressionEvaluator = (field: EditorFieldState) => EditorFieldValue