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

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

     <div class="my-4">
        <!--label for="field">{{ $t('social_issue.label') }}</label
        -->
        <VueMultiselect
           name="field"
           :close-on-select="false"
           :allow-empty="true"
           :show-labels="false"
           track-by="id"
           label="text"
           :multiple="true"
           :searchable="true"
           :placeholder="$t('social_issue.label')"
           @update:model-value="updateSocialIssues"
           :model-value="value"
           :options="options">
        </VueMultiselect>
     </div>

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

  </div>
</template>

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

export default {
   name: "SocialIssue",
   components: { VueMultiselect },
   data() {
      return {
         options: []
      }
   },
   computed: {
      ...mapState({
         value: state => state.accompanyingCourse.socialIssues,
      }),
      ...mapGetters([
         'isSocialIssueValid'
      ])
   },
   mounted() {
      this.getOptions();
   },
   methods: {
      getOptions() {
         const url = `/api/1.0/person/social-work/social-issue.json`;
         makeFetch('GET', url)
            .then(response => {
               this.options = response.results;
               return response;
            })
            .catch((error) => {
               commit('catchError', error);
               this.$toast.open({message: error.txt})
            })
      },
      updateSocialIssues(value) {
         this.$store.dispatch('updateSocialIssues', this.transformValue(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'})
               }
            });
      },
      transformValue(updated) {
         let stored = this.value;
         let added = updated.filter(x => stored.indexOf(x) === -1).shift();
         let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';
         let changed = (typeof removed === 'undefined') ? added : removed;
         let body = { type: "social_issue", id: changed.id };
         let payload = updated;
         return { payload, body, method };
      }
   }
}
</script>

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

<style lang="scss">
@import 'ChillMainAssets/module/bootstrap/shared';
@import 'ChillPersonAssets/chill/scss/mixins';
@import 'ChillMainAssets/chill/scss/chill_variables';
div#accompanying-course {
   span.multiselect__tag {
      @include badge_social($social-issue-color);
      background: $chill-l-gray;
      color: $dark;
   }
   span.multiselect__option--highlight {
      &::after {
         background: $green;
      }
      &.multiselect__option--selected {
         &::after {
            background: $red;
         }
      }
   }
}
</style>