get options and display selected

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -28,17 +28,18 @@ import Confirm from './components/Confirm.vue';
 export default {
    name: 'App',
    components: { 
-      Banner,
-      PersonsAssociated, 
-      Requestor,
+      //Banner,
+      //StickyNav,
+      //PersonsAssociated, 
+      //Requestor,
       SocialIssue,
-      Referrer,
-      Resources,
-      Comment,
-      Confirm,
+      //Referrer, // fait foirer socialissues
+      //Resources,
+      //Comment,
+      //Confirm,
    },
    computed: mapState([
-      'accompanyingCourse'
+      'accompanyingCourse', 'socialIssueOptions'
    ])
 };
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js

@@ -146,6 +146,25 @@ const postResource = (id, payload, method) => {
       });
 };
 
+/*
+*
+*/
+const postSocialIssue = (id, body, method) => {
+   console.log('body + method', body, method);
+   const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
 export { 
    getAccompanyingCourse,
    patchAccompanyingCourse,
@@ -154,4 +173,5 @@ export {
    postParticipation,
    postRequestor,
    postResource,
+   postSocialIssue
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -3,19 +3,22 @@
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
      <div class="my-4">
-        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
-        <VueMultiselect
+        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label
         name="selectIssues"
-            v-model="selected"
-            track-by="id"
-            label="text"
-            :placeholder="$t('social_issue.label')"
-            :multiple="true"
-            :searchable="true"
+        -->
+        <VueMultiselect
            :close-on-select="false"
            :allow-empty="true" 
            :show-labels="false" 
-            :options="options">
+           track-by="id"
+           label="text"
+           :multiple="true"
+           :searchable="false"
+           :placeholder="$t('social_issue.label')"
+           @update:model-value="updateSocialIssues"
+           :model-value="value"
+           :options="options"
+           >
         </VueMultiselect>
      </div>
      
@@ -23,31 +26,31 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
-import { getSocialIssues } from '../api'
+import VueMultiselect from 'vue-multiselect';
+import { getSocialIssues } from '../api';
+import { mapState, mapActions } from 'vuex';
 
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
-   data () {
-      return {
-         selected: null,
-         options: []
-      }
-   },
    computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+         options: state => state.socialIssueOptions,
+      })
    },
    mounted() {
       this.getOptions();
    },
    methods: {
       getOptions() {
-         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
-            console.log('socialIssues', socialIssues);
-            this.options = socialIssues.results; 
+         getSocialIssues().then(elements => new Promise((resolve, reject) => {
+            console.log('get socialIssues', elements.results);
+            this.$store.commit('setSocialIssueOptions', elements.results); 
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },
+      ...mapActions(['updateSocialIssues'])
    }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -5,7 +5,8 @@ import { getAccompanyingCourse,
    confirmAccompanyingCourse,
    postParticipation, 
    postRequestor,
-   postResource } from '../api';
+   postResource,
+   postSocialIssue } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
@@ -19,6 +20,7 @@ let initPromise = getAccompanyingCourse(id)
          },
          state: {
             accompanyingCourse: accompanying_course,
+            socialIssueOptions: [],
             errorMsg: []
          },
          getters: {
@@ -77,6 +79,13 @@ let initPromise = getAccompanyingCourse(id)
                console.log('### mutation: postFirstComment', comment);
                state.accompanyingCourse.initialComment = comment;
             }, 
+            updateSocialIssues(state, value) {
+               state.accompanyingCourse.socialIssues = value;
+            },
+            setSocialIssueOptions(state, value) {
+               console.log('## mutation: setSocialIssueOptions', value);
+               state.socialIssueOptions = value;
+            },
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
                state.accompanyingCourse.step = response.step;
@@ -174,7 +183,14 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            
+            updateSocialIssues({ commit }, payload) {
+               //postSocialIssue(id, { type: "social_issue", id: payload.id  }, payload.method)
+               //.then(response => new Promise((resolve, reject) => {
+               //   console.log('response', response);
+                  commit('updateSocialIssues', payload);
+               //   resolve();
+               //})).catch((error) => { commit('catchError', error) });
+            },
             confirmAccompanyingCourse({ commit }) {
                console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)