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

vue activity: manage datas in store, not with data()

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-06-28 16:40:55 +02:00
parent 61c2934d64
commit 3748b4fbf4
3 changed files with 136 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
View File

@ -8,10 +8,10 @@
<div class="grid-8">
<check-social-issue
v-for="issue in socialIssues.list"
v-for="issue in socialIssuesList"
v-bind:key="issue.id"
v-bind:issue="issue"
v-bind:selection="socialIssues.selected"
v-bind:selection="socialIssuesSelected"
@updateSelected="updateSelectedIssue">
</check-social-issue>
@ -30,9 +30,9 @@
v-bind:searchable="true"
v-bind:allow-empty="true"
v-bind:show-labels="false"
v-bind:loading="socialIssues.isLoading"
v-bind:loading="issueIsLoading"
v-bind:placeholder="$t('activity.choose_other_social_issue')"
v-bind:options="socialIssues.other"
v-bind:options="socialIssuesOther"
v-model="value"
@select="addInSocialIssuesList">
@ -52,16 +52,16 @@
</div>
<div class="grid-8">
<div v-if="socialActions.isLoading === true">
<div v-if="actionIsLoading === true">
<i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
</div>
<check-social-action
v-if="socialIssues.selected.length"
v-for="action in socialActions.list"
v-if="socialIssuesSelected.length"
v-for="action in socialActionsList"
v-bind:key="action.id"
v-bind:action="action"
v-bind:selection="socialActions.selected"
v-bind:selection="socialActionsSelected"
@updateSelected="updateSelectedAction">
</check-social-action>
@ -91,90 +91,73 @@ export default {
},
data() {
return {
socialIssues: {
list: [],
selected: [],
other: [],
isLoading: false
},
socialActions: {
list: [],
selected: [],
isLoading: false
},
issueIsLoading: false,
actionIsLoading: false
}
},
computed: {
accompanyingCourseSocialIssuesList() {
return readonly(this.$store.state.activity.accompanyingPeriod.socialIssues);
socialIssuesList() {
return this.$store.state.activity.accompanyingPeriod.socialIssues;
},
activitySocialIssuesSelected() {
return readonly(this.$store.state.activity.socialIssues);
socialIssuesSelected() {
return this.$store.state.activity.socialIssues;
},
activitySocialActionsSelected() {
return readonly(this.$store.state.activity.socialActions);
socialIssuesOther() {
return this.$store.state.socialIssuesOther;
},
socialActionsList() {
return this.$store.state.socialActionsList;
},
socialActionsSelected() {
return this.$store.state.activity.socialActions;
}
},
mounted() {
// this.loadSocialIssues(); // TODO 1 ne pas muter le store
this.loadOthersSocialIssues();
console.log('load others issues in multiselect');
this.issueIsLoading = true;
getSocialIssues().then(response => new Promise((resolve, reject) => {
this.$store.commit('updateSocialIssuesOther', response.results);
this.socialIssuesSelected.forEach(issue => {
this.$store.commit('addSocialIssueInList', issue);
}, this);
console.log(this.socialIssuesOther.length, this.socialIssuesOther);
this.socialIssuesList.forEach(issue => {
this.$store.commit('removeSocialIssueInOther', issue);
}, this);
console.log(this.socialIssuesOther.length); // grr !!!
// TODO décompter les issues initiales du multiselect
this.$store.commit('filterList', 'issues');
this.socialActionsSelected.forEach(action => {
this.$store.commit('addSocialActionInList', action);
}, this);
this.$store.commit('filterList', 'actions');
this.issueIsLoading = false;
resolve();
}));
},
methods: {
/* When mounted, load SocialIssues associated to AccompanyingCourse (checkboxes)
*/
loadSocialIssues() {
console.log('loadSocialIssues');
this.socialIssues.list = this.accompanyingCourseSocialIssuesList;
},
/* When loaded, load all others socialIssues in a multiselect
*/
loadOthersSocialIssues() {
this.socialIssues.isLoading = true;
getSocialIssues().then(response => new Promise((resolve, reject) => {
console.log('load others issues in multiselect');
this.socialIssues.other = response.results;
this.loadSelected();
this.socialIssues.isLoading = false;
resolve();
}));
},
/* Load finally all issues and actions already linked to activity
*/
loadSelected() {
console.log('loadSelected');
this.activitySocialIssuesSelected.forEach(issue => {
this.addInSocialIssuesList(issue)
}, this);
this.activitySocialActionsSelected.forEach(action => {
console.log('* add action', action.id);
this.socialActions.list.push(action);
this.socialActions.selected.push(action);
this.filterActionsList();
}, this);
},
/* When choosing an issue in multiselect, add it in checkboxes (as selected),
remove it from multiselect, and add socialActions concerned
*/
addInSocialIssuesList(value) {
console.log('addInSocialIssuesList', value);
this.socialIssues.list.push(value);
this.socialIssues.other = this.socialIssues.other.filter(item => item !== value);
this.socialIssues.selected.push(value);
this.$store.commit('addSocialIssueInList', value);
this.$store.commit('addSocialIssueSelected', value);
this.$store.commit('removeSocialIssueInOther', value);
this.updateActionsList();
},
/* Update value for selected issues checkboxes
*/
updateSelectedIssue(value) {
console.log('updateSelectedIssue', value);
this.socialIssues.selected = value;
this.$store.commit('updateSocialIssuesSelected', value);
this.updateActionsList();
},
/* Add socialActions concerned: reset actions list, then loop on each issue selected
@ -183,41 +166,27 @@ export default {
updateActionsList() {
console.log('updateActionsList');
console.log('* reset actions list');
this.socialActions.list = [];
this.$store.commit('resetSocialActionList');
this.socialIssues.selected.forEach(item => {
console.log('* for issue', item.id);
this.socialIssuesSelected.forEach(item => {
console.log('for issue', item.id);
this.socialActions.isLoading = true;
this.actionIsLoading = true;
getSocialActionByIssue(item.id)
.then(actions => new Promise((resolve, reject) => {
actions.results.forEach(action => {
console.log('* add action', action.id);
this.socialActions.list.push(action);
this.$store.commit('addSocialActionInList', action);
}, this);
this.filterActionsList();
this.socialActions.isLoading = false;
this.$store.commit('filterList', 'actions');
this.actionIsLoading = false;
resolve();
}));
}, this);
},
/* Filter social actions list: order by and uniq
*/
filterActionsList() {
console.log('filterActionsList', this.socialActions.list);
console.log('* filter ' + this.socialActions.list.length + ' items: uniq');
// TODO 2 filtrer la liste pour supprimer les doublons
this.socialActions.list = this.socialActions.list.filter((v, i, a) => a.indexOf(v) === i);
//this.socialActions.list = [...new Set(this.socialActions.list)];
console.log('* filter ' + this.socialActions.list.length + ' items: sort');
this.socialActions.list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
}
}
}
</script>

2
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
View File

@ -5,7 +5,7 @@ const appMessages = {
activity: {
//
social_issues: "Problématiques sociales",
choose_other_social_issue: "ajouter une nouvelle problématique sociale...",
choose_other_social_issue: "ajouter une autre problématique sociale...",
social_actions: "Actions d'accompagnement",
select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",

90
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
View File

@ -4,28 +4,68 @@ import { createStore } from 'vuex';
const debug = process.env.NODE_ENV !== 'production';
//console.log('window.activity', window.activity);
const addIdToValue = (string, id) => {
let array = string ? string.split(',') : [];
array.push(id.toString());
let str = array.join();
return str;
};
const removeIdFromValue = (string, id) => {
let array = string.split(',');
array = array.filter(el => el !== id.toString());
let str = array.join();
return str;
};
const store = createStore({
strict: debug,
state: {
activity: window.activity
},
getters: {
activity: window.activity,
socialIssuesOther: [],
socialActionsList: [],
},
mutations: {
// SocialIssueAcc
addSocialIssueInList(state, issue) {
console.log('add list issue', issue.id);
state.activity.accompanyingPeriod.socialIssues.push(issue);
},
addSocialIssueSelected(state, issue) {
console.log('add selected issue', issue.id);
state.activity.socialIssues.push(issue);
},
updateSocialIssuesSelected(state, issue) {
console.log('update selected issues');
state.activity.socialIssues = issue;
},
updateSocialIssuesOther(state, payload) {
console.log('update other issues');
state.socialIssuesOther = payload;
},
removeSocialIssueInOther(state, issue) {
console.log('remove other issue', issue.id);
state.socialIssuesOther = state.socialIssuesOther.filter(item => item !== issue);
},
resetSocialActionList(state) {
console.log('reset actions list');
state.socialActionsList = [];
},
addSocialActionInList(state, action) {
console.log('add list action', action.id);
state.socialActionsList.push(action);
},
addSocialActionSelected(state, action) {
console.log('add selected action', action.id);
state.activity.socialActions.push(action);
},
filterList(state, list) {
const filterList = (list) => {
console.log('filter ' + list.length + ' items: uniq'); // grr !!!
// TODO un filtrage qui enlève les doublons
//list = list.filter((v, i, a) => a.indexOf(v) === i);
let _list = [...new Set(list)];
console.log('filter ' + list.length + ' items: sort', list);
_list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
return _list;
};
if (list === 'issues') {
state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues);
}
if (list === 'actions') {
state.socialActionsList = filterList(state.socialActionsList);
}
},
// ConcernedGroups
addPersonsInvolved(state, payload) {
//console.log('### mutation addPersonsInvolved', payload.result.type);
switch (payload.result.type) {
@ -58,6 +98,14 @@ const store = createStore({
actions: {
addPersonsInvolved({ commit }, payload) {
//console.log('### action addPersonsInvolved', payload.result.type);
const addIdToValue = (string, id) => {
let array = string ? string.split(',') : [];
array.push(id.toString());
let str = array.join();
return str;
};
switch (payload.result.type) {
case 'person':
let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@ -76,6 +124,14 @@ const store = createStore({
},
removePersonInvolved({ commit }, payload) {
//console.log('### action removePersonInvolved', payload);
const removeIdFromValue = (string, id) => {
let array = string.split(',');
array = array.filter(el => el !== id.toString());
let str = array.join();
return str;
};
switch (payload.type) {
case 'person':
let aPersons = document.getElementById("chill_activitybundle_activity_persons");