Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

address: use multiselect for city and address selection

Browse Source
This commit is contained in:
nobohan 2021-05-27 15:15:20 +02:00
parent bcf2b9d834
commit 063076d0cb
3 changed files with 63 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
View File

@ -1,38 +1,46 @@
<template>
<div class="container">
<select
v-model="selected">
<option :value="{}" disabled selected>{{ $t('select_address') }}</option>
<option
v-for="item in this.addresses"
v-bind:item="item"
v-bind:key="item.id"
v-bind:value="item">
{{ item.street }}, {{ item.streetNumber }}
</option>
</select>
<VueMultiselect
v-model="value"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_address')"
:options="addresses"
@update:model-value="selectAddress"
:model-value="value">
</VueMultiselect>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
export default {
name: 'AddressSelection',
components: { VueMultiselect },
props: ['address', 'updateMapCenter'],
data() {
return {
value: null
}
},
methods: {
transName(value) {
return `${value.street}, ${value.streetNumber}`
},
selectAddress(value) {
this.address.selected.address = value;
this.updateMapCenter(value.point);
},
},
computed: {
addresses() {
return this.address.loaded.addresses;
},
selected: {
set(value) {
console.log('selected value', value);
this.address.selected.address = value;
this.updateMapCenter(value.point);
},
get() {
return this.address.selected.address;
}
},
addresses() {
return this.address.loaded.addresses;
}
}
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

52
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
View File

@ -1,38 +1,46 @@
<template>
<div class="container">
<select
v-model="selected">
<option :value="{}" disabled selected>{{ $t('select_city') }}</option>
<option
v-for="item in this.cities"
v-bind:item="item"
v-bind:key="item.id"
v-bind:value="item">
{{ item.code }}-{{ item.name }}
</option>
</select>
<VueMultiselect
v-model="value"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:options="cities"
@update:model-value="selectCity"
:model-value="value">
</VueMultiselect>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['address', 'getReferenceAddresses'],
data() {
return {
value: null
}
},
methods: {
transName(value) {
return `${value.code}-${value.name}`
},
selectCity(value) {
this.address.selected.city = value;
this.getReferenceAddresses(value);
},
},
computed: {
cities() {
return this.address.loaded.cities;
},
selected: {
set(value) {
console.log('selected value', value.name);
this.address.selected.city = value;
this.getReferenceAddresses(value);
},
get() {
return this.address.selected.city;
}
},
}
}
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

3
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
View File

@ -24,8 +24,7 @@ export default {
data() {
return {
//value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0],
value: null,
options: []
value: null
}
},
methods: {