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

<template>
<div class="vue-component">
   <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>

   <div>

      <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>

      <label class="col-form-label" for="selectReferrer">
         {{ $t('referrer.label') }}
      </label>

      <VueMultiselect
         name="selectReferrer"
         label="text"
         track-by="id"
         :multiple="false"
         :searchable="true"
         :placeholder="$t('referrer.placeholder')"
         v-model="value"
         :options="users"
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
         @select="updateReferrer">
      </VueMultiselect>

      <template v-if="filteredReferrersSuggested.length > 0">
         <ul class="list-suggest add-items inline">
            <li v-for="(u, i) in filteredReferrersSuggested" @click="updateReferrer(u)" :key="`referrer-${i}`">
               <span>
                  <user-render-box-badge :user="u"></user-render-box-badge>
               </span>
            </li>
        </ul>
      </template>
   </div>

   <div>
      <ul class="record_actions">
         <li>
            <button
               class="btn btn-create"
               type="button"
               name="button"
               @click="assignMe">
               {{ $t('referrer.assign_me') }}
            </button>
         </li>
      </ul>
   </div>

   <div v-if="!isJobValid" class="alert alert-warning to-confirm">
      {{ $t('job.not_valid') }}
   </div>

</div>
</template>

<script>
import VueMultiselect from 'vue-multiselect';
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
import { mapState, mapGetters } from 'vuex';
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";

export default {
   name: "Referrer",
   components: {
     UserRenderBoxBadge,
     VueMultiselect,
   },
   data() {
      return {
         jobs: []
      }
   },
   computed: {
      ...mapState({
         value: state => state.accompanyingCourse.user,
         valueJob: state => state.accompanyingCourse.job,
         users: state => state.users.filter(u => {
            if (u.user_job && state.accompanyingCourse.job) {
                return u.user_job.id === state.accompanyingCourse.job.id;
            } else {
               return false;
            }
         }),
         filteredReferrersSuggested: state => state.filteredReferrersSuggested,
      }),
      ...mapGetters([
         'isJobValid'
      ])
   },
   mounted() {
      this.getJobs();
   },
   methods: {
      updateReferrer(value) {
         this.$store.dispatch('updateReferrer', 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'})
               }
            });
      },
      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) {
         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)
            .then(response => {
               this.$store.dispatch('updateReferrer', response);
               return response;
            })
            .catch((error) => {
               commit('catchError', error);
               this.$toast.open({message: error.body})
            })
      }
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>