From eff0068c580766ee1c9d83554e812f925c70df92 Mon Sep 17 00:00:00 2001
From: jacquesfize <jacques.fize@ecrins-parcnational.fr>
Date: Mon, 8 Apr 2024 16:40:47 +0200
Subject: [PATCH] apply lint

---
 .../occhab-map-list.component.html            |   4 +-
 .../delete-modal/delete-modal.component.html  |  32 +-
 .../destinations/destinations.component.html  |  14 +-
 .../import_errors.component.html              | 211 +++--
 .../import_errors.component.scss              |   3 +-
 .../import_list/import-list.component.html    |   4 +-
 .../content-mapping-step.component.html       | 770 ++++++++++--------
 .../content-mapping-step.component.scss       |   2 +-
 .../decode-file-step.component.html           | 233 +++---
 .../decode-file-step.component.scss           |  10 +-
 .../fields-mapping-step.component.html        | 123 ++-
 .../fields-mapping-step.component.scss        |   9 +-
 .../footer-stepper.component.html             |  38 +-
 .../import-step/import-step.component.html    | 433 +++++-----
 .../import-step/import-step.component.scss    |   5 +-
 .../stepper/stepper.component.html            |  40 +-
 .../stepper/stepper.component.scss            |  24 +-
 .../upload-file-step.component.html           | 170 ++--
 .../upload-file-step.component.scss           |   8 +-
 .../import_report.component.html              | 690 ++++++++++------
 .../import_report.component.scss              |   4 +-
 .../import-modal-destination.component.html   |  95 +--
 .../synthese-list.component.html              |   4 +-
 .../synthese-list.component.scss              |   3 +-
 24 files changed, 1670 insertions(+), 1259 deletions(-)

diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
index 173e574be7..f5998d8512 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
@@ -217,8 +217,8 @@
                 let-row="row"
                 maxWidth="50"
               >
-                <span matTooltip="{{ row.date_min | date : 'dd-MM-yyyy' }}">
-                  {{ row.date_min | date : 'dd-MM-yyyy' }}
+                <span matTooltip="{{ row.date_min | date: 'dd-MM-yyyy' }}">
+                  {{ row.date_min | date: 'dd-MM-yyyy' }}
                 </span>
               </ng-template>
             </ngx-datatable-column>
diff --git a/frontend/src/app/modules/imports/components/delete-modal/delete-modal.component.html b/frontend/src/app/modules/imports/components/delete-modal/delete-modal.component.html
index 1c637ed8c4..5c803f46c5 100644
--- a/frontend/src/app/modules/imports/components/delete-modal/delete-modal.component.html
+++ b/frontend/src/app/modules/imports/components/delete-modal/delete-modal.component.html
@@ -1,31 +1,35 @@
-
 <div class="modal-header">
   <h4 class="modal-title pull-left">Suppression</h4>
-  <button type="button" class="close pull-right" aria-label="Close" (click)="c()">
+  <button
+    type="button"
+    class="close pull-right"
+    aria-label="Close"
+    (click)="c()"
+  >
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
 <div class="modal-body">
   <p>
-    Supprimer cet import associé au JDD "{{row.dataset.dataset_name}}" et commencé le {{row.date_create_import}}?
-  </p>
-  <p *ngIf="row.date_end_import">
-    Attention : cela supprimera aussi les données importées.
+    Supprimer cet import associé au JDD "{{ row.dataset.dataset_name }}" et commencé le
+    {{ row.date_create_import }}?
   </p>
-  <button 
-    type="button" 
-    (click)="c()" 
+  <p *ngIf="row.date_end_import">Attention : cela supprimera aussi les données importées.</p>
+  <button
+    type="button"
+    (click)="c()"
     mat-raised-button
     class="mr-1"
-    >
+  >
     Annuler
   </button>
 
-  <button type="button" 
+  <button
+    type="button"
     (click)="deleteImport()"
     mat-raised-button
     color="warn"
-    >Supprimer</button>
+  >
+    Supprimer
+  </button>
 </div>
-
-
diff --git a/frontend/src/app/modules/imports/components/destinations/destinations.component.html b/frontend/src/app/modules/imports/components/destinations/destinations.component.html
index 739097f7fd..0a47581ac9 100644
--- a/frontend/src/app/modules/imports/components/destinations/destinations.component.html
+++ b/frontend/src/app/modules/imports/components/destinations/destinations.component.html
@@ -1,4 +1,4 @@
-<small> {{ label }} </small>
+<small>{{ label }}</small>
 <ng-select
   [ngClass]="class"
   [items]="destinations"
@@ -11,8 +11,16 @@
   [formControl]="parentFormControl"
   (clear)="onClear.emit()"
 >
-  <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-    <div matTooltip="{{ item.code }}" [attr.data-qa]="item.code">
+  <ng-template
+    ng-option-tmp
+    let-item="item"
+    let-index="index"
+    let-search="searchTerm"
+  >
+    <div
+      matTooltip="{{ item.code }}"
+      [attr.data-qa]="item.code"
+    >
       <span class="pre-wrap">{{ item.label }}</span>
     </div>
   </ng-template>
diff --git a/frontend/src/app/modules/imports/components/import_errors/import_errors.component.html b/frontend/src/app/modules/imports/components/import_errors/import_errors.component.html
index d3a803556a..46fb3f07b4 100644
--- a/frontend/src/app/modules/imports/components/import_errors/import_errors.component.html
+++ b/frontend/src/app/modules/imports/components/import_errors/import_errors.component.html
@@ -1,81 +1,136 @@
 <div class="container">
-    <div class="card border-danger">
-        <div class="card-header bg-danger text-white text-center">
-            <b>Rapport d'erreur(s) </b>
+  <div class="card border-danger">
+    <div class="card-header bg-danger text-white text-center">
+      <b>Rapport d'erreur(s)</b>
+    </div>
+    <div class="card-body">
+      <h3 class="underlined">Description de l'import</h3>
+      <div class="row">
+        <div class="col-6">
+          <p>
+            <b>Nom du fichier :</b>
+            {{ importData.full_file_name }}
+          </p>
+          <p>
+            <b>Jeu de données :</b>
+            {{ importData.dataset.dataset_name }}
+          </p>
+          <p>
+            <b>Date de soumission de l'import :</b>
+            {{ importData.date_create_import | date: 'dd/MM/yyyy' }}
+          </p>
+          <p>
+            <b>Auteur(s) :</b>
+            {{ importData.authors_name }}
+          </p>
+          <p>
+            <b>Nombre de lignes :</b>
+            {{ importData.source_count }}
+          </p>
         </div>
-        <div class="card-body">
-            <h3 class="underlined">
-                Description de l'import
-            </h3>
-            <div class="row">
-                <div class="col-6">
-                        <p> <b> Nom du fichier : </b> {{importData.full_file_name}} </p>
-                        <p> <b> Jeu de données : </b> {{importData.dataset.dataset_name}} </p>
-                        <p> <b>Date de soumission de l'import :  </b> {{importData.date_create_import | date:'dd/MM/yyyy'}}  </p>
-                        <p> <b>Auteur(s) :  </b> {{importData.authors_name}} </p>
-                        <p> <b>Nombre de lignes :  </b> {{importData.source_count}} </p>
-                </div>
-                <div class="col-6">
-                    <p> <b> SRID : </b>  {{importData.srid}} </p>
-                    <p><b> Encodage :</b>  {{importData.encoding}} </p>
-                    <p><b>  Format : </b>{{importData.format_source_file}} </p>
-                </div>
-            </div>
+        <div class="col-6">
+          <p>
+            <b>SRID :</b>
+            {{ importData.srid }}
+          </p>
+          <p>
+            <b>Encodage :</b>
+            {{ importData.encoding }}
+          </p>
+          <p>
+            <b>Format :</b>
+            {{ importData.format_source_file }}
+          </p>
+        </div>
+      </div>
 
-            <h3 class="underlined" *ngIf="importErrors"> Erreurs</h3>
-            <div *ngIf="importErrors; then errors"></div>
-            <ng-template #errors>
-                <p> La soumission comporte <b> {{importErrors.length}}</b>  erreur(s) </p>
-                <table class="table table-striped table-bordered">
-                   <thead>
-                       <tr>
-                           <th>Type d'erreur </th>
-                           <th>Champ </th>
-                           <th>Description erreur</th>
-                           <th>Nombre d'erreur(s)</th>
-                           <th>Numéro des lignes en erreur </th>
-                           <th>{{ "Import.Report.Errors.Entity" | translate }}</th>
-                       </tr>
-                   </thead>
-                   <tbody>
-                       <tr *ngFor="let error of importErrors">
-                           <td> {{error.type.name}} </td>
-                           <td> {{error.column}} </td>
-                           <td> {{error.type.description}} <i *ngIf="error.comment"> <br> {{error.comment}} </i> </td>
-                           <td> {{error.rows.length || ''}} </td>
-                           <td> {{error.rows.join(', ')}} </td>
-                           <td> {{error.entity ? error.entity.label : ""}} </td>
-                       </tr>
-                   </tbody>
-                </table>
-            </ng-template>
-            <h3 class="underlined" *ngIf="importWarnings"> Alertes </h3>
-            <div *ngIf="importWarnings; then warnings"></div>
-            <ng-template #warnings>
-                <p> La soumission comporte <b> {{importWarnings.length}}</b>  alertes(s) </p>
-                <table class="table table-striped table-bordered">
-                    <thead>
-                    <tr>
-                        <th>Type d'alert </th>
-                        <th>Champ </th>
-                        <th>Description alert</th>
-                        <th>Nombre d'erreur(s)</th>
-                        <th>Numéro des lignes en erreur </th>
-                        <th>{{ "Import.Report.Errors.Entity" | translate }}</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr *ngFor="let warning of importWarnings">
-                        <td> {{warning.type.name}} </td>
-                        <td> {{warning.column}} </td>
-                        <td> {{warning.type.description}} <i *ngIf="warning.comment"> <br> {{warning.comment}} </i> </td>
-                        <td> {{warning.rows.length || ''}} </td>
-                        <td> {{warning.rows.join(', ')}} </td>
-                        <td> {{error.entity ? error.entity.label : ""}} </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ng-template>
-        </div><!-- end card-body -->
-    </div><!-- end card -->
-</div><!-- end container -->
+      <h3
+        class="underlined"
+        *ngIf="importErrors"
+      >
+        Erreurs
+      </h3>
+      <div *ngIf="importErrors; then errors"></div>
+      <ng-template #errors>
+        <p>
+          La soumission comporte
+          <b>{{ importErrors.length }}</b>
+          erreur(s)
+        </p>
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Type d'erreur</th>
+              <th>Champ</th>
+              <th>Description erreur</th>
+              <th>Nombre d'erreur(s)</th>
+              <th>Numéro des lignes en erreur</th>
+              <th>{{ 'Import.Report.Errors.Entity' | translate }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let error of importErrors">
+              <td>{{ error.type.name }}</td>
+              <td>{{ error.column }}</td>
+              <td>
+                {{ error.type.description }}
+                <i *ngIf="error.comment">
+                  <br />
+                  {{ error.comment }}
+                </i>
+              </td>
+              <td>{{ error.rows.length || '' }}</td>
+              <td>{{ error.rows.join(', ') }}</td>
+              <td>{{ error.entity ? error.entity.label : '' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </ng-template>
+      <h3
+        class="underlined"
+        *ngIf="importWarnings"
+      >
+        Alertes
+      </h3>
+      <div *ngIf="importWarnings; then warnings"></div>
+      <ng-template #warnings>
+        <p>
+          La soumission comporte
+          <b>{{ importWarnings.length }}</b>
+          alertes(s)
+        </p>
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Type d'alert</th>
+              <th>Champ</th>
+              <th>Description alert</th>
+              <th>Nombre d'erreur(s)</th>
+              <th>Numéro des lignes en erreur</th>
+              <th>{{ 'Import.Report.Errors.Entity' | translate }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let warning of importWarnings">
+              <td>{{ warning.type.name }}</td>
+              <td>{{ warning.column }}</td>
+              <td>
+                {{ warning.type.description }}
+                <i *ngIf="warning.comment">
+                  <br />
+                  {{ warning.comment }}
+                </i>
+              </td>
+              <td>{{ warning.rows.length || '' }}</td>
+              <td>{{ warning.rows.join(', ') }}</td>
+              <td>{{ error.entity ? error.entity.label : '' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </ng-template>
+    </div>
+    <!-- end card-body -->
+  </div>
+  <!-- end card -->
+</div>
+<!-- end container -->
diff --git a/frontend/src/app/modules/imports/components/import_errors/import_errors.component.scss b/frontend/src/app/modules/imports/components/import_errors/import_errors.component.scss
index 688959748e..51b92cd50c 100644
--- a/frontend/src/app/modules/imports/components/import_errors/import_errors.component.scss
+++ b/frontend/src/app/modules/imports/components/import_errors/import_errors.component.scss
@@ -1,4 +1,3 @@
 .card-body p {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
-
diff --git a/frontend/src/app/modules/imports/components/import_list/import-list.component.html b/frontend/src/app/modules/imports/components/import_list/import-list.component.html
index 9ec95f93d1..c293ca0d11 100644
--- a/frontend/src/app/modules/imports/components/import_list/import-list.component.html
+++ b/frontend/src/app/modules/imports/components/import_list/import-list.component.html
@@ -11,8 +11,8 @@ <h5 class="card-title mb-0">Liste des imports</h5>
               'Import.Destinations' | translate | lowercase
             }}"
             [parentFormControl]="selectDestinationForm"
-            (onChange) = "resetPage()"
-            (onClear) = "resetPage()"
+            (onChange)="resetPage()"
+            (onClear)="resetPage()"
             class="flex-fill pr-1"
           ></pnx-destinations>
           <div class="flex-fill">
diff --git a/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.html b/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.html
index 8d754fdc44..a87aabab09 100644
--- a/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.html
@@ -1,59 +1,55 @@
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0"> Correspondance des nomenclatures </h5>
+<div class="card">
+  <div class="card-header">
+    <h5 class="card-title mb-0">Correspondance des nomenclatures</h5>
+  </div>
+  <div class="card-body">
+    <!-- Choix de la liste des nomenclatures -->
+    <form class="was-validated">
+      <fieldset>
+        <div *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.R != '0'">
+          <legend class="px-1">Choix du modèle d'import</legend>
+          <div class="form-group">
+            <select
+              class="form-control form-control-sm"
+              id="contentMappingSelection"
+              [formControl]="selectMappingContentForm"
+              [compareWith]="areMappingContentEqual"
+            >
+              <option [ngValue]="null">-</option>
+              <option
+                *ngFor="let contentMapping of userContentMappings"
+                [ngValue]="contentMapping"
+              >
+                {{ contentMapping.label }}
+              </option>
+            </select>
+          </div>
         </div>
-        <div class="card-body">
-            <!-- Choix de la liste des nomenclatures -->
-            <form class="was-validated">
-                <fieldset>
-                    <div *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.R != '0'">
-                        <legend class="px-1">
-                            Choix du modèle d'import
-                        </legend>
-                        <div class="form-group">
-                            <select
-                                class="form-control form-control-sm"
-                                id="contentMappingSelection"
-                                [formControl]="selectMappingContentForm"
-                                [compareWith]="areMappingContentEqual"
-                            >
-                                <option [ngValue]="null">
-                                    -
-                                </option>
-                                <option
-                                    *ngFor="let contentMapping of userContentMappings"
-                                    [ngValue]="contentMapping"
-                                >
-                                    {{contentMapping.label}}
-                                </option>
-                            </select>
-                        </div>
-                    </div>
 
-                    <div class="row">
-                        <div class="col">
-                            <button
-                                *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.U != '0'"
-                                class="btn-sm mb-3 ml-1"
-                                mat-raised-button
-                                color="primary"
-                                (click)="showRenameMappingForm()"
-                                [disabled]="!deleteMappingEnabled()"
-                            >
-                                Renommer le modèle d'import
-                            </button>
-                            <button
-                                *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.D != '0'"
-                                class="btn-sm mb-3 ml-1"
-                                mat-raised-button
-                                color="warn"
-                                (click)="openDeleteModal()"
-                                [disabled]="!deleteMappingEnabled()"
-                            >
-                                Supprimer le modèle d'import
-                            </button>
-                        </div>
-                        <!--<div
+        <div class="row">
+          <div class="col">
+            <button
+              *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.U != '0'"
+              class="btn-sm mb-3 ml-1"
+              mat-raised-button
+              color="primary"
+              (click)="showRenameMappingForm()"
+              [disabled]="!deleteMappingEnabled()"
+            >
+              Renommer le modèle d'import
+            </button>
+            <button
+              *ngIf="cruvedStore?.cruved?.IMPORT.module_objects.MAPPING.cruved.D != '0'"
+              class="btn-sm mb-3 ml-1"
+              mat-raised-button
+              color="warn"
+              (click)="openDeleteModal()"
+              [disabled]="!deleteMappingEnabled()"
+            >
+              Supprimer le modèle d'import
+            </button>
+          </div>
+          <!--<div
                             class="col"
                             *ngIf='displayCheckBox'
                         >
@@ -64,318 +60,378 @@ <h5 class="card-title mb-0"> Correspondance des nomenclatures </h5>
                             >
                             Afficher les champs automatiquement associés
                         </div>-->
-                    </div>
-                    <div
-                            *ngIf="renameMappingFormVisible"
-                            class="d-flex flex-row justify-content-between form_group"
-                            id="updateMap"
-                    >
-                        <input
-                                type="text"
-                                class="form-control mr-2"
-                                value="Inconnu"
-                                [formControl]="createOrRenameMappingForm"
-                        >
-                        <button
-                                class="d-flex justify-content-center align-content-between mr-2 button-success"
-                                (click)="renameMapping()"
-                                mat-raised-button
-                                matTooltip="Modifier le nom du modèle d'import"
-                                [disabled]="!createOrRenameMappingForm.valid || selectMappingContentForm.value.label.trim() == this.createOrRenameMappingForm.value.trim()"
-                        >
-                            <mat-icon>check</mat-icon>
-                        </button>
-                        <button
-                                matTooltip="Annuler la modification du nom du modèle d'import"
-                                class="d-flex justify-content-center align-content-between"
-                                (click)="hideCreateOrRenameMappingForm()"
-                                mat-raised-button
-                                color="warn"
-                        >
-                            Annuler
-                        </button>
-                    </div>
-                    <div *ngIf="unmappedFields.size > 0 || mappedFields.size > 0">
-                        <div
-                            *ngIf="unmappedFields.size == 0"
-                            class="alert alert-success mat-alert"
-                        >
-                            L'ensemble des valeurs du fichier a été automatiquement associé aux nomenclatures.
-                        </div>
-                        <div
-                            *ngIf="unmappedFields.size == 1"
-                            class="alert alert-success mat-alert"
-                        >
-                            Une seule valeur du fichier a été automatiquement associée aux valeurs des nomenclatures.
-                            <br />
-                            {{unmappedFields.size}} restent à associer manuellement.
-                        </div>
-                        <div
-                            *ngIf="unmappedFields.size > 1"
-                            class="alert alert-success mat-alert"
-                        >
-                            {{mappedFields.size}} champs du fichier ont été automatiquement associés aux champs du modèle
-                            d'import. <br />
-                            {{unmappedFields.size}} restent à associer manuellement.
-                        </div>
-                        <div
-                            *ngIf="mappedFields.size == 0"
-                            class="alert alert-danger"
-                        >
-                            Aucune valeur du fichier n'a pu être associée aux valeurs des nomenclatures.
-                        </div>
-                    </div>
-                    <div
-                        *ngIf="_cm.newMapping"
-                        class="d-flex flex-row justify-content-between form_group"
-                        id="newMap"
-                    >
-                        <input
-                            type="text"
-                            class="form-control mr-2"
-                            value="Inconnu"
-                            [formControl]="newMappingNameForm"
-                        >
-                        <button
-                            class="d-flex justify-content-center align-content-between mr-2 button-success"
-                            mat-raised-button
-                            (click)="saveMappingName()"
-                        >
-                            <mat-icon>done</mat-icon>
-                        </button>
-                        <button
-                            class="d-flex justify-content-center align-content-between "
-                            (click)="_cm.cancelMapping(contentMappingForm)"
-                            mat-raised-button
-                            color="warn"
-                        >
-                            annuler
-                        </button>
-                    </div>
-                </fieldset>
-            </form>
-
-            <form
-                [formGroup]="contentTargetForm"
-                *ngIf="showForm"
-            >
-                <div *ngFor="let targetField of importValues | keyvalue">
-                    <div
-                        [hidden]="false"
-                        class="card field-card"
-                    >
-                        <div
-                            class="field-header"
-                            (click)="targetField.value.nomenclature_type.isCollapsed = !targetField.value.nomenclature_type.isCollapsed"
-                        >
-                            <div class="card-title mb-0">
-                                {{targetField.value.nomenclature_type.label_default}}
-                                <i
-                                    matTooltip="{{targetField.value.nomenclature_type.definition_default}} |  Valeur par défaut: TODO"
-                                    matTooltipClass="custom-tooltip"
-                                    class="fa fa-info-circle"
-                                    aria-hidden="true"
-                                ></i>
-                            </div>
-                            <i
-                                *ngIf="targetField.value.nomenclature_type.isCollapsed"
-                                class="material-icons"
-                            >keyboard_arrow_down</i>
-                            <i
-                                *ngIf="!targetField.value.nomenclature_type.isCollapsed"
-                                class="material-icons"
-                            >keyboard_arrow_up</i>
-                        </div>
-                        <div
-                            [ngbCollapse]="targetField.value.nomenclature_type.isCollapsed"
-                            class="card-body"
-                        >
-                            <div *ngFor="let value of targetField.value.values; let index = index;">
-                                <div
-                                    *ngIf="true"
-                                    class="form-group row"
-                                >
-                                    <label class="col-sm-4 col-form-label" [ngClass]="{'font-italic': value == null || value == ''}">
-                                        <i  *ngIf="value == null || value == ''"
-                                            matTooltip="Nomenclature à utiliser pour les cellules sans valeur (N/A, null)"
-                                            matTooltipClass="custom-tooltip"
-                                            class="fa fa-info-circle mr-1"
-                                            aria-hidden="true">
-                                        </i>{{value || "Valeur vide"}} :
-                                    </label>
-                                    <div class="col-sm-8">
-                                        <select
-                                            class="form-control form-control-sm"
-                                            formControlName="{{targetField.key + '-' + index}}"
-                                            [compareWith]="areNomenclaturesEqual"
-                                            id="{{targetField.key + '-' + index}}"
-                                            (change)="onSelectNomenclature(targetField.key + '-' + index)"
-                                        >
-                                          <option [ngValue]="null"></option>
-                                          <option
-                                              *ngFor="let nomenclature of targetField.value.nomenclatures"
-                                              [ngValue]="nomenclature"
-                                          >
-                                            {{ nomenclature.cd_nomenclature }} - {{ nomenclature.label_default }}
-                                          </option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                </div><!-- endfor -->
-                <div class="d-flex flex-row justify-content-between">
-                    <button
-                        class="btn btn-secondary box-shadow d-flex justify-content-center align-content-between"
-                        (click)="onPreviousStep()"
-                        mat-raised-button
-                        color="primary"
-                    >
-                        <mat-icon>navigate_before</mat-icon>
-                        Précédent
-                    </button>
-                    <button
-                        class="btn btn-success box-shadow d-flex justify-content-center align-content-between"
-                        [disabled]="!isNextStepAvailable()"
-                        (click)="onNextStep()"
-                        mat-raised-button
-                        color="primary"
-                    >
-                        Suivant
-                        <mat-icon>navigate_next</mat-icon>
-                    </button>
-                </div>
-            </form>
         </div>
-    </div>
-    <!-- Spinner -->
-    <div
-        *ngIf="spinner"
-        class="spinner"
-    >
-        <mat-spinner
-            class="upload-spinner"
-            [color]="color"
-            [diameter]="150"
-            [strokeWidth]="12"
+        <div
+          *ngIf="renameMappingFormVisible"
+          class="d-flex flex-row justify-content-between form_group"
+          id="updateMap"
         >
-        </mat-spinner>
-    </div>
-
-    <ng-template
-        #modalConfirm
-        let-modal
-    >
-
-        <div class="modal-header">
-            <h4
-                class="modal-title"
-                id="modal-basic-title"
-            >Enregistrement du modèle</h4>
-            <button
-                type="button"
-                class="close"
-                aria-label="Close"
-                (click)="modal.dismiss('Cross click')"
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+          <input
+            type="text"
+            class="form-control mr-2"
+            value="Inconnu"
+            [formControl]="createOrRenameMappingForm"
+          />
+          <button
+            class="d-flex justify-content-center align-content-between mr-2 button-success"
+            (click)="renameMapping()"
+            mat-raised-button
+            matTooltip="Modifier le nom du modèle d'import"
+            [disabled]="
+              !createOrRenameMappingForm.valid ||
+              selectMappingContentForm.value.label.trim() ==
+                this.createOrRenameMappingForm.value.trim()
+            "
+          >
+            <mat-icon>check</mat-icon>
+          </button>
+          <button
+            matTooltip="Annuler la modification du nom du modèle d'import"
+            class="d-flex justify-content-center align-content-between"
+            (click)="hideCreateOrRenameMappingForm()"
+            mat-raised-button
+            color="warn"
+          >
+            Annuler
+          </button>
         </div>
-        <div class="modal-body">
-            <span *ngIf="!this.updateAvailable; else elseBlock">Souhaitez sauvegarder vos correspondances dans un modèle pour les réutiliser lors d’un futur import ?</span>
-            <ng-template #elseBlock>
-            <span>
-                Le modèle de correspondance a été modifié ; souhaitez-vous mettre à jour le modèle existant ou créer un nouveau modèle ?
-            </span>
-            </ng-template>
-            <form>
-                <div class="form-group">
-                    <label for="mappingName" *ngIf="this.updateAvailable">Nom du modèle</label>
-                    <input [formControl]="modalCreateMappingForm" class="form-control" id="mappingName" placeholder="Nom du modèle">
-                    <span *ngIf="!modalCreateMappingForm.value" class="text-warning"> Un nom doit être renseigné pour pouvoir créer un modèle </span>
-                    <span *ngIf="selectMappingContentForm.value && modalCreateMappingForm.value == selectMappingContentForm.value.label" class="text-warning"> Changer de nom pour pouvoir créer un modèle </span>
-                </div>
-            </form>
+        <div *ngIf="unmappedFields.size > 0 || mappedFields.size > 0">
+          <div
+            *ngIf="unmappedFields.size == 0"
+            class="alert alert-success mat-alert"
+          >
+            L'ensemble des valeurs du fichier a été automatiquement associé aux nomenclatures.
+          </div>
+          <div
+            *ngIf="unmappedFields.size == 1"
+            class="alert alert-success mat-alert"
+          >
+            Une seule valeur du fichier a été automatiquement associée aux valeurs des
+            nomenclatures.
+            <br />
+            {{ unmappedFields.size }} restent à associer manuellement.
+          </div>
+          <div
+            *ngIf="unmappedFields.size > 1"
+            class="alert alert-success mat-alert"
+          >
+            {{ mappedFields.size }} champs du fichier ont été automatiquement associés aux champs du
+            modèle d'import.
+            <br />
+            {{ unmappedFields.size }} restent à associer manuellement.
+          </div>
+          <div
+            *ngIf="mappedFields.size == 0"
+            class="alert alert-danger"
+          >
+            Aucune valeur du fichier n'a pu être associée aux valeurs des nomenclatures.
+          </div>
         </div>
-        <div class="modal-footer">
-            <button
-                type="button"
-                mat-raised-button
-                color="accent"
-                (click)="processNextStep(); modal.close()"
-            >Ne pas enregistrer </button>
-            <button
-                *ngIf="updateAvailable"
-                type="button"
-                mat-raised-button
-                color="primary"
-                (click)="updateMapping(); modal.close()"
-            >Mettre à jour le modèle d'import</button>
-            <button
-                type="button"
-                mat-raised-button
-                color="primary"
-                (click)="createMapping(); modal.close()"
-                [disabled]="!modalCreateMappingForm.value || selectMappingContentForm.value && modalCreateMappingForm.value == selectMappingContentForm.value.label"
-            >Enregistrer un nouveau modèle d'import</button>
+        <div
+          *ngIf="_cm.newMapping"
+          class="d-flex flex-row justify-content-between form_group"
+          id="newMap"
+        >
+          <input
+            type="text"
+            class="form-control mr-2"
+            value="Inconnu"
+            [formControl]="newMappingNameForm"
+          />
+          <button
+            class="d-flex justify-content-center align-content-between mr-2 button-success"
+            mat-raised-button
+            (click)="saveMappingName()"
+          >
+            <mat-icon>done</mat-icon>
+          </button>
+          <button
+            class="d-flex justify-content-center align-content-between"
+            (click)="_cm.cancelMapping(contentMappingForm)"
+            mat-raised-button
+            color="warn"
+          >
+            annuler
+          </button>
         </div>
-    </ng-template>
+      </fieldset>
+    </form>
 
-    <ng-template
-        #modalRedir
-        let-modal
+    <form
+      [formGroup]="contentTargetForm"
+      *ngIf="showForm"
     >
-        <div class="modal-header">
-            <h4
-                class="modal-title"
-                id="modal-basic-title"
-            >Contrôle du fichier en cours...</h4>
-            <button
-                type="button"
-                class="close"
-                aria-label="Close"
-                (click)="modal.dismiss('Cross click')"
+      <div *ngFor="let targetField of importValues | keyvalue">
+        <div
+          [hidden]="false"
+          class="card field-card"
+        >
+          <div
+            class="field-header"
+            (click)="
+              targetField.value.nomenclature_type.isCollapsed =
+                !targetField.value.nomenclature_type.isCollapsed
+            "
+          >
+            <div class="card-title mb-0">
+              {{ targetField.value.nomenclature_type.label_default }}
+              <i
+                matTooltip="{{
+                  targetField.value.nomenclature_type.definition_default
+                }} |  Valeur par défaut: TODO"
+                matTooltipClass="custom-tooltip"
+                class="fa fa-info-circle"
+                aria-hidden="true"
+              ></i>
+            </div>
+            <i
+              *ngIf="targetField.value.nomenclature_type.isCollapsed"
+              class="material-icons"
             >
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            Les contrôles sur votre fichier de {{nbLignes}} lignes ont bien été lancés ...
-            Un mail de notification vous sera envoyé à la fin du traitement.
-        </div>
-        <div class="modal-footer">
-            <button
-                type="button"
-                class="btn btn-warning"
-                (click)="onRedirect(); modal.close()"
-            > OK </button>
+              keyboard_arrow_down
+            </i>
+            <i
+              *ngIf="!targetField.value.nomenclature_type.isCollapsed"
+              class="material-icons"
+            >
+              keyboard_arrow_up
+            </i>
+          </div>
+          <div
+            [ngbCollapse]="targetField.value.nomenclature_type.isCollapsed"
+            class="card-body"
+          >
+            <div *ngFor="let value of targetField.value.values; let index = index">
+              <div
+                *ngIf="true"
+                class="form-group row"
+              >
+                <label
+                  class="col-sm-4 col-form-label"
+                  [ngClass]="{ 'font-italic': value == null || value == '' }"
+                >
+                  <i
+                    *ngIf="value == null || value == ''"
+                    matTooltip="Nomenclature à utiliser pour les cellules sans valeur (N/A, null)"
+                    matTooltipClass="custom-tooltip"
+                    class="fa fa-info-circle mr-1"
+                    aria-hidden="true"
+                  ></i>
+                  {{ value || 'Valeur vide' }} :
+                </label>
+                <div class="col-sm-8">
+                  <select
+                    class="form-control form-control-sm"
+                    formControlName="{{ targetField.key + '-' + index }}"
+                    [compareWith]="areNomenclaturesEqual"
+                    id="{{ targetField.key + '-' + index }}"
+                    (change)="onSelectNomenclature(targetField.key + '-' + index)"
+                  >
+                    <option [ngValue]="null"></option>
+                    <option
+                      *ngFor="let nomenclature of targetField.value.nomenclatures"
+                      [ngValue]="nomenclature"
+                    >
+                      {{ nomenclature.cd_nomenclature }} - {{ nomenclature.label_default }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
+      <!-- endfor -->
+      <div class="d-flex flex-row justify-content-between">
+        <button
+          class="btn btn-secondary box-shadow d-flex justify-content-center align-content-between"
+          (click)="onPreviousStep()"
+          mat-raised-button
+          color="primary"
+        >
+          <mat-icon>navigate_before</mat-icon>
+          Précédent
+        </button>
+        <button
+          class="btn btn-success box-shadow d-flex justify-content-center align-content-between"
+          [disabled]="!isNextStepAvailable()"
+          (click)="onNextStep()"
+          mat-raised-button
+          color="primary"
+        >
+          Suivant
+          <mat-icon>navigate_next</mat-icon>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+<!-- Spinner -->
+<div
+  *ngIf="spinner"
+  class="spinner"
+>
+  <mat-spinner
+    class="upload-spinner"
+    [color]="color"
+    [diameter]="150"
+    [strokeWidth]="12"
+  ></mat-spinner>
+</div>
+
+<ng-template
+  #modalConfirm
+  let-modal
+>
+  <div class="modal-header">
+    <h4
+      class="modal-title"
+      id="modal-basic-title"
+    >
+      Enregistrement du modèle
+    </h4>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <span *ngIf="!this.updateAvailable; else elseBlock">
+      Souhaitez sauvegarder vos correspondances dans un modèle pour les réutiliser lors d’un futur
+      import ?
+    </span>
+    <ng-template #elseBlock>
+      <span>
+        Le modèle de correspondance a été modifié ; souhaitez-vous mettre à jour le modèle existant
+        ou créer un nouveau modèle ?
+      </span>
     </ng-template>
-    <ng-template
-            #deleteConfirmModal
-            let-modalDelete
+    <form>
+      <div class="form-group">
+        <label
+          for="mappingName"
+          *ngIf="this.updateAvailable"
+        >
+          Nom du modèle
+        </label>
+        <input
+          [formControl]="modalCreateMappingForm"
+          class="form-control"
+          id="mappingName"
+          placeholder="Nom du modèle"
+        />
+        <span
+          *ngIf="!modalCreateMappingForm.value"
+          class="text-warning"
+        >
+          Un nom doit être renseigné pour pouvoir créer un modèle
+        </span>
+        <span
+          *ngIf="
+            selectMappingContentForm.value &&
+            modalCreateMappingForm.value == selectMappingContentForm.value.label
+          "
+          class="text-warning"
+        >
+          Changer de nom pour pouvoir créer un modèle
+        </span>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      mat-raised-button
+      color="accent"
+      (click)="processNextStep(); modal.close()"
     >
-        <div class="modal-header">
-            Confirmation
-        </div>
-        <div class="modal-body">
-            Voulez vous supprimer le modèle ?
-        </div>
-        <div class="modal-footer">
-            <button
-                    type="button"
-                    mat-raised-button
-                    color="accent"
-                    (click)="modalDelete.close()"
-            > Annuler </button>
-            <button
-                    type="button"
-                    mat-raised-button
-                    color="warn"
-                    (click)="modalDelete.close(); deleteMapping()"
-            > Supprimer le modèle </button>
-        </div>
+      Ne pas enregistrer
+    </button>
+    <button
+      *ngIf="updateAvailable"
+      type="button"
+      mat-raised-button
+      color="primary"
+      (click)="updateMapping(); modal.close()"
+    >
+      Mettre à jour le modèle d'import
+    </button>
+    <button
+      type="button"
+      mat-raised-button
+      color="primary"
+      (click)="createMapping(); modal.close()"
+      [disabled]="
+        !modalCreateMappingForm.value ||
+        (selectMappingContentForm.value &&
+          modalCreateMappingForm.value == selectMappingContentForm.value.label)
+      "
+    >
+      Enregistrer un nouveau modèle d'import
+    </button>
+  </div>
+</ng-template>
 
-    </ng-template>
+<ng-template
+  #modalRedir
+  let-modal
+>
+  <div class="modal-header">
+    <h4
+      class="modal-title"
+      id="modal-basic-title"
+    >
+      Contrôle du fichier en cours...
+    </h4>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    Les contrôles sur votre fichier de {{ nbLignes }} lignes ont bien été lancés ... Un mail de
+    notification vous sera envoyé à la fin du traitement.
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-warning"
+      (click)="onRedirect(); modal.close()"
+    >
+      OK
+    </button>
+  </div>
+</ng-template>
+<ng-template
+  #deleteConfirmModal
+  let-modalDelete
+>
+  <div class="modal-header">Confirmation</div>
+  <div class="modal-body">Voulez vous supprimer le modèle ?</div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      mat-raised-button
+      color="accent"
+      (click)="modalDelete.close()"
+    >
+      Annuler
+    </button>
+    <button
+      type="button"
+      mat-raised-button
+      color="warn"
+      (click)="modalDelete.close(); deleteMapping()"
+    >
+      Supprimer le modèle
+    </button>
+  </div>
+</ng-template>
diff --git a/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.scss b/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.scss
index e7b1193f71..010f540c94 100644
--- a/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/content-mapping-step/content-mapping-step.component.scss
@@ -67,7 +67,7 @@ tr:nth-child(even) {
 
 /* Transparent Overlay */
 .spinner:before {
-  content: "";
+  content: '';
   display: block;
   position: fixed;
   top: 0;
diff --git a/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.html b/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.html
index 71ceb46ff1..c970440d25 100644
--- a/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.html
@@ -1,123 +1,120 @@
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0"> Configuration du fichier </h5>
-        </div>
-        <div class="card-body">
-            <form
-                [formGroup]="paramsForm"
-            >
-                <!-- Encoding field -->
-                <div class="form-group">
-                    <label> Encodage : </label>
-                    <select
-                        class="custom-select mr-sm-2"
-                        id="encoding"
-                        formControlName="encoding"
-                        required
-                    >
-                        <option
-                            *ngFor="let encoding of importData.available_encodings"
-                            [value]="encoding"
-                        >
-                            {{ encoding }}
-                            <p *ngIf="encoding == importData.detected_encoding">(auto-détecté)</p>
-                        </option>
-                    </select>
-                    <div class="invalid-feedback">Sélectionnez un encodage</div>
-                </div>
-                <!-- Format field -->
-                <div class="form-group">
-                    <label> Format :</label>
-                    <select
-                        class="custom-select mr-sm-2"
-                        id="format"
-                        formControlName="format"
-                        required
-                    >
-                        <option
-                            *ngFor="let format of importData.available_formats"
-                            [value]="format"
-                        >
-                            {{ format }}
-                            <p *ngIf="format== importData.detected_format">(auto-détecté)</p>
-                        </option>
-                    </select>
-                    <div class="invalid-feedback">Sélectionnez un format</div>
-                </div>
-                <!-- SRID field -->
-                <div class="form-group">
-                    <label> Séparateur :</label>
-                    <select
-                        class="custom-select mr-sm-2"
-                        id="separator"
-                        formControlName="separator"
-                        required
-                    >
-                    <option
-                            *ngFor="let separator of importData.available_separators"
-                            [value]="separator"
-                        >
-                            {{ separator }}
-                            <p *ngIf="separator== importData.detected_separator">(auto-détecté)</p>
-                        </option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>SRID des données géographiques :</label>
-                    <select
-                        class="custom-select mr-sm-2"
-                        id="srid"
-                        formControlName="srid"
-                        required
-                    >
-                        <option
-                            *ngFor="let srid of this.config.IMPORT.SRID"
-                            [value]="srid.code"
-                        >
-                            {{srid.name}}
-                        </option>
-                    </select>
-                    <div class="invalid-feedback">Sélectionnez un SRID</div>
-                </div>
-            </form>
-            <!-- Navigation buttons -->
-            <div class="d-flex flex-row justify-content-between">
-                <button
-                    type="submit"
-                    class="btn btn-secondary box-shadow d-flex justify-content-center align-content-between"
-                    mat-raised-button
-                    color=primary
-                    (click)="onPreviousStep()"
-                    id="validate"
-                >
-                    <i class="material-icons"> navigate_before </i>
-                    Précédent
-                </button>
-                <button
-                    type="submit"
-                    class="btn btn-success box-shadow d-flex justify-content-center align-content-between"
-                    mat-raised-button
-                    color=primary
-                    (click)="onSubmit()"
-                    [disabled]="!isNextStepAvailable()"
-                    id="validate"
-                >
-                    Suivant
-                    <i class="material-icons"> navigate_next </i>
-                </button>
-            </div>
-        </div>
+<div class="card">
+  <div class="card-header">
+    <h5 class="card-title mb-0">Configuration du fichier</h5>
+  </div>
+  <div class="card-body">
+    <form [formGroup]="paramsForm">
+      <!-- Encoding field -->
+      <div class="form-group">
+        <label>Encodage :</label>
+        <select
+          class="custom-select mr-sm-2"
+          id="encoding"
+          formControlName="encoding"
+          required
+        >
+          <option
+            *ngFor="let encoding of importData.available_encodings"
+            [value]="encoding"
+          >
+            {{ encoding }}
+            <p *ngIf="encoding == importData.detected_encoding">(auto-détecté)</p>
+          </option>
+        </select>
+        <div class="invalid-feedback">Sélectionnez un encodage</div>
+      </div>
+      <!-- Format field -->
+      <div class="form-group">
+        <label>Format :</label>
+        <select
+          class="custom-select mr-sm-2"
+          id="format"
+          formControlName="format"
+          required
+        >
+          <option
+            *ngFor="let format of importData.available_formats"
+            [value]="format"
+          >
+            {{ format }}
+            <p *ngIf="format == importData.detected_format">(auto-détecté)</p>
+          </option>
+        </select>
+        <div class="invalid-feedback">Sélectionnez un format</div>
+      </div>
+      <!-- SRID field -->
+      <div class="form-group">
+        <label>Séparateur :</label>
+        <select
+          class="custom-select mr-sm-2"
+          id="separator"
+          formControlName="separator"
+          required
+        >
+          <option
+            *ngFor="let separator of importData.available_separators"
+            [value]="separator"
+          >
+            {{ separator }}
+            <p *ngIf="separator == importData.detected_separator">(auto-détecté)</p>
+          </option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label>SRID des données géographiques :</label>
+        <select
+          class="custom-select mr-sm-2"
+          id="srid"
+          formControlName="srid"
+          required
+        >
+          <option
+            *ngFor="let srid of this.config.IMPORT.SRID"
+            [value]="srid.code"
+          >
+            {{ srid.name }}
+          </option>
+        </select>
+        <div class="invalid-feedback">Sélectionnez un SRID</div>
+      </div>
+    </form>
+    <!-- Navigation buttons -->
+    <div class="d-flex flex-row justify-content-between">
+      <button
+        type="submit"
+        class="btn btn-secondary box-shadow d-flex justify-content-center align-content-between"
+        mat-raised-button
+        color="primary"
+        (click)="onPreviousStep()"
+        id="validate"
+      >
+        <i class="material-icons">navigate_before</i>
+        Précédent
+      </button>
+      <button
+        type="submit"
+        class="btn btn-success box-shadow d-flex justify-content-center align-content-between"
+        mat-raised-button
+        color="primary"
+        (click)="onSubmit()"
+        [disabled]="!isNextStepAvailable()"
+        id="validate"
+      >
+        Suivant
+        <i class="material-icons">navigate_next</i>
+      </button>
     </div>
+  </div>
+</div>
 <!-- Spinner -->
 <div
-    *ngIf="isRequestPending"
-    class="spinner"
+  *ngIf="isRequestPending"
+  class="spinner"
 >
-    <mat-spinner
-        class="upload-spinner"
-        [color]="color"
-        [diameter]="150"
-        [strokeWidth]="12"
-    >
-    </mat-spinner>
+  <mat-spinner
+    class="upload-spinner"
+    [color]="color"
+    [diameter]="150"
+    [strokeWidth]="12"
+  ></mat-spinner>
 </div>
diff --git a/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.scss b/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.scss
index 306a01e4a1..9b5d1d7cf7 100644
--- a/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/decode-file-step/decode-file-step.component.scss
@@ -62,11 +62,9 @@ tr:nth-child(even) {
   cursor: pointer;
 }
 
- 
-
 .error-file {
   border-left: 5px solid #ff0000 !important;
-  border-color:  #ff0000 !important;
+  border-color: #ff0000 !important;
 }
 
 .navigate-btn {
@@ -76,9 +74,9 @@ tr:nth-child(even) {
 }
 
 .card-body {
-  padding: 30px 40px
+  padding: 30px 40px;
 }
 
 .file-validation {
-  margin-top: 40px
-}
\ No newline at end of file
+  margin-top: 40px;
+}
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
index 49c8387bcf..ed6281601f 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
@@ -2,11 +2,17 @@
   <div class="card-header">
     <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
   </div>
-  <div *ngIf="formReady" class="card-body">
+  <div
+    *ngIf="formReady"
+    class="card-body"
+  >
     <!-- Choix de la liste des nomenclatures -->
     <form>
       <fieldset>
-        <div *ngIf="userFieldMappings.length > 0" class="form-group">
+        <div
+          *ngIf="userFieldMappings.length > 0"
+          class="form-group"
+        >
           <legend class="px-1">Choix d’un modèle d'import prédéfini</legend>
           <ng-select
             id="mappingSelection"
@@ -16,7 +22,12 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
             [compareWith]="areMappingFieldEqual"
             [disableControl]="!userFieldMappings.length"
           >
-            <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+            <ng-template
+              ng-option-tmp
+              let-item="item"
+              let-index="index"
+              let-search="searchTerm"
+            >
               <div>
                 <span class="pre-wrap">
                   {{ item.label }}
@@ -161,7 +172,10 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
             </a>
             du fichier d’import ne sont actuellement associés à aucun champs cible et seront donc
             ignorés.
-            <div class="collapse" id="unmappedSourceFields">
+            <div
+              class="collapse"
+              id="unmappedSourceFields"
+            >
               <ul style="text-align: left">
                 <li *ngFor="let sourceField of unmappedSourceFields">{{ sourceField }}</li>
               </ul>
@@ -171,30 +185,43 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
       </fieldset>
     </form>
     <form [formGroup]="mappingFormControl">
-      <mat-tab-group [(selectedIndex)]="selectedIndex" animationDuration="0ms" class="entities-tab">
+      <mat-tab-group
+        [(selectedIndex)]="selectedIndex"
+        animationDuration="0ms"
+        class="entities-tab"
+      >
         <mat-tab *ngFor="let entitythemes of targetFields">
           <ng-template mat-tab-label>
             <span
               [matBadge]="this.invalidEntityControls(entitythemes.entity.label)"
               matBadgeColor="warn"
               matBadgeSize="small"
-              [matBadgeHidden]="this.invalidEntityControls(entitythemes.entity.label)<1"
+              [matBadgeHidden]="this.invalidEntityControls(entitythemes.entity.label) < 1"
               class="entity-tab-label"
             >
               {{ entitythemes.entity.label }}
             </span>
           </ng-template>
-          <div *ngFor="let themefields of entitythemes.themes" class="entities-tab__content">
+          <div
+            *ngFor="let themefields of entitythemes.themes"
+            class="entities-tab__content"
+          >
             <fieldset>
               <legend class="px-1">
                 {{ themefields.theme.fr_label_theme }}
               </legend>
               <div class="row m-0">
                 <ng-container *ngFor="let field of themefields.fields">
-                  <div *ngIf="!getValue(field) || displayAllValues" class="col-6">
-                    <div *ngIf="!field.autogenerated" class="form-group">
-                      <small
-                        >{{ field.fr_label }} :
+                  <div
+                    *ngIf="!getValue(field) || displayAllValues"
+                    class="col-6"
+                  >
+                    <div
+                      *ngIf="!field.autogenerated"
+                      class="form-group"
+                    >
+                      <small>
+                        {{ field.fr_label }} :
                         <i
                           *ngIf="field.comment"
                           matTooltip="{{ field.comment }}"
@@ -244,8 +271,14 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
                         {{ mappingFormControl.controls[field.name_field].getError('conflict') }}
                       </div>
                     </div>
-                    <div *ngIf="field.autogenerated" class="form-group">
-                      <p *ngIf="displayAlert(field)" class="text-warning text-sm">
+                    <div
+                      *ngIf="field.autogenerated"
+                      class="form-group"
+                    >
+                      <p
+                        *ngIf="displayAlert(field)"
+                        class="text-warning text-sm"
+                      >
                         Attention les identifiants SINP ne seront pas générés
                       </p>
                       <label for="{{ field.name_field }}">
@@ -291,23 +324,43 @@ <h5 class="card-title mb-0">Correspondance des champs avec le modèle</h5>
     </form>
   </div>
   <!-- Spinner -->
-  <div *ngIf="spinner" class="spinner">
-    <mat-spinner class="upload-spinner" [color]="color" [diameter]="150" [strokeWidth]="12">
-    </mat-spinner>
+  <div
+    *ngIf="spinner"
+    class="spinner"
+  >
+    <mat-spinner
+      class="upload-spinner"
+      [color]="color"
+      [diameter]="150"
+      [strokeWidth]="12"
+    ></mat-spinner>
   </div>
 
-  <ng-template #saveMappingModal let-modal>
+  <ng-template
+    #saveMappingModal
+    let-modal
+  >
     <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">Enregistrement du modèle</h4>
-      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+      <h4
+        class="modal-title"
+        id="modal-basic-title"
+      >
+        Enregistrement du modèle
+      </h4>
+      <button
+        type="button"
+        class="close"
+        aria-label="Close"
+        (click)="modal.dismiss('Cross click')"
+      >
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
-      <span *ngIf="!this.updateAvailable; else elseBlock"
-        >Souhaitez sauvegarder vos correspondances dans un modèle pour les réutiliser lors d’un
-        futur import ?</span
-      >
+      <span *ngIf="!this.updateAvailable; else elseBlock">
+        Souhaitez sauvegarder vos correspondances dans un modèle pour les réutiliser lors d’un futur
+        import ?
+      </span>
       <ng-template #elseBlock>
         <span>
           Le modèle de correspondance a été modifié ; souhaitez-vous mettre à jour le modèle
@@ -316,14 +369,22 @@ <h4 class="modal-title" id="modal-basic-title">Enregistrement du modèle</h4>
       </ng-template>
       <form>
         <div class="form-group">
-          <label for="mappingName" *ngIf="this.updateAvailable">Nom du modèle</label>
+          <label
+            for="mappingName"
+            *ngIf="this.updateAvailable"
+          >
+            Nom du modèle
+          </label>
           <input
             [formControl]="modalCreateMappingForm"
             class="form-control"
             id="mappingName"
             placeholder="Nom du modèle"
           />
-          <span *ngIf="!modalCreateMappingForm.value" class="text-warning">
+          <span
+            *ngIf="!modalCreateMappingForm.value"
+            class="text-warning"
+          >
             Un nom doit être renseigné pour pouvoir créer un modèle
           </span>
           <span
@@ -370,11 +431,19 @@ <h4 class="modal-title" id="modal-basic-title">Enregistrement du modèle</h4>
       </button>
     </div>
   </ng-template>
-  <ng-template #deleteConfirmModal let-modalDelete>
+  <ng-template
+    #deleteConfirmModal
+    let-modalDelete
+  >
     <div class="modal-header">Confirmation</div>
     <div class="modal-body">Voulez vous supprimer le modèle ?</div>
     <div class="modal-footer">
-      <button type="button" mat-raised-button color="accent" (click)="modalDelete.close()">
+      <button
+        type="button"
+        mat-raised-button
+        color="accent"
+        (click)="modalDelete.close()"
+      >
         Annuler
       </button>
       <button
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
index f8e9f499f8..7fe2b33716 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.scss
@@ -2,7 +2,7 @@ fieldset {
   padding: 0.35em 0.625em 0.75em !important;
   border: 1px solid silver !important;
   border-radius: 3px;
-  margin-bottom: 30px // background-color: #f7f7f7;
+  margin-bottom: 30px; // background-color: #f7f7f7;
 }
 
 legend {
@@ -24,7 +24,6 @@ form.ng-invalid {
   background: black !important;
 }
 
-
 table {
   width: 100%;
   border-collapse: collapse;
@@ -78,7 +77,6 @@ tr:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-
 .navigate-btn {
   width: 100%;
   display: flex;
@@ -86,7 +84,7 @@ tr:nth-child(even) {
 }
 
 .card-body {
-  padding: 30px 40px
+  padding: 30px 40px;
 }
 
 select option.in_use,
@@ -113,6 +111,5 @@ ng-select span.in_use {
 
   .entity-tab-label {
     padding: 4px;
-  }  
-
+  }
 }
diff --git a/frontend/src/app/modules/imports/components/import_process/footer-stepper/footer-stepper.component.html b/frontend/src/app/modules/imports/components/import_process/footer-stepper/footer-stepper.component.html
index cde5e0e068..11df68aae1 100644
--- a/frontend/src/app/modules/imports/components/import_process/footer-stepper/footer-stepper.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/footer-stepper/footer-stepper.component.html
@@ -1,20 +1,22 @@
 <div class="d-flex flex-row justify-content-between">
-    <button
-        type="button"
-        id="cancelImport"
-        (click)="deleteImport()"
-        mat-raised-button
-        color="warn"
-    >
-        Annuler et supprimer l’import
-    </button>
-    <button
-        *ngIf="stepComponent.step>1"
-        type="button"
-        id="importListPage"
-        (click)="saveAndLeaveImport()"
-        mat-raised-button
-        color="accent"
-        [disabled]="!stepComponent.isNextStepAvailable()"
-    >Enregistrer et quitter</button>
+  <button
+    type="button"
+    id="cancelImport"
+    (click)="deleteImport()"
+    mat-raised-button
+    color="warn"
+  >
+    Annuler et supprimer l’import
+  </button>
+  <button
+    *ngIf="stepComponent.step > 1"
+    type="button"
+    id="importListPage"
+    (click)="saveAndLeaveImport()"
+    mat-raised-button
+    color="accent"
+    [disabled]="!stepComponent.isNextStepAvailable()"
+  >
+    Enregistrer et quitter
+  </button>
 </div>
diff --git a/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.html b/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.html
index 027ca895ee..4c4427c8cd 100644
--- a/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.html
@@ -1,229 +1,252 @@
-<div *ngIf="!importData.processed; else elseBlock" class="card">
-    <h4 class="card-header">
-        <mat-icon>check</mat-icon>
-        Validation
-    </h4>
-    <div class="card-body">
-        <div *ngIf="!progressBar && errorIsNotCheck">
-        <p>Avant de procéder à l'import de vos données, il est nécessaire de valider la conformité de ces dernières</p>
-        <button (click)="performChecks()"
-                mat-raised-button
-                color="primary">
-            Lancer la vérification
-        </button>
-        </div>
-        <div *ngIf="errorIsCheck">
-            Erreur lors de la vérification, veuillez vérifier votre fichier
-        </div>
-        <div *ngIf="progressBar">
-            <div class="d-flex justify-content-center align-items-center">
-                <div class="text-controls d-flex align-items-center flex-column pb-2">
-                    <p> Contrôles en cours sur les données </p>
-                    <mat-progress-bar class="progress-bar" [value]="progress"></mat-progress-bar>
-                </div>
-            </div>
+<div
+  *ngIf="!importData.processed; else elseBlock"
+  class="card"
+>
+  <h4 class="card-header">
+    <mat-icon>check</mat-icon>
+    Validation
+  </h4>
+  <div class="card-body">
+    <div *ngIf="!progressBar && errorIsNotCheck">
+      <p>
+        Avant de procéder à l'import de vos données, il est nécessaire de valider la conformité de
+        ces dernières
+      </p>
+      <button
+        (click)="performChecks()"
+        mat-raised-button
+        color="primary"
+      >
+        Lancer la vérification
+      </button>
+    </div>
+    <div *ngIf="errorIsCheck">Erreur lors de la vérification, veuillez vérifier votre fichier</div>
+    <div *ngIf="progressBar">
+      <div class="d-flex justify-content-center align-items-center">
+        <div class="text-controls d-flex align-items-center flex-column pb-2">
+          <p>Contrôles en cours sur les données</p>
+          <mat-progress-bar
+            class="progress-bar"
+            [value]="progress"
+          ></mat-progress-bar>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 <ng-template #elseBlock>
-    <div *ngIf="tableReady" >
-        <h3 class="title mb-0">
-            Récapitulatif avant import
-        </h3>
-        <div class="card">
-            <h4 class="card-header">
-                <mat-icon>build</mat-icon>
-                Rapports
-            </h4>
-            <div class="card-body card-margin">
-                 <div
-                     class="content-report card-margin"
-                 >
-                     <button
-                         (click)="openReportSheet(importData.id_import)"
-                         mat-raised-button
-                         color=accent
-                     >
-                     Rapport d'import/erreurs/avertissement
-                     </button>
-                     <div *ngIf="errorCount > 0"> {{errorCount}} erreur(s) </div>
-                     <div *ngIf="warningCount > 0"> {{warningCount}} avertissement(s) </div>
-                 </div>
-                 <div
-                     *ngIf="invalidRowCount > 0"
-                     class="content-report"
-                 >
-                     <button
-                         mat-raised-button
-                         color=primary
-                         (click)="_csvExport.onCSV(importData.id_import)"
-                     > Exporter vos {{invalidRowCount}} observations invalides </button>
-                 </div>
-            </div>
+  <div *ngIf="tableReady">
+    <h3 class="title mb-0">Récapitulatif avant import</h3>
+    <div class="card">
+      <h4 class="card-header">
+        <mat-icon>build</mat-icon>
+        Rapports
+      </h4>
+      <div class="card-body card-margin">
+        <div class="content-report card-margin">
+          <button
+            (click)="openReportSheet(importData.id_import)"
+            mat-raised-button
+            color="accent"
+          >
+            Rapport d'import/erreurs/avertissement
+          </button>
+          <div *ngIf="errorCount > 0">{{ errorCount }} erreur(s)</div>
+          <div *ngIf="warningCount > 0">{{ warningCount }} avertissement(s)</div>
         </div>
-
-
-        <div class="card card-margin" *ngIf="!importDone">
-            <h4 class="card-header">
-                <mat-icon>room</mat-icon>
-                Zone géographique
-            </h4>
-            <pnx-map
-                height="40vh"
-                searchBar="false"
-            >
-                <pnx-geojson
-                    [geojson]="this.previewData.valid_bbox"
-                    [zoomOnFirstTime]="true"
-                >
-                </pnx-geojson>
-            </pnx-map>
+        <div
+          *ngIf="invalidRowCount > 0"
+          class="content-report"
+        >
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="_csvExport.onCSV(importData.id_import)"
+          >
+            Exporter vos {{ invalidRowCount }} observations invalides
+          </button>
         </div>
-
+      </div>
     </div>
 
-
-<div
-        *ngIf="tableReady && !importDone"
-        class="card"
+    <div
+      class="card card-margin"
+      *ngIf="!importDone"
     >
-        <div class="card-header">
-            <h5 class="card-title mb-0">
-                <mat-icon>reorder</mat-icon>
-                Prévisualisation des observations valides prêtes à être importées
-            </h5>
-        </div>
-        <div class="card-body">
-
-            <mat-tab-group>
-            <mat-tab *ngFor="let entityPreview of this.previewData.entities" label="{{ entityPreview.entity.label }}">
-            <ngx-datatable
-                *ngIf="tableReady"
-                #table
-                class="material striped"
-                [rows]="entityPreview.valid_data"
-                [columns]="entityPreview.columns"
-                [columnMode]="'force'"
-                [headerHeight]="35"
-                [scrollbarH]="true"
-                [footerHeight]="40"
-                [rowHeight]="40"
-                [limit]="15"
-                [selectionType]='single'
-            >
-            </ngx-datatable>
-            </mat-tab>
-            </mat-tab-group>
+      <h4 class="card-header">
+        <mat-icon>room</mat-icon>
+        Zone géographique
+      </h4>
+      <pnx-map
+        height="40vh"
+        searchBar="false"
+      >
+        <pnx-geojson
+          [geojson]="this.previewData.valid_bbox"
+          [zoomOnFirstTime]="true"
+        ></pnx-geojson>
+      </pnx-map>
+    </div>
+  </div>
 
-            <br />
-            <div
-                    *ngIf="importRunning"
-                    class="d-flex flex-column justify-content-center align-items-center w-100 mb-3"
-            >
-                    <p> Import des données en cours</p>
-                    <mat-spinner [color]="color" [diameter]="50" class="upload-spinner"></mat-spinner>
-            </div>
+  <div
+    *ngIf="tableReady && !importDone"
+    class="card"
+  >
+    <div class="card-header">
+      <h5 class="card-title mb-0">
+        <mat-icon>reorder</mat-icon>
+        Prévisualisation des observations valides prêtes à être importées
+      </h5>
+    </div>
+    <div class="card-body">
+      <mat-tab-group>
+        <mat-tab
+          *ngFor="let entityPreview of this.previewData.entities"
+          label="{{ entityPreview.entity.label }}"
+        >
+          <ngx-datatable
+            *ngIf="tableReady"
+            #table
+            class="material striped"
+            [rows]="entityPreview.valid_data"
+            [columns]="entityPreview.columns"
+            [columnMode]="'force'"
+            [headerHeight]="35"
+            [scrollbarH]="true"
+            [footerHeight]="40"
+            [rowHeight]="40"
+            [limit]="15"
+            [selectionType]="single"
+          ></ngx-datatable>
+        </mat-tab>
+      </mat-tab-group>
 
-            <div class="d-flex flex-row justify-content-between progressBar" *ngIf="!importRunning">
-                <button
-                    (click)="onPreviousStep()"
-                    class="d-flex justify-content-center align-content-between"
-                    mat-raised-button
-                    color="primary"
-                >
-                    <mat-icon>navigate_before</mat-icon>
-                    Précédent
-                </button>
-                <button
-                    *ngIf="nValidData > 0 && !importDone && errorIsNotImport"
-                    class="d-flex justify-content-center align-content-between button-success"
-                    (click)="onImport()"
-                    mat-raised-button
-                >
-                    Importer vos {{nValidData}} entitées valides
-                    <mat-icon>done</mat-icon>
+      <br />
+      <div
+        *ngIf="importRunning"
+        class="d-flex flex-column justify-content-center align-items-center w-100 mb-3"
+      >
+        <p>Import des données en cours</p>
+        <mat-spinner
+          [color]="color"
+          [diameter]="50"
+          class="upload-spinner"
+        ></mat-spinner>
+      </div>
 
-                </button>
-                <div *ngIf="errorIsImport" class="error-import">
-                    <div class="error-import__title">
-                      <mat-icon>error</mat-icon> {{ "Import.ErrorMessage.Title" | translate  }}
-                    </div>
-                    <div class="error-import__remark">
-                      {{ "Import.ErrorMessage.Remark" | translate  }}
-                    </div>
-                    <div class="error-import__description">
-                      <span>
-                        {{ "Import.ErrorMessage.DescriptionRestart" | translate  }}
-                      </span>
-                      <span>
-                        {{ "Import.ErrorMessage.DescriptionContactAdmin" | translate  }}
-                      </span>
-                    </div>
-                </div>
-            </div>
+      <div
+        class="d-flex flex-row justify-content-between progressBar"
+        *ngIf="!importRunning"
+      >
+        <button
+          (click)="onPreviousStep()"
+          class="d-flex justify-content-center align-content-between"
+          mat-raised-button
+          color="primary"
+        >
+          <mat-icon>navigate_before</mat-icon>
+          Précédent
+        </button>
+        <button
+          *ngIf="nValidData > 0 && !importDone && errorIsNotImport"
+          class="d-flex justify-content-center align-content-between button-success"
+          (click)="onImport()"
+          mat-raised-button
+        >
+          Importer vos {{ nValidData }} entitées valides
+          <mat-icon>done</mat-icon>
+        </button>
+        <div
+          *ngIf="errorIsImport"
+          class="error-import"
+        >
+          <div class="error-import__title">
+            <mat-icon>error</mat-icon>
+            {{ 'Import.ErrorMessage.Title' | translate }}
+          </div>
+          <div class="error-import__remark">
+            {{ 'Import.ErrorMessage.Remark' | translate }}
+          </div>
+          <div class="error-import__description">
+            <span>
+              {{ 'Import.ErrorMessage.DescriptionRestart' | translate }}
+            </span>
+            <span>
+              {{ 'Import.ErrorMessage.DescriptionContactAdmin' | translate }}
+            </span>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </ng-template>
 
-<div *ngIf="importDone" class="card">
-        <div class="card-header">
-            <h5 class="card-title">
-                <mat-icon>check</mat-icon>
-                Import terminé
-            </h5>
-        </div>
-        <div class="card-body">
-            <p>Vos {{nValidData}} observations ont bien été importées</p>
-            <button mat-raised-button
-                    color="primary"
-                    (click)="onRedirect()" >
-                Retour à la liste des imports
-            </button>
-        </div>
-    </div>
-
 <div
-    *ngIf="spinner"
-    class="spinner"
+  *ngIf="importDone"
+  class="card"
 >
-    <mat-spinner
-        class="upload-spinner"
-        [color]="color"
-        [diameter]="150"
-        [strokeWidth]="12"
+  <div class="card-header">
+    <h5 class="card-title">
+      <mat-icon>check</mat-icon>
+      Import terminé
+    </h5>
+  </div>
+  <div class="card-body">
+    <p>Vos {{ nValidData }} observations ont bien été importées</p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="onRedirect()"
     >
-    </mat-spinner>
+      Retour à la liste des imports
+    </button>
+  </div>
+</div>
+
+<div
+  *ngIf="spinner"
+  class="spinner"
+>
+  <mat-spinner
+    class="upload-spinner"
+    [color]="color"
+    [diameter]="150"
+    [strokeWidth]="12"
+  ></mat-spinner>
 </div>
 
 <ng-template
-    #modalRedir
-    let-modal
+  #modalRedir
+  let-modal
 >
-    <div class="modal-header">
-        <h4
-            class="modal-title"
-            id="modal-basic-title"
-        >
-          Import des données en cours...
-        </h4>
-        <button
-            type="button"
-            class="close"
-            aria-label="Close"
-            (click)="modal.dismiss('Cross click')"
-        >
-        <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        L'import des fichier dans la synthèse est en cours... Un mail de notification vous sera envoyé à la fin du
-        traitement.
-    </div>
-    <div class="modal-footer">
-        <button
-            type="button"
-            class="btn btn-warning"
-            (click)="onRedirect(); modal.close()"
-        > OK </button>
-    </div>
+  <div class="modal-header">
+    <h4
+      class="modal-title"
+      id="modal-basic-title"
+    >
+      Import des données en cours...
+    </h4>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    L'import des fichier dans la synthèse est en cours... Un mail de notification vous sera envoyé à
+    la fin du traitement.
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-warning"
+      (click)="onRedirect(); modal.close()"
+    >
+      OK
+    </button>
+  </div>
 </ng-template>
diff --git a/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.scss b/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.scss
index 36ec42b013..90d23a6d63 100644
--- a/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/import-step/import-step.component.scss
@@ -55,7 +55,7 @@ ngx-datatable {
 
 /* Transparent Overlay */
 .spinner:before {
-  content: "";
+  content: '';
   display: block;
   position: fixed;
   top: 0;
@@ -74,7 +74,8 @@ ngx-datatable {
     margin-bottom: 1em;
   }
 
-  &__remark, &__description {
+  &__remark,
+  &__description {
     font-size: 0.9em;
     text-align: justify;
   }
diff --git a/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.html b/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.html
index d29bbe6db7..29c7306a80 100644
--- a/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.html
@@ -1,9 +1,35 @@
 <div class="step">
-    <ul> 
-        <li [ngClass]="{'done': step > Step.Upload, 'current': step == Step.Upload}" (click)= "importProcessService.navigateToStep(Step.Upload)">Téléversement du fichier</li>
-        <li [ngClass]="{'done': step > Step.Decode, 'current': step == Step.Decode}" (click)= "importProcessService.navigateToStep(Step.Decode)">Configuration du fichier</li>
-        <li [ngClass]="{'done': step > Step.FieldMapping, 'current': step == Step.FieldMapping}" (click)= "importProcessService.navigateToStep(Step.FieldMapping)">Correspondance des champs</li>
-        <li *ngIf="config.IMPORT.ALLOW_VALUE_MAPPING" [ngClass]="{'done': step > Step.ContentMapping, 'current': step == Step.ContentMapping}" (click)= "importProcessService.navigateToStep(Step.ContentMapping)">Correspondance des nomenclatures</li>
-        <li [ngClass]="{'done': step > Step.Import, 'current': step == Step.Import}" (click)= "importProcessService.navigateToStep(Step.Import)">Import des données</li>
-    </ul>
+  <ul>
+    <li
+      [ngClass]="{ done: step > Step.Upload, current: step == Step.Upload }"
+      (click)="importProcessService.navigateToStep(Step.Upload)"
+    >
+      Téléversement du fichier
+    </li>
+    <li
+      [ngClass]="{ done: step > Step.Decode, current: step == Step.Decode }"
+      (click)="importProcessService.navigateToStep(Step.Decode)"
+    >
+      Configuration du fichier
+    </li>
+    <li
+      [ngClass]="{ done: step > Step.FieldMapping, current: step == Step.FieldMapping }"
+      (click)="importProcessService.navigateToStep(Step.FieldMapping)"
+    >
+      Correspondance des champs
+    </li>
+    <li
+      *ngIf="config.IMPORT.ALLOW_VALUE_MAPPING"
+      [ngClass]="{ done: step > Step.ContentMapping, current: step == Step.ContentMapping }"
+      (click)="importProcessService.navigateToStep(Step.ContentMapping)"
+    >
+      Correspondance des nomenclatures
+    </li>
+    <li
+      [ngClass]="{ done: step > Step.Import, current: step == Step.Import }"
+      (click)="importProcessService.navigateToStep(Step.Import)"
+    >
+      Import des données
+    </li>
+  </ul>
 </div>
diff --git a/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.scss b/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.scss
index a730b68140..6722a537e9 100644
--- a/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/stepper/stepper.component.scss
@@ -23,7 +23,8 @@
   padding-top: 40px;
 }
 
-.step ul li.done, li.current {
+.step ul li.done,
+li.current {
   color: black;
 }
 
@@ -42,42 +43,39 @@
   top: 0;
   transform: translateX(-50%);
   background-color: #888d8f;
-  color: #FFF;
+  color: #fff;
   cursor: pointer;
 }
 
 .step ul li.done:before {
-  background-color:  #28a745;
-
+  background-color: #28a745;
 }
 
 .step ul li.current:before {
-  background-color:  #28a745;
+  background-color: #28a745;
 }
 
- li.current{
+li.current {
   color: black;
-  font-weight: bold;;
+  font-weight: bold;
 }
 
 .step ul li:after {
-  content: "";
+  content: '';
   display: block;
   width: 100%;
   height: 3px;
-  background-color: #CCC;
+  background-color: #ccc;
   top: 15px;
   position: absolute;
   z-index: -1;
   margin-left: -50%;
 }
 
-.step ul li.done+li:after {
+.step ul li.done + li:after {
   background-color: #28a745;
 }
 
-
-
 .step ul li:first-child:after {
   content: none;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.html b/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.html
index 0daf4e4f62..cf3cbefa72 100644
--- a/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.html
@@ -1,87 +1,97 @@
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{{'Import.FileUpload' | translate}}</h5>
+<div class="card">
+  <div class="card-header">
+    <h5 class="card-title mb-0">{{ 'Import.FileUpload' | translate }}</h5>
+  </div>
+  <div class="card-body">
+    <form [formGroup]="uploadForm">
+      <div class="form-group">
+        <label>{{ 'Import.ChooseDataset' | translate }}</label>
+        <div
+          class="custom-file"
+          id="upload_files"
+        >
+          <pnx-datasets
+            *ngIf="destination"
+            [parentFormControl]="uploadForm.get('dataset')"
+            [creatableInModule]="destination?.module.module_code"
+            [moduleCode]="destination?.module.module_code"
+          ></pnx-datasets>
         </div>
-        <div class="card-body">
-            <form
-                [formGroup]="uploadForm"
-            >
-                <div class="form-group">
-                    <label>{{'Import.ChooseDataset' | translate}}</label>
-                    <div
-                        class="custom-file"
-                        id="upload_files"
-                    >
-                        <pnx-datasets
-                            *ngIf="destination"
-                            [parentFormControl]="uploadForm.get('dataset')"
-                            [creatableInModule]="destination?.module.module_code"
-                            [moduleCode]="destination?.module.module_code"
-                        >
-                        </pnx-datasets>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label>{{'Import.ImportFile' | translate}}</label>
-                    <div
-                        class="custom-file"
-                        id="upload_files"
-                    >
-                        <input
-                            class="custom-file-input"
-                            type=file
-                            (change)="onFileSelected($event.target.files[0])"
-                            id="selectedFile"
-                            name="file"
-                            [accept]="acceptedExtensions"
-                        >
-                        <label
-                            class="custom-file-label"
-                            [class.error-file]="!isNextStepAvailable() && uploadForm.get('file').errors"
-                            for="selectedFile"
-                        >{{fileName ? fileName : 'Import.ChooseFile' | translate }}</label>
-                    </div>
-                </div>
-            </form>
-            <div class="text-danger" *ngIf="file && maxFileSize * 1024 * 1024 < file.size">
-                {{ 'Import.Errors.FileTooBig' | translate :{maxFileSize: maxFileSize} }}
-            </div>
-            <div class="text-danger" *ngIf="emptyError || file && !file.size">
-                {{ 'Import.Errors.EmptyFile' | translate }}
-            </div>
-            <div class="text-danger" *ngIf="columnFirstError">
-                {{ 'Import.Errors.FileColumn' | translate }}
-            </div>
-            <div class="text-danger" *ngIf="fileName && fileName.length > maxFileNameLength">
-                {{ 'Import.Errors.FileNameBig' | translate :{maxFileNameLength: maxFileNameLength} }}
-            </div>
-            <!-- Navigation buttons -->
-            <div class="navigate-btn">
-                <button
-                    type="submit"
-                    class="d-flex justify-content-center align-content-between"
-                    mat-raised-button
-                    color=primary
-                    [disabled]="!isNextStepAvailable()"
-                    (click)="onNextStep()"
-                    id="validate"
-                >
-                    {{ 'Import.Next' | translate }}
-                    <i class="material-icons"> navigate_next </i>
-                </button>
-            </div>
+      </div>
+      <div class="form-group">
+        <label>{{ 'Import.ImportFile' | translate }}</label>
+        <div
+          class="custom-file"
+          id="upload_files"
+        >
+          <input
+            class="custom-file-input"
+            type="file"
+            (change)="onFileSelected($event.target.files[0])"
+            id="selectedFile"
+            name="file"
+            [accept]="acceptedExtensions"
+          />
+          <label
+            class="custom-file-label"
+            [class.error-file]="!isNextStepAvailable() && uploadForm.get('file').errors"
+            for="selectedFile"
+          >
+            {{ fileName ? fileName : ('Import.ChooseFile' | translate) }}
+          </label>
         </div>
+      </div>
+    </form>
+    <div
+      class="text-danger"
+      *ngIf="file && maxFileSize * 1024 * 1024 < file.size"
+    >
+      {{ 'Import.Errors.FileTooBig' | translate: { maxFileSize: maxFileSize } }}
+    </div>
+    <div
+      class="text-danger"
+      *ngIf="emptyError || (file && !file.size)"
+    >
+      {{ 'Import.Errors.EmptyFile' | translate }}
+    </div>
+    <div
+      class="text-danger"
+      *ngIf="columnFirstError"
+    >
+      {{ 'Import.Errors.FileColumn' | translate }}
     </div>
+    <div
+      class="text-danger"
+      *ngIf="fileName && fileName.length > maxFileNameLength"
+    >
+      {{ 'Import.Errors.FileNameBig' | translate: { maxFileNameLength: maxFileNameLength } }}
+    </div>
+    <!-- Navigation buttons -->
+    <div class="navigate-btn">
+      <button
+        type="submit"
+        class="d-flex justify-content-center align-content-between"
+        mat-raised-button
+        color="primary"
+        [disabled]="!isNextStepAvailable()"
+        (click)="onNextStep()"
+        id="validate"
+      >
+        {{ 'Import.Next' | translate }}
+        <i class="material-icons">navigate_next</i>
+      </button>
+    </div>
+  </div>
+</div>
 <!-- Spinner -->
 <div
-    *ngIf="isUploadRunning"
-    class="spinner"
+  *ngIf="isUploadRunning"
+  class="spinner"
 >
-    <mat-spinner
-        class="upload-spinner"
-        [color]="color"
-        [diameter]="150"
-        [strokeWidth]="12"
-    >
-    </mat-spinner>
+  <mat-spinner
+    class="upload-spinner"
+    [color]="color"
+    [diameter]="150"
+    [strokeWidth]="12"
+  ></mat-spinner>
 </div>
diff --git a/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.scss b/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.scss
index 664d575faa..9b5d1d7cf7 100644
--- a/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.scss
+++ b/frontend/src/app/modules/imports/components/import_process/upload-file-step/upload-file-step.component.scss
@@ -62,11 +62,9 @@ tr:nth-child(even) {
   cursor: pointer;
 }
 
- 
-
 .error-file {
   border-left: 5px solid #ff0000 !important;
-  border-color:  #ff0000 !important;
+  border-color: #ff0000 !important;
 }
 
 .navigate-btn {
@@ -76,9 +74,9 @@ tr:nth-child(even) {
 }
 
 .card-body {
-  padding: 30px 40px
+  padding: 30px 40px;
 }
 
 .file-validation {
-  margin-top: 40px
+  margin-top: 40px;
 }
diff --git a/frontend/src/app/modules/imports/components/import_report/import_report.component.html b/frontend/src/app/modules/imports/components/import_report/import_report.component.html
index 57bc3c5c12..065585068f 100644
--- a/frontend/src/app/modules/imports/components/import_report/import_report.component.html
+++ b/frontend/src/app/modules/imports/components/import_report/import_report.component.html
@@ -1,63 +1,117 @@
 <div class="card main">
-    <button mat-raised-button class="back-button" (click)="navigateToImportList()">
-      <mat-icon>keyboard_arrow_left</mat-icon> Retour
-    </button>
-    <div class="card-body mb-2 text-center">
-        <div class="card content">
-            <div class="row import-info align-content-center align-items-center">
-                <div class="col-sm-10">
-                <h3> <b>Rapport d'import:</b> {{importData?.id_import}}</h3>
-                </div>
-                <div class="col-sm-2 d-flex align-items-center justify-content-center import-status" [ngClass]="importStatusClass">
-                    {{importStatus}}
-                </div>
-            </div>
+  <button
+    mat-raised-button
+    class="back-button"
+    (click)="navigateToImportList()"
+  >
+    <mat-icon>keyboard_arrow_left</mat-icon>
+    Retour
+  </button>
+  <div class="card-body mb-2 text-center">
+    <div class="card content">
+      <div class="row import-info align-content-center align-items-center">
+        <div class="col-sm-10">
+          <h3>
+            <b>Rapport d'import:</b>
+            {{ importData?.id_import }}
+          </h3>
+        </div>
+        <div
+          class="col-sm-2 d-flex align-items-center justify-content-center import-status"
+          [ngClass]="importStatusClass"
+        >
+          {{ importStatus }}
         </div>
+      </div>
     </div>
+  </div>
   <div class="card-body">
-    <mat-expansion-panel class="card content" [expanded]="true">
+    <mat-expansion-panel
+      class="card content"
+      [expanded]="true"
+    >
       <mat-expansion-panel-header class="card-header">
         <mat-panel-title>
           <mat-icon>info</mat-icon>
-        Description de l'import
+          Description de l'import
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div class="card-body">
         <div class="row">
           <div class="col-sm-4">
             <p>
-              <b>Jeu de données : </b><a routerLink="/metadata/dataset_detail/{{
-          importData?.id_dataset
-        }}" matTooltip="Voir dans le module Metadonnées">{{ datasetName }}</a>
+              <b>Jeu de données :</b>
+              <a
+                routerLink="/metadata/dataset_detail/{{ importData?.id_dataset }}"
+                matTooltip="Voir dans le module Metadonnées"
+              >
+                {{ datasetName }}
+              </a>
             </p>
-            <p><b>Fichier : </b><a [routerLink]="" (click)="downloadSourceFile()">{{ importData?.full_file_name }}</a></p>
             <p>
-              <b>Date de soumission de l'import : </b>
-              {{ importData?.date_create_import | date: "dd/MM/yyyy" }}
+              <b>Fichier :</b>
+              <a
+                [routerLink]=""
+                (click)="downloadSourceFile()"
+              >
+                {{ importData?.full_file_name }}
+              </a>
+            </p>
+            <p>
+              <b>Date de soumission de l'import :</b>
+              {{ importData?.date_create_import | date: 'dd/MM/yyyy' }}
+            </p>
+            <p>
+              <b>Auteur :</b>
+              {{ importData?.authors_name }}
             </p>
-            <p><b>Auteur : </b> {{ importData?.authors_name }}</p>
-
-
           </div>
           <div class="col-sm-4">
-            <p><b> SRID : </b> {{ importData?.srid }}</p>
-            <p><b> Encodage :</b> {{ importData?.encoding }}</p>
-            <p><b> Format : </b>{{ importData?.format_source_file }}</p>
-            <p><b> Nombre de lignes : </b> {{ importData?.source_count || 0 }}</p>
+            <p>
+              <b>SRID :</b>
+              {{ importData?.srid }}
+            </p>
+            <p>
+              <b>Encodage :</b>
+              {{ importData?.encoding }}
+            </p>
+            <p>
+              <b>Format :</b>
+              {{ importData?.format_source_file }}
+            </p>
+            <p>
+              <b>Nombre de lignes :</b>
+              {{ importData?.source_count || 0 }}
+            </p>
             <div *ngIf="importStatus === 'TERMINE'">
-              <p><b> Nombre d’entités importées : </b> {{importData?.import_count || 0}}</p>
+              <p>
+                <b>Nombre d’entités importées :</b>
+                {{ importData?.import_count || 0 }}
+              </p>
               <div *ngFor="let item of importData?.destination.statistics_labels">
                 <ng-container *ngIf="importData?.statistics[item.key] !== null">
-                  <p><b> {{ item.value }} : </b> {{ importData?.statistics[item.key] }}</p>
+                  <p>
+                    <b>{{ item.value }} :</b>
+                    {{ importData?.statistics[item.key] }}
+                  </p>
                 </ng-container>
               </div>
             </div>
           </div>
           <div class="col-sm-4 d-flex flex-column justify-content-center">
-            <button  mat-raised-button color="primary" [disabled]="loadingPdf" (click)="exportAsPDF()" class="align-self-center">
+            <button
+              mat-raised-button
+              color="primary"
+              [disabled]="loadingPdf"
+              (click)="exportAsPDF()"
+              class="align-self-center"
+            >
               Rapport PDF
               <mat-icon *ngIf="loadingPdf">
-                <mat-spinner color="warn" diameter="30"> </mat-spinner>
+                <mat-spinner
+                  color="warn"
+                  diameter="30"
+                ></mat-spinner>
               </mat-icon>
             </button>
           </div>
@@ -65,255 +119,369 @@ <h3> <b>Rapport d'import:</b> {{importData?.id_import}}</h3>
       </div>
     </mat-expansion-panel>
 
-    <mat-expansion-panel class="card content" [expanded]="true">
+    <mat-expansion-panel
+      class="card content"
+      [expanded]="true"
+    >
       <mat-expansion-panel-header class="card-header">
-      <mat-panel-title>
-        <mat-icon>compare_arrows</mat-icon>
-        Correspondances
-      </mat-panel-title>
-      </mat-expansion-panel-header>
-      <div class="card-body row">
-      <div class="col-sm-8 d-flex flex-column">
-        <mat-expansion-panel>
-        <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
         <mat-panel-title>
-          <h6>Champs ({{ (importData?.fieldmapping || {} | keyvalue).length }})</h6>
+          <mat-icon>compare_arrows</mat-icon>
+          Correspondances
         </mat-panel-title>
-        </mat-expansion-panel-header>
-        <table *ngFor="let entity of tableFieldsCorresp" class="table table-striped table-bordered">
-        <caption>{{ entity.entityLabel }}</caption>
-          <thead>
-          <tr>
-          <th>Champ source</th>
-          <th>Champ cible</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let field of entity?.themes | keyvalue">
-          <td>{{ field.value }}</td>
-          <td>{{ field.key }}</td>
-          </tr>
-        </tbody>
-        </table>
-      </mat-expansion-panel>
-      </div>
-      <div class="col-sm-4 d-flex justify-content-center report-button">
-        <button mat-raised-button color="primary" [disabled]="!importData?.fieldmapping"
-            (click)="exportFieldMapping()" class="align-self-center">
-          Exporter
-        </button>
-      </div>
-      <div class="col-sm-8 d-flex flex-column">
-        <mat-expansion-panel>
-          <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
-            <mat-panel-title>
-              <h6>
-                Nomenclatures ({{ (importData?.contentmapping || {} | keyvalue).length }}
-                type(s))
-              </h6>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <table class="table table-striped table-bordered">
-            <thead>
-            <tr>
-              <th>Valeur source</th>
-              <th>Nomenclature</th>
-            </tr>
-            </thead>
-            <tbody>
-            <ng-container *ngFor="let nomenclature_type of importData?.contentmapping | keyvalue">
-              <tr>
-                <th colspan="2">
-                  <ng-container *ngIf="nomenclatures && nomenclatures.hasOwnProperty(nomenclature_type.key); then nomenclature_type_label else nomenclature_type_mnemonique"></ng-container>
-                  <ng-template #nomenclature_type_label>{{ nomenclatures[nomenclature_type.key].nomenclature_type.label_default }}</ng-template>
-                  <ng-template #nomenclature_type_mnemonique>{{ nomenclature_type.key }}</ng-template>
-                </th>
-              </tr>
-              <tr *ngFor="let mapping of nomenclature_type.value | keyvalue">
-                <td>{{ mapping.key }}</td>
-                <td>
-                  <ng-container *ngIf="nomenclatures && nomenclatures.hasOwnProperty(nomenclature_type.key); then nomenclature_label else nomenclature_code"></ng-container>
-                  <ng-template #nomenclature_label>{{ nomenclatures[nomenclature_type.key].nomenclatures[mapping.value].label_default }}</ng-template>
-                  <ng-template #nomenclature_code>{{ mapping.value }}</ng-template>
-                </td>
-              </tr>
-            </ng-container>
-            </tbody>
-          </table>
-        </mat-expansion-panel>
-      </div>
-      <div class="col-sm-4 d-flex justify-content-center report-button">
-        <button mat-raised-button color="primary" [disabled]="!importData?.contentmapping"
-            (click)="exportContentMapping()" class="align-self-center">
-          Exporter
-        </button>
-      </div>
+      </mat-expansion-panel-header>
+      <div class="card-body row">
+        <div class="col-sm-8 d-flex flex-column">
+          <mat-expansion-panel>
+            <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
+              <mat-panel-title>
+                <h6>Champs ({{ (importData?.fieldmapping || {} | keyvalue).length }})</h6>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table
+              *ngFor="let entity of tableFieldsCorresp"
+              class="table table-striped table-bordered"
+            >
+              <caption>{{ entity.entityLabel }}</caption>
+              <thead>
+                <tr>
+                  <th>Champ source</th>
+                  <th>Champ cible</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let field of entity?.themes | keyvalue">
+                  <td>{{ field.value }}</td>
+                  <td>{{ field.key }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </mat-expansion-panel>
+        </div>
+        <div class="col-sm-4 d-flex justify-content-center report-button">
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!importData?.fieldmapping"
+            (click)="exportFieldMapping()"
+            class="align-self-center"
+          >
+            Exporter
+          </button>
+        </div>
+        <div class="col-sm-8 d-flex flex-column">
+          <mat-expansion-panel>
+            <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
+              <mat-panel-title>
+                <h6>
+                  Nomenclatures ({{ (importData?.contentmapping || {} | keyvalue).length }}
+                  type(s))
+                </h6>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table class="table table-striped table-bordered">
+              <thead>
+                <tr>
+                  <th>Valeur source</th>
+                  <th>Nomenclature</th>
+                </tr>
+              </thead>
+              <tbody>
+                <ng-container
+                  *ngFor="let nomenclature_type of importData?.contentmapping | keyvalue"
+                >
+                  <tr>
+                    <th colspan="2">
+                      <ng-container
+                        *ngIf="
+                          nomenclatures && nomenclatures.hasOwnProperty(nomenclature_type.key);
+                          then nomenclature_type_label;
+                          else nomenclature_type_mnemonique
+                        "
+                      ></ng-container>
+                      <ng-template #nomenclature_type_label>
+                        {{ nomenclatures[nomenclature_type.key].nomenclature_type.label_default }}
+                      </ng-template>
+                      <ng-template #nomenclature_type_mnemonique>
+                        {{ nomenclature_type.key }}
+                      </ng-template>
+                    </th>
+                  </tr>
+                  <tr *ngFor="let mapping of nomenclature_type.value | keyvalue">
+                    <td>{{ mapping.key }}</td>
+                    <td>
+                      <ng-container
+                        *ngIf="
+                          nomenclatures && nomenclatures.hasOwnProperty(nomenclature_type.key);
+                          then nomenclature_label;
+                          else nomenclature_code
+                        "
+                      ></ng-container>
+                      <ng-template #nomenclature_label>
+                        {{
+                          nomenclatures[nomenclature_type.key].nomenclatures[mapping.value]
+                            .label_default
+                        }}
+                      </ng-template>
+                      <ng-template #nomenclature_code>{{ mapping.value }}</ng-template>
+                    </td>
+                  </tr>
+                </ng-container>
+              </tbody>
+            </table>
+          </mat-expansion-panel>
+        </div>
+        <div class="col-sm-4 d-flex justify-content-center report-button">
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!importData?.contentmapping"
+            (click)="exportContentMapping()"
+            class="align-self-center"
+          >
+            Exporter
+          </button>
+        </div>
       </div>
     </mat-expansion-panel>
-    <mat-expansion-panel class="card content" [expanded]="true">
+    <mat-expansion-panel
+      class="card content"
+      [expanded]="true"
+    >
       <mat-expansion-panel-header class="card-header">
-      <div class="d-flex justify-content-start">
-        <mat-panel-title>
-        <mat-icon> warning </mat-icon>
-        Données invalides
-        </mat-panel-title>
-      </div>
+        <div class="d-flex justify-content-start">
+          <mat-panel-title>
+            <mat-icon>warning</mat-icon>
+            Données invalides
+          </mat-panel-title>
+        </div>
       </mat-expansion-panel-header>
       <div class="card-body">
-      <div class="row">
-        <div [ngClass]="nbTotalErrors !== 0 ? 'col-sm-8' : 'col-sm-12'">
-          <mat-expansion-panel>
-        <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
-        <mat-panel-title>
-          <h6>{{ importErrors.length }} erreur(s)</h6>
-        </mat-panel-title>
-        </mat-expansion-panel-header>
-        <table class="table table-responsive table-striped table-bordered">
-        <thead>
-          <tr>
-          <th>Type d'erreur</th>
-          <th>Champ</th>
-          <th>Description erreur</th>
-          <th>Nombre d'erreur(s)</th>
-          <th>Numéro des lignes en erreur</th>
-          <th>{{ "Import.Report.Errors.Entity" | translate }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let error of importErrors">
-          <td>{{ error.type.name }}</td>
-          <td>{{ error.column }}</td>
-          <td>
-            {{ error.type.description }}
-            <i>
-            <br />
-            {{ error.comment }}</i>
-          </td>
-          <td>
-            <span *ngIf="error?.rows && error?.rows.length > 0">{{ error?.rows.length }}
-            </span>
-          </td>
-          <td>
-            <span *ngIf="error.rows.length >= 10 && !error.show">{{ error.rows.slice(0, maxErrorsLines).join(",
-            ") }} ...
-            <button mat-icon-button matTooltip="Voir plus" (click)="error.show = !error.show">
-              <mat-icon>expand_more</mat-icon>
-            </button>
-            </span>
-            <span *ngIf="error.rows.length <= 10 || error.show">{{ error.rows.join(", ") }}
-            <button mat-icon-button matTooltip="Voir moins" *ngIf="error.rows.length >= 10"
-              (click)="error.show = !error.show">
-              <mat-icon>expand_less</mat-icon>
-            </button>
-            </span>
-          </td>
-          <td>
-            {{ error.entity ? error.entity.label : "" }}
-          </td>
-          </tr>
-        </tbody>
-        </table>
-      </mat-expansion-panel>
-          <mat-expansion-panel>
-        <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
-        <mat-panel-title>
-          <h6>{{ importWarnings.length }} alerte(s)</h6>
-        </mat-panel-title>
-        </mat-expansion-panel-header>
-        <table class="table table-responsive table-striped table-bordered">
-        <thead>
-          <tr>
-          <th>Type d'erreur</th>
-          <th>Champ</th>
-          <th>Description erreur</th>
-          <th>Nombre d'erreur(s)</th>
-          <th>Numéro des lignes en erreur</th>
-          <th>{{ "Import.Report.Errors.Entity" | translate }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let error of importWarnings">
-          <td>{{ error.type.name }}</td>
-          <td>{{ error.column }}</td>
-          <td>
-            {{ error.type.description }}
-            <i>
-            <br />
-            {{ error.comment }}</i>
-          </td>
-          <td>
-            <span *ngIf="error?.rows && error?.rows.length > 0">{{ error?.rows.length }}
-            </span>
-          </td>
-          <td>
-            <span *ngIf="error.rows.length >= 10 && !error.show">{{ error.rows.slice(0, maxErrorsLines).join(",
-            ") }} ...
-            <button mat-icon-button matTooltip="Voir plus" (click)="error.show = !error.show">
-              <mat-icon>expand_more</mat-icon>
-            </button>
-            </span>
-            <span *ngIf="error.rows.length <= 10 || error.show">{{ error.rows.join(", ") }}
-            <button mat-icon-button matTooltip="Voir moins" *ngIf="error.rows.length >= 10"
-              (click)="error.show = !error.show">
-              <mat-icon>expand_less</mat-icon>
+        <div class="row">
+          <div [ngClass]="nbTotalErrors !== 0 ? 'col-sm-8' : 'col-sm-12'">
+            <mat-expansion-panel>
+              <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
+                <mat-panel-title>
+                  <h6>{{ importErrors.length }} erreur(s)</h6>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <table class="table table-responsive table-striped table-bordered">
+                <thead>
+                  <tr>
+                    <th>Type d'erreur</th>
+                    <th>Champ</th>
+                    <th>Description erreur</th>
+                    <th>Nombre d'erreur(s)</th>
+                    <th>Numéro des lignes en erreur</th>
+                    <th>{{ 'Import.Report.Errors.Entity' | translate }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let error of importErrors">
+                    <td>{{ error.type.name }}</td>
+                    <td>{{ error.column }}</td>
+                    <td>
+                      {{ error.type.description }}
+                      <i>
+                        <br />
+                        {{ error.comment }}
+                      </i>
+                    </td>
+                    <td>
+                      <span *ngIf="error?.rows && error?.rows.length > 0">
+                        {{ error?.rows.length }}
+                      </span>
+                    </td>
+                    <td>
+                      <span *ngIf="error.rows.length >= 10 && !error.show">
+                        {{
+                          error.rows.slice(0, maxErrorsLines).join(
+                            ',
+            '
+                          )
+                        }}
+                        ...
+                        <button
+                          mat-icon-button
+                          matTooltip="Voir plus"
+                          (click)="error.show = !error.show"
+                        >
+                          <mat-icon>expand_more</mat-icon>
+                        </button>
+                      </span>
+                      <span *ngIf="error.rows.length <= 10 || error.show">
+                        {{ error.rows.join(', ') }}
+                        <button
+                          mat-icon-button
+                          matTooltip="Voir moins"
+                          *ngIf="error.rows.length >= 10"
+                          (click)="error.show = !error.show"
+                        >
+                          <mat-icon>expand_less</mat-icon>
+                        </button>
+                      </span>
+                    </td>
+                    <td>
+                      {{ error.entity ? error.entity.label : '' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+              <mat-expansion-panel-header [collapsedHeight]="expansionPanelHeight">
+                <mat-panel-title>
+                  <h6>{{ importWarnings.length }} alerte(s)</h6>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <table class="table table-responsive table-striped table-bordered">
+                <thead>
+                  <tr>
+                    <th>Type d'erreur</th>
+                    <th>Champ</th>
+                    <th>Description erreur</th>
+                    <th>Nombre d'erreur(s)</th>
+                    <th>Numéro des lignes en erreur</th>
+                    <th>{{ 'Import.Report.Errors.Entity' | translate }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let error of importWarnings">
+                    <td>{{ error.type.name }}</td>
+                    <td>{{ error.column }}</td>
+                    <td>
+                      {{ error.type.description }}
+                      <i>
+                        <br />
+                        {{ error.comment }}
+                      </i>
+                    </td>
+                    <td>
+                      <span *ngIf="error?.rows && error?.rows.length > 0">
+                        {{ error?.rows.length }}
+                      </span>
+                    </td>
+                    <td>
+                      <span *ngIf="error.rows.length >= 10 && !error.show">
+                        {{
+                          error.rows.slice(0, maxErrorsLines).join(
+                            ',
+            '
+                          )
+                        }}
+                        ...
+                        <button
+                          mat-icon-button
+                          matTooltip="Voir plus"
+                          (click)="error.show = !error.show"
+                        >
+                          <mat-icon>expand_more</mat-icon>
+                        </button>
+                      </span>
+                      <span *ngIf="error.rows.length <= 10 || error.show">
+                        {{ error.rows.join(', ') }}
+                        <button
+                          mat-icon-button
+                          matTooltip="Voir moins"
+                          *ngIf="error.rows.length >= 10"
+                          (click)="error.show = !error.show"
+                        >
+                          <mat-icon>expand_less</mat-icon>
+                        </button>
+                      </span>
+                    </td>
+                    <td>
+                      {{ error.entity ? error.entity.label : '' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </mat-expansion-panel>
+          </div>
+          <div
+            class="col-sm-4 d-flex justify-content-center align-items-center report-button"
+            *ngIf="nbTotalErrors !== 0"
+          >
+            <button
+              mat-raised-button
+              class="mat-accent"
+              color="accent"
+              (click)="_csvExport.onCSV(importData?.id_import)"
+            >
+              Exporter vos {{ nbTotalErrors }} observations invalides
             </button>
-            </span>
-          </td>
-          <td>
-            {{ error.entity ? error.entity.label : "" }}
-          </td>
-          </tr>
-        </tbody>
-        </table>
-      </mat-expansion-panel>
+          </div>
         </div>
-        <div class= "col-sm-4 d-flex justify-content-center align-items-center report-button" *ngIf="nbTotalErrors !== 0">
-        <button  mat-raised-button class="mat-accent" color="accent" (click)="_csvExport.onCSV(importData?.id_import)">
-        Exporter vos {{ nbTotalErrors }} observations invalides
-        </button>
-      </div>
-      </div>
       </div>
     </mat-expansion-panel>
-    <mat-expansion-panel class="card content row" [expanded]="true" *ngIf="importStatus == 'TERMINE'">
+    <mat-expansion-panel
+      class="card content row"
+      [expanded]="true"
+      *ngIf="importStatus == 'TERMINE'"
+    >
       <mat-expansion-panel-header class="card-header">
         <div class="d-flex justify-content-start">
           <mat-panel-title>
-            <mat-icon> location_on</mat-icon>
+            <mat-icon>location_on</mat-icon>
             Données importées
           </mat-panel-title>
         </div>
       </mat-expansion-panel-header>
-    <div class="row">
-    <div *ngIf="validBbox" class="col-sm-6 d-flex flex-column">
-        <h5 class="card-title mt-1">
-          Périmètre géographique des données importées
-        </h5>
-      <pnx-map height="40vh" searchBar="false">
-        <pnx-geojson [geojson]="validBbox" [zoomOnFirstTime]="true">
-        </pnx-geojson>
-      </pnx-map>
-      <button  mat-raised-button class="align-self-center" color="primary" [disabled]="importData?.date_end_import === null" (click)="goToSynthese(importData?.id_dataset)">
-        Afficher dans la synthèse
-      </button>
-    </div>
-    <div *ngIf="doughnutChartData.length > 0" class="d-flex flex-column col-sm-6">
-      <h5 class="card-title">Répartition des taxons importés</h5>
-      <div style="display: block">
-        <canvas id="chart" baseChart [datasets]="doughnutChartData" [labels]="doughnutChartLabels"
-        type="doughnut" [options]="options">
-      </canvas>
+      <div class="row">
+        <div
+          *ngIf="validBbox"
+          class="col-sm-6 d-flex flex-column"
+        >
+          <h5 class="card-title mt-1">Périmètre géographique des données importées</h5>
+          <pnx-map
+            height="40vh"
+            searchBar="false"
+          >
+            <pnx-geojson
+              [geojson]="validBbox"
+              [zoomOnFirstTime]="true"
+            ></pnx-geojson>
+          </pnx-map>
+          <button
+            mat-raised-button
+            class="align-self-center"
+            color="primary"
+            [disabled]="importData?.date_end_import === null"
+            (click)="goToSynthese(importData?.id_dataset)"
+          >
+            Afficher dans la synthèse
+          </button>
+        </div>
+        <div
+          *ngIf="doughnutChartData.length > 0"
+          class="d-flex flex-column col-sm-6"
+        >
+          <h5 class="card-title">Répartition des taxons importés</h5>
+          <div style="display: block">
+            <canvas
+              id="chart"
+              baseChart
+              [datasets]="doughnutChartData"
+              [labels]="doughnutChartLabels"
+              type="doughnut"
+              [options]="options"
+            ></canvas>
+          </div>
+          <mat-form-field>
+            <mat-label>Selectionner un rang</mat-label>
+            <mat-select
+              [(value)]="rank"
+              (selectionChange)="onRankChange($event)"
+            >
+              <mat-option
+                *ngFor="let r of rankOptions"
+                [value]="r"
+              >
+                {{ r }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
       </div>
-      <mat-form-field>
-        <mat-label>Selectionner un rang</mat-label>
-        <mat-select [(value)]="rank" (selectionChange)="onRankChange($event)">
-          <mat-option *ngFor="let r of rankOptions" [value]="r">
-            {{ r }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-    </div>
     </mat-expansion-panel>
   </div>
 </div>
diff --git a/frontend/src/app/modules/imports/components/import_report/import_report.component.scss b/frontend/src/app/modules/imports/components/import_report/import_report.component.scss
index acb4d2a84a..15a6f36e0d 100644
--- a/frontend/src/app/modules/imports/components/import_report/import_report.component.scss
+++ b/frontend/src/app/modules/imports/components/import_report/import_report.component.scss
@@ -19,7 +19,7 @@
   border-radius: 5px;
 }
 
-.flex-row{
+.flex-row {
   display: flex;
   flex-wrap: wrap;
 }
@@ -79,4 +79,4 @@ img {
 table caption {
   caption-side: top;
   border-collapse: collapse;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/modules/imports/components/modal_destination/import-modal-destination.component.html b/frontend/src/app/modules/imports/components/modal_destination/import-modal-destination.component.html
index ff48f65b87..4b836932b9 100644
--- a/frontend/src/app/modules/imports/components/modal_destination/import-modal-destination.component.html
+++ b/frontend/src/app/modules/imports/components/modal_destination/import-modal-destination.component.html
@@ -1,56 +1,57 @@
 <ng-template
-    #content
-    let-c="close"
-    let-d="dismiss"
+  #content
+  let-c="close"
+  let-d="dismiss"
 >
-    <div class="modal-header">
-        <h5 class="modal-title"> {{ 'Import.ChooseDestination' | translate }} </h5>
-        <button
-            type="button"
-            class="close"
-            aria-label="Close"
-            (click)="closeModal()"
-        >
-            <span aria-hidden="true">&times;</span>
-        </button>
+  <div class="modal-header">
+    <h5 class="modal-title">{{ 'Import.ChooseDestination' | translate }}</h5>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="closeModal()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <pnx-destinations
+      label="{{ 'Import.Destinations' | translate }}"
+      [parentFormControl]="selectDestinationForm"
+    ></pnx-destinations>
+    <div
+      id="DestinationError"
+      *ngIf="isUserDestinationError"
+    >
+      <i
+        id="warningDataset"
+        class="material-icons"
+      >
+        warning
+      </i>
+      {{ DestinationError }}
     </div>
-    <div class="modal-body">
-        <pnx-destinations
-            label="{{ 'Import.Destinations' | translate }}"
-            [parentFormControl]="selectDestinationForm"
-        >
-        </pnx-destinations>
-        <div
-            id="DestinationError"
-            *ngIf="isUserDestinationError"
-        >
-            <i
-                id="warningDataset"
-                class="material-icons"
-            >warning</i> {{ DestinationError }}
-        </div>
-    </div>
-    <div class="modal-footer">
-        <div id="modalbuttons">
-            <button
-                (click)="onSubmit(selectDestinationForm.value)"
-                [disabled]="selectDestinationForm.invalid"
-                mat-raised-button
-                color="primary"
-            >
-                {{ 'Import.Validate' | translate }}
-            </button>
-        </div>
+  </div>
+  <div class="modal-footer">
+    <div id="modalbuttons">
+      <button
+        (click)="onSubmit(selectDestinationForm.value)"
+        [disabled]="selectDestinationForm.invalid"
+        mat-raised-button
+        color="primary"
+      >
+        {{ 'Import.Validate' | translate }}
+      </button>
     </div>
+  </div>
 </ng-template>
 
-
 <button
-    [disabled]="cruvedStore.cruved?.IMPORT?.module_objects?.IMPORT?.cruved?.U == 0"
-    mat-fab
-    color="primary"
-    (click)="onOpenModal(content)"
-    matTooltip="Nouvel import"
+  [disabled]="cruvedStore.cruved?.IMPORT?.module_objects?.IMPORT?.cruved?.U == 0"
+  mat-fab
+  color="primary"
+  (click)="onOpenModal(content)"
+  matTooltip="Nouvel import"
 >
-    <mat-icon>add</mat-icon>
+  <mat-icon>add</mat-icon>
 </button>
diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.html b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.html
index 131678c6ac..9217d4a7d4 100644
--- a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.html
+++ b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.html
@@ -94,7 +94,7 @@
 <div class="row mt-3 justify-content-end">
   <div class="col-auto">
     <button
-     *ngIf="canImport"
+      *ngIf="canImport"
       id="upload-btn"
       mat-raised-button
       color="primary"
@@ -150,4 +150,4 @@ <h4>{{ 'List.DisplayColumns' | translate }}</h4>
       </label>
     </div>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.scss b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.scss
index 7dc8ec4bf6..33d0228c48 100644
--- a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.scss
+++ b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-list.component.scss
@@ -37,7 +37,8 @@ ngx-datatable {
   box-shadow: none !important;
 }
 
-#download-btn, #upload-btn {
+#download-btn,
+#upload-btn {
   margin-top: 5px;
 }