feat(Add prices): add proof type choice directly in the form (#932)

openfoodfacts · Oct 5, 2024 · 104b0a7 · 104b0a7
1 parent 9a28f1d
commit 104b0a7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 32 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -11,8 +11,8 @@
     <v-btn v-else prepend-icon="mdi-magnify" to="/search" :aria-label="$t('Common.Search')">
       {{ $t('Common.Search') }}
     </v-btn>
-    <v-btn v-if="!$vuetify.display.smAndUp" color="primary" icon="mdi-tag-plus-outline" to="/prices/add" :aria-label="$t('Common.AddPrice')" />
-    <v-btn v-else color="primary" prepend-icon="mdi-tag-plus-outline" to="/prices/add" :aria-label="$t('Common.AddPrice')">
+    <v-btn v-if="!$vuetify.display.smAndUp" color="primary" icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrice')" />
+    <v-btn v-else color="primary" prepend-icon="mdi-tag-plus-outline" to="/prices/add/multiple" :aria-label="$t('Common.AddPrice')">
       {{ $t('Common.AddPrice') }}
     </v-btn>
     <template v-if="!username" #append>

diff --git a/src/components/PriceAddLink.vue b/src/components/PriceAddLink.vue
@@ -28,11 +28,6 @@ export default {
       type: Number,
       default: null
     },
-    proofType: {
-      type: String,
-      default: null,
-      examples: ['PRICE_TAG', 'RECEIPT']
-    },
     display: {
       type: String,
       default: 'link',
@@ -46,17 +41,13 @@ export default {
   data() {
     return {
       ADD_PRICE_SINGLE_BASE_URL: '/prices/add/single',
-      ADD_PRICE_MULTIPLE_RECEIPT_BASE_URL: '/prices/add/multiple/receipt',
-      ADD_PRICE_MULTIPLE_PRICE_TAG_BASE_URL: '/prices/add/multiple/price-tag',
+      ADD_PRICE_MULTIPLE_BASE_URL: '/prices/add/multiple',
     }
   },
   computed: {
     getAddUrl() {
       if (this.proofId) {
-        if (this.proofType === 'RECEIPT') {
-          return `${this.ADD_PRICE_MULTIPLE_RECEIPT_BASE_URL}?proof_id=${this.proofId}`
-        }
-        return `${this.ADD_PRICE_MULTIPLE_PRICE_TAG_BASE_URL}?proof_id=${this.proofId}`
+        return `${this.ADD_PRICE_MULTIPLE_BASE_URL}?proof_id=${this.proofId}`
       }
       return `${this.ADD_PRICE_SINGLE_BASE_URL}?code=${this.productCode}`
     }

diff --git a/src/components/ProofActionMenuButton.vue b/src/components/ProofActionMenuButton.vue
@@ -7,7 +7,7 @@
           {{ $t('Common.Proof') }}
         </v-list-subheader>
         <v-divider />
-        <PriceAddLink :proofId="proof.id" :proofType="proof.type" display="list-item" :disabled="!userCanAddPrice" />
+        <PriceAddLink :proofId="proof.id" display="list-item" :disabled="!userCanAddPrice" />
         <v-list-item :slim="true" prepend-icon="mdi-eye-outline" :to="getProofDetailUrl">
           {{ $t('Common.Details') }}
         </v-list-item>

diff --git a/src/components/ProofInputRow.vue b/src/components/ProofInputRow.vue
@@ -1,9 +1,14 @@
 <template>
   <v-row>
     <v-col v-if="!proofObject" cols="12">
+      <!-- proof type -->
+      <ProofTypeInputRow :proofTypeForm="proofForm" />
       <!-- proof image -->
       <v-row>
         <v-col cols="8">
+          <h3 class="mb-1">
+            {{ $t('Common.Image') }}
+          </h3>
           <v-btn
             class="mb-2 mr-2" size="small" prepend-icon="mdi-camera" :loading="loading"
             :disabled="loading" @click.prevent="$refs.proofCamera.click()"
@@ -44,7 +49,7 @@
       </v-row>
 
       <!-- proof RECEIPT: warning message -->
-      <v-row v-if="proofType === 'RECEIPT'" class="mt-0">
+      <v-row v-if="proofForm.type === 'RECEIPT'" class="mt-0">
         <v-col>
           <h3 class="mb-1">
             {{ $t('ProofDetail.Privacy') }}
@@ -93,7 +98,7 @@
   <UserRecentProofsDialog
     v-if="userRecentProofsDialog"
     v-model="userRecentProofsDialog"
-    :filterType="proofType"
+    :filterType="proofForm.type"
     @recentProofSelected="handleRecentProofSelected($event)"
     @close="userRecentProofsDialog = false"
   />
@@ -116,19 +121,16 @@ Compressor.setDefaults({
 
 export default {
   components: {
+    ProofTypeInputRow: defineAsyncComponent(() => import('../components/ProofTypeInputRow.vue')),
     UserRecentProofsDialog: defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
     ProofDateCurrencyInputRow: defineAsyncComponent(() => import('../components/ProofDateCurrencyInputRow.vue')),
     ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
     LocationInputRow: defineAsyncComponent(() => import('../components/LocationInputRow.vue')),
   },
   props: {
-    proofType: {
-      type: String,
-      default: null
-    },
     proofForm: {
       type: Object,
-      default: () => ({ proof_id: null, location_osm_id: null, location_osm_type: null, date: utils.currentDate(), currency: null })
+      default: () => ({ type: null, proof_id: null, location_osm_id: null, location_osm_type: null, date: utils.currentDate(), currency: null })
     },
     hideRecentProofChoice: {
       type: Boolean,
@@ -150,12 +152,18 @@ export default {
     }
   },
   computed: {
+    proofTypeFormFilled() {
+      return !!this.proofForm.type
+    },
+    proofFormImageFilled() {
+      return !!this.proofFormImage
+    },
     proofDateCurrencyFormFilled() {
       let keys = ['date', 'currency']
       return Object.keys(this.proofForm).filter(k => keys.includes(k)).every(k => !!this.proofForm[k])
     },
     proofFormFilled() {
-      return !!this.proofFormImage && this.proofDateCurrencyFormFilled
+      return this.proofTypeFormFilled && this.proofFormImageFilled && this.proofDateCurrencyFormFilled
     },
   },
   watch: {
@@ -220,7 +228,7 @@ export default {
       })
       .then((proofFormImageCompressed) => {
         api
-          .createProof(proofFormImageCompressed, this.proofType, this.proofForm.location_osm_id, this.proofForm.location_osm_type, this.proofForm.date, this.proofForm.currency)
+          .createProof(proofFormImageCompressed, this.proofForm.type, this.proofForm.location_osm_id, this.proofForm.location_osm_type, this.proofForm.date, this.proofForm.currency)
           .then((data) => {
             this.loading = false
             if (data.id) {

diff --git a/src/router.js b/src/router.js
@@ -10,10 +10,11 @@ const routes = [
   { path: '/dashboard/prices', name: 'dashboard-prices', component: () => import('./views/UserDashboardPriceList.vue'), meta: { title: 'MyPrices', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyPrices', disabled: true}] } },
   { path: '/dashboard/proofs', name: 'dashboard-proofs', component: () => import('./views/UserDashboardProofList.vue'), meta: { title: 'MyProofs', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyProofs', disabled: true}] } },
   { path: '/settings', name: 'settings', component: () => import('./views/UserSettings.vue'), meta: { title: 'Settings', requiresAuth: true } },
-  { path: '/prices/add', name: 'add-price', component: () => import('./views/AddPriceHome.vue'), meta: { title: 'AddPrice', icon: 'mdi-tag-plus-outline', drawerMenu: true, color: 'primary', requiresAuth: true }},
+  { path: '/prices/add', name: 'add-price', component: () => import('./views/AddPriceHome.vue'), meta: { title: 'AddPrice', requiresAuth: true }},
   { path: '/prices/add/single', name: 'add-price-single', component: () => import('./views/AddPriceSingle.vue'), meta: { title: 'Add a single price (price tag)', requiresAuth: true }},
-  { path: '/prices/add/multiple/price-tag', name: 'add-price-multiple-price-tag', component: () => import('./views/AddPriceMultiple.vue'), meta: { title: 'Add multiple prices (price tags)', requiresAuth: true }},
-  { path: '/prices/add/multiple/receipt', name: 'add-price-multiple-receipt', component: () => import('./views/AddPriceMultiple.vue'), meta: { title: 'Add multiple prices (receipt)', requiresAuth: true }},
+  { path: '/prices/add/multiple', name: 'add-price-multiple', component: () => import('./views/AddPriceMultiple.vue'), meta: { title: 'AddPrice', icon: 'mdi-tag-plus-outline', drawerMenu: true, color: 'primary', requiresAuth: true }},
+  { path: '/prices/add/multiple/price-tag', name: 'add-price-multiple-price-tag', redirect: () => { return { path: '/prices/add/multiple' }}},
+  { path: '/prices/add/multiple/receipt', name: 'add-price-multiple-receipt', redirect: () => { return { path: '/prices/add/multiple' }}},
   { path: '/prices/:id', name: 'prices-detail', component: () => import('./views/PriceDetail.vue'), meta: { title: 'Price detail' }},
   { path: '/search', name: 'search', component: () => import('./views/Search.vue'), meta: { title: 'Search', icon: 'mdi-magnify', drawerMenu: true }},
   { path: '/prices', name: 'prices', component: () => import('./views/PriceList.vue'), meta: { title: 'LatestPrices', icon: 'mdi-tag-multiple-outline', drawerMenu: true }},

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -7,8 +7,8 @@
     <!-- Step 1: proof (image, location, date & currency) -->
     <v-col cols="12" md="6">
       <v-card
-        :title="(proofType === 'RECEIPT') ? $t('AddPriceHome.ReceiptMode.Title') : $t('AddPriceMultiple.ProofDetails.Title')"
-        :prepend-icon="(proofType === 'RECEIPT') ? 'mdi-receipt-text-outline' : 'mdi-library-shelves'"
+        :title="$t('AddPriceMultiple.ProofDetails.Title')"
+        prepend-icon="mdi-image"
         height="100%"
         :style="proofFormFilled ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
       >
@@ -17,7 +17,7 @@
         </template>
         <v-divider />
         <v-card-text>
-          <ProofInputRow :proofType="proofType" :proofForm="addPriceMultipleForm" @proof="proofSelected($event)" />
+          <ProofInputRow :proofForm="addPriceMultipleForm" @proof="proofSelected($event)" />
         </v-card-text>
         <v-overlay v-model="disableProofForm" scrim="#E8F5E9" contained persistent />
       </v-card>
@@ -148,9 +148,9 @@ export default {
   },
   data() {
     return {
-      proofType: null,  // 'PRICE_TAG' or 'RECEIPT'
       // price form
       addPriceMultipleForm: {
+        type: null,
         proof_id: null,
         location_osm_id: null,
         location_osm_type: '',
@@ -189,7 +189,7 @@ export default {
   computed: {
     ...mapStores(useAppStore),
     proofFormFilled() {
-      let keys = ['proof_id', 'location_osm_id', 'location_osm_type', 'date', 'currency']
+      let keys = Object.keys(this.addPriceMultipleForm)
       return Object.keys(this.addPriceMultipleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceMultipleForm[k])
     },
     pricePerFormFilled() {
@@ -236,7 +236,6 @@ export default {
        * init form config (product mode, currency)
        * (init form done in initNewProductPriceForm)
        */
-      this.proofType = this.$route.path.endsWith('/receipt') ? 'RECEIPT' : 'PRICE_TAG'
       this.addPriceMultipleForm.currency = this.appStore.getUserLastCurrencyUsed
     },
     proofSelected(proof) {