Feat(mapping) sort mapping and put a ng-select

PnX-SI · Mar 20, 2024 · 3acdfe7 · 3acdfe7
1 parent 63815f7
commit 3acdfe7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/.../imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html b/.../imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
@@ -8,18 +8,22 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
       <fieldset>
         <div *ngIf="userFieldMappings.length > 0" class="form-group">
           <legend class="px-1">Choix d’un modèle d'import prédéfini</legend>
-          <select
-            class="form-control"
+          <ng-select
             id="mappingSelection"
+            [items]="userFieldMappings"
+            [clearable]="true"
             [formControl]="fieldMappingForm"
             [compareWith]="areMappingFieldEqual"
             [disableControl]="!userFieldMappings.length"
           >
-            <option [ngValue]="null"></option>
-            <option *ngFor="let fieldMapping of userFieldMappings" [ngValue]="fieldMapping">
-              {{ fieldMapping.label }}
-            </option>
-          </select>
+            <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+              <div>
+                <span class="pre-wrap">
+                  {{ item.label }}
+                </span>
+              </div>
+            </ng-template>
+          </ng-select>
         </div>
 
         <div class="d-flex flex-row justify-content-center mt-3">

diff --git a/...es/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts b/...es/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.ts
@@ -88,7 +88,7 @@ export class FieldsMappingStepComponent implements OnInit {
       targetFields: this._importDataService.getBibFields(),
       sourceFields: this._importDataService.getColumnsImport(this.importData.id_import),
     }).subscribe(({ fieldMappings, targetFields, sourceFields }) => {
-      this.userFieldMappings = fieldMappings;
+      this.userFieldMappings = fieldMappings.sort((a, b) => a.label.localeCompare(b.label));
 
       this.targetFields = targetFields;
       this.mappedTargetFields = new Set();
@@ -272,9 +272,11 @@ export class FieldsMappingStepComponent implements OnInit {
             'Le mapping ' + this.fieldMappingForm.value.label + ' a bien été supprimé'
           );
           this.fieldMappingForm.setValue(null, { emitEvent: false });
-          this.userFieldMappings = this.userFieldMappings.filter((mapping) => {
-            return mapping.id !== mapping_id;
-          });
+          this.userFieldMappings = this.userFieldMappings
+            .filter((mapping) => {
+              return mapping.id !== mapping_id;
+            })
+            .sort((a, b) => a.label.localeCompare(b.label));
           this.spinner = false;
         },
         () => {