improve and clean socialIssues

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); 

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;
 }

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>

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) {