add in first ability to edit an event; lots of code cleanup

stormseed · Jun 6, 2018 · d79ea7c · d79ea7c
1 parent 24ebccf
commit d79ea7c
Show file tree

Hide file tree

Showing 14 changed files with 366 additions and 310 deletions.
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -117,6 +117,7 @@
 <script>
   import CalendarMixin from './mixins/CalendarMixin'
   import CalendarEventMixin from './mixins/CalendarEventMixin'
+  import CalendarParentComponentMixin from './mixins/CalendarParentComponentMixin'
   import CalendarEvent from './CalendarEvent'
   import CalendarMonth from './CalendarMonth'
   import CalendarMultiDay from './CalendarMultiDay'
@@ -126,7 +127,6 @@
   import CalendarDayLabels from './CalendarDayLabels'
   import CalendarHeaderNav from './CalendarHeaderNav'
   import {
-    date,
     QBtn,
     QTooltip,
     QTabs,
@@ -135,38 +135,10 @@
     QScrollArea
   } from 'quasar'
   import QuantityBubble from './QuantityBubble'
-  const { DateTime } = require('luxon')
   export default {
     name: 'Calendar',
+    mixins: [CalendarParentComponentMixin, CalendarMixin, CalendarEventMixin],
     props: {
-      startDate: {
-        type: [Object, Date],
-        default: () => { return new Date() }
-      },
-      eventArray: {
-        type: Array,
-        default: () => []
-      },
-      eventRef: {
-        type: String,
-        default: 'cal-' + Math.random().toString(36).substring(2, 15)
-      },
-      preventEventDetail: {
-        type: Boolean,
-        default: false
-      },
-      calendarLocale: {
-        type: String,
-        default: () => { return DateTime.local().locale }
-      },
-      calendarTimezone: {
-        type: String,
-        default: () => { return DateTime.local().zoneName }
-      },
-      sundayFirstDayOfWeek: {
-        type: Boolean,
-        default: false
-      },
       tabLabels: {
         type: Object,
         default: () => {
@@ -197,7 +169,6 @@
       QTabPane,
       QScrollArea
     },
-    mixins: [CalendarMixin, CalendarEventMixin],
     data () {
       return {
         dayCellHeight: 5,
@@ -223,6 +194,10 @@
           this.eventRef + ':moveToSingleDay',
           this.switchToSingleDay
         )
+        this.$root.$on(
+          'update-event-' + this.eventRef,
+          this.handleEventUpdate
+        )
       },
       calPackageMoveTimePeriod: function (params) {
         this.moveTimePeriod(params)

diff --git a/src/components/calendar/CalendarAgenda.vue b/src/components/calendar/CalendarAgenda.vue
@@ -130,6 +130,7 @@
       ref="defaultEventDetail"
       v-if="!preventEventDetail"
       :event-object="eventDetailEventObject"
+      :event-ref="eventRef"
     />
 
   </div>
@@ -138,6 +139,7 @@
 <script>
   import CalendarMixin from './mixins/CalendarMixin'
   import CalendarEventMixin from './mixins/CalendarEventMixin'
+  import CalendarParentComponentMixin from './mixins/CalendarParentComponentMixin'
   import CalendarAgendaEvent from './CalendarAgendaEvent'
   import CalendarEventDetail from './CalendarEventDetail'
   import CalendarHeaderNav from './CalendarHeaderNav'
@@ -149,7 +151,6 @@
     QInfiniteScroll,
     QSpinnerDots
   } from 'quasar'
-  const { DateTime } = require('luxon')
   export default {
     name: 'CalendarAgenda',
     components: {
@@ -162,18 +163,12 @@
       QInfiniteScroll,
       QSpinnerDots
     },
-    mixins: [CalendarMixin, CalendarEventMixin],
+    mixins: [CalendarParentComponentMixin, CalendarMixin, CalendarEventMixin],
     props: {
       agendaStyle: {
         type: String,
         default: 'dot'
       },
-      startDate: {
-        type: [Object, Date],
-        default: () => {
-          return new Date()
-        }
-      },
       numDays: {
         type: Number,
         default: 7
@@ -182,40 +177,11 @@
         type: String,
         default: '4rem'
       },
-      eventArray: {
-        type: Array,
-        default: () => []
-      },
-      parsedEvents: {
-        type: Object,
-        default: () => {
-        }
-      },
-      eventRef: {
-        type: String,
-        default: 'calendar'
-      },
-      preventEventDetail: {
-        type: Boolean,
-        default: false
-      },
       scrollHeight: {
         type: String,
         default: '200px'
       },
-      fullComponentRef: String,
-      calendarLocale: {
-        type: String,
-        default: () => {
-          return DateTime.local().locale
-        }
-      },
-      calendarTimezone: {
-        type: String,
-        default: () => {
-          return DateTime.local().zoneName
-        }
-      }
+      fullComponentRef: String
     },
     data () {
       return {
@@ -247,9 +213,6 @@
         this.localNumDays += this.numJumpDays
         done()
       },
-      // handleStartChange: function (val, oldVal) {
-      //   this.doUpdate()
-      // },
       doUpdate: function () {
         this.mountSetDate()
       },
@@ -263,7 +226,6 @@
         }
       },
       handleNavMove: function (params) {
-        console.debug('agenda handleNavMove called')
         this.moveTimePeriod(params)
         this.$emit(
           this.eventRef + ':navMovePeriod',
@@ -272,7 +234,6 @@
             amount: params.amount
           }
         )
-        // this.generateCalendarCellArray()
       },
       handleDayClick: function (dateObject) {
         if (this.fullComponentRef) {
@@ -292,6 +253,10 @@
         'click-event-' + this.eventRef,
         this.handleEventDetailEvent
       )
+      this.$root.$on(
+        'update-event-' + this.eventRef,
+        this.handleEventUpdate
+      )
     },
     watch: {
       startDate: 'handleStartChange',

diff --git a/src/components/calendar/CalendarAgendaEvent.vue b/src/components/calendar/CalendarAgendaEvent.vue
@@ -106,7 +106,6 @@
           'items-center': true,
           'justify-start': true,
           'cursor-pointer': true,
-          // 'all-pointer-events': true,
           'calendar-agenda-event': true,
           'calendar-agenda-event-dot-style': true,
           'calendar-agenda-event-allday': this.eventObject.start.isAllDay,
@@ -118,8 +117,7 @@
           {
             'calendar-agenda-event': true,
             'calendar-agenda-event-allday': this.eventObject.start.isAllDay,
-            'calendar-agenda-event-empty-slot': this.eventObject.start.isEmptySlot,
-            // 'cursor-pointer': true
+            'calendar-agenda-event-empty-slot': this.eventObject.start.isEmptySlot
           },
           this.eventObject
         )
@@ -143,7 +141,6 @@
         return returnString
       },
       handleClick: function (e) {
-        // console.debug('event clicked')
         this.$emit('click', this.eventObject)
         this.triggerEventClick(this.eventObject, this.eventRef)
       }

diff --git a/src/components/calendar/CalendarAllDayEvents.vue b/src/components/calendar/CalendarAllDayEvents.vue
@@ -28,8 +28,6 @@
   import CalendarMixin from './mixins/CalendarMixin'
   import CalendarEventMixin from './mixins/CalendarEventMixin'
   import CalendarEvent from './CalendarEvent'
-  // import { date } from 'quasar'
-  // const { DateTime } = require('luxon')
   export default {
     name: 'CalendarAllDayEvents',
     props: {
@@ -70,15 +68,11 @@
       }
     },
     methods: {
-      // handleStartChange: function (val, oldVal) {
-      //   this.doUpdate()
-      // },
       doUpdate: function () {
         this.mountSetDate()
       },
       addDaysToDate: function (thisDateObject, numDays) {
         return this.makeDT(thisDateObject).plus({ days: numDays })
-        // return date.addToDate(thisDateObject, { days: numDays })
       }
     },
     mounted () {

diff --git a/src/components/calendar/CalendarDayColumn.vue b/src/components/calendar/CalendarDayColumn.vue
@@ -159,7 +159,7 @@
           top: (topMinuteCount * sizePerMinute) + this.dayCellHeightUnit,
           height: (heightMinuteCount * sizePerMinute) + this.dayCellHeightUnit
         }
-      },
+      }
     },
     mounted () {
       this.mountSetDate()

diff --git a/src/components/calendar/CalendarDayLabels.vue b/src/components/calendar/CalendarDayLabels.vue
@@ -28,7 +28,6 @@
 
 <script>
   import CalendarMixin from './mixins/CalendarMixin'
-  import { date } from 'quasar'
   const { DateTime } = require('luxon')
   export default {
     name: 'CalendarDayLabels',
@@ -87,20 +86,15 @@
         this.buildWeekDateArray(this.numberOfDays, this.sundayFirstDayOfWeek)
       },
       isCurrentDayLabel: function (thisDay, checkMonthOnly) {
-        // let now = new Date()
         let now = DateTime.local()
         thisDay = this.makeDT(thisDay)
-        // console.debug('isCurrentDayLabel called', thisDayNum, date.getDayOfWeek(now))
         if (checkMonthOnly === true) {
           return (
-            // date.getDayOfWeek(now) === date.getDayOfWeek(thisDay) &&
             now.weekday === thisDay.weekday &&
-            // now.getMonth() === thisDay.getMonth()
             now.month === thisDay.month
           )
         }
         else {
-          // return (date.isSameDate(now, thisDay, 'day'))
           return now.hasSame(thisDay, 'day')
         }
       },

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
@@ -87,7 +87,7 @@
         }
       },
       getEventClass: function () {
-        let returnVal = this.addCssColorClasses(
+        return this.addCssColorClasses(
           {
             'calendar-event': true,
             'calendar-event-month': this.monthStyle,
@@ -101,7 +101,6 @@
           },
           this.eventObject
         )
-        return returnVal
       },
       isEmptySlot: function () {
         return this.eventObject.start.isEmptySlot
@@ -147,13 +146,6 @@
         return false
       },
       formatTime: function (startTime) {
-        // let returnString = ''
-        // returnString += date.formatDate(startTime, 'h')
-        // if (startTime.getMinutes() > 0) {
-        //   returnString += ':' + date.formatDate(startTime, 'mm')
-        // }
-        // returnString += date.formatDate(startTime, 'a').slice(0, 1)
-        // return returnString
         let returnString = this.makeDT(startTime).toLocaleString(DateTime.TIME_SIMPLE)
         // simplify if AM / PM present
         if (returnString.includes('M')) {