From 4f91053e6990d788db54cf9ccdd2a4f795235565 Mon Sep 17 00:00:00 2001
From: Pierre Narcisi <pierre.narcisi@mnhn.fr>
Date: Thu, 3 Aug 2023 11:30:02 +0200
Subject: [PATCH] fix(metadata): changing fields to ng-select

---
 .../metadataModule/metadata.component.html    | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/metadataModule/metadata.component.html b/frontend/src/app/metadataModule/metadata.component.html
index 1cae313aa6..1a1ee3adfc 100644
--- a/frontend/src/app/metadataModule/metadata.component.html
+++ b/frontend/src/app/metadataModule/metadata.component.html
@@ -251,40 +251,51 @@ <h3 class="main-color">Catalogue des jeux de données</h3>
       [parentFormControl]="metadataService.form.get('date')"
       label="Date de création"
     ></pnx-date>
-    <label>Acteur (organisme)</label>
 
-    <select
+    <label>Acteur (organisme)</label>
+    
+    <ng-select
+      [items]="organisms"
       [formControl]="metadataService.form.get('organism')"
-      class="form-control form-control"
-    >
-      <option
-        value=""
-        selected
-      >--</option>
-      <option
-        *ngFor="let org of organisms"
-        value="{{ org.id_organisme }}"
+      bindLabel="nom_organisme"
+      bindValue="id_organisme"
+      [multiple]="false"
+      [searchable]="true"
+      [clearable]="true"
       >
-        {{ org.nom_organisme }}
-      </option>
-    </select>
+      <ng-template
+        ng-option-tmp
+        let-item="item"
+        let-index="index"
+        let-search="searchTerm"
+      >
+        <div [matTooltip]="item.nom_organisme" [attr.data-qa]="item.id_organism">
+          <span class="pre-wrap">{{item.nom_organisme}}</span>
+        </div>
+      </ng-template>
+    </ng-select>
+
     <label> Acteur (personne)</label>
 
-    <select
-      class="form-control form-control"
+    <ng-select
+      [items]="roles"
       [formControl]="metadataService.form.get('person')"
-    >
-      <option
-        value=""
-        selected
-      >--</option>
-      <option
-        *ngFor="let role of roles"
-        value="{{ role.id_role }}"
+      bindLabel="nom_complet"
+      bindValue="id_role"
+      [multiple]="false"
+      [virtualScroll]="true"
       >
-        {{ role?.nom_complet }}
-      </option>
-    </select>
+      <ng-template
+        ng-option-tmp
+        let-item="item"
+        let-index="index"
+        let-search="searchTerm"
+      >
+        <div [matTooltip]="item.nom_complet" [attr.data-qa]="item.id_role">
+          <span class="pre-wrap">{{item.nom_complet}}</span>
+        </div>
+      </ng-template>
+    </ng-select>
 
     <div *ngIf="displayMetaAreaFilters() && metadataService.formBuilded">
       <div *ngFor="let area of areaFilters; let i = index">