Skip to content

Commit

Permalink
feat(price create form): simplify location selector (#52)
Browse files Browse the repository at this point in the history 
* Price form: show recent locations as chips

* Make recent locations reactive

* Smaller chip for find & clear buttons
  • Loading branch information
@raphodn
raphodn committed Dec 22, 2023
1 parent 40cd628 commit 21c9fdb
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 61 deletions.
44 changes: 21 additions & 23 deletions src/components/LocationSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,30 @@

<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>

<v-divider></v-divider>

<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>
Expand All @@ -46,18 +42,20 @@
<v-divider v-if="results"></v-divider>

<v-card-text v-if="recentLocations.length">
<h3>
<h3 class="mb-1">
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)">
<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-card-text>

Expand Down
1 change: 0 additions & 1 deletion src/services/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ function addObjectToLocalStorageItemArray(itemKey, obj, unshift=false, avoidDupl
}



export default {
signIn(username, password) {
let formData = new FormData()
Expand Down
84 changes: 47 additions & 37 deletions src/views/AddPriceSingle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -92,31 +92,23 @@
: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>
<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>
<h3 class="mb-1">🌍 Location</h3>
<div class="d-flex flex-wrap ga-2">
<v-chip
v-for="location in recentLocations"
: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" size="small" @click="showLocationSelector">
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>

<h3>📅 Date</h3>
<h3 class="mt-4 mb-1">📅 Date</h3>
<v-row>
<v-col>
<v-text-field
Expand Down Expand Up @@ -155,7 +147,7 @@
v-if="locationSelector"
v-model="locationSelector"
@location="setLocationData($event)"
@close="locationSelector = false"
@close="closeLocationSelector($event)"
></LocationSelector>
</template>

Expand All @@ -181,13 +173,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: '',
Expand All @@ -198,7 +184,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(3),
locationSelector: false,
locationSelectedDisplayName: ''
};
Expand All @@ -212,6 +208,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])
Expand Down Expand Up @@ -294,11 +294,21 @@ 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()
}
},
isSelectedLocation(location) {
return this.locationSelectedDisplayName && this.locationSelectedDisplayName == location.display_name
},
}
}
</script>

0 comments on commit 21c9fdb

Please sign in to comment.