fetch postParticipation request, catch fetch error, store mutation+action

This commit is contained in:
Mathieu Jaumotte 2021-04-30 15:35:28 +02:00
parent 4900c81c11
commit 35e6d36ce0
4 changed files with 38 additions and 38 deletions

View File

@ -1,31 +1,36 @@
const
locale = 'fr',
format = 'json',
accompanying_period_id = () => window.accompanyingCourseId
format = 'json'
, accompanying_period_id = window.accompanyingCourseId //tmp
;
// 1. chill_person_accompanying_course_api_show (GET)
let getAccompanyingCourse = (accompanying_period_id) => {
let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
return fetch(url)
.then(response => response.json());
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
// 2. chill_person_accompanying_course_api_add_participation (POST)
let postParticipation = (accompanying_period_id, participation) => {
let postParticipation = (accompanying_period_id, person_id) => {
const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(participation)
body: JSON.stringify({id: person_id})
})
.then(response => response.json());
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
export { getAccompanyingCourse, postParticipation };
/// TODO
// * cfr. promise.all() pour plusieurs promesses
// * catch throw sur le dernier then pour capturer l'erreur
export {
getAccompanyingCourse,
postParticipation
};

View File

@ -54,7 +54,7 @@ export default {
methods: {
addPerson() {
console.log('[wip] opening add persons modal');
this.$store.commit('addParticipation', {
this.$store.dispatch('addParticipation', {
id: SimpsonId++,
person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
startDate: { datetime: "1975-09-15T00:00:00+0100" },
@ -62,7 +62,7 @@ export default {
})
},
removePerson(item) {
this.$store.commit('removeParticipation', item)
this.$store.dispatch('removeParticipation', item)
},
savePersons() {
console.log('[wip] saving persons');

View File

@ -4,49 +4,46 @@ import { getAccompanyingCourse, postParticipation } from '../api/accompanyingCou
const debug = process.env.NODE_ENV !== 'production';
const id = window.accompanyingCourseId;
const id = window.accompanyingCourseId; //tmp
let getDataPromise = getAccompanyingCourse(id)
.then(accompanying_course => new Promise((resolve, reject) => {
const store = createStore({
strict: debug,
state: {
accompanying_course: accompanying_course
accompanying_course: accompanying_course,
errorMsg: []
},
getters: {
},
mutations: {
removeParticipation(state, item) {
//console.log('remove item', item.id);
console.log('remove item', item.id);
state.accompanying_course.participations = state.accompanying_course.participations.filter(
participation => participation !== item
)
},
addParticipation(state, item) {
//console.log('add new item');
console.log('add new item');
state.accompanying_course.participations.push(item)
}
},
actions: {
addParticipation({ commit }, payload) {
console.log('payload', payload);
commit('addParticipation', payload);
postParticipation(id, payload.id).catch((error) => {
commit('removeParticipation', payload)
state.errorMsg.push(error.message);
})
// result action ??
}
}
});
console.log('store object', store.state.accompanying_course.id);
resolve(store);
}));
let postDataPromise = postParticipation(id)
.then(participation => new Promise((resolve, reject) => {
// get store
// use store.actions to post (async way)
console.log(store);
resolve(store);
}));
/*
let allPromises = Promise.all([getDataPromise, postDataPromise])
.then((values) => {
console.log('all promises values', values);
});
*/
export { getDataPromise };

View File

@ -5,15 +5,13 @@
{% endblock %}
{% block content %}
<h1>{{ block('title') }}</h1>
<div id="accompanying-course"></div>
{% endblock %}
{{ encore_entry_script_tags('accompanying_course') }}
{% block js %}
<script type="text/javascript">
window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
</script>
{{ encore_entry_script_tags('accompanying_course') }}
{% endblock %}