chill-bundles/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

<template>
    <teleport to="#location">
        <div class="mb-3 row">
            <label :class="locationClassList">
                {{ trans(ACTIVITY_LOCATION) }}
            </label>
            <div class="col-sm-8">
                <VueMultiselect
                    name="selectLocation"
                    id="selectLocation"
                    label="name"
                    track-by="id"
                    open-direction="top"
                    :multiple="false"
                    :searchable="true"
                    :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
                    :custom-label="customLabel"
                    :select-label="trans(MULTISELECT_SELECT_LABEL)"
                    :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
                    :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
                    :options="availableLocations"
                    group-values="locations"
                    group-label="locationGroup"
                    v-model="location"
                />
                <new-location v-bind:available-locations="availableLocations" />
            </div>
        </div>
    </teleport>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import VueMultiselect from "vue-multiselect";
import NewLocation from "./Location/NewLocation.vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import {
    trans,
    ACTIVITY_LOCATION,
    ACTIVITY_CHOOSE_LOCATION,
    MULTISELECT_SELECT_LABEL,
    MULTISELECT_DESELECT_LABEL,
    MULTISELECT_SELECTED_LABEL,
} from "translator";

export default {
    name: "Location",
    components: {
        NewLocation,
        VueMultiselect,
    },
    setup() {
        return {
            trans,
            ACTIVITY_LOCATION,
            ACTIVITY_CHOOSE_LOCATION,
            MULTISELECT_SELECT_LABEL,
            MULTISELECT_DESELECT_LABEL,
            MULTISELECT_SELECTED_LABEL,
        };
    },
    data() {
        return {
            locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
        };
    },
    computed: {
        ...mapState(["activity", "availableLocations"]),
        ...mapGetters(["suggestedEntities"]),
        location: {
            get() {
                return this.activity.location;
            },
            set(value) {
                this.$store.dispatch("updateLocation", value);
            },
        },
    },
    methods: {
        labelAccompanyingCourseLocation(value) {
            return `${value.address.text} (${localizeString(value.locationType.title)})`;
        },
        customLabel(value) {
            return value.locationType
                ? value.name
                    ? value.name === "__AccompanyingCourseLocation__"
                        ? this.labelAccompanyingCourseLocation(value)
                        : `${value.name} (${localizeString(value.locationType.title)})`
                    : localizeString(value.locationType.title)
                : "";
        },
    },
};
</script>