chill-bundles/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue

<template>
  <teleport to="body">
    <modal v-if="showModal"
         @close="showModal = false">

    <template v-slot:header>
      <div>boum!</div>
    </template>

    <template v-slot:body>
      <label>Localisation</label>
      <vue-multiselect v-model="pickedLocation" :options="locations" :label="'name'" :track-by="'id'"></vue-multiselect>
    </template>

    <template v-slot:footer>
      <ul class="record_actions">
        <li>close</li>
      </ul>
    </template>

    </modal>
  </teleport>
</template>

<script setup lang="ts">
import Modal from "../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Modal.vue";
import {computed, ref} from "vue";
import {EventApi} from "@fullcalendar/vue3";
import {useStore} from "vuex";
import {key} from "../store";
import {Location} from "../../../../../../ChillMainBundle/Resources/public/types";
import VueMultiselect from "vue-multiselect";

const store = useStore(key);

const calendarRangeId = ref<number | null>(null);
const location = ref<Location | null>(null);
const showModal = ref(false);

const locations = computed<Location[]>(() => {
  return store.state.locations.locations;
});

const pickedLocation = computed<Location | null>({
  get(): Location | null {
    return location.value;
  },
  set(newLocation: Location | null): void {
    console.log('newLocation', newLocation);
    store.dispatch('calendarRanges/patchRangeLocation', {location: newLocation, calendarRangeId: calendarRangeId.value})
      .then(_ => {showModal.value = false;})
  }
})

const startEdit = function(event: EventApi): void {
  console.log('startEditing', event);
  calendarRangeId.value = event.extendedProps.calendarRangeId;
  location.value = store.getters['locations/getLocationById'](event.extendedProps.locationId) || null;

  console.log('new location value', location.value);
  console.log('calendar range id', calendarRangeId.value);
  showModal.value = true;
}

defineExpose({startEdit});

</script>

<style scoped>

</style>