update to quasar 0.16 and ensure compatibility; cleanup and add watch…

…es for changes to the eventsArray and startDate to hopefully better catch page refreshes; add function to get a string version of an event ID which should allow for IDs that are not integers; remove the "blankCalendarEvent" variables in favor of just checking to see if an eventObject is empty; make sure empty array and object properties are defined by a function (thank you @dreglad)
stormseed · May 24, 2018 · 38d9f89 · 38d9f89
1 parent 2ea4384
commit 38d9f89
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -1,48 +1,48 @@
 {
-    "name": "quasar-calendar",
-    "version": "0.2.2",
-    "description": "A full display calendar for the Quasar vue.js framework",
-    "keywords": [
-        "vue",
-        "quasar",
-        "quasar-framework",
-        "calendar"
-    ],
-    "bugs": "https://github.com/stormseed/quasar-calendar/issues",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/stormseed/quasar-calendar.git"
-    },
-    "homepage": "https://github.com/stormseed/quasar-calendar",
-    "author": "Chris Benjamin <[email protected]>",
-    "license": "MIT",
-    "main": "src/index.js",
-    "files": [
-        "src/index.js",
-        "src/**/*js",
-        "src/**/*vue",
-        "src/**/*styl",
-        "package.json"
-    ],
-    "dependencies": {
-        "lodash.has": "^4.5.2",
-        "luxon": "^0.5.8"
-    },
-    "devDependencies": {
-        "babel-eslint": "8.2.1",
-        "eslint": "4.15.0",
-        "eslint-config-standard": "10.2.1",
-        "eslint-friendly-formatter": "3.0.0",
-        "eslint-loader": "1.7.1",
-        "eslint-plugin-html": "^4.0.2",
-        "eslint-plugin-import": "2.7.0",
-        "eslint-plugin-node": "5.2.0",
-        "eslint-plugin-promise": "3.4.0",
-        "eslint-plugin-standard": "3.0.1",
-        "eslint-plugin-vue": "4.0.0",
-        "quasar-cli": "^0.15.7"
-    },
-    "peerDependencies": {
-        "quasar-framework": "^0.15.6"
-    }
+  "name": "quasar-calendar",
+  "version": "0.2.3",
+  "description": "A full display calendar for the Quasar vue.js framework",
+  "keywords": [
+    "vue",
+    "quasar",
+    "quasar-framework",
+    "calendar"
+  ],
+  "bugs": "https://github.com/stormseed/quasar-calendar/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stormseed/quasar-calendar.git"
+  },
+  "homepage": "https://github.com/stormseed/quasar-calendar",
+  "author": "Chris Benjamin <[email protected]>",
+  "license": "MIT",
+  "main": "src/index.js",
+  "files": [
+    "src/index.js",
+    "src/**/*js",
+    "src/**/*vue",
+    "src/**/*styl",
+    "package.json"
+  ],
+  "dependencies": {
+    "lodash.has": "^4.5.2",
+    "luxon": "^1.2.1"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.2.3",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-html": "^4.0.3",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-vue": "^4.5.0",
+    "quasar-cli": "^0.16.1"
+  },
+  "peerDependencies": {
+    "quasar-framework": "^0.16.0"
+  }
 }
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -145,7 +145,7 @@
       },
       eventArray: {
         type: Array,
-        default: []
+        default: () => []
       },
       eventRef: {
         type: String,
@@ -234,12 +234,24 @@
       switchToSingleDay: function (params) {
         this.setTimePeriod(params)
         this.$refs.fullCalendarTabs.selectTab('tab-single-day-component')
+      },
+      doUpdate: function () {
+        this.mountSetDate()
       }
     },
     mounted () {
       this.mountSetDate()
       this.parseEventList()
       this.setupEventsHandling()
+    },
+    watch: {
+      startDate: 'handleStartChange',
+      eventArray: function () {
+        this.getPassedInEventArray()
+      },
+      parsedEvents: function () {
+        this.getPassedInParsedEvents()
+      }
     }
   }
 </script>

diff --git a/src/components/calendar/CalendarAgenda.vue b/src/components/calendar/CalendarAgenda.vue
@@ -51,7 +51,7 @@
               <calendar-agenda-event
                 v-if="dateGetEvents(forwardDate, true)"
                 v-for="thisEvent in dateGetEvents(forwardDate)"
-                :key="makeDT(forwardDate).toISODate() + thisEvent.id.toString()"
+                :key="makeDT(forwardDate).toISODate() + getEventIdString(thisEvent)"
                 :event-object="thisEvent"
                 :event-ref="eventRef"
                 :calendar-locale="calendarLocale"
@@ -110,7 +110,7 @@
                 class="full-width"
                 v-if="dateGetEvents(forwardDate)"
                 v-for="thisEvent in dateGetEvents(forwardDate, true)"
-                :key="makeDT(forwardDate).toISODate() + thisEvent.id.toString()"
+                :key="makeDT(forwardDate).toISODate() + getEventIdString(thisEvent)"
               >
                 <calendar-agenda-event
                   :event-object="thisEvent"
@@ -247,9 +247,9 @@
         this.localNumDays += this.numJumpDays
         done()
       },
-      handleStartChange: function (val, oldVal) {
-        this.doUpdate()
-      },
+      // handleStartChange: function (val, oldVal) {
+      //   this.doUpdate()
+      // },
       doUpdate: function () {
         this.mountSetDate()
       },
@@ -294,11 +294,13 @@
       )
     },
     watch: {
-      startYear: 'handleStartChange',
-      startMonth: 'handleStartChange',
-      startDay: 'handleStartChange',
-      eventArray: 'getPassedInEventArray',
-      parsedEvents: 'getPassedInParsedEvents'
+      startDate: 'handleStartChange',
+      eventArray: function () {
+        this.getPassedInEventArray()
+      },
+      parsedEvents: function () {
+        this.getPassedInParsedEvents()
+      }
     }
   }
 </script>

diff --git a/src/components/calendar/CalendarAgendaEvent.vue b/src/components/calendar/CalendarAgendaEvent.vue
@@ -55,7 +55,7 @@
     props: {
       eventObject: {
         type: Object,
-        default: this.blankCalendarEvent
+        default: () => {}
       },
       agendaStyle: {
         type: String,
@@ -93,23 +93,7 @@
     },
     mixins: [CalendarMixin],
     data () {
-      return {
-        blankCalendarEvent: {
-          id: 0,
-          summary: '...',
-          description: '...',
-          start: {
-            dateTime: '2020-01-01 00:00:00',
-            isAllDay: false,
-            timeZone: 'America/New_York'
-          },
-          end: {
-            dateTime: '2020-01-01 01:00:00',
-            isAllDay: false,
-            timeZone: 'American/New_York'
-          }
-        }
-      }
+      return {}
     },
     computed: {},
     methods: {

diff --git a/src/components/calendar/CalendarAllDayEvents.vue b/src/components/calendar/CalendarAllDayEvents.vue
@@ -10,7 +10,7 @@
     >
       <calendar-event
         v-for="thisEvent in dateGetEvents(addDaysToDate(workingDate, addDays - 1))"
-        :key="makeDT(addDaysToDate(workingDate, addDays - 1)).toISODate() + thisEvent.id.toString()"
+        :key="makeDT(addDaysToDate(workingDate, addDays - 1)).toISODate() + getEventIdString(thisEvent)"
         v-if="thisEvent.start.isAllDay"
         :event-object="thisEvent"
         :show-time="false"
@@ -28,8 +28,8 @@
   import CalendarMixin from './mixins/CalendarMixin'
   import CalendarEventMixin from './mixins/CalendarEventMixin'
   import CalendarEvent from './CalendarEvent'
-  import { date } from 'quasar'
-  const { DateTime } = require('luxon')
+  // import { date } from 'quasar'
+  // const { DateTime } = require('luxon')
   export default {
     name: 'CalendarAllDayEvents',
     props: {
@@ -39,7 +39,7 @@
       },
       parsed: {
         type: Object,
-        default: {}
+        default: () => {}
       },
       numberOfDays: {
         type: Number,
@@ -67,12 +67,12 @@
     computed: {
       cellWidth: function () {
         return this.calculateDayCellWidth(this.numberOfDays)
-      },
+      }
     },
     methods: {
-      handleStartChange: function (val, oldVal) {
-        this.doUpdate()
-      },
+      // handleStartChange: function (val, oldVal) {
+      //   this.doUpdate()
+      // },
       doUpdate: function () {
         this.mountSetDate()
       },

diff --git a/src/components/calendar/CalendarDayColumn.vue b/src/components/calendar/CalendarDayColumn.vue
@@ -13,7 +13,7 @@
     <div
       v-if="dateEvents.length > 0"
       v-for="eventObject in dateEvents"
-      :key="makeDT(workingDate).toISODate() + eventObject.id.toString()"
+      :key="makeDT(workingDate).toISODate() + getEventIdString(eventObject)"
       :class="calculateDayEventClass(eventObject)"
       :style="calculateDayEventStyle(eventObject)"
     >
@@ -44,7 +44,7 @@
       },
       dateEvents: {
         type: Array,
-        default: []
+        default: () => []
       },
       columnCssClass: {
         type: String,

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
@@ -23,7 +23,6 @@
 
 <script>
   import {
-    date,
     QBtn,
     QTooltip
   } from 'quasar'
@@ -36,7 +35,7 @@
     props: {
       eventObject: {
         type: Object,
-        default: this.blankCalendarEvent
+        default: () => {}
       },
       color: {
         type: String,
@@ -76,23 +75,7 @@
     },
     mixins: [CalendarMixin, CalendarEventMixin],
     data () {
-      return {
-        blankCalendarEvent: {
-          id: 0,
-          summary: '...',
-          description: '...',
-          start: {
-            dateTime: '2020-01-01 00:00:00',
-            isAllDay: false,
-            timeZone: 'America/New_York'
-          },
-          end: {
-            dateTime: '2020-01-01 01:00:00',
-            isAllDay: false,
-            timeZone: 'American/New_York'
-          }
-        }
-      }
+      return {}
     },
     computed: {
     },

diff --git a/src/components/calendar/CalendarEventDetail.vue b/src/components/calendar/CalendarEventDetail.vue
@@ -168,7 +168,7 @@
     props: {
       eventObject: {
         type: Object,
-        default: this.blankCalendarEvent
+        default: () => {}
       },
       calendarLocale: {
         type: String,

diff --git a/src/components/calendar/CalendarMonth.vue b/src/components/calendar/CalendarMonth.vue
@@ -99,7 +99,6 @@
   import CalendarMixin from './mixins/CalendarMixin'
   import CalendarEventMixin from './mixins/CalendarEventMixin'
   import {
-    date,
     QBtn,
     QTooltip,
     QTabs,
@@ -186,9 +185,9 @@
         // console.debug('monthGetDateEvents called with %s, returning %O', this.formatToSqlDate(dateObject), this.stripObject(returnVal))
         return returnVal
       },
-      handleStartChange: function (val, oldVal) {
-        debounce(this.doUpdate, 300)
-      },
+      // handleStartChange: function (val, oldVal) {
+      //   debounce(this.doUpdate, 300)
+      // },
       doUpdate: function () {
         this.mountSetDate()
         this.generateCalendarCellArray()

diff --git a/src/components/calendar/CalendarMultiDay.vue b/src/components/calendar/CalendarMultiDay.vue
@@ -61,7 +61,7 @@
               v-for="thisDate in weekDateArray"
               :key="makeDT(thisDate).toISODate()"
               :start-date="thisDate"
-              :date-events="dateGetEvents(thisDate)"
+              :date-events="dateGetEvents(thisDate, true)"
               column-css-class="calendar-day-column-content"
               :style="{ 'width': dayCellWidth }"
               :event-ref="eventRef"
@@ -242,9 +242,9 @@
           return this.makeDT(this.workingDate).toFormat('MMMM yyyy')
         }
       },
-      handleStartChange: function (val, oldVal) {
-        this.doUpdate()
-      },
+      // handleStartChange: function (val, oldVal) {
+      //   this.doUpdate()
+      // },
       doUpdate: function () {
         this.mountSetDate()
         this.buildWeekDateArray(this.numDays, this.sundayFirstDayOfWeek)