From 8dfe038cfd8cee29bc779b249220637d479437cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:10:13 +0200
Subject: [PATCH] refactor(price add): new LocationInputRow component (#647)

---
 src/components/LocationInputRow.vue | 94 +++++++++++++++++++++++++++++
 src/views/AddPriceMultiple.vue      | 61 ++-----------------
 src/views/AddPriceSingle.vue        | 55 +----------------
 3 files changed, 101 insertions(+), 109 deletions(-)
 create mode 100644 src/components/LocationInputRow.vue

diff --git a/src/components/LocationInputRow.vue b/src/components/LocationInputRow.vue
new file mode 100644
index 0000000000..2e9a2a1a95
--- /dev/null
+++ b/src/components/LocationInputRow.vue
@@ -0,0 +1,94 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <h3 class="mb-1">
+        {{ $t('AddPriceSingle.WhereWhen.Location') }}
+      </h3>
+      <v-chip
+        v-for="location in recentLocations"
+        :key="getLocationUniqueID(location)"
+        class="mb-2"
+        :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
+        @click="setLocationData(location)"
+      >
+        <v-icon start :icon="isSelectedLocation(location) ? 'mdi-check-circle-outline' : 'mdi-history'" :color="isSelectedLocation(location) ? 'green' : ''" />
+        {{ getLocationTitle(location, true, true, true) }}
+      </v-chip>
+      <br v-if="recentLocations.length">
+      <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="locationSelectorDialog = true">
+        {{ $t('AddPriceSingle.WhereWhen.Find') }}
+      </v-btn>
+      <p v-if="!locationFormFilled" class="text-red mb-2">
+        <i>{{ $t('AddPriceSingle.WhereWhen.SelectLocation') }}</i>
+      </p>
+    </v-col>
+  </v-row>
+
+  <LocationSelectorDialog
+    v-if="locationSelectorDialog"
+    v-model="locationSelectorDialog"
+    @location="setLocationData($event)"
+    @close="locationSelectorDialog = false"
+  />
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
+import utils from '../utils.js'
+
+export default {
+  components: {
+    LocationSelectorDialog: defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
+  },
+  props: {
+    locationForm: {
+      type: Object,
+      default: () => ({ location_osm_id: null, location_osm_type: null })
+    },
+  },
+  data() {
+    return {
+      locationSelectorDialog: false,
+    }
+  },
+  computed: {
+    ...mapStores(useAppStore),
+    recentLocations() {
+      return this.appStore.getRecentLocations(3)
+    },
+    locationFormFilled() {
+      let keys = ['location_osm_id', 'location_osm_type']
+      return Object.keys(this.locationForm).filter(k => keys.includes(k)).every(k => !!this.locationForm[k])
+    },
+  },
+  mounted() {
+    this.initLocationForm()
+  },
+  methods: {
+    initLocationForm() {
+      if (this.recentLocations.length) {
+        this.setLocationData(this.recentLocations[0])
+      }
+    },
+    showLocationSelectorDialog() {
+      this.locationSelectorDialog = true
+    },
+    getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
+      return utils.getLocationTitle(location, withName, withRoad, withCity)
+    },
+    getLocationUniqueID(location) {
+      return utils.getLocationUniqueID(location)
+    },
+    setLocationData(location) {
+      this.appStore.addRecentLocation(location)
+      this.locationForm.location_osm_id = utils.getLocationID(location)
+      this.locationForm.location_osm_type = utils.getLocationType(location)
+    },
+    isSelectedLocation(location) {
+      return (this.locationForm.location_osm_id === utils.getLocationID(location)) && (this.locationForm.location_osm_type === utils.getLocationType(location))
+    },
+  }
+}
+</script>
diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
index ea4232fc78..f69b718954 100644
--- a/src/views/AddPriceMultiple.vue
+++ b/src/views/AddPriceMultiple.vue
@@ -4,7 +4,7 @@
   </h1>
 
   <v-row>
-    <!-- Step 1: proof -->
+    <!-- Step 1: proof (image + date + currency) -->
     <v-col cols="12" md="6" lg="4">
       <v-card
         :title="(proofType === 'RECEIPT') ? $t('AddPriceHome.ReceiptMode.Title') : $t('AddPriceMultiple.ProofDetails.Title')"
@@ -23,7 +23,7 @@
       </v-card>
     </v-col>
 
-    <!-- Step 2: location & date -->
+    <!-- Step 2: location -->
     <v-col cols="12" md="6" lg="4">
       <v-card
         :title="$t('AddPriceSingle.WhereWhen.Title')"
@@ -36,26 +36,7 @@
         </template>
         <v-divider />
         <v-card-text>
-          <h3 class="mb-1">
-            {{ $t('AddPriceSingle.WhereWhen.Location') }}
-          </h3>
-          <v-chip
-            v-for="location in recentLocations"
-            :key="getLocationUniqueID(location)"
-            class="mb-2"
-            :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
-            @click="setLocationData(location)"
-          >
-            <v-icon start :icon="isSelectedLocation(location) ? 'mdi-check-circle-outline' : 'mdi-history'" :color="isSelectedLocation(location) ? 'green' : ''" />
-            {{ getLocationTitle(location, true, true, true) }}
-          </v-chip>
-          <br v-if="recentLocations.length">
-          <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>
+          <LocationInputRow :locationForm="addPriceMultipleForm" />
         </v-card-text>
         <v-overlay v-model="disableLocationForm" scrim="#E8F5E9" contained persistent />
       </v-card>
@@ -172,13 +153,6 @@
   >
     {{ $t('AddPriceMultiple.ProductPriceDetails.PriceUploaded') }}
   </v-snackbar>
-
-  <LocationSelectorDialog
-    v-if="locationSelectorDialog"
-    v-model="locationSelectorDialog"
-    @location="setLocationData($event)"
-    @close="locationSelectorDialog = false"
-  />
 </template>
 
 <script>
@@ -190,8 +164,8 @@ import utils from '../utils.js'
 
 export default {
   components: {
-    LocationSelectorDialog: defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
     ProofInputRow: defineAsyncComponent(() => import('../components/ProofInputRow.vue')),
+    LocationInputRow: defineAsyncComponent(() => import('../components/LocationInputRow.vue')),
     ProductInputRow: defineAsyncComponent(() => import('../components/ProductInputRow.vue')),
     PriceInputRow: defineAsyncComponent(() => import('../components/PriceInputRow.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
@@ -214,8 +188,6 @@ export default {
       priceSuccessMessage: false,
       // proof data
       proofDateSuccessMessage: false,
-      // location data
-      locationSelectorDialog: false,
       // product price data
       productPriceUploadedList: [],
       productPriceNew: {
@@ -243,9 +215,6 @@ export default {
       let keys = ['proof_id', 'date', 'currency']
       return Object.keys(this.addPriceMultipleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceMultipleForm[k])
     },
-    recentLocations() {
-      return this.appStore.getRecentLocations(3)
-    },
     locationFormFilled() {
       let keys = ['location_osm_id', 'location_osm_type']
       return Object.keys(this.addPriceMultipleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceMultipleForm[k])
@@ -283,31 +252,11 @@ export default {
   methods: {
     initPriceMultipleForm() {
       /**
-       * init form config (product mode, last locations)
+       * init form config (product mode, currency)
        * (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])
-      }
-    },
-    showLocationSelectorDialog() {
-      this.locationSelectorDialog = true
-    },
-    getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
-      return utils.getLocationTitle(location, withName, withRoad, withCity)
-    },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
-    },
-    setLocationData(location) {
-      this.appStore.addRecentLocation(location)
-      this.addPriceMultipleForm.location_osm_id = utils.getLocationID(location)
-      this.addPriceMultipleForm.location_osm_type = utils.getLocationType(location)
-    },
-    isSelectedLocation(location) {
-      return (this.addPriceMultipleForm.location_osm_id === utils.getLocationID(location)) && (this.addPriceMultipleForm.location_osm_type === utils.getLocationType(location))
     },
     clearProductPriceForm() {
       this.productPriceForm = {}
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index ce3c6e1282..096e181267 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -68,26 +68,7 @@
           </template>
           <v-divider />
           <v-card-text>
-            <h3 class="mb-1">
-              {{ $t('AddPriceSingle.WhereWhen.Location') }}
-            </h3>
-            <v-chip
-              v-for="location in recentLocations"
-              :key="getLocationUniqueID(location)"
-              class="mb-2"
-              :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
-              @click="setLocationData(location)"
-            >
-              <v-icon start :icon="isSelectedLocation(location) ? 'mdi-check-circle-outline' : 'mdi-history'" :color="isSelectedLocation(location) ? 'green' : ''" />
-              {{ getLocationTitle(location, true, true, true) }}
-            </v-chip>
-            <br v-if="recentLocations.length">
-            <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>
+            <LocationInputRow :locationForm="addPriceSingleForm" />
 
             <h3 class="mt-4 mb-1">
               {{ $t('AddPriceSingle.WhereWhen.Date') }}
@@ -127,13 +108,6 @@
   >
     {{ $t('AddPriceSingle.PriceDetails.ProofDateChanged') }}
   </v-snackbar>
-
-  <LocationSelectorDialog
-    v-if="locationSelectorDialog"
-    v-model="locationSelectorDialog"
-    @location="setLocationData($event)"
-    @close="locationSelectorDialog = false"
-  />
 </template>
 
 <script>
@@ -148,7 +122,7 @@ export default {
     ProductInputRow: defineAsyncComponent(() => import('../components/ProductInputRow.vue')),
     PriceInputRow: defineAsyncComponent(() => import('../components/PriceInputRow.vue')),
     ProofInputRow: defineAsyncComponent(() => import('../components/ProofInputRow.vue')),
-    LocationSelectorDialog: defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
+    LocationInputRow: defineAsyncComponent(() => import('../components/LocationInputRow.vue')),
   },
   data() {
     return {
@@ -174,8 +148,6 @@ export default {
       pricePriceFormFilled: false,
       productFormFilled: false,
       createPriceLoading: false,
-      // location data
-      locationSelectorDialog: false,
       // proof data
       proofDateSuccessMessage: false,
       categoryPricePerList: [
@@ -200,9 +172,6 @@ export default {
     priceProofFormFilled() {
       return this.priceFormFilled && this.proofFormFilled
     },
-    recentLocations() {
-      return this.appStore.getRecentLocations(3)
-    },
     locationFormFilled() {
       let keys = ['location_osm_id', 'location_osm_type']
       return Object.keys(this.addPriceSingleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceSingleForm[k])
@@ -236,9 +205,6 @@ export default {
       /**
        * init form config
        */
-      if (this.recentLocations.length) {
-        this.setLocationData(this.recentLocations[0])
-      }
       this.addPriceSingleForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
       this.addPriceSingleForm.currency = this.appStore.getUserLastCurrencyUsed
     },
@@ -261,23 +227,6 @@ export default {
           alert('Error: Open Prices server error')
         })
     },
-    showLocationSelectorDialog() {
-      this.locationSelectorDialog = true
-    },
-    getLocationTitle(location, withName=true, withRoad=false, withCity=true) {
-      return utils.getLocationTitle(location, withName, withRoad, withCity)
-    },
-    getLocationUniqueID(location) {
-      return utils.getLocationUniqueID(location)
-    },
-    setLocationData(location) {
-      this.appStore.addRecentLocation(location)
-      this.addPriceSingleForm.location_osm_id = utils.getLocationID(location)
-      this.addPriceSingleForm.location_osm_type = utils.getLocationType(location)
-    },
-    isSelectedLocation(location) {
-      return (this.addPriceSingleForm.location_osm_id === utils.getLocationID(location)) && (this.addPriceSingleForm.location_osm_type === utils.getLocationType(location))
-    },
     createPrice() {
       this.createPriceLoading = true
       this.appStore.setLastCurrencyUsed(this.addPriceSingleForm.currency)