From b4274264a7874714b43b9a654610bd73a819904a Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 7 May 2021 12:03:36 +0200 Subject: [PATCH] create addPersons store module, move state/getters/mutations/actions in module --- .../public/vuejs/AccompanyingCourse/api.js | 5 +- .../public/vuejs/AccompanyingCourse/index.js | 6 +- .../vuejs/AccompanyingCourse/store/index.js | 74 ++++-------------- .../store/modules/addPersons.js | 76 +++++++++++++++++++ .../public/vuejs/_components/AddPersons.vue | 18 +++-- .../vuejs/_components/PersonSuggestion.vue | 5 +- 6 files changed, 107 insertions(+), 77 deletions(-) create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js index dc94159cf..0f71f7170 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js @@ -22,10 +22,11 @@ let getAccompanyingCourse = (accompanying_period_id___) => { //tmp /* * Endpoint chill_person_accompanying_course_api_add_participation, -* method POST, add a participation to the accompanyingCourse +* method POST/DELETE, add/close a participation to the accompanyingCourse * * @accompanying_period_id integer - id of accompanyingCourse -* @person_id integer - id of person +* @person_id integer - id of person +* @method string - POST or DELETE */ let postParticipation = (accompanying_period_id, person_id, method) => { const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}` diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js index b1f6dee0e..3cd93b08e 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js @@ -1,14 +1,14 @@ import { createApp } from 'vue' import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n' import { appMessages } from './js/i18n' -import { getDataPromise } from './store' +import { initPromise } from './store' import App from './App.vue'; -getDataPromise.then(store => { +initPromise.then(store => { //console.log('store in create_store', store); - console.log('store accompanyingCourse', store.state.accompanying_course); + //console.log('store accompanyingCourse', store.state.accompanying_course); const i18n = _createI18n(appMessages); diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js index 42c0a6b29..77a27370a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js @@ -1,39 +1,25 @@ import 'es6-promise/auto'; import { createStore } from 'vuex'; +import addPersons from './modules/addPersons' import { getAccompanyingCourse, postParticipation } from '../api'; -import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons' const debug = process.env.NODE_ENV !== 'production'; const id = window.accompanyingCourseId; //tmp -let getDataPromise = getAccompanyingCourse(id) +let initPromise = getAccompanyingCourse(id) .then(accompanying_course => new Promise((resolve, reject) => { const store = createStore({ strict: debug, + modules: { + addPersons: addPersons + }, state: { accompanying_course: accompanying_course, - add_persons: { - query: "", - suggested: [], - selected: [] - }, errorMsg: [] }, getters: { - selectedAndSuggested: state => { - const uniqBy = (a, key) => [ - ...new Map( - a.map(x => [key(x), x]) - ).values() - ]; - let union = [...new Set([ - ...state.add_persons.suggested.slice().reverse(), - ...state.add_persons.selected.slice().reverse(), - ])]; - return uniqBy(union, k => k.id); - } }, mutations: { removeParticipation(state, item) { @@ -49,33 +35,17 @@ let getDataPromise = getAccompanyingCourse(id) // pousse la participation state.accompanying_course.participations.push(participation); }, - addParticipation(state, { participation, payload }) { + addParticipation(state, participation) { //console.log('### mutation: add participation', participation); state.accompanying_course.participations.push(participation); - //console.log('count participations from state', state.accompanying_course.participations.length); - //console.log('avant', state.add_persons.selected); - state.add_persons.selected = state.add_persons.selected.filter(value => value !== payload); - //console.log('après', state.add_persons.selected); - state.add_persons.query = ""; - state.add_persons.suggested = []; }, - setQuery(state, query) { - //console.log('q=', query); - state.add_persons = Object.assign({}, state.add_persons, query); - }, - loadSuggestions(state, suggested) { - state.add_persons.suggested = suggested; - }, - updateSelected(state, value) { - state.add_persons.selected = value; - } }, actions: { removeParticipation({ commit }, payload) { commit('removeParticipation', payload); }, closeParticipation({ commit }, payload) { - console.log('## action: fetch delete participation: payload', payload.person.id); + //console.log('## action: fetch delete participation: payload', payload.person.id); postParticipation(id, payload.person.id, 'DELETE') .then(participation => new Promise((resolve, reject) => { //console.log('payload', payload); @@ -83,42 +53,26 @@ let getDataPromise = getAccompanyingCourse(id) resolve(); })) .catch((error) => { - console.log('error', error); state.errorMsg.push(error.message); }); }, - addParticipation({ commit }, payload) { - console.log('## action: fetch post participation: payload', payload.id); + addParticipation(addPersons, payload) { + //console.log('## action: fetch post participation: payload', payload.id); postParticipation(id, payload.id, 'POST') .then(participation => new Promise((resolve, reject) => { - commit('addParticipation', { participation, payload }); + //console.log(participation, payload); + addPersons.commit('addParticipation', participation); + addPersons.commit('resetState', payload); resolve(); })) .catch((error) => { state.errorMsg.push(error.message); }); }, - setQuery({ commit }, payload) { - commit('setQuery', payload); - //console.log('## action: setquery: payload', payload); - if (payload.query.length >= 3) { - searchPersons(payload.query) - .then(suggested => new Promise((resolve, reject) => { - commit('loadSuggestions', suggested.results); - resolve(); - })); - } else { - commit('loadSuggestions', []); - } - }, - updateSelected({ commit }, payload) { - //console.log('## action: update selected values: payload', payload); - commit('updateSelected', payload); - } } }); - console.log('store object', store.state.accompanying_course.id); + //console.log('store object', store.state.accompanying_course.id); resolve(store); })); -export { getDataPromise }; +export { initPromise }; diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js new file mode 100644 index 000000000..e65f94fa9 --- /dev/null +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js @@ -0,0 +1,76 @@ +import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons' +import { postParticipation } from '../../api'; + + +// initial state +const state = { + query: "", + suggested: [], + selected: [] +} + +// getters +const getters = { + selectedAndSuggested: state => { + const uniqBy = (a, key) => [ + ...new Map( + a.map(x => [key(x), x]) + ).values() + ]; + let union = [...new Set([ + ...state.suggested.slice().reverse(), + ...state.selected.slice().reverse(), + ])]; + return uniqBy(union, k => k.id); + } +} + +// mutations +const mutations = { + setQuery(state, query) { + //console.log('q=', query); + state.query = query; + }, + loadSuggestions(state, suggested) { + state.suggested = suggested; + }, + updateSelected(state, value) { + state.selected = value; + }, + resetState(state, selected) { + //console.log('avant', state.selected); + state.selected = state.selected.filter(value => value !== selected); + //console.log('après', state.selected); + state.query = ""; + state.suggested = []; + } +} + +// actions +const actions = { + setQuery({ commit }, payload) { + //console.log('## action: setquery: payload', payload); + commit('setQuery', payload.query); + if (payload.query.length >= 3) { + searchPersons(payload.query) + .then(suggested => new Promise((resolve, reject) => { + commit('loadSuggestions', suggested.results); + resolve(); + })); + } else { + commit('loadSuggestions', []); + } + }, + updateSelected({ commit }, payload) { + //console.log('## action: update selected values: payload', payload); + commit('updateSelected', payload); + } +} + +export default { + //namespaced: true, + state, + getters, + actions, + mutations +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue index ae5396ddf..74df3c575 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue @@ -55,7 +55,7 @@ @@ -84,26 +84,28 @@ export default { } }, computed: { - ...mapState(['add_persons']), + ...mapState({ + addPersons: state => state.addPersons + }), query: { set(query) { this.$store.dispatch('setQuery', { query }); }, get() { - return this.add_persons.query; + return this.addPersons.query; } }, suggested() { - return this.add_persons.suggested; + return this.addPersons.suggested; }, suggestedCounter() { - return this.add_persons.suggested.length; + return this.addPersons.suggested.length; }, selected() { - return this.add_persons.selected; + return this.addPersons.selected; }, selectedCounter() { - return this.add_persons.selected.length; + return this.addPersons.selected.length; }, selectedAndSuggested() { return this.$store.getters.selectedAndSuggested; @@ -116,7 +118,7 @@ export default { this.$refs.search.focus(); }) }, - addPersons() { + addNewPersons() { console.log('@@@ CLICK button addPersons') this.selected.forEach(function(item) { //console.log('# dispatch action for each item', item); diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue index a3dc98b4c..f2561b0af 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue @@ -42,12 +42,9 @@ export default { this.$store.dispatch('updateSelected', value); }, get() { - return this.$store.state.add_persons.selected; + return this.$store.state.addPersons.selected; } }, - //selectedAndSuggested() { - // return this.$store.getters.selectedAndSuggested; - //}, isChecked() { return (this.selected.indexOf(this.item) === -1) ? false : true; }