feat: add category price per unit toggle (#266)

* feat: add category price per unit toggle * feat: category price per unit price card update * fix: category price per unit first letter --------- Co-authored-by: dq18 <>
openfoodfacts · Jan 31, 2024 · 02c97c0 · 02c97c0
1 parent 0d0368d
commit 02c97c0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/src/components/PricePrice.vue b/src/components/PricePrice.vue
@@ -47,6 +47,9 @@ export default {
     priceCurrency() {
       return this.price.currency
     },
+    pricePricePer() {
+      return this.price.price_per
+    },
   },
   methods: {
     getPriceValue(priceValue, priceCurrency) {
@@ -59,9 +62,10 @@ export default {
     },
     getPriceValueDisplay(price) {
       if (this.hasCategoryTag) {
-        return this.$t('PriceCard.PriceValueDisplay', [this.getPriceValue(price, this.priceCurrency)])
+        const translationKey = this.pricePricePer === 'UNIT' ? 'PriceCard.PriceValueDisplayUnit' : 'PriceCard.PriceValueDisplay';
+        return this.$t(translationKey, [this.getPriceValue(price, this.priceCurrency)]);
       }
-      return this.getPriceValue(price, this.priceCurrency)
+      return this.getPriceValue(price, this.priceCurrency);
     },
     getPricePerKilo() {
       const productQuantity = this.productQuantity

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -44,8 +44,6 @@
 			"LabelFull": "Full price",
 			"Proof": "Proof",
 			"ProofUploaded": "Proof uploaded!",
-			"Text": "Price {perKg}",
-			"TextPerKg": "per kg",
 			"Title": "Price details",
 			"UploadProof": "Upload a proof",
 			"TakePicture": "Take a picture",
@@ -64,6 +62,10 @@
 			"Barcode": "Barcode",
 			"Category": "Category"
 		},
+		"CategoryPricePer": {
+			"PerKg": "Price per kg",
+			"PerUnit": "Price per unit"
+		},
 		"Title": "Add a single price",
 		"WhereWhen": {
 			"Date": "Date",
@@ -148,6 +150,7 @@
 		"Discount": "Discount",
 		"PriceDate": "on {date}",
 		"PriceValueDisplay": "{0} / kg",
+		"PriceValueDisplayUnit": "{0} / unit",
 		"Proof": "Proof",
 		"ProductQuantity": "{0} g",
 		"FullPrice": "Full price",

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -202,11 +202,14 @@
             <i>{{ $t('AddPriceSingle.ProductInfo.SetProduct') }}</i>
           </p>
           <h3 class="mb-1">
-            <i18n-t keypath="AddPriceSingle.PriceDetails.Text" tag="span">
-              <template #perKg>
-                <span v-if="productMode === 'category'">{{ $t('AddPriceSingle.PriceDetails.TextPerKg') }}</span>
-              </template>
-            </i18n-t>
+            <v-item-group v-if="productMode === 'category'" v-model="productPriceForm.price_per" class="d-inline" mandatory>
+                <v-item v-for="cpp in categoryPricePerList" :key="cpp.key" :value="cpp.key" v-slot="{ isSelected, toggle }">
+                  <v-chip class="mr-1" @click="toggle" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'">
+                    <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'"></v-icon>
+                    {{ cpp.value }}
+                  </v-chip>
+                </v-item>
+            </v-item-group>
           </h3>
           <v-row>
             <v-col :cols="productPriceForm.price_is_discounted ? '6' : '12'" sm="6">
@@ -359,6 +362,7 @@ export default {
         origins_tags: '',
         labels_tags: [],
         price: null,
+        price_per: null, // see initPriceSingleForm
         price_is_discounted: false,
         price_without_discount: null,
         currency: null,  // see initPriceMultipleForm
@@ -375,6 +379,10 @@ export default {
       labelsTags: LabelsTags,
       barcodeScanner: false,
       barcodeManualInput: false,
+      categoryPricePerList: [
+        {key: 'KILOGRAM', value: this.$t('AddPriceSingle.CategoryPricePer.PerKg'), icon: 'mdi-weight-kilogram'},
+        {key: 'UNIT', value: this.$t('AddPriceSingle.CategoryPricePer.PerUnit'), icon: 'mdi-numeric-1-circle'}
+      ],
     }
   },
   computed: {
@@ -525,12 +533,15 @@ export default {
       this.productPriceForm = JSON.parse(JSON.stringify(this.productPriceNew))
       this.productPriceForm.currency = this.appStore.user.last_currency_used
       this.productMode = this.appStore.user.last_product_mode_used
+      this.productPriceForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
     },
     createPrice() {
       this.createPriceLoading = true
       // cleanup form
       if (!this.productPriceForm.product_code) {
         this.productPriceForm.product_code = null
+      } else {
+        this.productPriceForm.price_per = null
       }
       if ((typeof this.productPriceForm.origins_tags === 'string') && (this.productPriceForm.origins_tags.length)) {
         this.productPriceForm.origins_tags = [this.productPriceForm.origins_tags]

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -97,11 +97,14 @@
           <v-divider></v-divider>
           <v-card-text>
             <h3 class="mb-1">
-              <i18n-t keypath="AddPriceSingle.PriceDetails.Text" tag="span">
-                <template #perKg>
-                  <span v-if="productMode === 'category'">{{ $t('AddPriceSingle.PriceDetails.TextPerKg') }}</span>
-                </template>
-              </i18n-t>
+              <v-item-group v-if="productMode === 'category'" v-model="addPriceSingleForm.price_per" class="d-inline" mandatory>
+                <v-item v-for="cpp in categoryPricePerList" :key="cpp.key" :value="cpp.key" v-slot="{ isSelected, toggle }">
+                  <v-chip class="mr-1" @click="toggle" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'">
+                    <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'"></v-icon>
+                    {{ cpp.value }}
+                  </v-chip>
+                </v-item>
+              </v-item-group>
             </h3>
             <v-row>
               <v-col :cols="addPriceSingleForm.price_is_discounted ? '6' : '12'" sm="6">
@@ -284,6 +287,7 @@ export default {
         origins_tags: '',
         labels_tags: [],
         price: null,
+        price_per: null, // see initPriceSingleForm
         price_is_discounted: false,
         price_without_discount: null,
         currency: null,  // see initPriceSingleForm
@@ -313,6 +317,10 @@ export default {
       proofImagePreview: null,
       createProofLoading: false,
       proofSuccessMessage: false,
+      categoryPricePerList: [
+        {key: 'KILOGRAM', value: this.$t('AddPriceSingle.CategoryPricePer.PerKg'), icon: 'mdi-weight-kilogram'},
+        {key: 'UNIT', value: this.$t('AddPriceSingle.CategoryPricePer.PerUnit'), icon: 'mdi-numeric-1-circle'}
+      ],
     }
   },
   computed: {
@@ -329,7 +337,7 @@ export default {
       return this.productBarcodeFormFilled || this.productCategoryFormFilled
     },
     priceFormFilled() {
-      let keys = ['price', 'currency']
+      let keys = ['price', 'currency', 'price_per']
       return Object.keys(this.addPriceSingleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceSingleForm[k])
     },
     proofFormFilled() {
@@ -369,6 +377,7 @@ export default {
        * init product mode, currency & last location
        */
       this.productMode = this.addPriceSingleForm.product_code ? 'barcode' : this.appStore.user.last_product_mode_used
+      this.addPriceSingleForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
       this.addPriceSingleForm.currency = this.appStore.user.last_currency_used
       if (this.recentLocations.length) {
         this.setLocationData(this.recentLocations[0])
@@ -458,6 +467,8 @@ export default {
       // cleanup form
       if (!this.addPriceSingleForm.product_code) {
         this.addPriceSingleForm.product_code = null
+      } else {
+        this.addPriceSingleForm.price_per = null
       }
       if ((typeof this.addPriceSingleForm.origins_tags === 'string') && (this.addPriceSingleForm.origins_tags.length)) {
         this.addPriceSingleForm.origins_tags = [this.addPriceSingleForm.origins_tags]