feat(import): improve error displayed

naturalsolutions · Feb 12, 2024 · 2854304 · 2854304
1 parent 2fc7273
commit 2854304
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 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> Le module d'import a rencontré un problème
+                    </div>
+                    <div class="error-import__remark">
+                      Il s'agit d'un problème indépendant du controle des données.
+                    </div>
+                    <div class="error-import__description">
+                      <span>
+                        Vous pouvez essayer de relancer l'import après vérification des paramètres.
+                      </span>
+                      <span>
+                        Si le problème persiste, merci de contacter votre administrateur.
+                      </span>
+                    </div>
                 </div>
             </div>
         </div>

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,24 @@ 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;
+  }
+
+  &__remark, &__description {
+    font-size: 0.9em;
+    text-align: justify;
+  }
+  &__remark {
+    filter: brightness(0.5);
+    font-style: italic;
+  }
+  &__description span {
+    display: inline-block;
+  }
+}