From 5dc430ed31d7aaa4534b9e982795534acaa5c2f3 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 22:00:24 +0200
Subject: [PATCH] rdv: various UI improvements on my calendar

---
 .../public/vuejs/MyCalendarRange/App.vue      | 64 +++++++++++--------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 214b8d941..118ac51e8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -14,7 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-          <b>{{ arg.timeText }}</b>
+          <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
+          <b v-else-if="!arg.event.extendedProps.myCalendar && arg.event.extendedProps.toDelete" style="text-decoration: line-through red" >{{ arg.timeText }}</b>
+          <b v-else >{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
           <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
@@ -23,24 +25,31 @@
       </template>
     </FullCalendar>
     <div>
-      <button class="btn btn-save" :disabled="!dirty"
-        @click.prevent="onClickSave">
-        {{ $t('action.save')}}
-      </button>
-      <span v-if="flag.loading" class="loading">
-        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-        <span class="sr-only">{{ $t('loading') }}</span>
-      </span>
+      <ul class="record_actions">
+        <li>
+          <button class="btn btn-save" :disabled="!dirty"
+            @click.prevent="onClickSave">
+            {{ $t('action.save')}}
+          </button>
+          <span v-if="flag.loading" class="loading">
+            <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+            <span class="sr-only">{{ $t('loading') }}</span>
+          </span>
+        </li>
+        <li>
+          <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
+            {{ $t('copy_range_to_next_day')}}
+          </button>
+          <button v-else class="btn btn-action"
+            @click.prevent="copyDay">
+            {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
+          </button>
+        </li>
+      </ul>
     </div>
     <div>
-      <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
-        {{ $t('copy_range_to_next_day')}}
-      </button>
-      <button v-if="!disableCopyDayButton" class="btn btn-action" 
-        @click.prevent="copyDay">
-        {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
-      </button>
       <p>{{ $t('copy_range_how_to')}}</p>
+
     </div>
 
     <div>
@@ -77,7 +86,7 @@
       @close="modal.showModal = false">
 
         <template v-slot:header>
-          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+          <h2 class="modal-title">{{ this.renderEventDate() }}</h2>
         </template>
 
         <template v-slot:body>
@@ -165,7 +174,7 @@ export default {
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
         eventClick: this.onEventClick,
-        selectMirror: true,
+        selectMirror: false,
         editable: true,
         weekends: false,
         headerToolbar: {
@@ -226,7 +235,7 @@ export default {
             start: i.startDate.datetime,
             end: i.endDate.datetime,
             calendarRangeId: i.id,
-            toDelete: 0
+            toDelete: false
           })
         );
         let calendarRangeEvents = {
@@ -307,10 +316,6 @@ export default {
       this.$store.dispatch('updateRange', payload);
     },
     onEventClick(payload) {
-      console.log(payload)
-      console.log(payload.event)
-      console.log(payload.event.extendedProps)
-
       if (payload.event.extendedProps.myCalendar) {
         this.myCalendarClickedEvent = {
           id: payload.event.extendedProps.calendarId,
@@ -369,12 +374,12 @@ export default {
     },
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        if (payload.extendedProps.toDelete === 1) {
-          payload.setExtendedProp('toDelete', 0)
+        if (payload.extendedProps.toDelete) {
+          payload.setExtendedProp('toDelete', false)
           payload.setProp('borderColor', '#79bafc');
           this.$store.dispatch('removeFromDeleteRange', payload);
         } else {
-          payload.setExtendedProp('toDelete', 1)
+          payload.setExtendedProp('toDelete', true)
           payload.setProp('borderColor', '#dddddd');
           this.$store.dispatch('deleteRange', payload);
         }
@@ -448,6 +453,13 @@ export default {
       } else {
         console.log('no new events to copy-paste!')
       }
+    },
+    renderEventDate() {
+      let start = this.myCalendarClickedEvent.start;
+      let end = this.myCalendarClickedEvent.end;
+      return start.getDate() === end.getDate() ?
+          `${start.toLocaleDateString()}, ${start.toLocaleTimeString()} - ${end.toLocaleTimeString()}` :
+          `${start.toLocaleString()} - ${end.toLocaleString()}`;
     }
   },
   mounted() {