vue accompanyingCourse, adding an origin sub-component

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

@@ -1,17 +1,37 @@
 <template>
    <div class="vue-component">
-     <h2><a name="section-05"></a>{{ $t('origin.title') }}</h2>
+      <h2><a name="section-05"></a>{{ $t('origin.title') }}</h2>
+     
+      <div class="my-4">
+         <label for="selectOrigin">
+            {{ $t('origin.label') }}
+         </label>
 
-     hop
+         <VueMultiselect
+            name="selectOrigin"
+            label="text"
+            vbind:custom-label="transText"
+            track-by="id"
+            v-bind:multiple="false"
+            v-bind:searchable="true"
+            v-bind:placeholder="$t('origin.placeholder')"
+            v-model="value"
+            v-bind:options="options"
+            @select="updateOrigin">
+         </VueMultiselect>
+
+      </div>
    </div>
 </template>
 
 <script>
-import { getOrigins } from '../api';
+import VueMultiselect from 'vue-multiselect';
+import { getListOrigins } from '../api';
 import { mapState } from 'vuex';
 
 export default {
    name: 'OriginDemand',
+   components: { VueMultiselect },
    data() {
       return {
          options: []
@@ -28,10 +48,25 @@ export default {
    methods: {
       getOptions() {
          console.log('loading origins list');
-      }
+         getListOrigins().then(response => new Promise((resolve, reject) => {
+            this.options = response.results;
+            resolve();
+         }));
+      },
+      updateOrigin(value) {
+         //console.log('value', value);
+         this.$store.dispatch('updateOrigin', value);
+      },
+      transText ({ text }) {
+         return text.fr //TODO multilang
+      },
    }
 }
 </script>
 
-<style lang="scss" scoped>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="css" scoped>
+   label {
+      display: none;
+   }
 </style>

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

@@ -3,7 +3,7 @@
    <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
 
    <div class="my-4">
-      <label for="" class="">
+      <label for="selectReferrer">
          {{ $t('referrer.label') }}
       </label>
 
@@ -77,3 +77,5 @@ export default {
    }
 }
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>

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

@@ -28,6 +28,8 @@ const appMessages = {
       },
       origin: {
          title: "Origine de la demande",
+         label: "Origine de la demande",
+         placeholder: "Renseignez l'origine de la demande",
       },
       persons_associated: {
          title: "Usagers concernés",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -81,6 +81,10 @@ let initPromise = getAccompanyingCourse(id)
             updateSocialIssues(state, value) {
                state.accompanyingCourse.socialIssues = value;
             },
+            updateOrigin(state, value) {
+               console.log('value', value);
+               state.accompanyingCourse.origin = value;
+            },
             updateReferrer(state, value) {
                console.log('value', value);
                state.accompanyingCourse.user = value;
@@ -191,6 +195,13 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
+            updateOrigin({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", origin: { id: payload.id, type: payload.type } })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('updateOrigin', course.origin);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
             updateReferrer({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", user: { id: payload.id, type: payload.type } })
                .then(course => new Promise((resolve, reject) => {