rdv: add fr locale to fullcalendar + colorise users calendars

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

@@ -17,10 +17,12 @@
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
 import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
 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 listPlugin from '@fullcalendar/list';
 
 const currentEvent = {
    events: [{
@@ -52,7 +54,8 @@ export default {
          current: currentEvent
       },
       calendarOptions: {
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
+        locale: frLocale,
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
         initialView: 'timeGridWeek',
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
         eventSources: window.startDate !== undefined ? [currentEvent] : [],

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

@@ -1,9 +1,9 @@
 import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
-import { calendarEventMessages } from '../_components/CalendarEvent/js/i18n'
 import { calendarUserSelectorMessages } from '../_components/CalendarUserSelector/js/i18n';
 
 const appMessages = {
    fr: {
+      choose_your_date: "Sélectionnez votre plage",
       activity: {
          add_persons: "Ajouter des personnes concernées",
          bloc_persons: "Usagers",
@@ -16,7 +16,6 @@ const appMessages = {
 }
 
 Object.assign(appMessages.fr, personMessages.fr);
-Object.assign(appMessages.fr, calendarEventMessages.fr);
 Object.assign(appMessages.fr, calendarUserSelectorMessages.fr);
 
 export {

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

@@ -15,6 +15,7 @@
         :model-value="value"
         @select="selectUsers"
         @remove="unSelectUsers"
+        @close="coloriseSelectedValues"
         :options="options">
     </VueMultiselect>
   </div>
@@ -25,7 +26,20 @@ import { fetchCalendarRanges } from './js/api'
 import VueMultiselect from 'vue-multiselect';
 import { whoami } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api';
 
-const COLORS = ['red', 'green', 'yellow', 'blue', 'orange', 'white', 'grey'];
+const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  '#8dd3c7',
+  '#ffffb3',
+  '#bebada',
+  '#fb8072',
+  '#80b1d3',
+  '#fdb462',
+  '#b3de69',
+  '#fccde5',
+  '#d9d9d9',
+  '#bc80bd',
+  '#ccebc5',
+  '#ffed6f'
+];
 
 export default {
   name: 'CalendarUserSelector',
@@ -50,10 +64,12 @@ export default {
 
           results.forEach(i => {
             if (!(users.some(j => i.user.id === j.id))){
+              let ratio = Math.floor(users.length / COLORS.length);
+              let colorIndex = users.length - ratio * COLORS.length;
               users.push({
                 id: i.user.id,
                 username: i.user.username,
-                color: COLORS[users.length] //TODO manage case where indice is larger than COLORS; Do something recursive with a max. value
+                color: COLORS[colorIndex]
               })
             }
           });
@@ -73,20 +89,18 @@ export default {
             })
           })
 
-          console.log(users)
           this.users.loaded = users;
           this.options = users;
 
-          console.log(calendarEvents)
           this.calendarEvents.loaded = calendarEvents;
           whoami().then(me => new Promise((resolve, reject) => {
             let currentUser = users.find(u => u.id === me.id);
             this.value = currentUser;
             this.selectUsers(currentUser);
+
             resolve();
           }));
 
-
           resolve()
       }))
       .catch((error) => {
@@ -96,12 +110,30 @@ export default {
     transName(value) {
       return `${value.username}`;
     },
+    coloriseSelectedValues() { //TODO cette function doit être exécutée au bon moment, après sélection (normalement avec @input)
+      let tags = document.querySelectorAll('div.multiselect__tags-wrap')[0];
+
+      if (tags.hasChildNodes()) {
+        let children = tags.childNodes;
+        for (let i = 0; i < children.length; i++) {
+          let child = children[i];
+          if (child.nodeType === Node.ELEMENT_NODE) {
+            this.users.selected.forEach(u => {
+              if (child.firstChild.innerText == u.username) {
+                child.style.background = u.color;
+              }
+            })
+          }
+        }
+      }
+    },
     selectEvents() {
       let selectedUsersId = this.users.selected.map(a => a.id);
       this.calendarEvents.selected = this.calendarEvents.loaded.filter(a => selectedUsersId.includes(a.id));
     },
     selectUsers(value) {
       this.users.selected.push(value);
+      this.coloriseSelectedValues();
       this.selectEvents();
       this.updateEventsSource();
     },