feat(import): improve error displayed

naturalsolutions · Feb 26, 2024 · ac3fb19 · ac3fb19
1 parent 38e7f1c
commit ac3fb19
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/.../src/app/modules/imports/components/import_process/import-step/import-step.component.html b/.../src/app/modules/imports/components/import_process/import-step/import-step.component.html
@@ -144,8 +144,21 @@ <h5 class="card-title mb-0">
                     <mat-icon>done</mat-icon>
 
                 </button>
-                <div *ngIf="errorIsImport">
-                    Erreur lors de l'import des données
+                <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>
@@ -190,14 +203,16 @@ <h5 class="card-title">
         <h4
             class="modal-title"
             id="modal-basic-title"
-        >Import des données en cours...</h4>
+        >
+          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>
+        <span aria-hidden="true">&times;</span>
         </button>
     </div>
     <div class="modal-body">

diff --git a/.../src/app/modules/imports/components/import_process/import-step/import-step.component.scss b/.../src/app/modules/imports/components/import_process/import-step/import-step.component.scss
@@ -64,3 +64,25 @@ ngx-datatable {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.error-import {
+  $error-color: red;
+  max-width: 50%;
+  &__title {
+    color: $error-color;
+    font-weight: 700;
+    margin-bottom: 1em;
+  }
+
+  &__remark, &__description {
+    font-size: 0.9em;
+    text-align: justify;
+  }
+  &__remark {
+    filter: brightness(0.5);
+    font-style: italic;
+  }
+  &__description span {
+    display: inline-block;
+  }
+}
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
@@ -232,6 +232,26 @@
       "Errors": {
         "Entity": "Entity"
       }
+    },
+    "Destinations": "Destinations",
+    "FileUpload": " Upload a file ",
+    "ChooseDataset": "Select a dataset",
+    "ChooseDestination": "Select a destination",
+    "ImportFile": "Import a file",
+    "ChooseFile": "Select a file",
+    "Next": "Next",
+    "Validate": "Validate",
+    "ErrorMessage": {
+      "Title": "The import module encountered an issue.",
+      "Remark": "This  issue is not related to the data control.",
+      "DescriptionRestart": "You can retry the import after parameters checking.",
+      "DescriptionContactAdmin": "If the problem ius still there, please contact your administrator."
+    },
+    "Errors": {
+      "FileTooBig": "Le fichier sélectionné est trop volumineux. La taille maximale est de {{maxFileSize}}Mo",
+      "EmptyFile": "Le fichier sélectionné est vide",
+      "FileColumn": "La première ligne du fichier doit correspondre au nom des colonnes",
+      "FileNameTooBig": "Le nom du fichier est trop long. Il doit faire moins de {{maxFileNameLength}} caractères."
     }
   }
 }
diff --git a/frontend/src/assets/i18n/fr.json b/frontend/src/assets/i18n/fr.json
@@ -279,6 +279,12 @@
     "ChooseFile": "Choisissez votre fichier",
     "Next": "Suivant",
     "Validate": "Valider",
+    "ErrorMessage": {
+      "Title": "Le module d'import a rencontré un problème",
+      "Remark": "Il s'agit d'un problème indépendant du controle des données.",
+      "DescriptionRestart": "Vous pouvez essayer de relancer l'import après vérification des paramètres.",
+      "DescriptionContactAdmin": "Si le problème persiste, merci de contacter votre administrateur."
+    },
     "Errors": {
       "FileTooBig": "Le fichier sélectionné est trop volumineux. La taille maximale est de {{maxFileSize}}Mo",
       "EmptyFile": "Le fichier sélectionné est vide",