contacts may now be ordered

apps/metadata-editor-e2e/src/e2e/edit.cy.ts

@@ -107,7 +107,9 @@ describe('editor form', () => {
           .find('gn-ui-autocomplete')
           .type('bar')
 
-        cy.get('mat-option').should('have.text', ' Barbara Roberts ').click()
+        cy.get('mat-option')
+          .should('have.text', ' Barbara Roberts (Barbie Inc.) ')
+          .click()
 
         cy.get('[data-test=displayedRoles]')
           .children()

libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -1,28 +1,25 @@
-<ng-container *ngIf="organization && contact">
-  <div class="flex flex-row gap-4 items-center">
-    <div
-      class="flex flex-row border border-gray-200 rounded-xl p-4 gap-4 w-full"
-    >
-      <img
-        [src]="organization.logoUrl"
-        class="w-[56px] h-[56px] rounded-[4px]"
-      />
-      <div class="flex flex-col w-full">
-        <div class="flex flex-row justify-between">
-          <span class="flex flex-wrap font-bold w-full"
-            >{{ contact.firstName }} {{ contact.lastName }}</span
-          >
-        </div>
-        <div>{{ contact.email }}</div>
+<div class="flex flex-row gap-4 items-center">
+  <div class="flex flex-row border border-gray-200 rounded-xl p-4 gap-4 w-full">
+    <gn-ui-thumbnail
+      class="w-[56px] h-[56px] rounded-[4px]"
+      [thumbnailUrl]="contact.organization.logoUrl?.href"
+      [fit]="'contain'"
+    ></gn-ui-thumbnail>
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <span class="flex flex-wrap font-bold w-full"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
       </div>
+      <div>{{ contact.email }}</div>
     </div>
-    <gn-ui-button
-      *ngIf="removable"
-      data-test="removeContactButton"
-      type="light"
-      extraClass="w-[20px] h-[20px] flex items-center justify-center"
-      (buttonClick)="removeContact(contact)"
-      ><span class="material-symbols-outlined"> close </span>
-    </gn-ui-button>
   </div>
-</ng-container>
+  <gn-ui-button
+    *ngIf="removable"
+    data-test="removeContactButton"
+    type="light"
+    extraClass="w-[20px] h-[20px] flex items-center justify-center"
+    (buttonClick)="removeContact(contact)"
+    ><span class="material-symbols-outlined"> close </span>
+  </gn-ui-button>
+</div>

libs/feature/editor/src/lib/components/contact-card/contact-card.component.spec.ts

@@ -6,12 +6,27 @@ import {
 } from '@geonetwork-ui/common/domain/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
-import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  AutocompleteComponent,
+  ButtonComponent,
+} from '@geonetwork-ui/ui/inputs'
+import { ChangeDetectionStrategy } from '@angular/core'
 
 describe('ContactCardComponent', () => {
   let component: ContactCardComponent
   let fixture: ComponentFixture<ContactCardComponent>
 
+  const mockContact: Individual = {
+    firstName: 'John',
+    lastName: 'Doe',
+    organization: { name: 'Org1' } as Organization,
+    email: '[email protected]',
+    role: 'admin',
+    address: '',
+    phone: '',
+    position: '',
+  }
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
@@ -20,57 +35,25 @@ describe('ContactCardComponent', () => {
         ButtonComponent,
         ContactCardComponent,
       ],
-    }).compileComponents()
+    })
+      .overrideComponent(AutocompleteComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents()
   })
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ContactCardComponent)
     component = fixture.componentInstance
+    component.contact = mockContact
     fixture.detectChanges()
   })
 
   it('should create the component', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should have a defined contact input', () => {
-    const mockContact: Individual = {
-      firstName: 'John',
-      lastName: 'Doe',
-      organization: { name: 'Org1' } as Organization,
-      email: '[email protected]',
-      role: 'admin',
-      address: '',
-      phone: '',
-      position: '',
-    }
-    component.contact = mockContact
-    fixture.detectChanges()
-    expect(component.contact).toEqual(mockContact)
-  })
-
-  it('should have a defined organization input', () => {
-    const mockOrganization: Organization = {
-      name: 'Org1',
-    }
-    component.organization = mockOrganization
-    fixture.detectChanges()
-    expect(component.organization).toEqual(mockOrganization)
-  })
-
   it('should emit contactRemoved event with the correct contact', () => {
-    const mockContact: Individual = {
-      firstName: 'John',
-      lastName: 'Doe',
-      organization: { name: 'Org1' } as Organization,
-      email: '[email protected]',
-      role: 'admin',
-      address: '',
-      phone: '',
-      position: '',
-    }
-    component.contact = mockContact
-
     const contactRemovedSpy = jest.spyOn(component.contactRemoved, 'emit')
     component.removeContact(mockContact)
     expect(contactRemovedSpy).toHaveBeenCalledWith(mockContact)

libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -5,25 +5,22 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import {
-  Individual,
-  Organization,
-} from '@geonetwork-ui/common/domain/model/record'
+import { Individual } from '@geonetwork-ui/common/domain/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { ThumbnailComponent } from '@geonetwork-ui/ui/elements'
 
 @Component({
   selector: 'gn-ui-contact-card',
   templateUrl: './contact-card.component.html',
   styleUrls: ['./contact-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule, ButtonComponent],
+  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
 })
 export class ContactCardComponent {
   @Input() contact: Individual
-  @Input() organization: Organization
   @Input() removable = true
   @Output() contactRemoved = new EventEmitter<Individual>()
 

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

@@ -16,11 +16,18 @@
   </div>
   <div
     class="mt-8"
-    *ngIf="rolesToDisplay && rolesToDisplay.length > 0; else noContact"
+    *ngIf="
+      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;
+      else noContact
+    "
     data-test="displayedRoles"
   >
     <div
-      *ngFor="let role of rolesToDisplay; let index = index; let isLast = last"
+      *ngFor="
+        let role of roleSectionsToDisplay;
+        let index = index;
+        let isLast = last
+      "
       class="flex flex-col gap-4"
     >
       <div class="flex flex-row justify-between">
@@ -38,20 +45,23 @@
         [clearOnSelection]="true"
       >
       </gn-ui-autocomplete>
-      <ng-container *ngIf="getContactsByRole(role).length > 1">
-        <gn-ui-sortable-list
-          [elements]="getContactByRoleForSortableList(role)"
-          (elementsChange)="handleContactOrderChange($event)"
-        ></gn-ui-sortable-list>
+
+      <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>
-      <ng-container *ngIf="getContactsByRole(role).length === 1">
-        <ng-container *ngFor="let contact of getContactsByRole(role)">
-          <gn-ui-contact-card
-            [contact]="contact"
-            [organization]="getOrganizationByName(contact.organization.name)"
-            (contactRemoved)="removeContact(index)"
-          ></gn-ui-contact-card> </ng-container
-      ></ng-container>
+
       <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
     </div>
   </div>