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

household address: choose among available address

Browse Source
This commit is contained in:
nobohan
2021-06-07 12:18:03 +02:00
parent 6f68349f57
commit 2b5ed5e5a3
6 changed files with 134 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue
View File

@@ -1,42 +1,84 @@
<template>
<div v-if="address.text">
{{ address.text }}
<div class='household-address__select'>
<h2>{{ $t('select_a_existing_address') }}</h2>
<select-household-address
v-bind:address="address">
</select-household-address>
</div>
<div v-if="address.postcode">
{{ address.postcode.name }}
<div class='household-address__create'>
<h2>{{ $t('create_a_new_address') }}</h2>
<add-address
@addNewAddress="addNewAddress">
</add-address>
<div>
<div v-if="newAddress.text">
{{ newAddress.text }}
</div>
<div v-if="newAddress.postcode">
{{ newAddress.postcode.name }}
</div>
</div>
<div>
<div v-if="address.selected.address">
{{ address.selected.address.text }}
</div>
<div v-if="address.selected.address.postcode">
{{ address.selected.address.postcode.name }}
</div>
</div>
</div>
<div>
<button class="sc-button bt-create centered mt-4" @click="addToHousehold">
{{ $t('add_an_address_to_household') }}
</button>
</div>
<add-address
@addNewAddress="addNewAddress">
</add-address>
<button class="sc-button bt-create centered mt-4" @click="addToHousehold">
{{ $t('add_an_address_to_household') }}
</button>
</template>
<script>
import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';
import SelectHouseholdAddress from './components/SelectHouseholdAddress.vue';
import { fetchAddresses } from 'ChillMainAssets/vuejs/_api/AddAddress.js';
export default {
name: 'App',
components: {
AddAddress,
SelectHouseholdAddress
},
data() {
return {
householdId: window.householdId
householdId: window.householdId,
address: {
loaded: {
addresses: [],
},
selected: {
address : {}
}
}
}
},
computed: {
address() {
return this.$store.state.address;
newAddress() {
return this.$store.state.newAddress;
}
},
methods: {
getAddresses() {
console.log('getAddresses'); //TODO should do suggestion here
fetchAddresses().then(addresses => new Promise((resolve, reject) => {
this.address.loaded.addresses = addresses.results;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error.message);
});
},
addNewAddress({ address, modal }) {
console.log('@@@ CLICK button addNewAdress', address);
let newAddress = {
let createdAddress = {
'isNoAddress': address.isNoAddress,
'street': address.selected.address.street,
'streetNumber': address.selected.address.streetNumber,
@@ -51,21 +93,26 @@ export default {
};
if (address.selected.address.point !== undefined){
newAddress = Object.assign(newAddress, {'point': address.selected.address.point.coordinates});
createdAddress = Object.assign(createdAddress, {'point': address.selected.address.point.coordinates});
}
this.$store.dispatch('addAddress', newAddress);
this.address.selected.address = {}; //unset the selected address, if any
this.$store.dispatch('addAddress', createdAddress);
modal.showModal = false;
},
addToHousehold() {
const householdId = this.householdId;
const addressId = this.$store.state.address.address_id;
const addressId = this.address.selected.address.address_id === undefined ? this.$store.state.newAddress.address_id : this.address.selected.address.address_id
console.log(householdId);
console.log(addressId);
this.$store.dispatch('addAddressToHousehold', {householdId, addressId});
}
}
},
mounted() {
this.getAddresses();
},
};
</script>

47
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/components/SelectHouseholdAddress.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="container">
<VueMultiselect
v-model="value"
@select="selectAddress"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:multiple="false"
:placeholder="$t('select_address')"
:options="addresses">
</VueMultiselect>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
export default {
name: 'SelectHouseholdAddress',
components: { VueMultiselect },
props: ['address'],
data() {
return {
value: null
}
},
computed: {
addresses() {
return this.address.loaded.addresses;
}
},
methods: {
transName(value) {
return `${value.text} ${value.postcode.name}`
},
selectAddress(value) {
this.address.selected.address = value;
}
}
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

3
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/js/i18n.js
View File

@@ -2,6 +2,9 @@ import { addressMessages } from 'ChillMainAssets/vuejs/Address/js/i18n'
const appMessages = {
fr: {
select_a_existing_address: 'Sélectionner une adresse existante',
create_a_new_address: 'Créer une nouvelle adresse',
add_an_address_to_household: 'Ajouter l\'adresse au ménage'
}
};

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/store/index.js
View File

@@ -9,7 +9,7 @@ const debug = process.env.NODE_ENV !== 'production';
const store = createStore({
strict: debug,
state: {
address: {},
newAddress: {},
household: {},
errorMsg: []
},
@@ -21,7 +21,7 @@ const store = createStore({
},
addAddress(state, address) {
console.log('@M addAddress address', address);
state.address = address;
state.newAddress = address;
},
addAddressToHousehold(state, household) {
console.log('@M addAddress address', household);