Implement Fullcalendar's navLinkDayClick and navLinkWeekClick

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

src/fullcalendar/navLinkDayClick.js

@@ -0,0 +1,46 @@
+/**
+ * @copyright Copyright (c) 2019 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { getYYYYMMDDFromDate } from '../utils/date.js'
+
+/**
+ * Handles a click on a day-number in the calendar-grid
+ *
+ * @param {Object} router The Vue router
+ * @param {Object} route The current Vue route
+ * @returns {function(Date): void}
+ */
+export default function(router, route) {
+	return function(date) {
+		const name = route.name
+		const params = Object.assign({}, route.params, {
+			firstDay: getYYYYMMDDFromDate(date),
+			view: 'timeGridDay',
+		})
+
+		// Don't push new route when day and view didn't change
+		if (route.params.firstDay === params.firstDay && route.params.view === params.view) {
+			return
+		}
+
+		router.push({ name, params })
+	}
+}

src/fullcalendar/navLinkWeekClick.js

@@ -0,0 +1,46 @@
+/**
+ * @copyright Copyright (c) 2019 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { getYYYYMMDDFromDate } from '../utils/date.js'
+
+/**
+ * Handles a click on a week-number in the calendar-grid
+ *
+ * @param {Object} router The Vue router
+ * @param {Object} route The current Vue route
+ * @returns {function(Date): void}
+ */
+export default function(router, route) {
+	return function(date) {
+		const name = route.name
+		const params = Object.assign({}, route.params, {
+			firstDay: getYYYYMMDDFromDate(date),
+			view: 'timeGridWeek',
+		})
+
+		// Don't push new route when day and view didn't change
+		if (route.params.firstDay === params.firstDay && route.params.view === params.view) {
+			return
+		}
+
+		router.push({ name, params })
+	}
+}

src/views/Calendar.vue

@@ -58,6 +58,9 @@
 				:selectable="isSelectable"
 				:select-mirror="true"
 				:lazy-fetching="false"
+				:nav-links="true"
+				:nav-link-day-click="navLinkDayClick"
+				:nav-link-week-click="navLinkWeekClick"
 				:now-indicator="true"
 				:progressive-event-rendering="true"
 				:unselect-auto="false"
@@ -106,6 +109,8 @@ import eventDrop from '../fullcalendar/eventDrop'
 import eventOrder from '../fullcalendar/eventOrder'
 import eventResize from '../fullcalendar/eventResize'
 import eventSource from '../fullcalendar/eventSource'
+import navLinkDayClick from '../fullcalendar/navLinkDayClick.js'
+import navLinkWeekClick from '../fullcalendar/navLinkWeekClick'
 import select from '../fullcalendar/select'
 import VTimezoneNamedTimezone from '../fullcalendar/vtimezoneNamedTimezoneImpl'
 import AppNavigationHeader from '../components/AppNavigation/AppNavigationHeader.vue'
@@ -364,6 +369,12 @@ export default {
 		eventRender(...args) {
 			return eventRender(...args)
 		},
+		navLinkDayClick(...args) {
+			return navLinkDayClick(this.$router, this.$route)(...args)
+		},
+		navLinkWeekClick(...args) {
+			return navLinkWeekClick(this.$router, this.$route)(...args)
+		},
 		/**
 		 * Loads the locale data for full-calendar
 		 *

tests/javascript/unit/fullcalendar/navLinkDayClick.test.js

@@ -0,0 +1,163 @@
+/**
+ * @copyright Copyright (c) 2019 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import navLinkDayClick from '../../../../src/fullcalendar/navLinkDayClick.js'
+import { getYYYYMMDDFromDate } from '../../../../src/utils/date.js'
+jest.mock('../../../../src/utils/date.js')
+
+describe('fullcalendar/eventClick test suite', () => {
+
+	beforeEach(() => {
+		getYYYYMMDDFromDate.mockClear()
+	})
+
+	it('should open the clicked day in day view', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'dayGridMonth',
+				firstDay: 'now',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkDayClickFunction = navLinkDayClick(router, route)
+		navLinkDayClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridDay',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should open the clicked day in day view (already on correct date)', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'dayGridMonth',
+				firstDay: 'first-day-param-of-date',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkDayClickFunction = navLinkDayClick(router, route)
+		navLinkDayClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridDay',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should open the clicked day in day view (already in correct view)', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'timeGridDay',
+				firstDay: 'now',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkDayClickFunction = navLinkDayClick(router, route)
+		navLinkDayClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridDay',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should not open a duplicate route', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'timeGridDay',
+				firstDay: 'first-day-param-of-date',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkDayClickFunction = navLinkDayClick(router, route)
+		navLinkDayClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(0)
+	})
+})

tests/javascript/unit/fullcalendar/navLinkWeekClick.test.js

@@ -0,0 +1,163 @@
+/**
+ * @copyright Copyright (c) 2019 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import navLinkWeekClick from '../../../../src/fullcalendar/navLinkWeekClick.js'
+import { getYYYYMMDDFromDate } from '../../../../src/utils/date.js'
+jest.mock('../../../../src/utils/date.js')
+
+describe('fullcalendar/eventClick test suite', () => {
+
+	beforeEach(() => {
+		getYYYYMMDDFromDate.mockClear()
+	})
+
+	it('should open the clicked day in week view', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'dayGridMonth',
+				firstDay: 'now',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkWeekClickFunction = navLinkWeekClick(router, route)
+		navLinkWeekClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridWeek',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should open the clicked day in week view (already on correct date)', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'dayGridMonth',
+				firstDay: 'first-day-param-of-date',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkWeekClickFunction = navLinkWeekClick(router, route)
+		navLinkWeekClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridWeek',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should open the clicked day in week view (already in correct view)', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'timeGridWeek',
+				firstDay: 'now',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkWeekClickFunction = navLinkWeekClick(router, route)
+		navLinkWeekClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(1)
+		expect(router.push.mock.calls[0][0]).toEqual({
+			name: 'CalendarView',
+			params: {
+				otherParam: '456',
+				view: 'timeGridWeek',
+				firstDay: 'first-day-param-of-date',
+			}
+		})
+	})
+
+	it('should not open a duplicate route', () => {
+		const router = {
+			push: jest.fn(),
+		}
+		const route = {
+			name: 'CalendarView',
+			params: {
+				view: 'timeGridWeek',
+				firstDay: 'first-day-param-of-date',
+				otherParam: '456',
+			},
+		}
+
+		getYYYYMMDDFromDate
+			.mockReturnValueOnce('first-day-param-of-date')
+
+		const date = new Date(Date.UTC(2019, 11, 5, 12, 36, 48, 0))
+
+		const navLinkWeekClickFunction = navLinkWeekClick(router, route)
+		navLinkWeekClickFunction(date)
+
+		expect(getYYYYMMDDFromDate).toHaveBeenCalledTimes(1)
+		expect(getYYYYMMDDFromDate).toHaveBeenNthCalledWith(1, date)
+
+		expect(router.push.mock.calls.length).toEqual(0)
+	})
+})