activity vue: list socialIssues checkbox from accompanyingCourse

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

@@ -6,14 +6,35 @@
             <label>{{ $t('activity.social_issues') }}</label>
          </div>
          <div class="grid-8">
+            
+            <check-social-issue
+               v-for="issue in socialIssues.list"
+               v-bind:key="issue.id"
+               v-bind:issue="issue"
+               v-bind:selection="socialIssues.selected"
+               @updateSelected="updateSelected">
+            </check-social-issue>
+            
+            <div class="mt-4">
+            <VueMultiselect
+               name="otherIssues"
+               label="text"
+               track-by="id"
+               v-bind:close-on-select="true"
+               v-bind:multiple="false"
+               v-bind:searchable="true"
+               v-bind:allow-empty="true" 
+               v-bind:show-labels="false" 
+               v-bind:placeholder="$t('activity.choose_other_social_issue')"
+               v-bind:options="otherIssues"
+               v-model="value"
+               @select="updateSocialIssuesList"
+               >
+            </VueMultiselect>
             <!--
-            <div id="chill_activitybundle_activity_socialIssues" class="choice-widget-expanded">
-               <span class="inline-choice">
-                  <input type="checkbox" id="chill_activitybundle_activity_socialIssues_7" name="chill_activitybundle_activity[socialIssues][]" value="7" checked="checked">
-                  <label class="inline" for="chill_activitybundle_activity_socialIssues_7">ADULTE PREVENTION/PROTECTION &gt; ADULTE - DIFFICULTES FINANCIERES ET/OU ADMINISTRATIVES</label>
-               </span><br>
-            </div>
             -->
+            </div>
+            
          </div>
       </div>
 
@@ -37,10 +58,63 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import VueMultiselect from 'vue-multiselect';
+import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
+import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+
 export default {
-   name: "SocialIssuesAcc"
+   name: "SocialIssuesAcc",
+   components: {
+      CheckSocialIssue,
+      VueMultiselect
+   },
+   data() {
+      return {
+         socialIssues: {
+            list: [],
+            selected: []
+         },
+         otherIssues: []
+      }
+   },
+   computed: {
+      ...mapState({
+         activitySocialIssues: state => state.activity.socialIssues,
+         //activitySocialActions: state => state.activity.socialActions,
+         accompanyingCourseSocialIssues: state => state.activity.accompanyingPeriod.socialIssues
+      })
+   },
+   mounted() {
+      this.loadSocialIssues();
+      this.loadOthersSocialIssues();
+   },
+   methods: {
+      loadSocialIssues() {
+         this.socialIssues.list = this.accompanyingCourseSocialIssues;
+         // TODO ajouter les issues déjà liées à activity
+      },
+      loadOthersSocialIssues() {
+         getSocialIssues().then(response => new Promise((resolve, reject) => {
+            this.otherIssues = response.results;
+            // TODO remove double checkbox results from select
+            resolve();
+         }));        
+      },
+      updateSocialIssuesList(value) {
+         console.log('updateSocialIssuesList', value);
+         // TODO ajouter la valeur cochée dans les checkbox
+         //this.socialIssues.list.push(value);       !?? l'ajoute dans vuex le store !!?
+         //this.socialIssues.selected.push(value);
+      },
+      updateSelected(value) {
+         console.log('updateSelected', value);
+         this.socialIssues.selected = value;
+      }
+   }
 }
 </script>
 
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss" scoped>
 </style>