edit location on existing ranges

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

@@ -0,0 +1,71 @@
+<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>