refactor(Price validation): add a new settings to display the price e…

…dit form by default (#1312)
openfoodfacts · Jan 22, 2025 · 2bc26d7 · 2bc26d7
1 parent a40b936
commit 2bc26d7
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 10 deletions.
diff --git a/src/components/ContributionAssistantPriceFormCard.vue b/src/components/ContributionAssistantPriceFormCard.vue
@@ -40,7 +40,7 @@
       </v-menu>
       <v-spacer />
       <v-btn
-        v-if="mode === 'Display'"
+        v-if="mode === 'display'"
         color="warning"
         variant="outlined"
         prepend-icon="mdi-pencil"
@@ -72,6 +72,8 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 import constants from '../constants'
 
 export default {
@@ -125,19 +127,23 @@ export default {
   emits: ['removePriceTag', 'validatePriceTag'],
   data() {
     return {
-      mode: 'Display',  // 'Edit'
+      mode: null,  // see mounted
       productFormFilled: false,
       pricePriceFormFilled: false,
     }
   },
   computed: {
+    ...mapStores(useAppStore),
     productIsTypeProduct() {
       return this.productPriceForm.type === constants.PRICE_TYPE_PRODUCT
     },
     showOverlay() {
       return this.loading
     }
   },
+  mounted() {
+    this.mode = this.appStore.user.price_form_default_mode
+  },
   methods: {
     resetMode() {
       this.mode = 'Display'

diff --git a/src/components/PriceInputRow.vue b/src/components/PriceInputRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="mode === 'Edit'">
+  <v-row v-if="mode === 'edit'">
     <v-col cols="12">
       <v-row v-if="productIsTypeCategory">
         <v-col>
@@ -80,7 +80,7 @@
       @close="changeCurrencyDialog = false"
     />
   </v-row>
-  <v-row v-else-if="mode === 'Display'">
+  <v-row v-else-if="mode === 'display'">
     <v-col cols="12">
       <v-alert
         icon="mdi-currency-usd"
@@ -117,7 +117,7 @@ export default {
     },
     mode: {
       type: String,
-      default: 'Edit'  // or 'Display'
+      default: constants.PRICE_FORM_DISPLAY_LIST[1].key,  // 'edit'
     },
     hideCurrencyChoice: {
       type: Boolean,

diff --git a/src/components/ProductInputRow.vue b/src/components/ProductInputRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="mode === 'Edit'">
+  <v-row v-if="mode === 'edit'">
     <v-col>
       <v-row>
         <v-col>
@@ -60,7 +60,7 @@
     </v-col>
   </v-row>
 
-  <v-row v-else-if="mode === 'Display'">
+  <v-row v-else-if="mode === 'display'">
     <v-col v-if="productIsTypeProduct" cols="12">
       <v-alert
         class="mb-2"
@@ -124,7 +124,7 @@ export default {
     },
     mode: {
       type: String,
-      default: 'Edit'  // or 'Display'
+      default: constants.PRICE_FORM_DISPLAY_LIST[1].key,  // 'edit'
     },
     disableInitWhenSwitchingType: {
       type: Boolean,

diff --git a/src/constants.js b/src/constants.js
@@ -181,6 +181,10 @@ export default {
     { key: 'scan', value: 'BarcodeScan', valueSmallScreen: 'BarcodeScanShort', icon: 'mdi-barcode-scan' },
     { key: 'type', value: 'BarcodeType', valueSmallScreen: 'BarcodeTypeShort', icon: 'mdi-numeric' },
   ],
+  PRICE_FORM_DISPLAY_LIST: [
+    { key: 'display', value: 'Display', icon: 'mdi-eye-outline' },
+    { key: 'edit', value: 'Edit', icon: 'mdi-pencil' },
+  ],
   DATE_FULL_REGEX_MATCH: /(\d{4})-(\d{2})-(\d{2})/,
   DATE_YEAR_MONTH_REGEX_MATCH: /(\d{4})-(\d{2})/,
   DATE_YEAR_REGEX_MATCH: /(\d{4})/,

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -781,6 +781,7 @@
 		"LanguageLabel": "Languages",
 		"LocationFinder": "Location finder",
 		"LocationDisplayOSMID": "Display OSM ID",
+		"PriceValidation": "Price validation",
 		"ProductDisplayBarcode": "Display barcode",
 		"ProductDisplayCategoryTag": "Display category tag",
 		"SideMenuExperimentsDisplay": "Display 'Experiments'",

diff --git a/src/store.js b/src/store.js
@@ -21,7 +21,8 @@ export const useAppStore = defineStore('app', {
       drawer_display_experiments: true,
       preferedTheme: null,
       location_finder_default_mode: constants.LOCATION_SELECTOR_DISPLAY_LIST[1].key,
-      barcode_scanner_default_mode: constants.PRODUCT_SELECTOR_DISPLAY_LIST[0].key
+      barcode_scanner_default_mode: constants.PRODUCT_SELECTOR_DISPLAY_LIST[0].key,
+      price_form_default_mode: constants.PRICE_FORM_DISPLAY_LIST[0].key
     },
   }),
   getters: {

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -105,6 +105,18 @@
             :item-value="item => item.key"
             hide-details="auto"
           />
+          <!-- Barcode scanner -->
+          <h3 class="mt-4 mb-1">
+            {{ $t('UserSettings.PriceValidation') }}
+          </h3>
+          <v-select
+            v-model="appStore.user.price_form_default_mode"
+            :label="$t('UserSettings.DefaultMode')"
+            :items="priceFormDisplayList"
+            :item-title="item => $t('Common.' + item.value)"
+            :item-value="item => item.key"
+            hide-details="auto"
+          />
         </v-card-text>
       </v-card>
     </v-col>
@@ -184,7 +196,8 @@ export default {
       languageList,
       // currencyList,
       locationSelectorDisplayList: constants.LOCATION_SELECTOR_DISPLAY_LIST,
-      productSelectorDisplayList: constants.PRODUCT_SELECTOR_DISPLAY_LIST
+      productSelectorDisplayList: constants.PRODUCT_SELECTOR_DISPLAY_LIST,
+      priceFormDisplayList: constants.PRICE_FORM_DISPLAY_LIST
     }
   },
   computed: {