contacts may now be ordered

geonetwork · Aug 20, 2024 · 60edb09 · 60edb09
1 parent 0653674
commit 60edb09
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 136 deletions.
diff --git a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html b/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>
diff --git a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts b/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>()
 

diff --git a/...rm-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html b/...rm-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>

diff --git a/...field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.spec.ts b/...field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.spec.ts
@@ -97,7 +97,7 @@ describe('FormFieldContactsForResourceComponent', () => {
       'point_of_contact',
       'author',
     ])
-    expect(component.rolesToDisplay).toEqual([])
+    expect(component.roleSectionsToDisplay).toEqual([])
     expect(component.allOrganizations.size).toBe(2)
   })
 
@@ -117,7 +117,7 @@ describe('FormFieldContactsForResourceComponent', () => {
   it('should add role to rolesToDisplay and remove from rolesToPick', () => {
     component.addRoleToDisplay('owner')
     expect(component.rolesToPick).not.toContain('owner')
-    expect(component.rolesToDisplay).toContain('owner')
+    expect(component.roleSectionsToDisplay).toContain('owner')
   })
 
   it('should remove contact by index', () => {
@@ -156,7 +156,7 @@ describe('FormFieldContactsForResourceComponent', () => {
       },
     } as unknown as SimpleChanges
     component.ngOnChanges(changes)
-    expect(component.rolesToDisplay).toEqual([
+    expect(component.roleSectionsToDisplay).toEqual([
       contactJane.role,
       contactJohn.role,
     ])