Merge branch '_multiselect_store' into 139_demandeur

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 './Banner/ToggleFlags';
+import SocialIssues from './Banner/SocialIssues.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssues
    },
    computed: {
       accompanyingCourse() {

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>

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,67 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
-import { getSocialIssues } from '../api'
+import VueMultiselect from 'vue-multiselect';
+import { getSocialIssues } from '../api';
+import { mapState } from 'vuex';
 
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
-   data () {
+   data() {
       return {
-         selected: null,
          options: []
       }
    },
    computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+      }),
    },
    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.options = elements.results;
             resolve();
          })).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 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 };
+      }
    }
 }
 </script>