From d87c6305fdfdf0a276ea6c24855f8a46f4d8f397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Thu, 30 Jun 2022 18:36:02 +0200
Subject: [PATCH] improve some layout on create calendar

---
 .../Resources/public/types.ts                 |  1 +
 .../Resources/public/vuejs/Calendar/App.vue   | 74 +++++++++++++++----
 .../Resources/public/vuejs/Calendar/i18n.js   |  1 +
 .../public/vuejs/Calendar/store/getters.js    |  6 +-
 .../public/vuejs/Calendar/store/index.js      |  2 -
 .../public/vuejs/Calendar/store/utils.ts      |  3 +-
 .../public/vuejs/MyCalendarRange/App2.vue     |  6 +-
 .../ChillMainBundle/Resources/public/types.ts |  1 +
 8 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
index dcb239ea3..12cd6abbe 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
@@ -41,6 +41,7 @@ export interface CalendarRemote {
 export type EventInputCalendarRange = EventInput & {
   id: string,
   userId: number,
+  userLabel: string,
   calendarRangeId: number,
   locationId: number,
   locationName: string,
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index aac253737..bae963435 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -44,43 +44,77 @@
           <calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
         </template>
       </div>
-      <div class="display-options row justify-content-between">
-        <div class="col-sm col-xs-12">
+      <div class="display-options row justify-content-between" style="margin-top: 1rem;">
+        <div class="col-sm-9 col-xs-12">
           <div class="input-group mb-3">
             <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
-            <select v-model="this.slotDuration" id="slotDuration" class="form-select">
+            <select v-model="slotDuration" id="slotDuration" class="form-select">
               <option value="00:05:00">5 minutes</option>
               <option value="00:10:00">10 minutes</option>
               <option value="00:15:00">15 minutes</option>
               <option value="00:30:00">30 minutes</option>
             </select>
+            <label class="input-group-text" for="slotMinTime">De</label>
+            <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+              <option value="00:00:00">0h</option>
+              <option value="01:00:00">1h</option>
+              <option value="02:00:00">2h</option>
+              <option value="03:00:00">3h</option>
+              <option value="04:00:00">4h</option>
+              <option value="05:00:00">5h</option>
+              <option value="06:00:00">6h</option>
+              <option value="07:00:00">7h</option>
+              <option value="08:00:00">8h</option>
+              <option value="09:00:00">9h</option>
+              <option value="10:00:00">10h</option>
+              <option value="11:00:00">11h</option>
+              <option value="12:00:00">12h</option>
+            </select>
+            <label class="input-group-text" for="slotMaxTime">À</label>
+            <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+              <option value="12:00:00">12h</option>
+              <option value="13:00:00">13h</option>
+              <option value="14:00:00">14h</option>
+              <option value="15:00:00">15h</option>
+              <option value="16:00:00">16h</option>
+              <option value="17:00:00">17h</option>
+              <option value="18:00:00">18h</option>
+              <option value="19:00:00">19h</option>
+              <option value="20:00:00">20h</option>
+              <option value="21:00:00">21h</option>
+              <option value="22:00:00">22h</option>
+              <option value="23:00:00">23h</option>
+              <option value="23:59:59">24h</option>
+            </select>
           </div>
         </div>
-        <div class="col-sm col-xs-12">
+        <div class="col-sm-3 col-xs-12">
           <div class="float-end">
-            <div class="input-group mb-3">
-              <div class="input-group-text">
-                <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds">
-                <label for="showHideWE" class="form-check-label"> Masquer les week-ends</label>
-              </div>
+            <div class="form-check input-group">
+          <span class="input-group-text">
+            <input id="showHideWE" class="mt-0" type="checkbox" v-model="hideWeekends">
+          </span>
+              <label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
             </div>
           </div>
         </div>
       </div>
       <FullCalendar ref="fullCalendar" :options="calendarOptions">
         <template v-slot:eventContent='arg'>
-          <b>{{ arg.timeText }}</b>
-          <i>&nbsp;{{ arg.event.title }}</i>
+          <span>
+            <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
+            <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} - {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
+            <b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} - {{ $t('current_selected')}} </b>
+            <b v-else>{{ arg.timeText }} - {{ $t('current_selected')}} </b>
+          </span>
         </template>
       </FullCalendar>
     </teleport>
 </template>
 
 <script>
-//import {mapGetters} from 'vuex';
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
 import Location from 'ChillActivityAssets/vuejs/Activity/components/Location.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';
@@ -104,7 +138,9 @@ export default {
     return {
       errorMsg: [],
       showMyCalendar: false,
-      slotDuration: '00:10:00',
+      slotDuration: '00:05:00',
+      slotMinTime: '09:00:00',
+      slotMaxTime: '18:00:00',
       hideWeekEnds: true,
     }
   },
@@ -122,6 +158,9 @@ export default {
         initialDate: this.$store.getters.getInitialDate,
         eventSources: this.events,
         selectable: true,
+        slotMinTime: this.slotMinTime,
+        slotMaxTime: this.slotMaxTime,
+        scrollTimeReset: false,
         datesSet: this.onDatesSet,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
@@ -132,7 +171,7 @@ export default {
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
-          right: 'dayGridMonth,timeGridWeek,dayGridThreeDays,timeGridDay',
+          right: 'timeGridWeek,dayGridThreeDays,timeGridDay',
         },
         views: {
           timeGrid: {
@@ -237,4 +276,9 @@ export default {
 .display-options {
   margin-top: 1rem;
 }
+
+/* for events which are range */
+.fc-event.isrange {
+  border-width: 3px;
+}
 </style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
index af8b59d7f..502db50b2 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
@@ -18,6 +18,7 @@ const appMessages = {
     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',
+    current_selected: 'Rendez-vous fixé',
   }
 }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
index 8dfbbd32c..4214c7411 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
@@ -36,15 +36,14 @@ export default {
     if (state.activity.startDate !== null && state.activity.endDate !== null) {
       const s = {
         id: 'current',
-        backgroundColor: '#3788d8',
-        borderColor: '#3788d8',
-        textColor: '#ffffff',
         events: [
           {
             title: "Rendez-vous",
             start: state.activity.startDate,
             end: state.activity.endDate,
             allDay: false,
+            is: "current",
+            classNames: ['iscurrent'],
           }
         ],
         editable: state.activity.calendarRange === null,
@@ -66,6 +65,7 @@ export default {
           id: `ranges_${userId}`,
           events: userData.calendarRanges.filter(r => state.activity.calendarRange === null || r.calendarRangeId !== state.activity.calendarRange.calendarRangeId),
           color: userData.mainColor,
+          classNames: ['isrange'],
           backgroundColor: 'white',
           textColor: 'black',
           editable: false,
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
index 5fb6b1d6a..3eeea4985 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
@@ -59,6 +59,4 @@ for (let u of store.state.activity.users) {
   store.commit('showUserOnCalendar', {ranges: false, remotes: false, user: u});
 }
 
-console.log('store', store);
-
 export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
index db2d600dc..678d70926 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
@@ -63,7 +63,7 @@ export const createUserData = (user: User, colorIndex: number): UserData  => {
   }
 }
 
-// TODO move this function to a more global namespace, as it is in use in MyCalendarRange app
+// TODO move this function to a more global namespace, as it is also in use in MyCalendarRange app
 export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventInputCalendarRange => {
   return {
     id: `range_${entity.id}`,
@@ -72,6 +72,7 @@ export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventIn
     end: entity.endDate.datetime8601,
     allDay: false,
     userId: entity.user.id,
+    userLabel: entity.user.label,
     calendarRangeId: entity.id,
     locationId: entity.location.id,
     locationName: entity.location.name,
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index 50291f940..e89e3c176 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -15,7 +15,7 @@
     </div>
   </div>
   <div class="display-options row justify-content-between" style="margin-top: 1rem;">
-    <div class="col-sm col-xs-12">
+    <div class="col-sm-9 col-xs-12">
       <div class="input-group mb-3">
         <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
         <select v-model="slotDuration" id="slotDuration" class="form-select">
@@ -58,7 +58,7 @@
         </select>
       </div>
     </div>
-    <div class="col-sm col-xs-12">
+    <div class="col-sm-3 col-xs-12">
       <div class="float-end">
         <div class="form-check input-group">
           <span class="input-group-text">
@@ -167,7 +167,7 @@ const baseOptions = ref<CalendarOptions>({
   headerToolbar: {
     left: 'prev,next today',
     center: 'title',
-    right: 'timeGridWeek timeGridDay'
+    right: 'timeGridWeek,timeGridDay'
   },
 });
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/types.ts b/src/Bundle/ChillMainBundle/Resources/public/types.ts
index 7d61d0434..859edf2cc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -32,6 +32,7 @@ export interface User {
   text: string;
   email: string;
   user_job: Job;
+  label: string;
   // todo: mainCenter; mainJob; etc..
 }