calendar app: set mainUser and options for form

2025-08-24 00:23:50 +00:00 · 2022-05-24 22:45:43 +02:00
parent 352b5b41b0
commit eb8b8c6939
10 changed files with 149 additions and 73 deletions
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/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;
        }
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
@@ -13,8 +13,11 @@ const appMessages = {
      bloc_thirdparty: "Tiers professionnels",
      bloc_users: "T(M)S",
    },
-    this_calendar_range_will_change_main_user: "Cette plage de disponibilité n'est pas celle de l'utilisateur principal. Si vous continuez, l'utilisateur principal sera adapté. Êtes-vous sur·e ?",
+    this_calendar_range_will_change_main_user: "Cette plage de disponibilité n'est pas celle de l'utilisateur principal. Si vous continuez, l'utilisateur principal sera adapté. Êtes-vous sûr·e ?",
    will_change_main_user_for_me: "Vous ne pouvez pas écrire dans le calendrier d'un autre utilisateur. Voulez-vous être l'utilisateur principal de ce rendez-vous ?",
+    main_user_is_mandatory: "L'utilisateur principal est requis. Vous pouvez le modifier, mais pas le supprimer",
+    change_main_user_will_reset_event_data: "Modifier l'utilisateur principal nécessite de choisir une autre plage de disponibilité ou un autre horaire. Ces informations seront perdues. Êtes-vous sûr·e de vouloir continuer ?",
+    list_three_days: 'Liste 3 jours',
  }
 }

--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js
@@ -135,9 +135,9 @@ export default {
  setEventTimes({commit, state, getters}, {start, end}) {
    console.log('### action createEvent', {start, end});
    let startDateInput = document.getElementById("chill_activitybundle_activity_startDate");
-    startDateInput.value = datetimeToISO(start);
+    startDateInput.value = null !== start ? datetimeToISO(start) : '';
    let endDateInput = document.getElementById("chill_activitybundle_activity_endDate");
-    endDateInput.value = datetimeToISO(end);
+    endDateInput.value = null !== end ? datetimeToISO(end) : '';
    let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange");
    calendarRangeInput.value = "";

@@ -152,31 +152,40 @@ export default {
  associateCalendarToRange({state, commit, dispatch}, {range}) {
    console.log('### action associateCAlendarToRange', range);
    let startDateInput = document.getElementById("chill_activitybundle_activity_startDate");
-    startDateInput.value = datetimeToISO(range.start);
+    startDateInput.value = null !== range ? datetimeToISO(range.start) : "";
    let endDateInput = document.getElementById("chill_activitybundle_activity_endDate");
-    endDateInput.value = datetimeToISO(range.end);
+    endDateInput.value = null !== range ? datetimeToISO(range.end) : "";
    let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange");
-    calendarRangeInput.value = Number(range.extendedProps.calendarRangeId);
+    calendarRangeInput.value = null !== range ? Number(range.extendedProps.calendarRangeId) : "";

-    const userId = range.extendedProps.userId;
-    if (state.activity.mainUser !== null && state.activity.mainUser.id !== userId) {
-      dispatch('setMainUser', state.usersData.get(userId).user);
+    if (null !== range) {
+      const userId = range.extendedProps.userId;
+      if (state.activity.mainUser !== null && state.activity.mainUser.id !== userId) {
+        dispatch('setMainUser', state.usersData.get(userId).user);

-      // TODO: remove persons involved with this user
+        // TODO: remove persons involved with this user
+      }
    }

    commit('associateCalendarToRange', {range});
    return Promise.resolve();
  },
-  setMainUser({commit}, mainUser) {
+  setMainUser({commit, dispatch, state}, mainUser) {
    console.log('setMainUser', mainUser);
-    let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser");
-    mainUserInput.value = Number(mainUser.id);
+    if (state.activity.mainUser.id !== mainUser.id) {
+      let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser");
+      mainUserInput.value = Number(mainUser.id);

-    commit('setMainUser', mainUser);
+      if (state.activity.calendarRange !== null || state.activity.startDate !== null || state.acdtivity.endDate !== null) {
+        dispatch('associateCalendarToRange', { range: null });
+      }
+
+      commit('setMainUser', mainUser);
+    }
+
+    return Promise.resolve();
  },

-
  // Location
  updateLocation({commit}, value) {
    console.log('### action: updateLocation', value);
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js
@@ -48,6 +48,16 @@ export default {
   * @param range
   */
  associateCalendarToRange(state, {range}) {
+    console.log('associateCalendarToRange', range);
+
+    if (null === range) {
+      state.activity.calendarRange = null;
+      state.activity.startDate = null;
+      state.activity.endDate = null;
+
+      return;
+    }
+
    console.log('userId', range.extendedProps.userId);

    const r = state.usersData.get(range.extendedProps.userId).calendarRanges
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
@@ -67,6 +67,7 @@ const calendarRangeToFullCalendarEvent = (entity) => {
 }

 const remoteToFullCalendarEvent = (entity) => {
+  console.log(entity);
  return {
    id: `range_${entity.id}`,
    title: entity.title,