From a987fd16f637d2291cd2c82f3926fa4baf778821 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 22 Dec 2023 18:57:55 +0100
Subject: [PATCH 1/4] Price form: show recent locations as chips

---
 src/views/AddPriceSingle.vue | 73 +++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index d491ef85ae..5cd8762e6c 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -25,8 +25,8 @@
                   @click:clear="clearProof"
                   :loading="createProofLoading">
                 </v-file-input>
-                <i v-if="proofFormFilled && !createProofLoading" class="text-green">Proof uploaded!</i>
-                <i v-if="!proofFormFilled && !createProofLoading" class="text-red">Proof missing...</i>
+                <p v-if="proofFormFilled && !createProofLoading" class="text-green"><i>Proof uploaded!</i></p>
+                <p v-if="!proofFormFilled && !createProofLoading" class="text-red"><i>Upload a proof</i></p>
               </v-col>
               <v-col v-if="proofFormFilled">
                 <v-img :src="proofImagePreview" style="max-height:200px"></v-img>
@@ -45,7 +45,7 @@
           :style="productPriceFormFilled ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'">
           <v-divider></v-divider>
           <v-card-text>
-            <h3>
+            <h3 class="mb-1">
               🏷 Product
               <v-btn variant="outlined" size="small" @click="showBarcodeScanner">Scan a barcode 🔎</v-btn>
             </h3>
@@ -62,7 +62,7 @@
               </v-col>
             </v-row>
 
-            <h3>💲 Price</h3>
+            <h3 class="mb-1">💲 Price</h3>
             <v-row>
               <v-col cols="6">
                 <v-text-field
@@ -92,31 +92,22 @@
           :style="locationDateFormFilled ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'">
           <v-divider></v-divider>
           <v-card-text>
-            <h3>
-              🌍 Location
-              <v-btn variant="outlined" size="small" @click="showLocationSelector">Find 🔎</v-btn>
-            </h3>
+            <h3 class="mb-1">🌍 Location</h3>
             <p v-if="locationSelectedDisplayName"><i>{{ locationSelectedDisplayName }}</i></p>
-            <v-row>
-              <v-col cols="6">
-                <v-text-field
-                  v-model="addPriceSingleForm.location_osm_id"
-                  label="OpenStreetMap ID"
-                  type="text"
-                  readonly
-                ></v-text-field>
-              </v-col>
-              <v-col cols="6">
-                <v-select
-                  v-model="addPriceSingleForm.location_osm_type"
-                  label="OpenStreetMap type"
-                  :items="['NODE', 'WAY', 'RELATION']"
-                  readonly
-                ></v-select>
-              </v-col>
-            </v-row>
+            <div class="d-flex flex-wrap ga-2">
+              <v-chip
+                v-for="location in recentLocations"
+                @click="selectLocation(location)">
+                {{ location.display_name.slice(0, 15) + '...' }}
+              </v-chip>
+              <v-chip variant="outlined" @click="showLocationSelector">
+                <v-icon start icon="mdi-magnify"></v-icon>
+                Find
+              </v-chip>
+            </div>
+            <p v-if="!locationFormFilled" class="text-red mt-2 mb-2"><i>Select your location</i></p>
 
-            <h3>📅 Date</h3>
+            <h3 class="mt-4 mb-1">📅 Date</h3>
             <v-row>
               <v-col>
                 <v-text-field
@@ -181,13 +172,7 @@ export default {
   },
   data() {
     return {
-      // proof data
-      proofImage: null,
-      proofImagePreview: null,
-      createProofLoading: false,
-      proofSuccessMessage: false,
-      // price data
-      currencyList: constants.CURRENCY_LIST,
+      // price form
       addPriceSingleForm: {
         proof_id: null,
         product_code: '',
@@ -198,7 +183,17 @@ export default {
         date: new Date().toISOString().substr(0, 10)
       },
       createPriceLoading: false,
+      // proof data
+      proofImage: null,
+      proofImagePreview: null,
+      createProofLoading: false,
+      proofSuccessMessage: false,
+      // product data
       barcodeScanner: false,
+      // price data
+      currencyList: constants.CURRENCY_LIST,
+      // location data
+      recentLocations: api.getRecentLocations(),
       locationSelector: false,
       locationSelectedDisplayName: ''
     };
@@ -212,6 +207,10 @@ export default {
       let keys = ['product_code', 'price', 'currency']
       return Object.keys(this.addPriceSingleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceSingleForm[k])
     },
+    locationFormFilled() {
+      let keys = ['location_osm_id', 'location_osm_type']
+      return Object.keys(this.addPriceSingleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceSingleForm[k])
+    },
     locationDateFormFilled() {
       let keys = ['location_osm_id', 'location_osm_type', 'date']
       return Object.keys(this.addPriceSingleForm).filter(k => keys.includes(k)).every(k => !!this.addPriceSingleForm[k])
@@ -298,7 +297,11 @@ export default {
       this.locationSelectedDisplayName = event.display_name
       this.addPriceSingleForm.location_osm_id = event.osm_id
       this.addPriceSingleForm.location_osm_type = event.osm_type.toUpperCase()
-    }
+    },
+    selectLocation(location) {
+      api.addRecentLocation(location)
+      this.setLocationData(location)
+    },
   }
 }
 </script>

From ab09947cf24492cd83f6cf56003d25b3cd08b36d Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 22 Dec 2023 23:04:03 +0100
Subject: [PATCH 2/4] Make recent locations reactive

---
 src/components/LocationSelector.vue | 16 ++++++++--------
 src/services/api.js                 |  1 -
 src/views/AddPriceSingle.vue        | 23 +++++++++++++++--------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/LocationSelector.vue b/src/components/LocationSelector.vue
index ef5b0a867c..45a032effa 100644
--- a/src/components/LocationSelector.vue
+++ b/src/components/LocationSelector.vue
@@ -46,19 +46,19 @@
       <v-divider v-if="results"></v-divider>
 
       <v-card-text v-if="recentLocations.length">
-        <h3>
+        <h3 class="mb-1">
+          <v-icon start icon="mdi-history"></v-icon>
           Recent locations <small>{{ recentLocations.length }}</small>
-          <v-btn class="ml-2" variant="outlined" size="small" @click="clearRecentLocations">Clear</v-btn>
         </h3>
-        <div class="d-flex flex-wrap ga-3">
-          <v-card
+        <div class="d-flex flex-wrap ga-2">
+          <v-chip
             v-for="location in recentLocations"
             elevation="1"
-            @click="selectLocation(location)"
-          >
-            <v-card-text>📍 {{ location.display_name }}</v-card-text>
-          </v-card>
+            @click="selectLocation(location)">
+            {{ location.display_name }}
+          </v-chip>
         </div>
+        <v-btn class="mt-2 ml-2" variant="outlined" size="small" @click="clearRecentLocations">Clear</v-btn>
       </v-card-text>
 
       <v-divider v-if="recentLocations.length"></v-divider>
diff --git a/src/services/api.js b/src/services/api.js
index 137ec6dc38..840cb14920 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -42,7 +42,6 @@ function addObjectToLocalStorageItemArray(itemKey, obj, unshift=false, avoidDupl
 }
 
 
-
 export default {
   signIn(username, password) {
     let formData = new FormData()
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index 5cd8762e6c..f5bfe23cc9 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -93,12 +93,13 @@
           <v-divider></v-divider>
           <v-card-text>
             <h3 class="mb-1">🌍 Location</h3>
-            <p v-if="locationSelectedDisplayName"><i>{{ locationSelectedDisplayName }}</i></p>
             <div class="d-flex flex-wrap ga-2">
               <v-chip
                 v-for="location in recentLocations"
-                @click="selectLocation(location)">
-                {{ location.display_name.slice(0, 15) + '...' }}
+                :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
+                @click="setLocationData(location)">
+                <v-icon start :icon="isSelectedLocation(location) ? 'mdi-checkbox-marked-circle' : 'mdi-history'"></v-icon>
+                {{ location.display_name }}
               </v-chip>
               <v-chip variant="outlined" @click="showLocationSelector">
                 <v-icon start icon="mdi-magnify"></v-icon>
@@ -146,7 +147,7 @@
     v-if="locationSelector"
     v-model="locationSelector"
     @location="setLocationData($event)"
-    @close="locationSelector = false"
+    @close="closeLocationSelector($event)"
   ></LocationSelector>
 </template>
 
@@ -193,7 +194,7 @@ export default {
       // price data
       currencyList: constants.CURRENCY_LIST,
       // location data
-      recentLocations: api.getRecentLocations(),
+      recentLocations: api.getRecentLocations(3),
       locationSelector: false,
       locationSelectedDisplayName: ''
     };
@@ -293,14 +294,20 @@ export default {
     showLocationSelector() {
       this.locationSelector = true
     },
+    closeLocationSelector(event) {
+      this.locationSelector = false
+      setTimeout(() => {  // TODO: replace with store (make recentLocations reactive)
+        this.recentLocations = api.getRecentLocations(3)
+      }, 50)
+    },
     setLocationData(event) {
+      api.addRecentLocation(event)
       this.locationSelectedDisplayName = event.display_name
       this.addPriceSingleForm.location_osm_id = event.osm_id
       this.addPriceSingleForm.location_osm_type = event.osm_type.toUpperCase()
     },
-    selectLocation(location) {
-      api.addRecentLocation(location)
-      this.setLocationData(location)
+    isSelectedLocation(location) {
+      return this.locationSelectedDisplayName && this.locationSelectedDisplayName == location.display_name
     },
   }
 }

From fa0023fab272d23d0941e675ff74532fad8c586d Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 22 Dec 2023 23:11:24 +0100
Subject: [PATCH 3/4] Smaller chip for find button

---
 src/views/AddPriceSingle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index f5bfe23cc9..f90cfeec3e 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -101,7 +101,7 @@
                 <v-icon start :icon="isSelectedLocation(location) ? 'mdi-checkbox-marked-circle' : 'mdi-history'"></v-icon>
                 {{ location.display_name }}
               </v-chip>
-              <v-chip variant="outlined" @click="showLocationSelector">
+              <v-chip variant="outlined" size="small" @click="showLocationSelector">
                 <v-icon start icon="mdi-magnify"></v-icon>
                 Find
               </v-chip>

From d6c5451eb97a234f37eb4e1dbe6f11b551a22a4c Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 22 Dec 2023 23:48:33 +0100
Subject: [PATCH 4/4] Last changes

---
 src/components/LocationSelector.vue | 32 ++++++++++++++---------------
 src/views/AddPriceSingle.vue        |  2 +-
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/LocationSelector.vue b/src/components/LocationSelector.vue
index 45a032effa..3e23090dd3 100644
--- a/src/components/LocationSelector.vue
+++ b/src/components/LocationSelector.vue
@@ -10,20 +10,16 @@
 
       <v-card-text>
         <v-form @submit.prevent="search">
-          <v-row>
-            <v-col cols="8">
-              <v-text-field
-                v-model="locationSearchForm.q"
-                label="Search for a place..."
-                type="text"
-                :rules="[fieldRequired]"
-                required
-              ></v-text-field>
-            </v-col>
-            <v-col cols="4">
+          <v-text-field
+            v-model="locationSearchForm.q"
+            label="Search for a place..."
+            type="text"
+            :rules="[fieldRequired]"
+            required>
+            <template v-slot:append>
               <v-btn type="submit" :loading="loading" :disabled="!formFilled">Search</v-btn>
-            </v-col>
-          </v-row>
+            </template>
+          </v-text-field>
         </v-form>
       </v-card-text>
 
@@ -31,13 +27,13 @@
 
       <v-card-text v-if="results && Array.isArray(results)">
         <h3>Results <small>{{ results.length }}</small></h3>
-        <div class="d-flex flex-wrap ga-3">
+        <div class="d-flex flex-wrap ga-2">
           <v-card
             v-for="location in results"
             elevation="1"
             @click="selectLocation(location)"
           >
-            <v-card-text>📍 {{ location.display_name }}</v-card-text>
+            <v-card-text>{{ location.display_name }}</v-card-text>
           </v-card>
         </div>
       </v-card-text>
@@ -47,7 +43,6 @@
 
       <v-card-text v-if="recentLocations.length">
         <h3 class="mb-1">
-          <v-icon start icon="mdi-history"></v-icon>
           Recent locations <small>{{ recentLocations.length }}</small>
         </h3>
         <div class="d-flex flex-wrap ga-2">
@@ -55,10 +50,13 @@
             v-for="location in recentLocations"
             elevation="1"
             @click="selectLocation(location)">
+            <v-icon start icon="mdi-history"></v-icon>
             {{ location.display_name }}
           </v-chip>
+          <v-chip variant="outlined" size="small" @click="clearRecentLocations">
+            Clear
+          </v-chip>
         </div>
-        <v-btn class="mt-2 ml-2" variant="outlined" size="small" @click="clearRecentLocations">Clear</v-btn>
       </v-card-text>
 
       <v-divider v-if="recentLocations.length"></v-divider>
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index f90cfeec3e..011d8a151b 100644
--- a/src/views/AddPriceSingle.vue
+++ b/src/views/AddPriceSingle.vue
@@ -102,8 +102,8 @@
                 {{ location.display_name }}
               </v-chip>
               <v-chip variant="outlined" size="small" @click="showLocationSelector">
-                <v-icon start icon="mdi-magnify"></v-icon>
                 Find
+                <v-icon end icon="mdi-magnify"></v-icon>
               </v-chip>
             </div>
             <p v-if="!locationFormFilled" class="text-red mt-2 mb-2"><i>Select your location</i></p>