From 098a2ea6205b85f34988f101a663e93cf73235b1 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 20 May 2021 18:42:40 +0200
Subject: [PATCH 01/12] improve AccompanyingCourse ux design

---
 .../Resources/public/scss/chillmain.scss      | 13 ++-
 .../public/vuejs/AccompanyingCourse/App.vue   | 88 ++++++++++---------
 .../AccompanyingCourse/components/Banner.vue  |  8 +-
 .../AccompanyingCourse/components/Comment.vue | 22 +++--
 4 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 6cf4d23f2..6aa0e1c8d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -13,9 +13,9 @@
 div#header-accompanying_course-name {
   background: none repeat scroll 0 0 #718596;
   color: #FFF;
-  padding-top: 1em;
-  padding-bottom: 1em;
-
+  h1 {
+    margin: 0.4em 0;       
+  }
   span {
     a {
       color: white;
@@ -54,3 +54,10 @@ div.subheader {
    color: grey;
    margin-right: 1em;
 }
+
+table {
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 7f9b66326..e14c9d7d7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -44,51 +44,53 @@ export default {
 </script>
 
 <style lang="scss">
-   h1 {
-      margin: 1.5em 0;
-   }
-   div.vue-component {
-      h2 {
-         margin-left: 0.7em;
-         position: relative;
-         &:before {
-            position: absolute;
-            content: "\f192";
-            font-family: "ForkAwesome";
-            color: #718596ab;
-            left: -28px;
-            top: 4px;
+   div#accompanying-course {
+      h1 {
+         margin: 1.5em 0;
+      }
+      div.vue-component {
+         h2 {
+            margin-left: 0.7em;
+            position: relative;
+            &:before {
+               position: absolute;
+               content: "\f192";
+               font-family: "ForkAwesome";
+               color: #718596ab;
+               left: -28px;
+               top: 4px;
+            }
+            a[name^="section"] {
+               position: absolute;
+               top: -2em;
+            }
          }
-         a[name^="section"] {
+         padding: 0.8em 0em;
+         margin: 2em 0;
+         border: 1px dotted #718596ab; 
+         border-radius: 5px;
+         border-left: 1px dotted #718596ab;
+         border-right: 1px dotted #718596ab;
+         /*
+         position: relative; 
+         &:before { 
+            content: "vuejs component";
             position: absolute;
-            top: -2em;
+            left: 1.5em;
+            top: -0.9em;
+            background-color: white;
+            color: grey;
+            padding: 0 0.3em;
+         }
+         */
+         dd { 
+            margin-left: 1em; 
+         }
+         & > div {
+            margin: 1em 3em 0;
+         }
+         table {
          }
       }
-      padding: 0.8em 0em;
-      margin: 2em 0;
-      border: 1px dotted #718596ab; 
-      border-radius: 5px;
-      border-left: 1px dotted #718596ab;
-      border-right: 1px dotted #718596ab;
-      /*
-      position: relative; 
-      &:before { 
-         content: "vuejs component";
-         position: absolute;
-         left: 1.5em;
-         top: -0.9em;
-         background-color: white;
-         color: grey;
-         padding: 0 0.3em;
-      }
-      */
-      dd { 
-         margin-left: 1em; 
-      }
-      & > div {
-         margin: 1em 3em 0;
-      }
-      table {
-      }
-   }
+}
 </style>
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 1a85e4bb7..e81ac647a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -20,9 +20,11 @@
    
    <teleport to="#header-accompanying_course-name #banner-status">
       <div v-if="accompanyingCourse.step === 'DRAFT'">
-         <span class="badge badge-secondary">
-            {{ $t('course.step.draft') }}
-         </span>
+         <a href="#bottom">
+            <span class="badge badge-secondary">
+               {{ $t('course.step.draft') }}
+            </span>
+         </a>
       </div>
       <div v-else>
          <div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index c3e83a548..835d245d8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -8,17 +8,19 @@
       </div-->
       
       <div>
-         <div v-if="initialComment">
-            créé par {{ initialComment.creator.text }}
-            le {{ $d(initialComment.createdAt.datetime, 'long') }}
-            <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
-               modifié par {{ initialComment.updatedBy.text }}
-               le {{ $d(initialComment.updatedAt.datetime, 'long') }}
-            </div>
-         </div>
-         
          <form @submit.prevent="submitform">
+            
             <label for="content">{{ $t('comment.label') }}</label>
+            
+            <div v-if="initialComment">
+               créé par {{ initialComment.creator.text }}
+               le {{ $d(initialComment.createdAt.datetime, 'long') }}
+               <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
+                  modifié par {{ initialComment.updatedBy.text }}
+                  le {{ $d(initialComment.updatedAt.datetime, 'long') }}
+               </div>
+            </div>
+            
             <textarea 
                name="content" 
                v-bind:placeholder="$t('comment.content')"
@@ -27,6 +29,7 @@
                ckeditor="ckeditor"
                v-model="content">
             </textarea>
+            
             <ul class="record_actions">
                <li>
                   <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
@@ -38,6 +41,7 @@
                   </a>
                </li>
             </ul>
+            
          </form>
       </div>
       

From a88acd34fdcb9308f8abbbc8ea18eb986d722116 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 11:41:36 +0200
Subject: [PATCH 02/12] design and translations

---
 .../Resources/public/vuejs/AccompanyingCourse/App.vue  | 10 ++++++++--
 .../vuejs/AccompanyingCourse/components/Comment.vue    | 10 ++++------
 .../vuejs/AccompanyingCourse/components/Requestor.vue  |  5 ++++-
 .../public/vuejs/AccompanyingCourse/js/i18n.js         |  9 +++++++--
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index e14c9d7d7..a10c5b4ca 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -54,10 +54,16 @@ export default {
             position: relative;
             &:before {
                position: absolute;
-               content: "\f192";
+               /*
+               content: "\f192";  //circle-dot
+               content: "\f1dd";  //paragraph
+               content: "\f292";  //hashtag
+               content: "\f069";  //asterisk
+               */
+               content: "\f142";  //ellipsis-v
                font-family: "ForkAwesome";
                color: #718596ab;
-               left: -28px;
+               left: -22px;
                top: 4px;
             }
             a[name^="section"] {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index 835d245d8..858d6d04e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -13,12 +13,10 @@
             <label for="content">{{ $t('comment.label') }}</label>
             
             <div v-if="initialComment">
-               créé par {{ initialComment.creator.text }}
-               le {{ $d(initialComment.createdAt.datetime, 'long') }}
-               <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
-                  modifié par {{ initialComment.updatedBy.text }}
-                  le {{ $d(initialComment.updatedAt.datetime, 'long') }}
-               </div>
+               {{ $t('comment.created_by', [
+                  initialComment.creator.text, 
+                  $d(initialComment.createdAt.datetime, 'long')
+               ]) }}
             </div>
             
             <textarea 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 6a2c6d5cc..c6783677a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -53,7 +53,10 @@
             </button>
          </li>
       </ul>
-   </div>   
+   </div> 
+   <div v-else>
+      <label>{{ $t('requestor.counter') }}</label>
+   </div>  
    
    <div>
       <add-persons v-if="accompanyingCourse.requestor === null"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 93de282db..3b9040c3d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -39,6 +39,7 @@ const appMessages = {
          title: "Demandeur",
          add_requestor: "Ajouter un demandeur",
          is_anonymous: "Le demandeur est anonyme",
+         counter: "Il n'y a pas encore de demandeur",
          type: "Type",
          person_id: "id",
          text: "Dénomination",
@@ -57,7 +58,10 @@ const appMessages = {
          label: "Choisir les problématiques sociales",
       },
       referrer: {
-         title: "Référent",
+         title: "Référent du parcours",
+         label: "Vous pouvez choisir un TMS ou vous assigner directement comme référent",
+         assign_me: "M'assigner comme référent",
+         placeholder: "Choisir un TMS",
       },
       resources: {
          title: "Interlocuteurs privilégiés",
@@ -69,7 +73,8 @@ const appMessages = {
       comment: {
          title: "Observations",
          label: "Ajout d'une note",
-         content: "Rédigez une première note..."
+         content: "Rédigez une première note...",
+         created_by: "créé par {0}, le {1}" 
       },
       confirm: {
          title: "Confirmation",

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 03/12] 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 04/12] 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 05/12] 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 06/12] 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 07/12] 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 08/12] 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 5f74c5297a2e10ba77c413b5105f7d3a35d99ca0 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 18:57:04 +0200
Subject: [PATCH 09/12] move subcomponents in subfolder

---
 .../public/vuejs/AccompanyingCourse/components/Banner.vue       | 2 +-
 .../AccompanyingCourse/components/{ => Banner}/ToggleFlags.vue  | 0
 .../vuejs/AccompanyingCourse/components/PersonsAssociated.vue   | 2 +-
 .../components/{ => PersonsAssociated}/PersonItem.vue           | 0
 .../public/vuejs/AccompanyingCourse/components/Resources.vue    | 2 +-
 .../components/{ => Resources}/ResourceItem.vue                 | 0
 6 files changed, 3 insertions(+), 3 deletions(-)
 rename src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/{ => Banner}/ToggleFlags.vue (100%)
 rename src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/{ => PersonsAssociated}/PersonItem.vue (100%)
 rename src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/{ => Resources}/ResourceItem.vue (100%)

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..ce64fca10 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import ToggleFlags from './ToggleFlags';
+import ToggleFlags from './Banner/ToggleFlags';
 
 export default {
    name: 'Banner',
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 9c31c7ef5..7c61b066c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -43,7 +43,7 @@
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonItem.vue"
+import PersonItem from "./PersonsAssociated/PersonItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonItem.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index d69c3d0ea..596da7483 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -42,7 +42,7 @@
 <script>
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import ResourceItem from './ResourceItem.vue';
+import ResourceItem from './Resources/ResourceItem.vue';
 
 export default {
    name: 'Resources',
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ResourceItem.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

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 10/12] 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 11/12] 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>

From b403569b163c08aca928ab991e5c41b254b772fd Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 19:47:39 +0200
Subject: [PATCH 12/12] improve and clean socialIssues

---
 .../public/vuejs/AccompanyingCourse/api.js    |  2 +-
 .../components/Banner/SocialIssues.vue        |  2 +-
 .../components/SocialIssue.vue                | 37 +++++--------------
 .../vuejs/AccompanyingCourse/store/index.js   |  2 +-
 4 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index d2f102e10..70b2ba56e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -147,7 +147,7 @@ const postResource = (id, payload, method) => {
 };
 
 /*
-*
+* Endpoint to Add/remove SocialIssue
 */
 const postSocialIssue = (id, body, method) => {
    //console.log('api body and method', body, method); 
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
index 489fed0e5..b637908c1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue
@@ -9,7 +9,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 span.badge {
    margin-right: 1em;
 }
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 af283d55e..1d12ed4bb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -3,10 +3,10 @@
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
      <div class="my-4">
-        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label
-        name="selectIssues"
+        <!--label for="field">{{ $t('social_issue.label') }}</label
         -->
         <VueMultiselect
+           name="field"
            :close-on-select="false"
            :allow-empty="true" 
            :show-labels="false" 
@@ -17,8 +17,7 @@
            :placeholder="$t('social_issue.label')"
            @update:model-value="updateSocialIssues"
            :model-value="value"
-           :options="options"
-           >
+           :options="options">
         </VueMultiselect>
      </div>
      
@@ -55,35 +54,17 @@ export default {
          })).catch(error => this.$store.commit('catchError', error));        
       },
       updateSocialIssues(value) {
-         console.log('@@@ CHANGED value');
          this.$store.dispatch('updateSocialIssues', this.transformValue(value));
       },
       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 method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';         
          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);
-         
+         //console.log('body', body);
+         console.log('@@@ CHANGED', method, changed.text);
          let payload = updated;
          return { payload, body, method };
       }
@@ -92,8 +73,8 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style lang="scss" scoped>
-   div.vue-component > div {
-      //margin: 3em;
+<style lang="scss">
+   span.multiselect__tag {
+      background: #e2793d;
    }
 </style>
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 20baabc8d..4d6e15915 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -75,7 +75,7 @@ let initPromise = getAccompanyingCourse(id)
                state.accompanyingCourse.confidential = value;
             },
             postFirstComment(state, comment) {
-               console.log('### mutation: postFirstComment', comment);
+               //console.log('### mutation: postFirstComment', comment);
                state.accompanyingCourse.initialComment = comment;
             }, 
             updateSocialIssues(state, value) {