geonetwork-ui 2.4.0-dev.38f835ad → 2.4.0-dev.3b6b95eb

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

@@ -0,0 +1,40 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="'Choose a contact'"
+    [action]="autoCompleteAction"
+    (itemSelected)="addContact($event)"
+    [displayWithFn]="displayWithFn"
+    [minCharacterCount]="1"
+    [clearOnSelection]="true"
+  >
+  </gn-ui-autocomplete>
+
+  <ng-container *ngIf="contacts.length > 0; else noContact">
+    <ng-container *ngIf="contacts.length === 1">
+      <ng-container *ngFor="let contact of contacts; let index = index">
+        <gn-ui-contact-card
+          [contact]="contact"
+        ></gn-ui-contact-card> </ng-container
+    ></ng-container>
+
+    <ng-container *ngIf="contacts.length > 1">
+      <gn-ui-sortable-list
+        [items]="contacts"
+        (itemsOrderChange)="handleContactsChanged($event)"
+        [elementTemplate]="contactTemplate"
+      ></gn-ui-sortable-list>
+      <ng-template #contactTemplate let-contact>
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+</div>
+
+<ng-template #noContact>
+  <div
+    class="p-4 border border-primary bg-primary-lightest rounded-lg"
+    translate
+  >
+    editor.record.form.field.contacts.noContact
+  </div>
+</ng-template>

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.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

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

@@ -1,16 +1,10 @@
 <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 type="gray" (buttonClick)="addRoleToDisplay(role)">
+        <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
+        &nbsp;
+        <span translate>{{ roleToLabel(role) }}</span>
       </gn-ui-button>
     </ng-container>
   </div>
@@ -43,23 +37,19 @@
         [displayWithFn]="displayWithFn"
         [minCharacterCount]="1"
         [clearOnSelection]="true"
+        [allowSubmit]="false"
       >
       </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>
+        <gn-ui-sortable-list
+          [items]="contacts"
+          (itemsOrderChange)="handleContactsChanged($event, role)"
+          [elementTemplate]="contactTemplate"
+        ></gn-ui-sortable-list>
+        <ng-template #contactTemplate let-contact>
+          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+        </ng-template>
       </ng-container>
 
       <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />

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,60 +108,25 @@ 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) => {
-      const completeOrganization = this.allOrganizations.get(
-        contact.organization.name
-      )
+    this.contactsForRessourceByRole = this.value.reduce((acc, contact) => {
+      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 }),
       }
 
-      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 +142,20 @@ 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[], role: Role) {
+    const contacts = items as Individual[]
 
-    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 +175,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 +188,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>