feat(price add): move location to the proof section

src/components/LocationChip.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-chip label size="small" density="comfortable" @click="goToLocation()">
+    <v-icon start icon="mdi-map-marker-outline" />
+    {{ locationTitle }}
+    <span v-if="locationEmoji" style="margin-inline-start:5px">{{ locationEmoji }}</span>
+  </v-chip>
+</template>
+
+<script>
+import utils from '../utils.js'
+
+export default {
+  props: {
+    location: {
+      type: Object,
+      default: null
+    },
+    locationId: {
+      type: Number,
+      default: null
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    locationTitle() {
+      if (this.location) {
+        return utils.getLocationTitle(this.location)
+      }
+      return this.locationId
+    },
+    locationEmoji() {
+      if (this.location) {
+        return utils.getCountryEmojiFromCode(this.location.osm_address_country_code)
+      }
+      return null
+    }
+  },
+  methods: {
+    goToLocation() {
+      if (this.readonly) {
+        return
+      }
+      this.$router.push({ path: `/locations/${this.locationId}` })
+    },
+  }
+}
+</script>

src/components/LocationInputRow.vue

@@ -47,22 +47,34 @@ export default {
       type: Object,
       default: () => ({ location_osm_id: null, location_osm_type: null })
     },
+    maxRecentLocations: {
+      type: Number,
+      default: 3
+    }
   },
+  emits: ['location'],
   data() {
     return {
       locationSelectorDialog: false,
+      locationObject: null,
+      loading: false,
     }
   },
   computed: {
     ...mapStores(useAppStore),
     recentLocations() {
-      return this.appStore.getRecentLocations(3)
+      return this.appStore.getRecentLocations(this.maxRecentLocations)
     },
     locationFormFilled() {
       let keys = ['location_osm_id', 'location_osm_type']
       return Object.keys(this.locationForm).filter(k => keys.includes(k)).every(k => !!this.locationForm[k])
     },
   },
+  watch: {
+    locationObject(newLocationObject, oldLocationObject) {  // eslint-disable-line no-unused-vars
+      this.$emit('location', newLocationObject)
+    }
+  },
   mounted() {
     this.initLocationForm()
   },
@@ -83,11 +95,14 @@ export default {
     },
     setLocationData(location) {
       this.appStore.addRecentLocation(location)
+      // update locationForm
       this.locationForm.location_osm_id = utils.getLocationID(location)
       this.locationForm.location_osm_type = utils.getLocationType(location)
+      // set locationObject
+      this.locationObject = location
     },
     isSelectedLocation(location) {
-      return (this.locationForm.location_osm_id === utils.getLocationID(location)) && (this.locationForm.location_osm_type === utils.getLocationType(location))
+      return utils.buildLocationUniqueId(this.locationForm.location_osm_id, this.locationForm.location_osm_type) === utils.getLocationUniqueID(location)
     },
   }
 }

src/components/PriceFooterRow.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row style="margin-top:0;">
     <v-col :cols="userIsPriceOwner ? '11' : '12'">
-      <PriceLocationChip v-if="!hidePriceLocation" class="mr-1" :price="price" :readonly="readonly" />
+      <LocationChip v-if="!hidePriceLocation" class="mr-1" :location="price.location" :locationId="price.location_id" :readonly="readonly" />
       <PriceOwnerChip class="mr-1" :price="price" :readonly="readonly" />
       <RelativeDateTimeChip class="mr-1" :dateTime="price.created" />
       <PriceProof v-if="price.proof && !hidePriceProof" :proof="price.proof" />
@@ -18,7 +18,7 @@ import { useAppStore } from '../store'
 
 export default {
   components: {
-    PriceLocationChip: defineAsyncComponent(() => import('../components/PriceLocationChip.vue')),
+    LocationChip: defineAsyncComponent(() => import('../components/LocationChip.vue')),
     PriceOwnerChip: defineAsyncComponent(() => import('../components/PriceOwnerChip.vue')),
     RelativeDateTimeChip: defineAsyncComponent(() => import('../components/RelativeDateTimeChip.vue')),
     PriceProof: defineAsyncComponent(() => import('../components/PriceProof.vue')),

src/components/ProofCard.vue

@@ -68,8 +68,8 @@ export default {
       }
     },
     getProofUrl(proof) {
-      // return 'https://prices.openfoodfacts.org/img/0002/qU59gK8PQw.webp'
-      // return 'https://prices.openfoodfacts.net/img/0001/lZGFga9ZOT.webp'
+      // return 'https://prices.openfoodfacts.org/img/0002/qU59gK8PQw.webp'  // PRICE_TAG
+      // return 'https://prices.openfoodfacts.net/img/0001/lZGFga9ZOT.webp'  // RECEIPT
       return `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${proof.file_path}`
     },
     close() {

src/components/ProofFooter.vue

@@ -3,6 +3,7 @@
     <v-col :cols="userIsProofOwner ? '11' : '12'">
       <ProofTypeChip class="mr-1" :proof="proof" />
       <ProofPrivateChip v-if="proofIsPrivateReceipt" class="mr-1" :proof="proof" />
+      <LocationChip class="mr-1" :location="proof.location" :locationId="proof.location_id" :readonly="readonly" />
       <ProofDateChip v-if="proof.date" class="mr-1" :proof="proof" />
       <PriceCountChip :count="proof.price_count" :withLabel="true" @click="goToProof()" />
       <CurrencyChip v-if="proof.currency" class="mr-1" :proof="proof" />
@@ -22,6 +23,7 @@ export default {
   components: {
     ProofTypeChip: defineAsyncComponent(() => import('../components/ProofTypeChip.vue')),
     ProofPrivateChip: defineAsyncComponent(() => import('../components/ProofPrivateChip.vue')),
+    LocationChip: defineAsyncComponent(() => import('../components/LocationChip.vue')),
     PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     ProofDateChip: defineAsyncComponent(() => import('../components/ProofDateChip.vue')),
     CurrencyChip: defineAsyncComponent(() => import('../components/CurrencyChip.vue')),

src/components/ProofInputRow.vue

@@ -52,6 +52,8 @@
         </v-col>
       </v-row>
 
+      <LocationInputRow :locationForm="proofForm" @location="locationObject = $event" />
+
       <!-- proof date & currency -->
       <v-row>
         <v-col cols="6">
@@ -137,7 +139,8 @@ Compressor.setDefaults({
 export default {
   components: {
     UserRecentProofsDialog: defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
-    ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue'))
+    ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
+    LocationInputRow: defineAsyncComponent(() => import('../components/LocationInputRow.vue')),
   },
   props: {
     proofType: {
@@ -146,13 +149,14 @@ export default {
     },
     proofForm: {
       type: Object,
-      default: () => ({ proof_id: null, date: utils.currentDate(), currency: null })
+      default: () => ({ proof_id: null, location_osm_id: null, location_osm_type: null, date: utils.currentDate(), currency: null })
     },
     hideRecentProofChoice: {
       type: Boolean,
       default: false
     },
   },
+  emits: ['proof'],
   data() {
     return {
       proofFormImage: null,
@@ -162,6 +166,7 @@ export default {
       userRecentProofsDialog: false,
       proofSelectedSuccessMessage: false,
       proofObject: null,
+      locationObject: null,
       loading: false,
     }
   },
@@ -178,6 +183,11 @@ export default {
       return this.appStore.getUserFavoriteCurrencies
     }
   },
+  watch: {
+    proofObject(newProofObject, oldProofObject) {  // eslint-disable-line no-unused-vars
+      this.$emit('proof', newProofObject)
+    }
+  },
   mounted() {
     if (this.$route.query.proof_id) {
       this.getProofById(this.$route.query.proof_id)
@@ -231,14 +241,14 @@ export default {
       })
       .then((proofFormImageCompressed) => {
         api
-          .createProof(proofFormImageCompressed, this.proofType, this.proofForm.date, this.proofForm.currency)
+          .createProof(proofFormImageCompressed, this.proofType, this.proofForm.location_osm_id, this.proofForm.location_osm_type, this.proofForm.date, this.proofForm.currency)
           .then((data) => {
             this.loading = false
             if (data.id) {
               const store = useAppStore()
               store.addProof(data)
               this.proofForm.proof_id = data.id
-              this.proofObject = data
+              this.proofObject = {...data, ...{location: this.locationObject}}
               this.proofSuccessMessage = true
             } else {
               alert('Error: server error when creating proof')
@@ -266,7 +276,8 @@ export default {
       this.proofObject = null
     },
     getLocalProofUrl(blob) {
-      // return 'https://prices.openfoodfacts.org/img/0002/qU59gK8PQw.webp'
+      // return 'https://prices.openfoodfacts.org/img/0002/qU59gK8PQw.webp'  // PRICE_TAG
+      // return 'https://prices.openfoodfacts.net/img/0001/lZGFga9ZOT.webp'  // RECEIPT
       return URL.createObjectURL(blob)
     }
   }

src/services/api.js

@@ -49,12 +49,13 @@ export default {
     .then((response) => response.json())
   },
 
-  createProof(proofImage, type='PRICE_TAG', date=null, currency=null) {
-    console.log('createProof', proofImage, type, date, currency)
+  createProof(proofImage, type='PRICE_TAG', location_osm_id=null, location_osm_type=null, date=null, currency=null) {
     const store = useAppStore()
     let formData = new FormData()
     formData.append('file', proofImage, proofImage.name)
     formData.append('type', type)
+    formData.append('location_osm_id', location_osm_id ? location_osm_id : '')
+    formData.append('location_osm_type', location_osm_type ? location_osm_type : '')
     formData.append('date', date ? date : '')
     formData.append('currency', currency ? currency : '')
     const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/proofs/upload?${buildURLParams()}`

src/utils.js

@@ -231,9 +231,16 @@ function getLocationType(locationObject) {
   return locationObject.osm_type.toUpperCase()
 }
 
+function buildLocationUniqueId(locationId, locationType) {
+  // examples: N12345, W12345, R12345
+  if (locationId && locationType) {
+    return `${locationType[0]}${locationId.toString()}`
+  }
+  return null
+}
+
 function getLocationUniqueID(locationObject) {
-  // examples: N12345
-  return `${getLocationType(locationObject)[0]}${getLocationID(locationObject).toString()}`
+  return buildLocationUniqueId(getLocationID(locationObject), getLocationType(locationObject))
 }
 
 function getLocationTag(locationObject) {
@@ -297,6 +304,7 @@ export default {
   getLocationTitle,
   getLocationID,
   getLocationType,
+  buildLocationUniqueId,
   getLocationUniqueID,
   getLocationTag,
   getLocationLatLng,