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

address refactoring: resolve lack of flexibility for many implementations (modal/not, overriding, options, etc. )

Browse Source 
address creation/edition is unchanged
many variables are renamed to improve logic and readability
This commit is contained in:
Mathieu Jaumotte
2021-08-02 16:27:11 +02:00
parent 7665181d44
commit 884de5c19e
24 changed files with 894 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
View File

@@ -13,16 +13,18 @@ let marker;
export default {
name: 'AddressMap',
props: ['address'],
props: ['entity'],
computed: {
center() {
return this.address.addressMap.center;
return this.entity.selected.addressMap.center;
},
},
methods:{
init() {
map = L.map('address_map').setView([46.67059, -1.42683], 12);
map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
@@ -36,9 +38,9 @@ export default {
},
update() {
console.log('update map with : ', this.address.addressMap.center)
marker.setLatLng(this.address.addressMap.center);
map.setView(this.address.addressMap.center, 15);
//console.log('update map with : ', this.address.addressMap.center)
marker.setLatLng(this.entity.addressMap.center);
map.setView(this.entity.addressMap.center, 15);
}
},
mounted(){

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
View File

@@ -74,69 +74,62 @@
<script>
export default {
name: "AddressMore",
props: ['address'],
props: ['entity'],
computed: {
floor: {
set(value) {
console.log('value', value);
this.address.floor = value;
this.entity.selected.address.floor = value;
},
get() {
return this.address.floor;
return this.entity.selected.address.floor;
}
},
corridor: {
set(value) {
console.log('value', value);
this.address.corridor = value;
this.entity.selected.address.corridor = value;
},
get() {
return this.address.corridor;
return this.entity.selected.address.corridor;
}
},
steps: {
set(value) {
console.log('value', value);
this.address.steps = value;
this.entity.selected.address.steps = value;
},
get() {
return this.address.steps;
return this.entity.selected.address.steps;
}
},
flat: {
set(value) {
console.log('value', value);
this.address.flat = value;
this.entity.selected.address.flat = value;
},
get() {
return this.address.flat;
return this.entity.selected.address.flat;
}
},
buildingName: {
set(value) {
console.log('value', value);
this.address.buildingName = value;
this.entity.selected.address.buildingName = value;
},
get() {
return this.address.buildingName;
return this.entity.selected.address.buildingName;
}
},
extra: {
set(value) {
console.log('value', value);
this.address.extra = value;
this.entity.selected.address.extra = value;
},
get() {
return this.address.extra;
return this.entity.selected.address.extra;
}
},
distribution: {
set(value) {
console.log('value', value);
this.address.distribution = value;
this.entity.selected.address.distribution = value;
},
get() {
return this.address.distribution;
return this.entity.selected.address.distribution;
}
}
}

24
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
View File

@@ -47,7 +47,7 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'AddressSelection',
components: { VueMultiselect },
props: ['address', 'updateMapCenter'],
props: ['entity', 'updateMapCenter'],
data() {
return {
value: null
@@ -55,28 +55,28 @@ export default {
},
computed: {
writeNewAddress() {
return this.address.writeNewAddress;
return this.entity.selected.writeNew.address;
},
writeNewPostalCode() {
return this.address.writeNewPostalCode;
return this.entity.selected.writeNew.postCode;
},
addresses() {
return this.address.loaded.addresses;
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.address.street = value;
this.entity.selected.address.street = value;
},
get() {
return this.address.street;
return this.entity.selected.address.street;
}
},
streetNumber: {
set(value) {
this.address.streetNumber = value;
this.entity.selected.address.streetNumber = value;
},
get() {
return this.address.streetNumber;
return this.entity.selected.address.streetNumber;
}
},
},
@@ -85,13 +85,13 @@ export default {
return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`
},
selectAddress(value) {
this.address.selected.address = value;
this.address.street = value.street;
this.address.streetNumber = value.streetNumber;
this.entity.selected.address = value;
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.updateMapCenter(value.point);
},
addAddress() {
this.address.writeNewAddress = true;
this.entity.selected.writeNew.address = true;
}
}
};

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
View File

@@ -12,13 +12,13 @@
:placeholder="$t('select_city')"
:taggable="true"
:multiple="false"
@tag="addPostalCode"
@tag="addPostcode"
:tagPlaceholder="$t('create_postal_code')"
:options="cities">
</VueMultiselect>
</div>
<div class="custom-postcode row g-1" v-if="writeNewPostalCode">
<div class="custom-postcode row g-1" v-if="writeNewPostcode">
<div class="col-4">
<div class="form-floating">
<input class="form-control"
@@ -28,7 +28,7 @@
v-model="code"/>
<label for="code">{{ $t('postalCode_code') }}</label>
</div>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input class="form-control"
@@ -48,33 +48,34 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['address', 'getReferenceAddresses', 'focusOnAddress'],
props: ['entity', 'focusOnAddress'],
emits: ['getReferenceAddresses'],
data() {
return {
value: null
}
},
computed: {
writeNewPostalCode() {
return this.address.writeNewPostalCode;
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
cities() {
return this.address.loaded.cities;
return this.entity.loaded.cities;
},
name: {
set(value) {
this.address.newPostalCode.name = value;
this.entity.selected.postcode.name = value;
},
get() {
return this.address.newPostalCode.name;
return this.entity.selected.postcode.name;
}
},
code: {
set(value) {
this.address.newPostalCode.code= value;
this.entity.selected.postcode.code= value;
},
get() {
return this.address.newPostalCode.code;
return this.entity.selected.postcode.code;
}
},
},
@@ -83,14 +84,14 @@ export default {
return `${value.code}-${value.name}`
},
selectCity(value) {
this.address.selected.city = value;
this.address.newPostalCode.name = value.name;
this.address.newPostalCode.code = value.code;
this.getReferenceAddresses(value);
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
this.$emit('getReferenceAddresses', value);
this.focusOnAddress();
},
addPostalCode() {
this.address.writeNewPostalCode = true;
addPostcode() {
this.entity.selected.writeNew.postcode = true;
}
}
};

58
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
View File

@@ -2,13 +2,13 @@
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
<VueMultiselect
v-model="value"
id="countrySelect"
track-by="id"
label="name"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="countries"
track-by="id"
v-bind:custom-label="transName"
v-bind:placeholder="$t('select_country')"
v-bind:options="sortedCountries"
v-model="value"
@select="selectCountry">
</VueMultiselect>
</div>
@@ -20,43 +20,47 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['address', 'getCities'],
props: ['context', 'entity'],
emits: ['getCities'],
data() {
return {
edit: window.mode === 'edit',
defaultCountry: this.edit ? this.$store.state.editAddress.country.code : 'FR',
value: this.address.loaded.countries.filter(c => c.countryCode === this.defaultCountry)[0]
value: this.selectCountryByCode(
this.context.edit ? this.entity.selected.country.code : 'FR'
)
}
},
computed: {
sortedCountries() {
console.log('sorted countries');
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return sortedCountries;
}
},
mounted() {
this.init();
},
methods: {
init() {
this.value = this.edit ?
this.address.loaded.countries.filter(c => c.countryCode === this.$store.state.editAddress.country.code)[0]:
this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
if (this.value !== undefined) {
this.selectCountry(this.value);
}
},
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(c => c.countryCode === countryCode)[0];
},
transName ({ name }) {
return name.fr //TODO multilang
},
selectCountry(value) {
this.address.selected.country = value;
this.getCities(value);
},
},
mounted(){
this.init()
},
computed: {
countries() {
const countries = this.address.loaded.countries;
let orderedCountries = [];
orderedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
orderedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
orderedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return orderedCountries;
console.log('select country', value);
this.entity.selected.country = value;
this.$emit('getCities', value);
}
}
};
</script>