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

<template>
  <component :is="Teleport" to="body">
    <modal v-if="showModal"
         @close="closeModal">

    <template v-slot:header>
      <h3>{{ 'Modifier le lieu' }}</h3>
    </template>

    <template v-slot:body>
      <div>

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

    <template v-slot:footer>
      <button class="btn btn-save" @click="saveAndClose">{{ 'Enregistrer' }}</button>
    </template>

    </modal>
  </component>
</template>

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

// see https://github.com/vuejs/core/issues/2855
import {
  Teleport as teleport_,
  TeleportProps,
  VNodeProps
} from 'vue'

const Teleport = teleport_ as {
  new (): {
    $props: VNodeProps & TeleportProps
  }
}


const store = useStore(key);

const calendarRangeId = ref<number | null>(null);
const location = ref<Location | null>(null);
const showModal = ref(false);
//const tele = ref<InstanceType<typeof Teleport> | null>(null);

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

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;
}

const saveAndClose = function(e: Event): void {
  console.log('saveEditAndClose', e);

  store.dispatch('calendarRanges/patchRangeLocation', {location: location.value, calendarRangeId: calendarRangeId.value})
    .then(_ => {showModal.value = false;})
}

const closeModal = function(_: any): void {
  showModal.value = false;
}

defineExpose({startEdit});

</script>

<style scoped>

</style>