From 02c97c03e155ba49d799904b42d28b21099d5641 Mon Sep 17 00:00:00 2001
From: dq18 <21193194+dq18@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:49:07 +0100
Subject: [PATCH] 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 <>
---
src/components/PricePrice.vue | 8 ++++++--
src/i18n/locales/en.json | 7 +++++--
src/views/AddPriceMultiple.vue | 21 ++++++++++++++++-----
src/views/AddPriceSingle.vue | 23 +++++++++++++++++------
4 files changed, 44 insertions(+), 15 deletions(-)
diff --git a/src/components/PricePrice.vue b/src/components/PricePrice.vue
index 6fadfe0a2ef..7d7ea3a1d5c 100644
--- 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
index db9131c7bbd..05d2f04b890 100644
--- 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
index df71e057ff5..64f81bcf9bb 100644
--- a/src/views/AddPriceMultiple.vue
+++ b/src/views/AddPriceMultiple.vue
@@ -202,11 +202,14 @@
{{ $t('AddPriceSingle.ProductInfo.SetProduct') }}
-
-
- {{ $t('AddPriceSingle.PriceDetails.TextPerKg') }}
-
-
+
+
+
+
+ {{ cpp.value }}
+
+
+
@@ -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
index 7b673a0e199..d9ec8c7ad24 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -97,11 +97,14 @@
-
-
- {{ $t('AddPriceSingle.PriceDetails.TextPerKg') }}
-
-
+
+
+
+
+ {{ cpp.value }}
+
+
+
@@ -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]