improve(Teledeclaration): Améliore la visibilité du statut et de la p…

…rogression de la télédéclaration (#4803)
betagouv · Jan 6, 2025 · a5b12de · a5b12de
1 parent 73de9ba
commit a5b12de
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 108 deletions.
diff --git a/frontend/src/components/DataInfoBadge.vue b/frontend/src/components/DataInfoBadge.vue
@@ -37,6 +37,8 @@ export default {
     },
     mode() {
       if (this.hasActiveTeledeclaration) return "SUCCESS"
+      else if (this.currentYear) return "INFO"
+      else if (this.missingData || this.readyToTeledeclare) return "ERROR"
       return "INFO"
     },
   },

diff --git a/frontend/src/components/DsfrBadge.vue b/frontend/src/components/DsfrBadge.vue
@@ -7,7 +7,7 @@
     small
     label
   >
-    <v-icon :color="modes[mode].color" small class="mr-2">{{ badgeIcon }}</v-icon>
+    <v-icon v-if="showIcon" :color="modes[mode].color" small class="mr-2">{{ badgeIcon }}</v-icon>
     <slot />
   </v-chip>
 </template>
@@ -25,6 +25,10 @@ export default {
       type: String,
       optional: true,
     },
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

diff --git a/frontend/src/components/DsfrNativeSelect.vue b/frontend/src/components/DsfrNativeSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label :for="inputId" :class="labelClasses">
+    <label v-if="label" :for="inputId" :class="labelClasses">
       {{ label }}
       <span v-if="hint" class="fr-hint-text">{{ hint }}</span>
     </label>
@@ -45,7 +45,6 @@ export default {
     },
     label: {
       type: String,
-      required: true,
     },
     labelClasses: {
       default: "mb-2 text-sm-subtitle-1 text-body-2 text-left",

diff --git a/frontend/src/views/MyProgress/index.vue b/frontend/src/views/MyProgress/index.vue
@@ -6,25 +6,34 @@
         { to: { name: 'DashboardManager' }, title: canteen ? canteen.name : 'Dashboard' },
       ]"
     />
-    <v-row>
-      <v-col cols="12" md="10">
-        <ProductionTypeTag v-if="canteen" :canteen="canteen" class="mt-n2" />
-        <h1 class="fr-h3 mt-1 mb-2" v-if="canteen">{{ canteen.name }}</h1>
-        <v-row v-if="canteenPreviews.length > 1">
-          <v-col>
-            <v-btn outlined color="primary" class="fr-btn--tertiary" :to="{ name: 'ManagementPage' }">
-              Changer d'établissement
-            </v-btn>
-          </v-col>
-        </v-row>
+    <v-row align="end">
+      <v-col cols="12" md="9" lg="10">
+        <DataInfoBadge v-if="hasActiveTeledeclaration" class="my-2" :hasActiveTeledeclaration="true" />
+        <DataInfoBadge
+          v-else-if="inTeledeclarationCampaign"
+          class="my-2"
+          :readyToTeledeclare="readyToTeledeclare"
+          :missingData="!readyToTeledeclare"
+        />
+        <DataInfoBadge v-else-if="+year >= currentYear" class="my-2" :currentYear="+year === currentYear" />
+        <ProductionTypeTag v-if="canteen" :canteen="canteen" class="ml-3" />
+        <h1 class="fr-h3 mt-1 mb-0" v-if="canteen">{{ canteen.name }} : Télédéclaration</h1>
       </v-col>
-      <v-col cols="12" sm="5" md="2">
-        <DsfrNativeSelect label="Année" v-model="selectedYear" :items="yearOptions" />
+      <v-col cols="12" md="3" lg="2">
+        <v-btn
+          v-if="canteenPreviews.length > 1"
+          outlined
+          color="primary"
+          class="fr-btn--tertiary"
+          :to="{ name: 'ManagementPage' }"
+        >
+          Changer d'établissement
+        </v-btn>
       </v-col>
     </v-row>
     <v-row v-if="canteen" class="mt-5 mt-md-10">
-      <v-col cols="12" sm="9" md="3" lg="2" style="border-left: 1px solid #DDD;" class="fr-text-sm order-md-last pr-0">
-        <h2 class="fr-h5 mb-2">Télédéclaration</h2>
+      <v-col cols="12" md="3" lg="2" style="border-right: 1px solid #DDD;" class="fr-text-sm pt-1">
+        <DsfrNativeSelect v-model="selectedYear" :items="yearOptions" class="mb-3 mt-2" />
         <div v-if="hasActiveTeledeclaration">
           <DataInfoBadge class="my-2" :hasActiveTeledeclaration="true" />
           <p>
@@ -70,79 +79,45 @@
             <p>Votre livreur des repas va déclarer les données d'approvisionnement pour votre établissement.</p>
             <p>Pour aller plus loin, vous pouvez télédéclarer les autres volets du bilan.</p>
           </div>
-          <div v-if="readyToTeledeclare">
-            <div v-if="hasFinishedMeasureTunnel">
-              <p>Votre bilan est complet !</p>
-            </div>
-            <div v-else-if="!isSatelliteWithApproCentralDiagnostic">
-              <p>Vous pouvez télédéclarer dès maintenant.</p>
-              <p v-if="!isCentralKitchen || diagnostic.centralKitchenDiagnosticMode !== 'APPRO'">
-                Pour aller plus loin, vous pouvez également compléter les autres volets du bilan.
+          <ul class="progress-list">
+            <li
+              v-for="tab in tabHeaders"
+              :key="tab.id"
+              v-show="!usesSatelliteDiagnosticForMeasure(tab)"
+              class="mb-2 progress-list__item"
+            >
+              <p class="mb-0 font-weight-bold">
+                <v-icon small class="black--text">{{ tab.icon }}</v-icon>
+                {{ tab.text }}
               </p>
-            </div>
-            <v-btn color="primary" :outlined="!hasFinishedMeasureTunnel" @click="showTeledeclarationPreview = true">
-              Télédéclarer
-            </v-btn>
-          </div>
-          <div v-else>
-            <p>Pour télédéclarer, veuillez :</p>
-            <ul>
-              <li v-if="missingApproDiagnostic" class="mb-2">
-                <router-link
-                  custom
-                  :to="{
-                    name: 'DiagnosticTunnel',
-                    params: {
-                      canteenUrlComponent: this.canteenUrlComponent,
-                      year: year,
-                      measureId: 'qualite-des-produits',
-                    },
-                  }"
-                  v-slot="{ href }"
-                >
-                  <a @click.stop.prevent="startApproTunnel" :href="href">Rentrer mes données d'approvisionnement</a>
-                </router-link>
-              </li>
-              <li v-else-if="missingApproData" class="mb-2">
-                <router-link
-                  :to="{
-                    name: 'DiagnosticTunnel',
-                    params: {
-                      canteenUrlComponent: this.canteenUrlComponent,
-                      year: year,
-                      measureId: 'qualite-des-produits',
-                    },
-                  }"
-                >
-                  Compléter le volet d’approvisionnement
-                </router-link>
-              </li>
-              <li v-if="missingCanteenData" class="mb-2">
-                <router-link
-                  :to="{
-                    name: 'CanteenForm',
-                    params: { canteenUrlComponent: this.canteenUrlComponent },
-                    query: { valider: true },
-                  }"
-                >
-                  Compléter les données de votre établissement
-                </router-link>
-              </li>
-              <li v-if="hasSatelliteInconsistency" class="mb-2">
-                <router-link
-                  :to="{
-                    name: 'SatelliteManagement',
-                    params: { canteenUrlComponent: $store.getters.getCanteenUrlComponent(canteen) },
-                  }"
-                >
-                  Mettre à jour vos satellites
-                </router-link>
-              </li>
-              <li v-if="missingDeclarationMode" class="mb-2">
-                Choisir comment les données sont saisis pour vos satellites
-              </li>
-            </ul>
-          </div>
+              <DsfrBadge v-if="tab.isCompleted" :showIcon="false" mode="SUCCESS">Complété</DsfrBadge>
+              <DsfrBadge v-else-if="tab.isRequired" :showIcon="false" mode="ERROR">À compléter (obligatoire)</DsfrBadge>
+              <DsfrBadge v-else :showIcon="false" mode="WARNING">À compléter (optionnel)</DsfrBadge>
+            </li>
+          </ul>
+          <ul>
+            <li v-if="hasSatelliteInconsistency" class="mb-1">
+              <router-link
+                :to="{
+                  name: 'SatelliteManagement',
+                  params: { canteenUrlComponent: $store.getters.getCanteenUrlComponent(canteen) },
+                }"
+              >
+                Mettre à jour vos satellites
+              </router-link>
+            </li>
+            <li v-if="missingDeclarationMode">
+              Choisir comment les données sont saisis pour vos satellites
+            </li>
+          </ul>
+          <v-btn
+            color="primary"
+            :disabled="!readyToTeledeclare && !hasFinishedMeasureTunnel"
+            @click="showTeledeclarationPreview = true"
+            class="mt-3"
+          >
+            Télédéclarer
+          </v-btn>
         </div>
         <div v-else-if="+year >= currentYear">
           <DataInfoBadge class="my-2" :currentYear="+year === currentYear" />
@@ -277,6 +252,7 @@
 import BreadcrumbsNav from "@/components/BreadcrumbsNav"
 import ProductionTypeTag from "@/components/ProductionTypeTag"
 import ProgressTab from "./ProgressTab"
+import DsfrBadge from "@/components/DsfrBadge"
 import DsfrTabsVue from "@/components/DsfrTabs"
 import DsfrNativeSelect from "@/components/DsfrNativeSelect"
 import DownloadLink from "@/components/DownloadLink"
@@ -293,6 +269,7 @@ import {
   missingCanteenData,
   hasSatelliteInconsistency,
   hasFinishedMeasureTunnel,
+  hasStartedMeasureTunnel,
 } from "@/utils"
 import keyMeasures from "@/data/key-measures.json"
 import Constants from "@/constants"
@@ -303,6 +280,7 @@ export default {
     BreadcrumbsNav,
     ProductionTypeTag,
     ProgressTab,
+    DsfrBadge,
     DsfrTabsVue,
     DsfrNativeSelect,
     DownloadLink,
@@ -323,24 +301,6 @@ export default {
       tab: null,
       diagnostic: null,
       centralDiagnostic: null,
-      tabHeaders: [
-        ...keyMeasures.map((x) => ({
-          urlSlug: x.id,
-          text: x.tabText,
-          title: x.title,
-          icon: x.mdiIcon,
-          to: { params: { measure: x.id } },
-        })),
-        ...[
-          {
-            urlSlug: establishmentId,
-            text: "Établissement",
-            title: "Établissement",
-            icon: "$building-fill",
-            to: { params: { measure: establishmentId } },
-          },
-        ],
-      ],
       canteen: null,
       years: diagnosticYears(),
       currentYear: lastYear() + 1,
@@ -355,6 +315,33 @@ export default {
     }
   },
   computed: {
+    tabHeaders() {
+      const tabHeaders = []
+      for (let i = 0; i < keyMeasures.length; i++) {
+        const measure = keyMeasures[i]
+        const item = {
+          urlSlug: measure.id,
+          text: measure.tabText,
+          title: measure.title,
+          icon: measure.mdiIcon,
+          to: { params: { measure: measure.id } },
+          isRequired: measure.id === "qualite-des-produits",
+          isCompleted: hasStartedMeasureTunnel(this.diagnostic, measure),
+        }
+        tabHeaders.push(item)
+      }
+      const centralKitchenCompleted = !this.missingDeclarationMode && !this.hasSatelliteInconsistency
+      tabHeaders.push({
+        urlSlug: this.establishmentId,
+        text: "Établissement",
+        title: "Établissement",
+        icon: "$building-fill",
+        to: { params: { measure: this.establishmentId } },
+        isCompleted: this.isCentralKitchen ? centralKitchenCompleted : !this.missingCanteenData,
+        isRequired: true,
+      })
+      return tabHeaders
+    },
     mobileSelectItems() {
       return this.tabHeaders.map((x, index) => ({ text: x.text, value: index }))
     },
@@ -623,4 +610,11 @@ export default {
 .close-icon {
   border-bottom: solid 1px;
 }
+.progress-list {
+  padding-left: 0;
+  list-style: none;
+}
+.progress-list__item:last-child {
+  margin-bottom: 0.25rem !important;
+}
 </style>