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

create addPersons store module, move state/getters/mutations/actions in module

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-07 12:03:36 +02:00
parent ad690db886
commit b4274264a7
6 changed files with 107 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
View File

@ -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}`

6
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
View File

@ -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);

74
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
View File

@ -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 };

76
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js Normal file
View File

@ -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
}

18
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
View File

@ -55,7 +55,7 @@
</template>
<template v-slot:footer>
<button class="sc-button green" @click="addPersons">
<button class="sc-button green" @click="addNewPersons">
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
</button>
</template>
@ -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);

5
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue
View File

@ -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;
}