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

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

    <div class="my-4">
      <!--label for="field">{{ $t('social_issue.label') }}</label
        -->
      <VueMultiselect
        name="field"
        :close-on-select="true"
        :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"
      />
    </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 { fetchResults } 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() {
      fetchResults(`/api/1.0/person/social-work/social-issue.json`).then(
        (response) => {
          this.options = response;
        },
      );
    },
    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>