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

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

@@ -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-if="socialIssuesSelected.length"
-               v-for="action in socialActions.list"
+               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: {
+         issueIsLoading: false,
-            list: [],
+         actionIsLoading: false
-            selected: [],
-            other: [],
-            isLoading: false
-         },
-         socialActions: {
-            list: [],
-            selected: [],
-            isLoading: false
-         },
       }
    },
    computed: {
-      accompanyingCourseSocialIssuesList() {
+      socialIssuesList() {
-         return readonly(this.$store.state.activity.accompanyingPeriod.socialIssues);
+         return this.$store.state.activity.accompanyingPeriod.socialIssues;
       },
-      activitySocialIssuesSelected() {
+      socialIssuesSelected() {
-         return readonly(this.$store.state.activity.socialIssues);
+         return this.$store.state.activity.socialIssues;
       },
-      activitySocialActionsSelected() {
+      socialIssuesOther() {
-         return readonly(this.$store.state.activity.socialActions);
+         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
+      console.log('load others issues in multiselect');
-      this.loadOthersSocialIssues();
+      
+      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.$store.commit('addSocialIssueInList', value);
-         this.socialIssues.other = this.socialIssues.other.filter(item => item !== value);
+         this.$store.commit('addSocialIssueSelected', value);
-         
+         this.$store.commit('removeSocialIssueInOther', value);
-         this.socialIssues.selected.push(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.$store.commit('resetSocialActionList');
-         this.socialActions.list = [];
          
-         this.socialIssues.selected.forEach(item => {
+         this.socialIssuesSelected.forEach(item => {
-            console.log('* for issue', item.id);
+            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.$store.commit('addSocialActionInList', action);
-                  this.socialActions.list.push(action);
                }, this);
                
-               this.filterActionsList();
+               this.$store.commit('filterList', 'actions');
-               this.socialActions.isLoading = false;
                
+               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>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js

@@ -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",
          

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js

@@ -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
+     activity: window.activity,
-   },
+     socialIssuesOther: [],
-   getters: {
+     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");