feat(Proof upload): add a stepper at the top to guide users (#1249)

openfoodfacts · Jan 11, 2025 · 1436970 · 1436970
1 parent 797b181
commit 1436970
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -23,3 +23,7 @@
 .v-btn-group--density-compact.v-btn-group {
     height: 28px !important;  /* default is 36px; match v-btn size="small" height */
 }
+
+.v-stepper-item {
+    padding: 1rem !important;
+}
diff --git a/src/views/ProofAddMultiple.vue b/src/views/ProofAddMultiple.vue
@@ -1,18 +1,29 @@
 <template>
   <v-row>
+    <v-col cols="12">
+      <v-stepper v-model="step" hide-actions disabled>
+        <v-stepper-header>
+          <v-stepper-item :title="stepItemList[0].title" :value="stepItemList[0].value" :complete="step === 2" />
+          <v-divider />
+          <v-stepper-item :title="stepItemList[1].title" :value="stepItemList[1].value" />
+        </v-stepper-header>
+      </v-stepper>
+    </v-col>
+  </v-row>
+
+  <v-row v-if="step === 1">
     <v-col cols="12" md="6">
-      <ProofUploadCard :typePriceTagOnly="true" :hideRecentProofChoice="true" :multiple="true" @done="proofListUploaded = true" />
+      <ProofUploadCard :typePriceTagOnly="true" :hideRecentProofChoice="true" :multiple="true" @done="step = 2" />
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="step === 2">
     <v-col>
       <v-btn
         class="float-right"
-        type="submit"
-        :color="proofListUploaded ? 'success' : ''"
-        :disabled="!proofListUploaded"
-        @click="done"
+        variant="outlined"
+        color="primary"
+        @click="goToDashboard"
       >
         {{ $t('Common.Done') }}
       </v-btn>
@@ -29,11 +40,21 @@ export default {
   },
   data() {
     return {
-      proofListUploaded: false
+      step: 1,
+      stepItemList: [
+        {
+          title: this.$t('Common.Upload'),
+          value: 1
+        },
+        {
+          title: this.$t('Common.Done'),
+          value: 2
+        }
+      ]
     }
   },
   methods: {
-    done() {
+    goToDashboard() {
       this.$router.push({ path: '/dashboard', query: { proofSingleSuccess: 'true' } })
     }
   }

diff --git a/src/views/ProofAddSingle.vue b/src/views/ProofAddSingle.vue
@@ -1,18 +1,29 @@
 <template>
   <v-row>
+    <v-col cols="12">
+      <v-stepper v-model="step" hide-actions disabled>
+        <v-stepper-header>
+          <v-stepper-item :title="stepItemList[0].title" :value="stepItemList[0].value" :complete="step === 2" />
+          <v-divider />
+          <v-stepper-item :title="stepItemList[1].title" :value="stepItemList[1].value" />
+        </v-stepper-header>
+      </v-stepper>
+    </v-col>
+  </v-row>
+
+  <v-row v-if="step === 1">
     <v-col cols="12" md="6">
-      <ProofUploadCard :hideRecentProofChoice="true" @proof="proofUploaded = true" />
+      <ProofUploadCard :hideRecentProofChoice="true" @done="step = 2" />
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="step === 2">
     <v-col>
       <v-btn
         class="float-right"
-        type="submit"
-        :color="proofUploaded ? 'success' : ''"
-        :disabled="!proofUploaded"
-        @click="done"
+        variant="outlined"
+        color="primary"
+        @click="goToDashboard"
       >
         {{ $t('Common.Done') }}
       </v-btn>
@@ -29,11 +40,22 @@ export default {
   },
   data() {
     return {
+      step: 1,
+      stepItemList: [
+        {
+          title: this.$t('Common.Upload'),
+          value: 1
+        },
+        {
+          title: this.$t('Common.Done'),
+          value: 2
+        }
+      ],
       proofUploaded: false
     }
   },
   methods: {
-    done() {
+    goToDashboard() {
       this.$router.push({ path: '/dashboard', query: { proofSingleSuccess: 'true' } })
     }
   }