referrer component

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -32,7 +32,7 @@ export default {
       PersonsAssociated, 
       Requestor,
       SocialIssue,
-      //Referrer,  //fait foirer socialissues
+      Referrer,
       Resources,
       Comment,
       Confirm,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -1,11 +1,77 @@
 <template>
   <div class="vue-component">
      <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
+     
+     <div class="my-4">
+        <label for="" class="">
+           {{ $t('referrer.label') }}
+        </label>
+        
+        <VueMultiselect
+           track-by="id"
+           label="text"
+           :multiple="false"
+           :searchable="true"
+           :placeholder="$t('referrer.placeholder')"
+           @update:model-value="updateReferrer"
+           :model-value="value"
+           :options="options">
+        </VueMultiselect>
+        
+        <ul class="record_actions">
+           <li>
+             <button 
+                class="sc-button bt-create" 
+                type="button" 
+                name="button"
+                @click="assignMe">
+                {{ $t('referrer.assign_me') }}
+             </button>
+           </li>
+        </ul>
+        
+     </div>
   </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
+//import { getUsers } from '../api';
+import { mapState } from 'vuex';
+
 export default {
    name: "Referrer",
+   components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
+   computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.user,
+      }),
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         //getUsers().then(response => new Promise((resolve, reject) => {
+         //   console.log(response);
+         //   resolve();
+         //})).catch(er => this.$store.commit('catchError'), error));
+      },
+      updateReferrer(value) {
+         //this.$store.dispatch('updateReferrer', this.transformValue(value));
+      },
+      transformValue(value) {
+         let payload = value;
+         return { payload, body, method };
+      },
+      assignMe() {
+         console.log('assign me');
+      }
+   }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -47,9 +47,9 @@ export default {
    },
    methods: {
       getOptions() {
-         getSocialIssues().then(elements => new Promise((resolve, reject) => {
+         getSocialIssues().then(response => new Promise((resolve, reject) => {
-            console.log('get socialIssues', elements.results);
+            console.log('get socialIssues', response.results);
-            this.options = elements.results;
+            this.options = response.results;
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -60,8 +60,8 @@ const appMessages = {
       referrer: {
          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",
+         assign_me: "M'assigner comme référent",
       },
       resources: {
          title: "Interlocuteurs privilégiés",