refactor: rename dialog components (Location, Barcode)

openfoodfacts · Apr 10, 2024 · c9d4587 · c9d4587
1 parent ccb531e
commit c9d4587
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 75 deletions.
diff --git a/src/components/BarcodeManualInput.vue → src/components/BarcodeManualInputDialog.vue b/src/components/BarcodeManualInput.vue → src/components/BarcodeManualInputDialog.vue
diff --git a/src/components/BarcodeScanner.vue → src/components/BarcodeScannerDialog.vue b/src/components/BarcodeScanner.vue → src/components/BarcodeScannerDialog.vue
diff --git a/src/components/LocationSelector.vue → src/components/LocationSelectorDialog.vue b/src/components/LocationSelector.vue → src/components/LocationSelectorDialog.vue
diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -96,7 +96,7 @@
             {{ getNominatimLocationTitle(location, true, true, true) }}
           </v-chip>
           <br v-if="recentLocations.length" />
-          <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="showLocationSelector">{{ $t('AddPriceSingle.WhereWhen.Find') }}</v-btn>
+          <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="showLocationSelectorDialog">{{ $t('AddPriceSingle.WhereWhen.Find') }}</v-btn>
           <p v-if="!locationFormFilled" class="text-red mb-2"><i>{{ $t('AddPriceSingle.WhereWhen.SelectLocation') }}</i></p>
 
           <h3 class="mt-4 mb-1">{{ $t('AddPriceSingle.WhereWhen.Date') }}</h3>
@@ -166,8 +166,8 @@
             </v-item-group>
           </h3>
           <v-sheet v-if="productMode === 'barcode'">
-            <v-btn class="mb-2 mr-2" size="small" prepend-icon="mdi-barcode-scan" @click="showBarcodeScanner">{{ $t('AddPriceSingle.ProductInfo.ScanBarcode') }}</v-btn>
-            <a href="#" @click.prevent="showBarcodeManualInput">{{ $t('AddPriceSingle.ProductInfo.TypeBarcode') }}</a>
+            <v-btn class="mb-2 mr-2" size="small" prepend-icon="mdi-barcode-scan" @click="showBarcodeScannerDialog">{{ $t('AddPriceSingle.ProductInfo.ScanBarcode') }}</v-btn>
+            <a href="#" @click.prevent="showBarcodeManualInputDialog">{{ $t('AddPriceSingle.ProductInfo.TypeBarcode') }}</a>
             <v-text-field
               v-if="dev"
               :prepend-inner-icon="productBarcodeFormFilled ? 'mdi-barcode' : 'mdi-barcode-scan'"
@@ -176,7 +176,7 @@
               type="text"
               hint="EAN"
               hide-details="auto"
-              @click:prepend="showBarcodeScanner"
+              @click:prepend="showBarcodeScannerDialog"
             ></v-text-field>
             <ProductCard v-if="product" class="mb-4" :product="product" :readonly="true" elevation="1"></ProductCard>
           </v-sheet>
@@ -284,24 +284,24 @@
     :timeout="2000"
   >{{ $t('AddPriceMultiple.ProductPriceDetails.PriceUploaded') }}</v-snackbar>
 
-  <LocationSelector
-    v-if="locationSelector"
-    v-model="locationSelector"
+  <LocationSelectorDialog
+    v-if="locationSelectorDialog"
+    v-model="locationSelectorDialog"
     @location="setLocationData($event)"
-    @close="closeLocationSelector($event)"
-  ></LocationSelector>
-  <BarcodeScanner
-    v-if="barcodeScanner"
-    v-model="barcodeScanner"
+    @close="locationSelectorDialog = false"
+  ></LocationSelectorDialog>
+  <BarcodeScannerDialog
+    v-if="barcodeScannerDialog"
+    v-model="barcodeScannerDialog"
     @barcode="setProductCode($event)"
-    @close="barcodeScanner = false"
-  ></BarcodeScanner>
-  <BarcodeManualInput
-    v-if="barcodeManualInput"
-    v-model="barcodeManualInput"
+    @close="barcodeScannerDialog = false"
+  ></BarcodeScannerDialog>
+  <BarcodeManualInputDialog
+    v-if="barcodeManualInputDialog"
+    v-model="barcodeManualInputDialog"
     @barcode="setProductCode($event)"
-    @close="barcodeManualInput = false"
-  ></BarcodeManualInput>
+    @close="barcodeManualInputDialog = false"
+  ></BarcodeManualInputDialog>
   <UserRecentProofsDialog
     v-if="userRecentProofsDialog"
     v-model="userRecentProofsDialog"
@@ -328,12 +328,12 @@ Compressor.setDefaults({
 
 export default {
   components: {
-    'LocationSelector': defineAsyncComponent(() => import('../components/LocationSelector.vue')),
+    'LocationSelector': defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
     'PriceInputRow': defineAsyncComponent(() => import('../components/PriceInputRow.vue')),
     'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
-    'BarcodeScanner': defineAsyncComponent(() => import('../components/BarcodeScanner.vue')),
-    'BarcodeManualInput': defineAsyncComponent(() => import('../components/BarcodeManualInput.vue')),
+    'BarcodeScanner': defineAsyncComponent(() => import('../components/BarcodeScannerDialog.vue')),
+    'BarcodeManualInputDialog': defineAsyncComponent(() => import('../components/BarcodeManualInputDialog.vue')),
     'UserRecentProofsDialog': defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
   },
   data() {
@@ -360,7 +360,7 @@ export default {
       proofSelectedSuccessMessage: false,
       proofisSelected: false,
       // location data
-      locationSelector: false,
+      locationSelectorDialog: false,
       locationSelectedDisplayName: '',
       // product price data
       productPriceUploadedList: [],
@@ -385,8 +385,8 @@ export default {
       categoryTags: [],  // list of category tags for autocomplete  // see initPriceMultipleForm
       originTags: [],  // list of origins tags for autocomplete  // see initPriceMultipleForm
       labelsTags: LabelsTags,
-      barcodeScanner: false,
-      barcodeManualInput: false,
+      barcodeScannerDialog: false,
+      barcodeManualInputDialog: 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'}
@@ -535,11 +535,8 @@ export default {
       this.proofImagePreview = null
       this.addPriceMultipleForm.proof_id = null
     },
-    showLocationSelector() {
-      this.locationSelector = true
-    },
-    closeLocationSelector(event) {
-      this.locationSelector = false
+    showLocationSelectorDialog() {
+      this.locationSelectorDialog = true
     },
     getNominatimLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)
@@ -553,11 +550,11 @@ export default {
     isSelectedLocation(location) {
       return this.locationSelectedDisplayName && this.locationSelectedDisplayName === location.display_name
     },
-    showBarcodeScanner() {
-      this.barcodeScanner = true
+    showBarcodeScannerDialog() {
+      this.barcodeScannerDialog = true
     },
-    showBarcodeManualInput() {
-      this.barcodeManualInput = true
+    showBarcodeManualInputDialog() {
+      this.barcodeManualInputDialog = true
     },
     setProductCode(code) {
       this.productPriceForm.product_code = code

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -29,11 +29,11 @@
               </v-item-group>
             </h3>
             <v-sheet v-if="productMode === 'barcode'">
-              <v-btn class="mb-2 mr-2" size="small" prepend-icon="mdi-barcode-scan" @click="showBarcodeScanner">
+              <v-btn class="mb-2 mr-2" size="small" prepend-icon="mdi-barcode-scan" @click="showBarcodeScannerDialog">
                 <span class="d-sm-none">{{ $t('AddPriceSingle.ProductInfo.Scan') }}</span>
                 <span class="d-none d-sm-inline-flex">{{ $t('AddPriceSingle.ProductInfo.ScanBarcode') }}</span>
               </v-btn>
-              <v-btn class="mb-2" size="small" prepend-icon="mdi-numeric" @click.prevent="showBarcodeManualInput">
+              <v-btn class="mb-2" size="small" prepend-icon="mdi-numeric" @click.prevent="showBarcodeManualInputDialog">
                 <span class="d-sm-none">{{ $t('AddPriceSingle.ProductInfo.Type') }}</span>
                 <span class="d-none d-sm-inline-flex">{{ $t('AddPriceSingle.ProductInfo.TypeBarcode') }}</span>
               </v-btn>
@@ -45,7 +45,7 @@
                 type="text"
                 hint="EAN"
                 hide-details="auto"
-                @click:prepend-inner="showBarcodeScanner"
+                @click:prepend-inner="showBarcodeScannerDialog"
               ></v-text-field>
               <ProductCard v-if="product" class="mb-4" :product="product" :readonly="true" elevation="1"></ProductCard>
             </v-sheet>
@@ -185,7 +185,7 @@
               {{ getNominatimLocationTitle(location, true, true, true) }}
             </v-chip>
             <br v-if="recentLocations.length" />
-            <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="showLocationSelector">{{ $t('AddPriceSingle.WhereWhen.Find') }}</v-btn>
+            <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="showLocationSelectorDialog">{{ $t('AddPriceSingle.WhereWhen.Find') }}</v-btn>
             <p v-if="!locationFormFilled" class="text-red mb-2"><i>{{ $t('AddPriceSingle.WhereWhen.SelectLocation') }}</i></p>
 
             <h3 class="mt-4 mb-1">{{ $t('AddPriceSingle.WhereWhen.Date') }}</h3>
@@ -231,24 +231,24 @@
     :timeout="2000"
   >{{ $t('AddPriceSingle.PriceDetails.ProofSelected') }}</v-snackbar>
 
-  <BarcodeScanner
-    v-if="barcodeScanner"
-    v-model="barcodeScanner"
+  <BarcodeScannerDialog
+    v-if="barcodeScannerDialog"
+    v-model="barcodeScannerDialog"
     @barcode="setProductCode($event)"
-    @close="barcodeScanner = false"
-  ></BarcodeScanner>
-  <BarcodeManualInput
-    v-if="barcodeManualInput"
-    v-model="barcodeManualInput"
+    @close="barcodeScannerDialog = false"
+  ></BarcodeScannerDialog>
+  <BarcodeManualInputDialog
+    v-if="barcodeManualInputDialog"
+    v-model="barcodeManualInputDialog"
     @barcode="setProductCode($event)"
-    @close="barcodeManualInput = false"
-  ></BarcodeManualInput>
-  <LocationSelector
-    v-if="locationSelector"
-    v-model="locationSelector"
+    @close="barcodeManualInputDialog = false"
+  ></BarcodeManualInputDialog>
+  <LocationSelectorDialog
+    v-if="locationSelectorDialog"
+    v-model="locationSelectorDialog"
     @location="setLocationData($event)"
-    @close="locationSelector = false"
-  ></LocationSelector>
+    @close="locationSelectorDialog = false"
+  ></LocationSelectorDialog>
   <UserRecentProofsDialog
     v-if="userRecentProofsDialog"
     v-model="userRecentProofsDialog"
@@ -279,9 +279,9 @@ export default {
   components: {
     'PriceInputRow': defineAsyncComponent(() => import('../components/PriceInputRow.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
-    'BarcodeScanner': defineAsyncComponent(() => import('../components/BarcodeScanner.vue')),
-    'BarcodeManualInput': defineAsyncComponent(() => import('../components/BarcodeManualInput.vue')),
-    'LocationSelector': defineAsyncComponent(() => import('../components/LocationSelector.vue')),
+    'BarcodeScannerDialog': defineAsyncComponent(() => import('../components/BarcodeScannerDialog.vue')),
+    'BarcodeManualInputDialog': defineAsyncComponent(() => import('../components/BarcodeManualInputDialog.vue')),
+    'LocationSelectorDialog': defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
     'UserRecentProofsDialog': defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
   },
   data() {
@@ -314,10 +314,10 @@ export default {
       categoryTags: [],  // list of category tags for autocomplete  // see initPriceSingleForm
       originTags: [],  // list of origins tags for autocomplete  // see initPriceSingleForm
       labelsTags: LabelsTags,
-      barcodeScanner: false,
-      barcodeManualInput: false,
+      barcodeScannerDialog: false,
+      barcodeManualInputDialog: false,
       // location data
-      locationSelector: false,
+      locationSelectorDialog: false,
       locationSelectedDisplayName: '',
       // proof data
       userRecentProofsDialog: false,
@@ -475,11 +475,11 @@ export default {
       this.proofImagePreview = null
       this.addPriceSingleForm.proof_id = null
     },
-    showBarcodeScanner() {
-      this.barcodeScanner = true
+    showBarcodeScannerDialog() {
+      this.barcodeScannerDialog = true
     },
-    showBarcodeManualInput() {
-      this.barcodeManualInput = true
+    showBarcodeManualInputDialog() {
+      this.barcodeManualInputDialog = true
     },
     setProductCode(code) {
       this.addPriceSingleForm.product_code = code
@@ -494,8 +494,8 @@ export default {
           alert("Error: Open Prices server error")
         })
     },
-    showLocationSelector() {
-      this.locationSelector = true
+    showLocationSelectorDialog() {
+      this.locationSelectorDialog = true
     },
     getNominatimLocationTitle(location, withName=true, withRoad=false, withCity=true) {
       return utils.getLocationTitle(location, withName, withRoad, withCity)

diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -14,7 +14,7 @@
           inputmode="numeric"
           :prepend-inner-icon="formFilled ? 'mdi-barcode' : 'mdi-barcode-scan'"
           append-inner-icon="mdi-magnify"
-          @click:prepend-inner="showBarcodeScanner"
+          @click:prepend-inner="showBarcodeScannerDialog"
           @click:append-inner="search"
           :rules="[fieldRequired]"
           :loading="loading"
@@ -34,12 +34,12 @@
     </v-col>
   </v-row>
 
-  <BarcodeScanner
-    v-if="barcodeScanner"
-    v-model="barcodeScanner"
+  <BarcodeScannerDialog
+    v-if="barcodeScannerDialog"
+    v-model="barcodeScannerDialog"
     @barcode="setProductCode($event)"
-    @close="barcodeScanner = false"
-  ></BarcodeScanner>
+    @close="barcodeScannerDialog = false"
+  ></BarcodeScannerDialog>
 </template>
 
 <script>
@@ -49,7 +49,7 @@ import api from '../services/api'
 export default {
   components: {
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
-    'BarcodeScanner': defineAsyncComponent(() => import('../components/BarcodeScanner.vue'))
+    'BarcodeScannerDialog': defineAsyncComponent(() => import('../components/BarcodeScannerDialog.vue'))
   },
   data() {
     return {
@@ -60,7 +60,7 @@ export default {
       productTotal: null,
       loading: false,
       // barcode scanner
-      barcodeScanner: false,
+      barcodeScannerDialog: false,
     }
   },
   computed: {
@@ -72,8 +72,8 @@ export default {
     fieldRequired(v) {
       return !!v
     },
-    showBarcodeScanner() {
-      this.barcodeScanner = true
+    showBarcodeScannerDialog() {
+      this.barcodeScannerDialog = true
     },
     setProductCode(code) {
       this.productSearchForm.q = code