accompanying course: add selector for accompanying course job

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

@@ -15,13 +15,33 @@
          :searchable="true"
          :placeholder="$t('referrer.placeholder')"
          v-model="value"
-         v-bind:options="users"
+         :options="users"
          :select-label="$t('multiselect.select_label')"
          :deselect-label="$t('multiselect.deselect_label')"
          :selected-label="$t('multiselect.selected_label')"
          @select="updateReferrer">
       </VueMultiselect>
 
+      <label class="col-form-label" for="selectJob">
+         {{ $t('job.label') }}
+      </label>
+
+      <VueMultiselect
+         name="selectJob"
+         label="text"
+         :custom-label="customJobLabel"
+         track-by="id"
+         :multiple="false"
+         :searchable="true"
+         :placeholder="$t('job.placeholder')"
+         v-model="valueJob"
+         :options="jobs"
+         :select-label="$t('multiselect.select_label')"
+         :deselect-label="$t('multiselect.deselect_label')"
+         :selected-label="$t('multiselect.selected_label')"
+         @select="updateJob">
+      </VueMultiselect>
+
       <template v-if="referrersSuggested.length > 0">
          <ul class="list-suggest add-items inline">
             <li v-for="(u, i) in referrersSuggested" @click="updateReferrer(u)" :key="`referrer-${i}`">
@@ -62,9 +82,15 @@ export default {
      UserRenderBoxBadge,
      VueMultiselect,
    },
+   data() {
+      return {
+         jobs: []
+      }
+   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.user,
+         valueJob: state => state.accompanyingCourse.job,
          users: state => state.users,
          referrersSuggested: state => {
            return state.referrersSuggested.filter(u => {
@@ -76,6 +102,11 @@ export default {
          },
       }),
    },
+   mounted() {
+      this.getJobs();
+      console.log(this.users)
+      console.log(this.jobs)
+   },
    methods: {
       updateReferrer(value) {
          //console.log('value', value);
@@ -88,6 +119,30 @@ export default {
                }
             });
       },
+      getJobs() {
+         const url = '/api/1.0/main/user-job.json';
+         makeFetch('GET', url)
+            .then(response => {
+               this.jobs  = response.results;
+            })
+            .catch((error) => {
+               this.$toast.open({message: error.txt})
+            })
+      },
+      updateJob(value) {
+         console.log(value)
+         this.$store.dispatch('updateJob', value)
+            .catch(({name, violations}) => {
+               if (name === 'ValidationException' || name === 'AccessException') {
+                  violations.forEach((violation) => this.$toast.open({message: violation}));
+               } else {
+                  this.$toast.open({message: 'An error occurred'})
+               }
+            });
+      },
+      customJobLabel(value) {
+          return value.label.fr;
+      },
       assignMe() {
          const url = `/api/1.0/main/whoami.json`;
          makeFetch('GET', url)