finalization of my calendar ranges

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="row">
     <div class="col-sm">
-      <label>Localisation</label>
-      <vue-multiselect v-model="pickedLocation" :options="locations" :label="'name'" :track-by="'id'"></vue-multiselect>
+      <label class="form-label">Lieu des plages de disponibilités créées</label>
+      <vue-multiselect
+        v-model="pickedLocation"
+        :options="locations"
+        :label="'name'"
+        :track-by="'id'"
+        :selectLabel="'Presser \'Entrée\' pour choisir'"
+        :selectedLabel="'Choisir'"
+        :deselectLabel="'Presser \'Entrée\' pour enlever'"
+        :placeholder="'Choisir'"
+      ></vue-multiselect>
     </div>
   </div>
-  <div class="display-options row justify-content-between">
+  <div class="display-options row justify-content-between" style="margin-top: 1rem;">
     <div class="col-sm col-xs-12">
       <div class="input-group mb-3">
         <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
@@ -51,9 +60,11 @@
     </div>
     <div class="col-sm col-xs-12">
       <div class="float-end">
-        <div class="form-check form-switch">
-          <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="showWeekends">
-          <label for="showHideWE" class="form-check-label">Week-ends</label>
+        <div class="form-check input-group">
+          <span class="input-group-text">
+            <input id="showHideWE" class="mt-0" type="checkbox" v-model="showWeekends">
+          </span>
+          <label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
         </div>
       </div>
     </div>
@@ -72,18 +83,26 @@
   </FullCalendar>
 
   <div id="copy-widget">
-    <h4 class="chill-red" style="margin-top: 2rem;">{{ $t('copy_range_from_to') }}</h4>
-    <div style="display: flex; margin-top: 1rem;">
-      <div class="col-sm-3" style="margin-right: 1rem">
-        <input class="form-control" type="date" v-model="copyFrom" />
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-sm-4 col-xs-12">
+          <h6 class="chill-red">{{ $t('copy_range_from_to') }}</h6>
+        </div>
+        <div class="col-sm-3 col-xs-12">
+          <input class="form-control" type="date" v-model="copyFrom" />
+        </div>
+        <div class="col-sm-1 col-xs-12" style="text-align: center; font-size: x-large;">
+          <i class="fa fa-angle-double-right"></i>
+        </div>
+        <div class="col-sm-3 col-xs-12" >
+          <input class="form-control" type="date" v-model="copyTo" />
+        </div>
+        <div class="col-sm-1">
+          <button class="btn btn-action" @click="copyDay">
+            {{ $t('copy_range') }}
+          </button>
+        </div>
       </div>
-      <i class="fa fa-angle-double-right" style="font-size: 2rem; margin-right: 1rem"></i>
-      <div class="col-sm-3" style="margin-right: 1rem">
-        <input class="form-control" type="date" v-model="copyTo" />
-      </div>
-      <button class="btn btn-action" @click="copyDay">
-        {{ $t('copy_range') }}
-      </button>
     </div>
   </div>
 
@@ -108,17 +127,20 @@ import frLocale from '@fullcalendar/core/locales/fr';
 import interactionPlugin, {DropArg, EventResizeDoneArg} from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import {EventApi, DateSelectArg, EventDropArg, EventClickArg} from "@fullcalendar/core";
-import {ISOToDate, ISOToDatetime} from "../../../../../ChillMainBundle/Resources/public/chill/js/date";
+import {ISOToDate} from "../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import VueMultiselect from "vue-multiselect";
 import {Location} from "../../../../../ChillMainBundle/Resources/public/types";
 import EditLocation from "./Components/EditLocation.vue";
+import {useI18n} from "vue-i18n";
 
 const store = useStore(key);
 
+const {t} = useI18n();
+
 const showWeekends = ref(false);
-const slotDuration = ref('00:15:00');
-const slotMinTime = ref('08:00:00');
-const slotMaxTime = ref('19:00:00');
+const slotDuration = ref('00:05:00');
+const slotMinTime = ref('09:00:00');
+const slotMaxTime = ref('18:00:00');
 const copyFrom = ref<string | null>(null);
 const copyTo = ref<string | null>(null);
 const editLocation = ref<InstanceType<typeof EditLocation> | null>(null)
@@ -271,5 +293,11 @@ function copyDay() {
 </script>
 
 <style scoped>
-
+#copy-widget {
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 9999999999;
+  padding: 0.25rem 0 0.25rem;
+}
 </style>

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>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts

@@ -4,9 +4,10 @@ import { appMessages } from './i18n'
 import futureStore, {key} from './store/index'
 
 import App2 from './App2.vue';
+import {useI18n} from "vue-i18n";
 
 futureStore().then((store) => {
-  const i18n = _createI18n(appMessages);
+  const i18n = _createI18n(appMessages, true);
 
   const app = createApp({
     template: `<app></app>`,

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts

@@ -241,8 +241,9 @@ export default <Module<CalendarRangesState, State>>{
         start.setFullYear(to.getFullYear(), to.getMonth(), to.getDate())
         let end = new Date(<Date>ISOToDatetime(r.end));
         end.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
+        let location = ctx.rootGetters['locations/getLocationById'](r.locationId);
 
-        promises.push(ctx.dispatch('createRange', {start, end}));
+        promises.push(ctx.dispatch('createRange', {start, end, location}));
       }
 
       return Promise.all(promises).then(_ => Promise.resolve(null));

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig

@@ -10,7 +10,7 @@
 <div id="myCalendar"></div>
 
 {% endblock %}
- 
+
 {% block js %}
     {{ parent() }}
     <script type="text/javascript">
@@ -21,6 +21,5 @@
 
 {% block css %}
     {{ parent() }}
-    {{ encore_entry_link_tags('vue_calendar') }}
-    {{ encore_entry_link_tags('page_calendar') }}
+    {{ encore_entry_link_tags('vue_mycalendarrange') }}
 {% endblock %}

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts

@@ -55,9 +55,10 @@ const messages = {
    }
 };
 
-const _createI18n = (appMessages: any) => {
+const _createI18n = (appMessages: any, legacy?: boolean) => {
    Object.assign(messages.fr, appMessages.fr);
    return createI18n({
+      legacy: typeof legacy === undefined ? true : legacy,
       locale: 'fr',
       fallbackLocale: 'fr',
       // @ts-ignore