mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
72 lines
2.3 KiB
Vue
72 lines
2.3 KiB
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"
|
|
:select-label="$t('multiselect.select_label')"
|
|
:deselect-label="$t('multiselect.deselect_label')"
|
|
:selected-label="$t('multiselect.selected_label')"
|
|
:options="availableLocations"
|
|
group-values="locations"
|
|
group-label="locationGroup"
|
|
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";
|
|
|
|
export default {
|
|
name: "Location",
|
|
components: {
|
|
NewLocation,
|
|
VueMultiselect,
|
|
},
|
|
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} (${value.locationType.title.fr})`
|
|
},
|
|
customLabel(value) {
|
|
return value.locationType
|
|
? value.name
|
|
? value.name === '__AccompanyingCourseLocation__'
|
|
? this.labelAccompanyingCourseLocation(value)
|
|
: `${value.name} (${value.locationType.title.fr})`
|
|
: value.locationType.title.fr
|
|
: '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|