calendar app: set mainUser and options for form

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

@@ -1,8 +1,34 @@
 <template>
+  <div class="row">
+    <div class="col-md-4">
+      <label>Utilisateur principal</label>
+    </div>
+    <div class="col-md-8 align-content-end">
+      <pick-entity
+        :multiple="false"
+        :types="['user']"
+        :uniqid="'main_user_calendar'"
+        :picked="[this.$store.getters.getMainUser]"
+        :removableIfSet="false"
+        @addNewEntity="setMainUser"
+      ></pick-entity>
+    </div>
+  </div>
+  <div class="row">
+    <select v-model="this.slotDuration">
+      <option value="00:05:00">5</option>
+      <option value="00:10:00">10</option>
+      <option value="00:15:00">15</option>
+      <option value="00:30:00">30</option>
+    </select>
+  </div>
+  <div>
+    <input type="checkbox" v-model="this.hideWeekEnds" /><label>Masquer les week-ends</label>
+  </div>
   <concerned-groups></concerned-groups>
     <div>
-      <template v-for="uid in this.$store.state.currentView.users.keys()" :key="uid">
-        <calendar-active :user="this.$store.getters.getUserDataById(uid).user" ></calendar-active>
+      <template v-for="u in getActiveUsers" :key="u.id">
+        <calendar-active :user="u" ></calendar-active>
       </template>
     </div>
     <teleport to="#fullCalendar">
@@ -28,7 +54,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import CalendarActive from './Components/CalendarActive';
-// import listPlugin from '@fullcalendar/list';
+import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
+import {mapGetters} from "vuex";
 
 export default {
   name: "App",
@@ -37,44 +64,25 @@ export default {
     Location,
     FullCalendar,
     CalendarActive,
+    PickEntity,
   },
   data() {
     return {
       errorMsg: [],
-      /*
-      users: {
-        loaded: [],
-        selected: [],
-        logged: null
-      },
-      calendarEvents: {
-         loaded: [],
-         selected: [],
-         user: [],
-         current: {
-            events: [{
-                title: 'plage prévue',
-                start: window.startDate,
-                end: window.endDate
-            }],
-            id: window.mainUser,
-            color: '#bbbbbb'
-          }
-      },*/
-      selectedEvent: null,
-      previousSelectedEvent: null,
-      previousSelectedEventColor: null,
       showMyCalendar: false,
+      slotDuration: '00:10:00',
+      hideWeekEnds: true,
     }
   },
   computed: {
+    ...mapGetters(['getMainUser']),
     events() {
       return this.$store.getters.getEventSources;
     },
     calendarOptions() {
       return {
         locale: frLocale,
-        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, dayGridPlugin],
         initialView: 'timeGridWeek',
         initialDate: this.$store.getters.initialDate,
         eventSources: this.events,
@@ -85,29 +93,57 @@ export default {
         eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
-        weekends: false,
+        weekends: !this.hideWeekEnds,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
-          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
-        }
+          right: 'dayGridMonth,timeGridWeek,dayGridThreeDays,timeGridDay',
+        },
+        views: {
+          timeGrid: {
+            slotEventOverlap: false,
+            slotDuration: this.slotDuration,
+            scrollTime: '10:00:00',
+          },
+          dayGridThreeDays: {
+            type: 'dayGridWeek',
+            duration: { days: 3},
+            buttonText: this.$t('list_three_days'),
+          },
+        },
       };
     },
     getActiveUsers() {
-      return this.$store.state.currentView.users.keys()
-        .filter(id => this.$store.getters.hasUserDataById(id))
-        .map(id => this.$store.getters.getUserDataById().user);
+      const users = [];
+      for (const id of this.$store.state.currentView.users.keys()) {
+        users.push(this.$store.getters.getUserDataById(id).user);
+      }
+      return users;
     }
   },
   methods: {
-    init() {
-      //this.updateEventsSource();
+    setMainUser(user) {
+      console.log('setMainUser APP', user);
+
+      if (user.id !== this.$store.getters.getMainUser && (
+          this.$store.state.activity.calendarRange !== null
+          || this.$store.state.activity.startDate !== null
+          || this.$store.state.activity.endDate !== null
+        )
+      ) {
+        if (!window.confirm(this.$t('change_main_user_will_reset_event_data'))) {
+          return;
+        }
+      }
+
+      this.$store.dispatch('setMainUser', user);
+      this.$store.commit('showUserOnCalendar', {user, ranges: true, remotes: true});
     },
-    toggleMyCalendar(value) {
-      this.showMyCalendar = value;
-    },
-    toggleWeekends: function () {
-      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+    removeMainUser(user) {
+      console.log('removeMainUser APP', user);
+
+      window.alert(this.$t('main_user_is_mandatory'));
+      return;
     },
     onDatesSet(event) {
       console.log('onDatesSet', event);
@@ -143,7 +179,7 @@ export default {
 
       // show an alert if changing mainUser
       if (this.$store.getters.getMainUser !== null
-        && payload.event.extendedProps.userId !== this.$store.getMainUser.id) {
+        && payload.event.extendedProps.userId !== this.$store.getters.getMainUser.id) {
         if (!window.confirm(this.$t('this_calendar_range_will_change_main_user'))) {
           return;
         }