From 4d1279628983ae3df00732ceaa1641fa729bc76a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 16:04:01 +0200
Subject: [PATCH 1/8] get options and display selected

---
 .../public/vuejs/AccompanyingCourse/App.vue   | 17 ++++---
 .../public/vuejs/AccompanyingCourse/api.js    | 20 ++++++++
 .../components/SocialIssue.vue                | 49 ++++++++++---------
 .../vuejs/AccompanyingCourse/store/index.js   | 20 +++++++-
 4 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index a10c5b4ca..2595ab552 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 8b7a4ad6b..4acff73f6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/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
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index a756727d8..a0982b059 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/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-->
+        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label
+        name="selectIssues"
+        -->
         <VueMultiselect
-            name="selectIssues"
-            v-model="selected"
-            track-by="id"
-            label="text"
-            :placeholder="$t('social_issue.label')"
-            :multiple="true"
-            :searchable="true"
-            :close-on-select="false"
-            :allow-empty="true" 
-            :show-labels="false" 
-            :options="options">
+           :close-on-select="false"
+           :allow-empty="true" 
+           :show-labels="false" 
+           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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 0f7a4f188..ac12dd58e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/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: {
@@ -76,6 +78,13 @@ let initPromise = getAccompanyingCourse(id)
             postFirstComment(state, comment) {
                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);
@@ -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)

From 68ebd60bc83b3475a06f88ce37547a370f87ed00 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 16:22:33 +0200
Subject: [PATCH 2/8] options managed by data, not store

---
 .../AccompanyingCourse/components/SocialIssue.vue      | 10 +++++++---
 .../public/vuejs/AccompanyingCourse/store/index.js     |  5 -----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index a0982b059..0d9958465 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -33,11 +33,15 @@ import { mapState, mapActions } from 'vuex';
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.socialIssues,
-         options: state => state.socialIssueOptions,
-      })
+      }),
    },
    mounted() {
       this.getOptions();
@@ -46,7 +50,7 @@ export default {
       getOptions() {
          getSocialIssues().then(elements => new Promise((resolve, reject) => {
             console.log('get socialIssues', elements.results);
-            this.$store.commit('setSocialIssueOptions', elements.results); 
+            this.options = elements.results;
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index ac12dd58e..ec2bc9b50 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -20,7 +20,6 @@ let initPromise = getAccompanyingCourse(id)
          },
          state: {
             accompanyingCourse: accompanying_course,
-            socialIssueOptions: [],
             errorMsg: []
          },
          getters: {
@@ -82,10 +81,6 @@ let initPromise = getAccompanyingCourse(id)
             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;

From c1e1f65715680aae366f9d9f465716a1b58536a3 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 16:44:59 +0200
Subject: [PATCH 3/8] action resolve commit payload, but fetch body+method

---
 .../Resources/public/vuejs/AccompanyingCourse/api.js   |  2 +-
 .../public/vuejs/AccompanyingCourse/store/index.js     | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 4acff73f6..13999d101 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -150,7 +150,7 @@ const postResource = (id, payload, method) => {
 *
 */
 const postSocialIssue = (id, body, method) => {
-   console.log('body + method', body, method);
+   console.log('api body and method', body, method); 
    const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
    return fetch(url, {
          method: method,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index ec2bc9b50..1ba89a126 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -149,7 +149,7 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             toggleIntensity({ commit }, payload) {
-               console.log(payload);
+               //console.log(payload);
                patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
                .then(course => new Promise((resolve, reject) => {
                   commit('toggleIntensity', course.intensity);
@@ -171,7 +171,7 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             postFirstComment({ commit }, payload) {
-               console.log('## action: postFirstComment: payload', payload);
+               //console.log('## action: postFirstComment: payload', payload);
                patchAccompanyingCourse(id, { type: "accompanying_period", initialComment: payload })
                .then(course => new Promise((resolve, reject) => {
                   commit('postFirstComment', course.initialComment);
@@ -179,7 +179,9 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             updateSocialIssues({ commit }, payload) {
-               //postSocialIssue(id, { type: "social_issue", id: payload.id  }, payload.method)
+               console.log('## action: payload', payload);
+               
+               //postSocialIssue(id, body, method)
                //.then(response => new Promise((resolve, reject) => {
                //   console.log('response', response);
                   commit('updateSocialIssues', payload);
@@ -187,7 +189,7 @@ let initPromise = getAccompanyingCourse(id)
                //})).catch((error) => { commit('catchError', error) });
             },
             confirmAccompanyingCourse({ commit }) {
-               console.log('## action: confirmAccompanyingCourse');
+               //console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)
                .then(response => new Promise((resolve, reject) => {
                   commit('confirmAccompanyingCourse', response);

From 21f75c8a63df954df8c4923bb75817550a451e30 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 16:54:25 +0200
Subject: [PATCH 4/8] dont use mapActions

---
 .../vuejs/AccompanyingCourse/components/SocialIssue.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 0d9958465..bc7aa9ccf 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -28,7 +28,7 @@
 <script>
 import VueMultiselect from 'vue-multiselect';
 import { getSocialIssues } from '../api';
-import { mapState, mapActions } from 'vuex';
+import { mapState } from 'vuex';
 
 export default {
    name: "SocialIssue",
@@ -54,7 +54,10 @@ export default {
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },
-      ...mapActions(['updateSocialIssues'])
+      updateSocialIssues(value) {
+         console.log('@@@ CHANGE value', value);
+         this.$store.dispatch('updateSocialIssues', value);
+      }
    }
 }
 </script>

From 132f11298ec975ffbb0081c511fe945f17fdb2ef Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 16:59:38 +0200
Subject: [PATCH 5/8] now i have to find id+method from payload

---
 .../vuejs/AccompanyingCourse/components/SocialIssue.vue   | 8 +++++++-
 .../public/vuejs/AccompanyingCourse/store/index.js        | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index bc7aa9ccf..20d21e1c0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -56,7 +56,13 @@ export default {
       },
       updateSocialIssues(value) {
          console.log('@@@ CHANGE value', value);
-         this.$store.dispatch('updateSocialIssues', value);
+         this.$store.dispatch('updateSocialIssues', this.transformValue(value));
+      },
+      transformValue(value) {
+         let payload = value;
+         let body = {}; //{ type: "social_issue", id: 5 };
+         let method = ''; //'POST' : 'DELETE';
+         return { payload, body, method };
       }
    }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 1ba89a126..3990f8c84 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -178,8 +178,8 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            updateSocialIssues({ commit }, payload) {
-               console.log('## action: payload', payload);
+            updateSocialIssues({ commit }, { payload, body, method }) {
+               console.log('## action: payload', { payload, body, method });
                
                //postSocialIssue(id, body, method)
                //.then(response => new Promise((resolve, reject) => {

From 21cc0007fb7e28eb52044884ed3a5f6db9cfc259 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 18:24:32 +0200
Subject: [PATCH 6/8] transformValue to payload, body and method

---
 .../components/SocialIssue.vue                | 33 ++++++++++++++++---
 .../vuejs/AccompanyingCourse/store/index.js   |  2 +-
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 20d21e1c0..af283d55e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -55,13 +55,36 @@ export default {
          })).catch(error => this.$store.commit('catchError', error));        
       },
       updateSocialIssues(value) {
-         console.log('@@@ CHANGE value', value);
+         console.log('@@@ CHANGED value');
          this.$store.dispatch('updateSocialIssues', this.transformValue(value));
       },
-      transformValue(value) {
-         let payload = value;
-         let body = {}; //{ type: "social_issue", id: 5 };
-         let method = ''; //'POST' : 'DELETE';
+      transformValue(updated) {
+         let stored = this.value;
+         //console.log('updated', updated, updated.length);
+         //console.log('stored', stored, stored.length);
+         
+         let added = updated.filter(x => stored.indexOf(x) === -1).shift();
+         //console.log('added', added);
+         
+         let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
+         //console.log('removed', removed);
+      
+         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';
+         console.log('method', method);
+         
+         //let concat = (...arrays) => [].concat(...arrays.filter(Array.isArray));
+         //let changed = concat(added, removed);
+         //let changed = [...new Set([...added, ...removed ])];   
+         
+         let changed = (typeof removed === 'undefined') ? added : removed;
+         //console.log('changed', changed);
+         
+         let body = { type: "social_issue", id: changed.id };
+         
+         console.log('body', body);
+         console.log(changed.text);
+         
+         let payload = updated;
          return { payload, body, method };
       }
    }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 3990f8c84..4a0b19334 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -179,7 +179,7 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             updateSocialIssues({ commit }, { payload, body, method }) {
-               console.log('## action: payload', { payload, body, method });
+               //console.log('## action: payload', { payload, body, method });
                
                //postSocialIssue(id, body, method)
                //.then(response => new Promise((resolve, reject) => {

From 69ecc42055559bb609207d724e561922c2a8602a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 18:58:57 +0200
Subject: [PATCH 7/8] enable fetch post/delete socialIssues

---
 .../Resources/public/vuejs/AccompanyingCourse/api.js  |  2 +-
 .../public/vuejs/AccompanyingCourse/store/index.js    | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 13999d101..d2f102e10 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -150,7 +150,7 @@ const postResource = (id, payload, method) => {
 *
 */
 const postSocialIssue = (id, body, method) => {
-   console.log('api body and method', body, method); 
+   //console.log('api body and method', body, method); 
    const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
    return fetch(url, {
          method: method,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 4a0b19334..20baabc8d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -180,13 +180,12 @@ let initPromise = getAccompanyingCourse(id)
             },
             updateSocialIssues({ commit }, { payload, body, method }) {
                //console.log('## action: payload', { payload, body, method });
-               
-               //postSocialIssue(id, body, method)
-               //.then(response => new Promise((resolve, reject) => {
-               //   console.log('response', response);
+               postSocialIssue(id, body, method)
+               .then(response => new Promise((resolve, reject) => {
+                  console.log('response', response);
                   commit('updateSocialIssues', payload);
-               //   resolve();
-               //})).catch((error) => { commit('catchError', error) });
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
             },
             confirmAccompanyingCourse({ commit }) {
                //console.log('## action: confirmAccompanyingCourse');

From 11a6d0802357035c5b6bcfd1a48070e65940bd28 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 18:59:43 +0200
Subject: [PATCH 8/8] add reactives social issues in banner

---
 .../public/vuejs/AccompanyingCourse/App.vue      | 15 +++++++--------
 .../AccompanyingCourse/components/Banner.vue     | 14 ++++++++++----
 .../components/Banner/SocialIssues.vue           | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 2595ab552..d0db1206a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -28,15 +28,14 @@ import Confirm from './components/Confirm.vue';
 export default {
    name: 'App',
    components: { 
-      //Banner,
-      //StickyNav,
-      //PersonsAssociated, 
-      //Requestor,
+      Banner,
+      PersonsAssociated, 
+      Requestor,
       SocialIssue,
-      //Referrer, // fait foirer socialissues
-      //Resources,
-      //Comment,
-      //Confirm,
+      //Referrer,  //fait foirer socialissues
+      Resources,
+      Comment,
+      Confirm,
    },
    computed: mapState([
       'accompanyingCourse', 'socialIssueOptions'
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index e81ac647a..b31e226ba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -45,20 +45,26 @@
    </teleport>
    
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="grid-4">{{ $t('social_issue.title') }}</div>
-      <div class="grid-4">_</div>
-      <div class="grid-4">_</div>
+      <div class="grid-12">
+         <social-issues
+            v-for="issue in accompanyingCourse.socialIssues"
+            v-bind:key="issue.id"
+            v-bind:issue="issue">
+         </social-issues>
+      </div>
    </teleport>
 
 </template>
 
 <script>
 import ToggleFlags from './ToggleFlags';
+import SocialIssues from './Banner/SocialIssues.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssues
    },
    computed: {
       accompanyingCourse() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue
new file mode 100644
index 000000000..489fed0e5
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue
@@ -0,0 +1,16 @@
+<template>
+  <span class="badge badge-secondary">{{ issue.text }}</span>
+</template>
+
+<script>
+export default {
+   name: "SocialIssues",
+   props: ['issue']
+}
+</script>
+
+<style lang="scss">
+span.badge {
+   margin-right: 1em;
+}
+</style>