add store postAddress fetch request

This commit is contained in:
Mathieu Jaumotte 2021-05-12 09:50:43 +02:00
parent 2aed37757e
commit cb846891d6
4 changed files with 60 additions and 30 deletions

View File

@ -11,8 +11,7 @@
</div>
<add-address
@addNewAddress="addNewAddress"
ref="addAddress">
@addNewAddress="addNewAddress">
</add-address>
</template>
@ -35,7 +34,6 @@ export default {
addNewAddress({ address, modal }) {
console.log('@@@ CLICK button addNewAdress', address);
this.$store.dispatch('addAddress', address.selected);
//this.$refs.addAddress.resetAll(); // to cast child method
modal.showModal = false;
}
}

View File

@ -1,12 +1,16 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
// le fetch POST serait rangé dans la logique du composant qui appelle AddAddress
//import { postAddress } from '... api'
const debug = process.env.NODE_ENV !== 'production';
const store = createStore({
strict: debug,
state: {
address: {}
address: {},
errorMsg: {}
},
getters: {
},
@ -19,7 +23,19 @@ const store = createStore({
actions: {
addAddress({ commit }, payload) {
console.log('@A addAddress payload', payload);
commit('addAddress', payload);
commit('addAddress', payload); // à remplacer par
// fetch POST qui envoie l'adresse, et récupère la confirmation que c'est ok.
// La confirmation est l'adresse elle-même.
//
// postAddress(payload)
// .fetch(address => new Promise((resolve, reject) => {
// commit('addAddress', address);
// resolve();
// }))
// .catch((error) => {
// state.errorMsg.push(error.message);
// });
}
}
});

View File

@ -1,5 +1,6 @@
/*
* Endpoint countries GET
* TODO
*/
const fetchCountries = () => {
console.log('<<< fetching countries');
@ -10,9 +11,10 @@ const fetchCountries = () => {
};
/*
* Endpoint cities GET
* Endpoint cities GET
* TODO
*/
const fetchCities = (country) => {
const fetchCities = (country) => {
console.log('<<< fetching cities for', country);
return [
{id: 1, name: 'Bruxelles', code: '1000', country: 'BE'},
@ -27,7 +29,8 @@ const fetchCities = (country) => {
* @returns {Promise} a promise containing all AddressReference object
*/
const fetchReferenceAddresses = (city) => {
console.log('<<< fetching references addresses for', city);
console.log('<<< fetching references addresses for', city); // city n'est pas utilisé pour le moment
const url = `/api/1.0/main/address-reference.json`;
return fetch(url)
.then(response => {

View File

@ -44,8 +44,14 @@
v-bind:address="address"
ref="addressMap">
</address-map>
<address-more
v-if="!isNoAddress"
v-bind:address="address">
</address-more>
<!--div class="address_form__fields__isNoAddress"></div>
<!--
<div class="address_form__fields__isNoAddress"></div>
<div class="address_form__select">
<div class="address_form__select__header"></div>
<div class="address_form__select__left"></div>
@ -55,13 +61,20 @@
<div class="address_form__fields__header"></div>
<div class="address_form__fields__left"></div>
<div class="address_form__fields__right"></div>
</div-->
</div>
à discuter,
mais je pense qu'il est préférable de profiter de l'imbriquation des classes css
<address-more
v-if="!isNoAddress"
v-bind:address="address">
</address-more>
div.address_form {
div.select {
div.header {}
div.left {}
div.map {}
}
}
-->
</template>
<template v-slot:footer>
@ -156,28 +169,28 @@ export default {
getCountries() {
console.log('getCountries');
this.address.loaded.countries = fetchCountries(); // à remplacer par
//fetchCountries().then(countries => new Promise((resolve, reject) => {
// this.address.loaded.countries = countries;
// resolve()
//}))
//.catch((error) => {
// this.errorMsg.push(error.message);
//});
// fetchCountries().then(countries => new Promise((resolve, reject) => {
// this.address.loaded.countries = countries;
// resolve()
// }))
// .catch((error) => {
// this.errorMsg.push(error.message);
// });
},
getCities(country) {
console.log('getCities for', country.name);
this.address.loaded.cities = fetchCities(); // à remplacer par
//fetchCities(country).then(cities => new Promise((resolve, reject) => {
// this.address.loaded.cities = cities;
// resolve()
//}))
//.catch((error) => {
// this.errorMsg.push(error.message);
//});
// fetchCities(country).then(cities => new Promise((resolve, reject) => {
// this.address.loaded.cities = cities;
// resolve()
// }))
// .catch((error) => {
// this.errorMsg.push(error.message);
// });
},
getReferenceAddresses(city) {
console.log('getReferenceAddresses for', city.name);
fetchReferenceAddresses(city)
fetchReferenceAddresses(city) // il me semble que le paramètre city va limiter le poids des adresses de références reçues
.then(addresses => new Promise((resolve, reject) => {
console.log('addresses', addresses);
this.address.loaded.addresses = addresses.results;