From deed6da4c4fccf96d67c44e5da31ff83e24ea33e Mon Sep 17 00:00:00 2001
From: Romuald Caplier <romuald.caplier@camptocamp.com>
Date: Thu, 29 Aug 2024 10:39:04 +0200
Subject: [PATCH] wip

---
 .../form-field-contacts.component.html        | 38 +----------
 .../form-field-contacts.component.ts          | 64 ++++++++-----------
 .../form-field/form-field.component.html      | 11 ++--
 translations/de.json                          |  1 +
 translations/en.json                          |  1 +
 translations/es.json                          |  1 +
 translations/fr.json                          |  1 +
 translations/it.json                          |  1 +
 translations/nl.json                          |  1 +
 translations/pt.json                          |  1 +
 translations/sk.json                          |  1 +
 11 files changed, 42 insertions(+), 79 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html
index 86db0afdf0..5bf1b7c49a 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html
@@ -1,40 +1,4 @@
 <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-->
-  <!--    "-->
-  <!--  >-->
-  <!--    <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"
@@ -49,7 +13,7 @@
       <ng-container *ngFor="let contact of contacts; let index = index">
         <gn-ui-contact-card
           [contact]="contact"
-          (contactRemoved)="removeContact()"
+          [removable]="false"
         ></gn-ui-contact-card> </ng-container
     ></ng-container>
 
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts
index 371379b611..ed75b78c66 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts
@@ -3,13 +3,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
+  Output,
   SimpleChanges,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
 import {
   AutocompleteComponent,
   DropdownSelectorComponent,
@@ -58,10 +58,9 @@ import { map } from 'rxjs/operators'
     SortableListComponent,
   ],
 })
-export class FormFieldContactsComponent
-  implements OnInit, OnDestroy, OnChanges
-{
-  @Input() control: FormControl<Individual[]>
+export class FormFieldContactsComponent implements OnDestroy, OnChanges {
+  @Input() value: Individual[]
+  @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contacts: Individual[] = []
   contactsAsDynElem: DynamicElement[] = []
@@ -82,32 +81,31 @@ export class FormFieldContactsComponent
     this.allUsers$ = this.platformServiceInterface.getUsers()
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log(changes['control'])
-  }
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    const contactsChanges = changes['value']
 
-  async ngOnInit(): Promise<void> {
-    this.allOrganizations = new Map<string, Organization>(
-      (
-        await firstValueFrom(this.organizationsServiceInterface.organisations$)
-      ).map((organization) => [organization.name, organization])
-    )
+    if (contactsChanges.firstChange) {
+      this.allOrganizations = new Map<string, Organization>(
+        (
+          await firstValueFrom(
+            this.organizationsServiceInterface.organisations$
+          )
+        ).map((organization) => [organization.name, organization])
+      )
+    }
 
-    this.updateContacts()
+    if (contactsChanges.currentValue !== contactsChanges.previousValue) {
+      const contacts = contactsChanges.currentValue
+      console.log(contacts)
 
-    this.changeDetectorRef.markForCheck()
+      this.updateContacts()
 
-    this.subscription.add(
-      this.control.valueChanges.subscribe((contacts) => {
-        console.log('new contacts (valueChange): ', contacts)
-        this.updateContacts()
-        this.changeDetectorRef.markForCheck()
-      })
-    )
+      this.changeDetectorRef.markForCheck()
+    }
   }
 
   updateContacts() {
-    this.contacts = this.control.value.reduce((acc, contact) => {
+    this.contacts = this.value.reduce((acc, contact) => {
       const completeOrganization = this.allOrganizations.get(
         contact.organization.name
       )
@@ -124,7 +122,7 @@ export class FormFieldContactsComponent
       return acc
     }, [] as Individual[])
 
-    this.contactsAsDynElem = this.control.value.reduce((acc, contact) => {
+    this.contactsAsDynElem = this.value.reduce((acc, contact) => {
       const completeOrganization = this.allOrganizations.get(
         contact.organization.name
       )
@@ -152,18 +150,12 @@ export class FormFieldContactsComponent
     this.changeDetectorRef.markForCheck()
   }
 
-  removeContact() {
-    this.control.setValue([])
-  }
-
   handleContactsChanged(event: DynamicElement[]) {
     const newContactsOrdered = event.map(
       (contactAsDynElem) => contactAsDynElem.inputs['contact']
     ) as Individual[]
 
-    console.log('newContactsOrdered :', newContactsOrdered)
-
-    this.control.setValue(newContactsOrdered)
+    this.valueChange.emit(newContactsOrdered)
   }
 
   /**
@@ -193,7 +185,7 @@ export class FormFieldContactsComponent
    * gn-ui-autocomplete
    */
   addContact(contact: UserModel) {
-    const newContacts = {
+    const newContact = {
       firstName: contact.name ?? '',
       lastName: contact.surname ?? '',
       organization:
@@ -206,9 +198,7 @@ export class FormFieldContactsComponent
       position: '',
     } as Individual
 
-    const newControlValue = [...this.control.value, newContacts]
-
-    this.control.setValue(newControlValue)
+    this.valueChange.emit([...this.value, newContact])
   }
 
   ngOnDestroy(): void {
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
index 00e4f87667..a303aa2c93 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
@@ -122,10 +122,11 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-online-link-resources>
     </ng-container>
-  </ng-container>
-  <ng-container *ngIf="isContacts">
-    <gn-ui-form-field-contacts
-      [control]="formControl"
-    ></gn-ui-form-field-contacts>
+    <ng-container *ngSwitchCase="'contacts'">
+      <gn-ui-form-field-contacts
+        [value]="valueAsIndividuals"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-contacts>
+    </ng-container>
   </ng-container>
 </ng-template>
diff --git a/translations/de.json b/translations/de.json
index 24b74e605d..38b8ea9523 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "Kurzbeschreibung",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "Schlagwörter",
   "editor.record.form.field.license": "Lizenz",
diff --git a/translations/en.json b/translations/en.json
index ce7750795b..57643c9fd1 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "Previous",
   "editor.record.form.classification.opendata": "Open Data",
   "editor.record.form.field.abstract": "Abstract",
+  "editor.record.form.field.contacts.noContact": "Please provide at least one point of contact.",
   "editor.record.form.field.contactsForResource.noContact": "Please provide at least one point of contact responsible for the data.",
   "editor.record.form.field.keywords": "Keywords",
   "editor.record.form.field.license": "License",
diff --git a/translations/es.json b/translations/es.json
index e708c32ec0..6f87aa7c9d 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
diff --git a/translations/fr.json b/translations/fr.json
index 42a4944787..9062405511 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "Précédent",
   "editor.record.form.classification.opendata": "Données ouvertes",
   "editor.record.form.field.abstract": "Résumé",
+  "editor.record.form.field.contacts.noContact": "Veuillez renseigner au moins un point de contact.",
   "editor.record.form.field.contactsForResource.noContact": "Veuillez renseigner au moins un point de contact responsable de la donnée.",
   "editor.record.form.field.keywords": "Mots-clés",
   "editor.record.form.field.license": "Licence",
diff --git a/translations/it.json b/translations/it.json
index 1f87f83ac5..6508983d02 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "Licenza",
diff --git a/translations/nl.json b/translations/nl.json
index c5895c20c4..d6ab9c4d22 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
diff --git a/translations/pt.json b/translations/pt.json
index 64c5b7975d..58f0dd7185 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
diff --git a/translations/sk.json b/translations/sk.json
index 3911e28e0e..c71d528ab3 100644
--- a/translations/sk.json
+++ b/translations/sk.json
@@ -206,6 +206,7 @@
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.classification.opendata": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contacts.noContact": "",
   "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "Licencia",