rdv: init vue component for calendar range editing + refactor vue calendar code

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

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template v-slot:eventContent='arg'>
+        <b>{{ arg.timeText }}</b>
+        <i>&nbsp;{{ arg.event.title }}</i>
+      </template>
+    </FullCalendar>
+  </div>
+</template>
+
+<script>
+import '@fullcalendar/core/vdom'; // solves problem with Vite
+import frLocale from '@fullcalendar/core/locales/fr';
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import { fetchCalendar } from '../_api/api';
+
+export default {
+  name: "App",
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      errorMsg: [],
+      userId: window.userId,
+      showMyCalendar: true,
+      calendarEvents: {
+         user: [],
+      },
+      calendarOptions: {
+        locale: frLocale,
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
+        initialView: 'timeGridWeek',
+        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
+        eventSource: [],
+        selectable: true,
+        select: this.onDateSelect,
+        eventChange: this.onEventChange,
+        eventClick: this.onEventClick,
+        selectMirror: true,
+        editable: true,
+        weekends: false,
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,timeGridWeek,timeGridDay'
+        },
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.fetchData()
+    },
+    fetchData() {
+      console.log(this.userId);
+      fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
+        let results = calendar.results;
+        let events = results.map(i => 
+          ({
+            start: i.startDate.datetime,
+            end: i.endDate.datetime,
+          })
+        );
+        let calendarEventsCurrentUser = {
+            events: events,
+            color: 'darkblue',
+            id: 1000,
+            editable: false
+        };
+        this.calendarEvents.user = calendarEventsCurrentUser;
+        this.updateEventsSource()
+        resolve();
+      }));
+    },
+    updateEventsSource() {
+      this.calendarOptions.eventSources = [];
+      if (this.showMyCalendar) {
+          this.calendarOptions.eventSources.push(this.calendarEvents.user);
+      }
+    },
+    toggleMyCalendar(value) {
+      this.showMyCalendar = value;
+    },
+    toggleWeekends: function() {
+      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+    },
+    onDateSelect(payload) {
+      console.log(payload)
+    },
+    onEventChange(payload) {
+      //this.$store.dispatch('updateEvent', payload);
+    },
+    onEventClick(payload) {
+    },
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
+

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js

@@ -0,0 +1,8 @@
+const appMessages = {
+   fr: {
+   }
+}
+
+export {
+   appMessages
+};

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './i18n'
+//import store from './store'
+
+import App from './App.vue';
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+//.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#myCalendar');

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue

@@ -31,7 +31,7 @@
 </template>
 <script>
 
-import { fetchCalendarRanges, fetchCalendar } from './js/api'
+import { fetchCalendarRanges, fetchCalendar } from '../../_api/api'
 import VueMultiselect from 'vue-multiselect';
 import { whoami } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api';
 

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

@@ -8,12 +8,17 @@
     {% set accompanying_course_id = accompanyingCourse.id %}
 {% endif %}
 
-{% if user %}
+{% if context == 'user' %}
     <h2>{{ 'My calendar list' |trans }}</h2>
 {% else %}
     <h2>{{ 'Calendar list' |trans }}</h2>
 {% endif %}
 
+{% if context == 'user' %}
+    <div id="myCalendar"></div>
+{% endif %}
+
+
 {% if calendarItems|length == 0 %}
     <p class="chill-no-data-statement">
         {{ "There is no calendar items."|trans }}

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

@@ -7,3 +7,16 @@
 {% block content %}
     {% include 'ChillCalendarBundle:Calendar:list.html.twig' with {'context': 'user'} %}
 {% endblock %}
+ 
+{% block js %}
+    {{ parent() }}
+    <script type="text/javascript">
+        window.userId = {{ user.id }};
+    </script>
+    {{ encore_entry_script_tags('vue_mycalendarrange') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_calendar') }}
+{% endblock %}

src/Bundle/ChillCalendarBundle/chill.webpack.config.js

@@ -6,5 +6,6 @@ module.exports = function(encore, entries) {
     });
 
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
+    encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index.js');
     encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
 };