improve(Import fichiers): Ajout d'une modale pour informer l'utilisat…

…eur sur la validation de son import et qu'il lui reste à le télédéclarer (#4860)

frontend/src/components/ImporterSuccessDialog.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="600">
+    <v-card>
+      <div class="pa-4 d-flex align-center" style="background-color: #F5F5F5">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" outlined @click="showDialog = false">
+          Fermer
+        </v-btn>
+      </div>
+      <div class="pa-6">
+        <v-card-title class="mb-6">
+          <img src="/static/images/picto-dsfr/success.svg" width="50px" />
+          <h1 class="fr-h5 mb-0 ml-2">
+            Le fichier a été importé avec succès
+          </h1>
+        </v-card-title>
+        <v-card-text class="text-left">
+          <v-row class="mb-4 ml-0 mr-0">
+            <p class="font-weight-bold">{{ description }}</p>
+            <p>
+              Depuis votre tableau de bord, vous devez télédéclarer vos données, lorsque la campagne de télédéclaration
+              est ouverte.
+            </p>
+          </v-row>
+          <v-row>
+            <v-spacer></v-spacer>
+            <router-link :to="{ name: 'ManagementPage' }">
+              <v-btn color="primary" class="px-4">
+                Aller sur mon tableau de bord
+              </v-btn>
+            </router-link>
+          </v-row>
+        </v-card-text>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "ImporterSuccessDialog",
+  props: {
+    description: String,
+    isOpen: Boolean,
+  },
+  data() {
+    return {
+      showDialog: this.isOpen,
+    }
+  },
+}
+</script>

frontend/src/views/DiagnosticsImporter/DiagnosticImportPage.vue

@@ -77,17 +77,24 @@
       <span class="mt-1">Traitement en cours...</span>
     </v-card>
     <div v-if="!isNaN(canteenCount) && !importInProgress">
-      <div v-if="canteenCount > 0">
-        <v-alert type="success" outlined>
-          <p class="grey--text text--darken-4 body-2 mb-0">
-            {{ canteenCount }} cantines
-            <span v-if="diagnosticCount">et {{ diagnosticCount }} diagnostics&nbsp;</span>
-            <span v-if="teledeclarationCount">et {{ teledeclarationCount }} télédéclarations&nbsp;</span>
-            <span>ont été {{ diagnosticCount ? "traités" : "traitées" }}.</span>
-          </p>
-        </v-alert>
-        <router-link :to="{ name: 'ManagementPage' }" class="ma-4">← Retourner à mes cantines</router-link>
-      </div>
+      <ImporterSuccessDialog
+        v-if="canteenCount > 0 && !diagnosticCount && !teledeclarationCount"
+        :isOpen="canteenCount > 0"
+        :description="
+          canteenCount > 1
+            ? 'Vos cantines sont enregistrées et sont maintenant disponibles.'
+            : 'Votre cantine est enregistrée et est maintenant disponible.'
+        "
+      />
+      <ImporterSuccessDialog
+        v-else-if="canteenCount > 0"
+        :isOpen="canteenCount > 0"
+        :description="
+          canteenCount > 1
+            ? 'Vos bilans sont enregistrés et sont maintenant disponibles.'
+            : 'Votre bilan est enregistré et est maintenant disponible.'
+        "
+      />
       <div v-if="errors && errors.length">
         <h2 class="my-4">3. Adresser les erreurs suivants, et re-essayer</h2>
         <p class="text-body-2 red--text text--darken-4" v-if="canteenCount === 0">
@@ -260,10 +267,11 @@ import HelpForm from "./HelpForm"
 import Constants from "@/constants"
 import DownloadLinkList from "@/components/DownloadLinkList.vue"
 import DsfrCallout from "@/components/DsfrCallout"
+import ImporterSuccessDialog from "@/components/ImporterSuccessDialog.vue"
 
 export default {
   name: "DiagnosticImportPage",
-  components: { BreadcrumbsNav, FileDrop, HelpForm, DownloadLinkList, DsfrCallout },
+  components: { BreadcrumbsNav, FileDrop, HelpForm, DownloadLinkList, DsfrCallout, ImporterSuccessDialog },
   props: ["importUrlSlug"],
   data() {
     const user = this.$store.state.loggedUser
@@ -872,7 +880,8 @@ export default {
           this.seconds = json.seconds
           this.encodingUsed = json.encoding
           let resultMessage = {
-            message: `${this.canteenCount} cantines traitées`,
+            message:
+              this.canteenCount > 1 ? `${this.canteenCount} cantines traitées` : `${this.canteenCount} cantine traitée`,
             status: "success",
           }
           if (this.errors.length) {

frontend/src/views/PurchasesImporter.vue

@@ -41,12 +41,14 @@
       <span class="mt-1">Traitement en cours...</span>
     </v-card>
     <div v-if="!isNaN(purchaseCount) && !importInProgress">
-      <v-alert type="success" outlined v-if="!duplicateFile && purchaseCount > 0">
-        <span class="grey--text text--darken-4 body-2">
-          {{ purchaseCount }} achats
-          <span>ont été créés.</span>
-        </span>
-      </v-alert>
+      <ImporterSuccessDialog
+        :isOpen="showSuccessDialog && !duplicateFile && purchaseCount > 0"
+        :description="
+          purchaseCount > 1
+            ? 'Vos achats sont enregistrés et sont maintenant disponibles.'
+            : 'Votre achat est enregistré et est maintenant disponible.'
+        "
+      />
       <div v-if="duplicateFile">
         <p class="orange--text text--darken-4">
           Ce fichier a déjà été utilisé pour importer {{ duplicatePurchaseCount }}
@@ -130,10 +132,11 @@ import FileDrop from "@/components/FileDrop"
 import PurchasesTable from "@/components/PurchasesTable"
 import SchemaTable from "@/components/SchemaTable"
 import validators from "@/validators"
+import ImporterSuccessDialog from "@/components/ImporterSuccessDialog.vue"
 
 export default {
   name: "ImportPurchases",
-  components: { FileDrop, PurchasesTable, SchemaTable },
+  components: { FileDrop, PurchasesTable, SchemaTable, ImporterSuccessDialog },
   data() {
     const user = this.$store.state.loggedUser
     return {
@@ -151,6 +154,7 @@ export default {
       validators,
       isStaff: user.isStaff,
       duplicateFile: false,
+      showSuccessDialog: false,
     }
   },
   methods: {
@@ -169,6 +173,7 @@ export default {
           this.duplicatePurchases = json.duplicatePurchases
           this.duplicatePurchaseCount = json.duplicatePurchaseCount
           this.seconds = json.seconds
+          this.showSuccessDialog = true
           this.$store.dispatch("notify", {
             message: `Fichier traité en ${Math.round(this.seconds)} secondes`,
           })