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>