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>