wip

geonetwork · Aug 20, 2024 · b102a6c · b102a6c
1 parent c90e4f2
commit b102a6c
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 37 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,22 +1,28 @@
 <ng-container *ngIf="organization && contact">
-  <div
-    class="flex flex-row border border-gray-200 bg-gray-50 rounded-xl p-4 gap-4"
-  >
-    <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
-        >
-        <gn-ui-button
-          data-test="removeContactButton"
-          type="light"
-          extraClass="w-[20px] h-[20px] flex items-center justify-center"
-          (buttonClick)="removeContact(contact)"
-          ><span class="text-[14px] leading-[0] font-bold">&#x2715;</span>
-        </gn-ui-button>
+  <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>
-      <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>
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
@@ -24,6 +24,7 @@ import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 export class ContactCardComponent {
   @Input() contact: Individual
   @Input() organization: Organization
+  @Input() removable = true
   @Output() contactRemoved = new EventEmitter<Individual>()
 
   removeContact(contact: 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,7 +16,7 @@
   </div>
   <div
     class="mt-8"
-    *ngIf="rolesToDisplay && rolesToDisplay.length > 0"
+    *ngIf="rolesToDisplay && rolesToDisplay.length > 0; else noContact"
     data-test="displayedRoles"
   >
     <div
@@ -38,15 +38,29 @@
         [clearOnSelection]="true"
       >
       </gn-ui-autocomplete>
-
-      <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 *ngIf="getContactsByRole(role).length > 1">
+        <gn-ui-sortable-list
+          [elements]="getContactByRoleForSortableList(role)"
+          (elementsChange)="handleContactOrderChange($event)"
+        ></gn-ui-sortable-list>
       </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>
+  <ng-template #noContact>
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  </ng-template>
 </div>
diff --git a/...form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts b/...form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts
@@ -7,6 +7,7 @@ import {
   OnChanges,
   OnInit,
   SimpleChanges,
+  Type,
 } from '@angular/core'
 import { FormControl } from '@angular/forms'
 import {
@@ -26,6 +27,10 @@ import { UserModel } from '@geonetwork-ui/common/domain/model/user'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import {
+  DynamicElement,
+  SortableListComponent,
+} from '@geonetwork-ui/ui/elements'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -41,14 +46,15 @@ import { ContactCardComponent } from '../../../contact-card/contact-card.compone
     AutocompleteComponent,
     TranslateModule,
     ContactCardComponent,
+    SortableListComponent,
   ],
 })
 export class FormFieldContactsForResourceComponent
   implements OnInit, OnChanges
 {
   @Input() control: FormControl<Individual[]>
 
-  allUser$: Observable<UserModel[]>
+  allUsers$: Observable<UserModel[]>
 
   rolesToPick: string[] = [
     'resource_provider',
@@ -62,12 +68,14 @@ export class FormFieldContactsForResourceComponent
 
   allOrganizations: Map<string, Organization> = new Map()
 
+  addOptions: Array<{ buttonLabel: string; eventName: string }> = []
+
   constructor(
     private platformServiceInterface: PlatformServiceInterface,
     private organizationsServiceInterface: OrganizationsServiceInterface,
     private changeDetectorRef: ChangeDetectorRef
   ) {
-    this.allUser$ = this.platformServiceInterface.getUsers()
+    this.allUsers$ = this.platformServiceInterface.getUsers()
   }
 
   ngOnInit(): void {
@@ -81,7 +89,7 @@ export class FormFieldContactsForResourceComponent
     )
   }
 
-  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+  ngOnChanges(changes: SimpleChanges) {
     const contactsForResource = changes['control']
 
     if (
@@ -92,6 +100,8 @@ export class FormFieldContactsForResourceComponent
         (contact: Individual) => contact.role
       )
 
+      console.log(contactsForResource.currentValue)
+
       rolesToAdd.forEach((role: string) => {
         if (!this.rolesToDisplay.includes(role)) {
           this.rolesToDisplay.push(role)
@@ -136,7 +146,7 @@ export class FormFieldContactsForResourceComponent
    * gn-ui-autocomplete
    */
   autoCompleteAction = (query: string) => {
-    return this.allUser$.pipe(
+    return this.allUsers$.pipe(
       switchMap((users) => [
         users.filter((user) => user.username.includes(query)),
       ]),
@@ -148,8 +158,8 @@ export class FormFieldContactsForResourceComponent
   /**
    * gn-ui-autocomplete
    */
-  async addContact(contact: UserModel, role: string) {
-    let newContactsforRessource = {
+  addContact(contact: UserModel, role: string) {
+    let newContactsForRessource = {
       firstName: contact.name ?? '',
       lastName: contact.surname ?? '',
       organization: {
@@ -166,12 +176,12 @@ export class FormFieldContactsForResourceComponent
       contact.organisation
     )
 
-    newContactsforRessource = {
-      ...newContactsforRessource,
+    newContactsForRessource = {
+      ...newContactsForRessource,
       organization: newContactOrganization,
     }
 
-    const newControlValue = [...this.control.value, newContactsforRessource]
+    const newControlValue = [...this.control.value, newContactsForRessource]
 
     this.control.setValue(newControlValue)
   }
@@ -185,4 +195,26 @@ export class FormFieldContactsForResourceComponent
   getOrganizationByName(name: string): Organization {
     return this.allOrganizations.get(name)
   }
+
+  getContactByRoleForSortableList(role: string): Array<DynamicElement> {
+    return this.control.value
+      .filter((contact: Individual) => {
+        return contact.role === role
+      })
+      .map((contact) => ({
+        component: ContactCardComponent,
+        inputs: {
+          contact,
+          organization: contact.organization,
+          removable: false,
+        },
+      })) as Array<{
+      component: Type<any>
+      inputs: Record<string, any>
+    }>
+  }
+
+  handleContactOrderChange(event) {
+    console.log(event)
+  }
 }
diff --git a/libs/feature/editor/src/lib/fields.config.ts b/libs/feature/editor/src/lib/fields.config.ts
@@ -86,7 +86,6 @@ export const RECORD_ABSTRACT_FIELD: EditorField = {
 export const CONTACTS_FOR_RESOURCE_FIELD: EditorField = {
   model: 'contactsForResource',
   formFieldConfig: {
-    // labelKey: marker('editor.record.form.field.contactsForResource')
     labelKey: '',
   },
 }

diff --git a/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts b/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts
@@ -17,7 +17,7 @@ import {
 import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 
-type DynamicElement = {
+export type DynamicElement = {
   component: Type<unknown>
   inputs: Record<string, unknown>
 }
@@ -40,7 +40,7 @@ type DynamicElement = {
 })
 export class SortableListComponent {
   @Input() elements: Array<DynamicElement>
-  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
+  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }> = []
   @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
   @Output() add = new EventEmitter<string>()
 

diff --git a/translations/de.json b/translations/de.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "Kurzbeschreibung",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "Schlagwörter",
   "editor.record.form.field.license": "Lizenz",
   "editor.record.form.field.overviews": "",

diff --git a/translations/en.json b/translations/en.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "Next",
   "editor.record.form.bottomButtons.previous": "Previous",
   "editor.record.form.field.abstract": "Abstract",
+  "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",
   "editor.record.form.field.overviews": "Overviews",

diff --git a/translations/es.json b/translations/es.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
   "editor.record.form.field.overviews": "",

diff --git a/translations/fr.json b/translations/fr.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "Suivant",
   "editor.record.form.bottomButtons.previous": "Précédent",
   "editor.record.form.field.abstract": "Résumé",
+  "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",
   "editor.record.form.field.overviews": "Aperçus",

diff --git a/translations/it.json b/translations/it.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "Licenza",
   "editor.record.form.field.overviews": "",

diff --git a/translations/nl.json b/translations/nl.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
   "editor.record.form.field.overviews": "",

diff --git a/translations/pt.json b/translations/pt.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "",
   "editor.record.form.field.overviews": "",

diff --git a/translations/sk.json b/translations/sk.json
@@ -176,6 +176,7 @@
   "editor.record.form.bottomButtons.next": "",
   "editor.record.form.bottomButtons.previous": "",
   "editor.record.form.field.abstract": "",
+  "editor.record.form.field.contactsForResource.noContact": "",
   "editor.record.form.field.keywords": "",
   "editor.record.form.field.license": "Licencia",
   "editor.record.form.field.overviews": "",