finalization of my calendar ranges

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

@@ -4,18 +4,19 @@
          @close="showModal = false">
 
     <template v-slot:header>
-      <div>boum!</div>
+      <h3>{{ 'Modifier le lieu' }}</h3>
     </template>
 
     <template v-slot:body>
+      <div>
+
+      </div>
       <label>Localisation</label>
-      <vue-multiselect v-model="pickedLocation" :options="locations" :label="'name'" :track-by="'id'"></vue-multiselect>
+      <vue-multiselect v-model="location" :options="locations" :label="'name'" :track-by="'id'"></vue-multiselect>
     </template>
 
     <template v-slot:footer>
-      <ul class="record_actions">
-        <li>close</li>
-      </ul>
+      <button class="btn btn-save" @click="saveAndClose">{{ 'Enregistrer' }}</button>
     </template>
 
     </modal>
@@ -41,17 +42,6 @@ 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;
@@ -62,6 +52,13 @@ const startEdit = function(event: EventApi): void {
   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;})
+}
+
 defineExpose({startEdit});
 
 </script>