move currency to ProofInputRow

openfoodfacts · Jun 21, 2024 · d68799f · d68799f
1 parent 57557d5
commit d68799f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/src/components/PriceInputRow.vue b/src/components/PriceInputRow.vue
@@ -11,7 +11,7 @@
         :suffix="priceForm.currency"
         @update:model-value="newValue => priceForm.price = fixComma(newValue)"
       >
-        <template #prepend-inner>
+        <template v-if="!hideCurrencyChoice" #prepend-inner>
           <!-- image from https://www.svgrepo.com/svg/32717/currency-exchange -->
           <img src="/currency-exchange-svgrepo-com.svg" class="icon-info-currency" @click="changeCurrencyDialog = true">
         </template>
@@ -54,6 +54,10 @@ export default {
       type: Object,
       default: () => ({ price: null, currency: null, price_is_discounted: false, price_without_discount: null })
     },
+    hideCurrencyChoice: {
+      type: Boolean,
+      default: false
+    }
   },
   emits: ['filled'],
   data() {

diff --git a/src/components/ProofInputRow.vue b/src/components/ProofInputRow.vue
@@ -18,7 +18,7 @@
             <span class="d-sm-none">{{ $t('AddPriceSingle.PriceDetails.Gallery') }}</span>
             <span class="d-none d-sm-inline-flex">{{ $t('AddPriceSingle.PriceDetails.SelectFromGallery') }}</span>
           </v-btn>
-          <v-btn v-if="!hideRecentProofChoice" class="mb-2" size="small" prepend-icon="mdi-receipt-text-clock" @click="showUserRecentProofsDialog">
+          <v-btn v-if="!hideRecentProofChoice" class="mb-2" size="small" prepend-icon="mdi-receipt-text-clock" @click="userRecentProofsDialog = true">
             <span class="d-sm-none">{{ $t('AddPriceSingle.PriceDetails.RecentProof') }}</span>
             <span class="d-none d-sm-inline-flex">{{ $t('AddPriceSingle.PriceDetails.SelectRecentProof') }}</span>
           </v-btn>
@@ -65,6 +65,24 @@
             :label="$t('Common.Date')"
             type="date"
             :disabled="existingProof"
+            hide-details="auto"
+          />
+        </v-col>
+      </v-row>
+    </v-col>
+    <!-- proof currency -->
+    <v-col cols="12">
+      <h3 class="mb-1">
+        {{ $t('Common.Currency') }}
+      </h3>
+      <v-row>
+        <v-col cols="12" sm="6">
+          <v-select
+            v-model="proofForm.currency"
+            :label="$t('Common.Currency')"
+            :items="userFavoriteCurrencies"
+            :disabled="existingProof"
+            hide-details="auto"
           />
         </v-col>
       </v-row>
@@ -123,7 +141,7 @@ export default {
     },
     proofForm: {
       type: Object,
-      default: () => ({ proof_id: null, date: utils.currentDate() })
+      default: () => ({ proof_id: null, date: utils.currentDate(), currency: null })
     },
     hideRecentProofChoice: {
       type: Boolean,
@@ -145,19 +163,19 @@ export default {
   computed: {
     ...mapStores(useAppStore),
     proofFormFilled() {
-      let keys = ['proof_id', 'date']
+      let keys = ['proof_id', 'date', 'currency']
       return Object.keys(this.proofForm).filter(k => keys.includes(k)).every(k => !!this.proofForm[k])
     },
+    userFavoriteCurrencies() {
+      return this.appStore.getUserFavoriteCurrencies
+    }
   },
   mounted() {
     if (this.$route.query.proof_id) {
       this.getProofById(this.$route.query.proof_id)
     }
   },
   methods: {
-    showUserRecentProofsDialog() {
-      this.userRecentProofsDialog = true
-    },
     handleRecentProofSelected(selectedProof) {
       this.existingProof = true
       this.proofForm.proof_id = selectedProof.id
@@ -166,6 +184,10 @@ export default {
         this.proofForm.date = selectedProof.date
         this.proofDateSuccessMessage = true
       }
+      if (selectedProof.currency) {
+        this.proofForm.currency = selectedProof.currency
+        // this.proofCurrencySuccessMessage = true
+      }
       this.proofSelectedSuccessMessage = true
     },
     getProofById(proofId) {
@@ -206,7 +228,7 @@ export default {
       })
       .then((proofImageCompressed) => {
         api
-          .createProof(proofImageCompressed, this.proofType, this.proofForm.date)
+          .createProof(proofImageCompressed, this.proofType, this.proofForm.date, this.proofForm.currency)
           .then((data) => {
             this.loading = false
             if (data.id) {

diff --git a/src/services/api.js b/src/services/api.js
@@ -49,12 +49,13 @@ export default {
     .then((response) => response.json())
   },
 
-  createProof(proofImage, type='PRICE_TAG', date=null) {
+  createProof(proofImage, type='PRICE_TAG', date=null, currency=null) {
     const store = useAppStore()
     let formData = new FormData()
     formData.append('file', proofImage, proofImage.name)
     formData.append('type', type)
     formData.append('date', date)
+    formData.append('currency', currency)
     const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/proofs/upload?${buildURLParams()}`
     return fetch(url, {
       method: 'POST',

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -127,7 +127,7 @@
                 </v-item>
               </v-item-group>
             </h3>
-            <PriceInputRow :priceForm="productPriceForm" @filled="pricePriceFormFilled = $event" />
+            <PriceInputRow :priceForm="productPriceForm" :hideCurrencyChoice="true" @filled="pricePriceFormFilled = $event" />
           </v-card-text>
           <v-divider />
           <v-card-text>
@@ -205,6 +205,7 @@ export default {
         location_osm_id: null,
         location_osm_type: '',
         date: utils.currentDate(),
+        currency: null  // see initPriceMultipleForm
       },
       productPriceForm: {},
       productFormFilled: false,
@@ -228,7 +229,7 @@ export default {
         price_per: null, // see PriceInputRow
         price_is_discounted: false,
         price_without_discount: null,
-        currency: null,  // see PriceInputRow
+        currency: null  // see initNewProductPriceForm
       },
       categoryPricePerList: [
         {key: 'KILOGRAM', value: this.$t('AddPriceSingle.CategoryPricePer.PerKg'), icon: 'mdi-weight-kilogram'},
@@ -283,6 +284,7 @@ export default {
        * (init form done in initNewProductPriceForm)
        */
       this.proofType = this.$route.path.endsWith('/receipt') ? 'RECEIPT' : 'PRICE_TAG'
+      this.addPriceMultipleForm.currency = this.appStore.getUserLastCurrencyUsed
       if (this.recentLocations.length) {
         this.setLocationData(this.recentLocations[0])
       }
@@ -311,8 +313,8 @@ export default {
       this.clearProductPriceForm()
       this.productPriceForm = JSON.parse(JSON.stringify(this.productPriceNew))  // deep copy
       this.productPriceForm.mode = this.appStore.user.last_product_mode_used
-      this.productPriceForm.currency = this.appStore.getUserLastCurrencyUsed
       this.productPriceForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
+      this.productPriceForm.currency = this.addPriceMultipleForm.currency
     },
     createPrice() {
       this.createPriceLoading = true