From 28a45992c6309dd8fc4eeec2b7cdd819381f6729 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 19 May 2021 16:01:56 +0200
Subject: [PATCH] first vue multiselect implementation

---
 .../components/SocialIssue.vue                | 27 +++++++++++++++++++
 .../vuejs/AccompanyingCourse/js/i18n.js       |  1 +
 2 files changed, 28 insertions(+)

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 e66594b53..73698c722 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -1,11 +1,38 @@
 <template>
   <div class="vue-component">
      <h3>{{ $t('social_issue.title') }}</h3>
+     
+     <div>
+        <label for="selectIssues">{{ $t('social_issue.label') }}</label>
+        <VueMultiselect
+            name="selectIssues"
+            v-model="selected"
+            :multiple="true"
+            :options="options">
+        </VueMultiselect>
+     </div>
+     
   </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect'
+
 export default {
    name: "SocialIssue",
+   components: { VueMultiselect },
+   data () {
+      return {
+         selected: null,
+         options: ['list', 'of', 'options']
+      }
+   }
 }
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="scss" scoped>
+   div.vue-component > div {
+      margin: 3em;
+   }
+</style>
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 603d79a72..0580e369f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -52,6 +52,7 @@ const appMessages = {
       },
       social_issue: {
          title: "Problématiques sociales",
+         label: "Choisir les problématiques sociales",
       },
       referrer: {
          title: "Référent",