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