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

<template>
    <teleport to="#location">
        <div class="mb-3 row">
            <label class="col-form-label col-sm-4">
                {{ $t("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="$t('activity.choose_location')"
                    :custom-label="customLabel"
                    :options="locations"
                    v-model="location"
                >
                </VueMultiselect>

                <new-location v-bind:locations="locations"></new-location>
            </div>
        </div>
    </teleport>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import VueMultiselect from "vue-multiselect";
import NewLocation from "./Location/NewLocation.vue";
import { getLocations, getLocationTypesByDefaultFor } from "../api.js";

export default {
    name: "Location",
    components: {
        NewLocation,
        VueMultiselect,
    },
    data() {
        return {
            locations: [],
        };
    },
    computed: {
        ...mapState(["activity"]),
        ...mapGetters(["suggestedEntities"]),
        location: {
            get() {
                return this.activity.location;
            },
            set(value) {
                this.$store.dispatch("updateLocation", value);
            },
        },
    },
    mounted() {
        this.getAccompanyingPeriodLocation();
        getLocations().then(
            (response) =>
                new Promise((resolve) => {
                    getLocationTypesByDefaultFor('person').then(
                        t => {
                            const accPeriodLocation = this.activity.accompanyingPeriod.location;
                            const personLocation = {
                                type: 'location',
                                name: 'XXXXXX Domicile de l\'usager du parcours',
                                address: { id: accPeriodLocation.address_id }, //TODO is the id sufficient? 
                                locationType: t
                            }
                            this.locations = [
                                personLocation,
                                ...response.results,
                            ];
                            console.log(this.locations);
                            if (window.default_location_id) {
                                let location = this.locations.filter(
                                    (l) => l.id === window.default_location_id
                                );
                                this.$store.dispatch("updateLocation", location);
                            }
                            resolve();
                        }
                    )
         
                })
        );
    },
    methods: {
        customLabel(value) {
            return `${value.locationType.title.fr} ${
                value.name ? value.name : ""
            }`;
        },
        createConcernedPersonsLocation() {
            let entities = this.suggestedEntities;
            return []; // TODO WIP
        },
    },
};
</script>