activity: get social Actions, improve reactivity

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -15,6 +15,3 @@ export default {
    }
 }
 </script>
-
-<style lang="scss">
-</style>

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

@@ -0,0 +1,18 @@
+import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+
+/*
+*  Load socialActions by socialIssue (id)
+*/
+const getSocialActionByIssue = (id) => { 
+   const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+export {
+   getSocialIssues,
+   getSocialActionByIssue
+};

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

@@ -29,12 +29,12 @@
                v-bind:multiple="false"
                v-bind:searchable="true"
                v-bind:allow-empty="true" 
-               v-bind:show-labels="false" 
+               v-bind:show-labels="false"
+               v-bind:loading="socialIssues.isLoading"
                v-bind:placeholder="$t('activity.choose_other_social_issue')"
-               v-bind:options="otherIssues"
+               v-bind:options="socialIssues.other"
                v-model="value"
-               @select="updateSocialIssuesList"
+               @select="addInSocialIssuesList">
-               >
                   
                <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
                   <span v-if="values.length > 0" class="multiselect__single"></span>
@@ -48,19 +48,16 @@
 
       <div class="container">
          <div class="grid-4 clear">
-            <label>{{ $t('activity.accompanying_actions') }}</label>
+            <label>{{ $t('activity.social_actions') }}</label>
          </div>
          <div class="grid-8">
-            <!--
+            
-            <div id="chill_activitybundle_activity_socialActions" class="choice-widget-expanded">
+            <div v-if="socialActions.isLoading === true">
-               <span class="inline-choice">
+               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
-                  <input type="checkbox" id="chill_activitybundle_activity_socialActions_5" name="chill_activitybundle_activity[socialActions][]" value="5">
-                  <label class="inline" for="chill_activitybundle_activity_socialActions_5">Informer, conseiller</label>
-               </span><br>
             </div>
-            -->
             
             <check-social-action
+               v-if="socialIssues.selected.length"
                v-for="action in socialActions.list"
                v-bind:key="action.id"
                v-bind:action="action"
@@ -68,6 +65,10 @@
                @updateSelected="updateSelectedAction">
             </check-social-action>
             
+            <span v-else class="inline-choice chill-no-data-statement mt-3">
+               {{ $t('activity.select_first_a_social_issue') }}
+            </span>
+            
          </div>
       </div>
       
@@ -75,11 +76,11 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { readonly } from 'vue';
 import VueMultiselect from 'vue-multiselect';
 import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
 import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
-import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+import { getSocialIssues, getSocialActionByIssue } from '../api.js';
 
 export default {
    name: "SocialIssuesAcc",
@@ -92,70 +93,130 @@ export default {
       return {
          socialIssues: {
             list: [],
-            selected: []
+            selected: [],
+            other: [],
+            isLoading: false
          },
-         otherIssues: [],
          socialActions: {
             list: [],
-            selected: []
+            selected: [],
+            isLoading: false
          },
-         otherActions: []
       }
    },
    computed: {
-      ...mapState({
+      accompanyingCourseSocialIssuesList() {
-         activitySocialIssues: state => state.activity.socialIssues,
+         return readonly(this.$store.state.activity.accompanyingPeriod.socialIssues);
-         //activitySocialActions: state => state.activity.socialActions,
+      },
-         accompanyingCourseSocialIssues: state => state.activity.accompanyingPeriod.socialIssues
+      activitySocialIssuesSelected() {
-      })
+         return readonly(this.$store.state.activity.socialIssues);
+      },
+      activitySocialActionsSelected() {
+         return readonly(this.$store.state.activity.socialActions);
+      }
    },
    mounted() {
-      //this.loadSocialIssues();
+      // this.loadSocialIssues(); // TODO 1 ne pas muter le store
       this.loadOthersSocialIssues();
    },
    methods: {
+      /* When mounted, load SocialIssues associated to AccompanyingCourse (checkboxes)
+      */
       loadSocialIssues() {
-         console.log('when mounted load socialIssues');
+         console.log('loadSocialIssues');
-         this.socialIssues.list = this.accompanyingCourseSocialIssues;
+         this.socialIssues.list = this.accompanyingCourseSocialIssuesList;
-         // TODO ajouter les issues déjà liées à activity
       },
+      /* 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.otherIssues = response.results;
+            this.socialIssues.other = response.results;
+            
+            this.loadSelected();
+            this.socialIssues.isLoading = false;
             resolve();
          }));        
       },
-      updateSocialIssuesList(value) {
+      /* Load finally all issues and actions already linked to activity
-         console.log('updateSocialIssuesList', value);
+      */
+      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.otherIssues = this.otherIssues.filter(item => item !== value);
+         this.socialIssues.other = this.socialIssues.other.filter(item => item !== value);
+         
          this.socialIssues.selected.push(value);
-         this.addInActionsList(value.id);
+         this.updateActionsList();
       },
+      /* Update value for selected issues checkboxes
+      */
       updateSelectedIssue(value) {
-         console.log('updateSelected issue', value);
+         console.log('updateSelectedIssue', value);
          this.socialIssues.selected = value;
-         this.addInActionsList(value.id);
+         
+         this.updateActionsList();
       },
-      addInActionsList(id) {
+      /* Add socialActions concerned: reset actions list, then loop on each issue selected 
-         console.log('update action list');
+         to get social actions concerned
+      */
+      updateActionsList() {
+         console.log('updateActionsList');
          
-         const getSocialActionByIssue = (id) => { 
+         console.log('* reset actions list');
-            const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
+         this.socialActions.list = [];
-            return fetch(url)
-               .then(response => {
-                  if (response.ok) { return response.json(); }
-                  throw Error('Error with request resource response'); 
-               });
-         };
          
-         getSocialActionByIssue(id)
+         this.socialIssues.selected.forEach(item => {
+            console.log('* for issue', item.id);
+            
+            this.socialActions.isLoading = true;
+            getSocialActionByIssue(item.id)
             .then(actions => new Promise((resolve, reject) => {
-               //console.log('actions', actions.results);
+               
-               this.socialActions.list = actions.results;
+               actions.results.forEach(action => {
+                  console.log('* add action', action.id);
+                  this.socialActions.list.push(action);
+               }, this);
+               
+               this.filterActionsList();
+               this.socialActions.isLoading = 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));
       }
    }
 }

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

@@ -1,19 +1,18 @@
 <template>
-   
+   <span class="inline-choice">
-      <span class="inline-choice">
+      
-         
+      <input 
-         <input 
+         type="checkbox" 
-            type="checkbox" 
+         v-model="selected"
-            v-model="selected"
+         name="action"
-            name="action"
+         v-bind:id="action.id" 
-            v-bind:id="action.id" 
+         v-bind:value="action"
-            v-bind:value="action"
+         />
-            />
+      <label class="inline" v-bind:for="action.id">
-         <label class="inline" v-bind:for="action.id">
+         {{ action.text }}
-            {{ action.text }}
+      </label>
-         </label>
+      
-         
+   </span><br>
-      </span><br>
 </template>
 
 <script>
@@ -33,6 +32,3 @@ export default {
    }
 }
 </script>
-
-<style lang="css" scoped>
-</style>

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

@@ -6,7 +6,9 @@ const appMessages = {
          //
          social_issues: "Problématiques sociales",
          choose_other_social_issue: "ajouter une nouvelle problématique sociale...",
-         accompanying_actions: "Actions d'accompagnement",
+         social_actions: "Actions d'accompagnement",
+         select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",
+         
          //
          add_persons: "Ajouter des personnes concernées",
          bloc_persons: "Usagers",

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

@@ -57,7 +57,7 @@ const store = createStore({
    },
    actions: {
       addPersonsInvolved({ commit }, payload) {
-         console.log('### action addPersonsInvolved', payload.result.type);
+         //console.log('### action addPersonsInvolved', payload.result.type);
          switch (payload.result.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@@ -75,7 +75,7 @@ const store = createStore({
          commit('addPersonsInvolved', payload);
       },
       removePersonInvolved({ commit }, payload) {
-         console.log('### action removePersonInvolved', payload);
+         //console.log('### action removePersonInvolved', payload);
          switch (payload.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");