display of calendar form

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

@@ -1,17 +1,20 @@
 <template>
 
   <teleport to="#mainUser">
-    <div class="row">
-      <div class="col-md-4">
-        <label>Utilisateur principal</label>
-      </div>
-      <div class="col-md-8 align-content-end">
+
+    <h2 class="chill-red">Utilisateur principal</h2>
+    <div>
+      <div>
+        <div v-if="null !== this.$store.getters.getMainUser">
+          <calendar-active :user="this.$store.getters.getMainUser" ></calendar-active>
+        </div>
         <pick-entity
           :multiple="false"
           :types="['user']"
           :uniqid="'main_user_calendar'"
           :picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
           :removableIfSet="false"
+          :displayPicked="false"
           @addNewEntity="setMainUser"
         ></pick-entity>
       </div>
@@ -20,27 +23,40 @@
 
   <concerned-groups></concerned-groups>
 
+  <teleport to="#schedule">
+    <div class="row mb-3" v-if="activity.startDate !== null">
+      <label class="col-form-label col-sm-4">Date</label>
+      <div class="col-sm-8">
+        {{ $d(activity.startDate, 'long') }} - {{ $d(activity.endDate, 'hoursOnly') }}
+        <span v-if="activity.calendarRange === null">(Pas de plage de disponibilité sélectionnée)</span>
+        <span v-else>(Une plage de disponibilité sélectionnée)</span>
+      </div>
+    </div>
+  </teleport>
+
   <location></location>
 
+
+
     <teleport to="#fullCalendar">
-      <div>
+      <div class="calendar-actives">
         <template class="" v-for="u in getActiveUsers" :key="u.id">
           <calendar-active :user="u" ></calendar-active>
         </template>
       </div>
-      <div class="row justify-content-between">
-        <div class="col-sm-4 col-xs-12">
+      <div class="display-options row justify-content-between">
+        <div class="col-sm 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">
-              <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>
+              <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>
           </div>
         </div>
-        <div class="col-sm-4 col-xs-12">
+        <div class="col-sm col-xs-12">
           <div class="float-end">
             <div class="input-group mb-3">
               <div class="input-group-text">
@@ -210,3 +226,14 @@ export default {
 }
 </script>
 
+<style>
+.calendar-actives {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.display-options {
+  margin-top: 1rem;
+}
+</style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :style="style" style="display: inline-block;">
+  <div :style="style" class="calendar-active">
     <span class="badge-user">{{ user.text }}</span>
       <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
-        <label class="form-check-label" for="flexSwitchCheckDefault">Disponibilité</label>
+        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
       </span>
       <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
-        <label class="form-check-label" for="flexSwitchCheckDefault">Agenda</label>
+        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
       </span>
   </div>
 </template>
@@ -45,6 +45,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
+.calendar-active {
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.5rem;
+
+  border-radius: 0.5rem;
+
+  & > .badge-user {
+    margin-right: 0.5rem;
+  }
+}
 </style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js

@@ -62,8 +62,6 @@ export default {
       const userData = state.usersData.get(userId);
 
       if (kinds.ranges && userData.calendarRanges.length > 0) {
-        console.log('first range', userData.calendarRanges[0]);
-        console.log('state activity', state.activity);
         const s = {
           id: `ranges_${userId}`,
           events: userData.calendarRanges.filter(r => state.activity.calendarRange === null || r.calendarRangeId !== state.activity.calendarRange.calendarRangeId),
@@ -92,7 +90,6 @@ export default {
     return sources;
   },
   getInitialDate(state) {
-    console.log('initialDate', state.activity.startDate);
     return state.activity.startDate;
   },
   /**

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js

@@ -47,8 +47,6 @@ const store = createStore({
     actions,
 });
 
-console.log('calendar event', store.state.activity);
-
 whoami().then(me => {
     store.commit('setWhoAmiI', me);
 });
@@ -61,4 +59,6 @@ for (let u of store.state.activity.users) {
   store.commit('showUserOnCalendar', {ranges: false, remotes: false, user: u});
 }
 
+console.log('store', store);
+
 export default store;

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js

@@ -53,7 +53,7 @@ const createUserData = (user, colorIndex) => {
 const calendarRangeToFullCalendarEvent = (entity) => {
   return {
     id: `range_${entity.id}`,
-    title: "",
+    title: "(" + entity.user.text + ")",
     start: entity.startDate.datetime8601,
     end: entity.endDate.datetime8601,
     allDay: false,