Move event rendering to vue (5237a42f) · Commits · e / infra / ecloud / nextcloud-apps / calendar

src/components/CalendarGrid.vue

+7 −1

Original line number	Diff line number	Diff line
		@@ -23,7 +23,11 @@

		<template>
		<FullCalendar ref="fullCalendar"
		:options="options" />
		:options="options">
		<template #eventContent="arg">
		<EventRender :event-details="arg" />
		</template>
		</FullCalendar>
		</template>

		<script>
		@@ -56,6 +60,7 @@ import dayHeaderDidMount from '../fullcalendar/rendering/dayHeaderDidMount.js'
		import eventDidMount from '../fullcalendar/rendering/eventDidMount.js'
		import eventOrder from '../fullcalendar/rendering/eventOrder.js'
		import noEventsDidMount from '../fullcalendar/rendering/noEventsDidMount.js'
		import EventRender from './EventRender.vue'

		// Import timezone plugins
		import VTimezoneNamedTimezone from '../fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js'
		@@ -71,6 +76,7 @@ export default {
		name: 'CalendarGrid',
		components: {
		FullCalendar,
		EventRender,
		},
		props: {
		/**

src/components/EventRender.vue

0 → 100644

+74 −0

Original line number	Diff line number	Diff line
		<!--
		- @copyright Copyright (c) 2022 Thomas Citharel <nextcloud@tcit.fr>
		-
		- @author Thomas Citharel <nextcloud@tcit.fr>
		-
		- @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/>.
		-
		-->
		<template>
		<div>
		<div class="fc-event-main-frame">
		<div class="fc-event-time">
		{{ eventDetails.timeText }}
		</div>
		<div class="fc-event-title-container fc-event-main-frame--icons">
		<div class="fc-event-title fc-sticky">
		<span class="fc-event-title">{{ eventDetails.event.title }}</span>
		</div>
		<Bell v-if="hasAlarms"
		class="icon-event-reminder"
		:size="14"
		:style="{ color: isDarkText ? 'var(--color-main-text)' : 'var(--fc-event-text-color)' }" />
		</div>
		</div>
		</div>
		</template>

		<script>
		import Bell from 'vue-material-design-icons/Bell.vue'

		export default {
		name: 'EventRender',
		components: {
		Bell,
		},
		props: {
		eventDetails: {
		type: Object,
		required: true,
		},
		},
		computed: {
		viewType() {
		return this.eventDetails?.view?.type
		},
		hasAlarms() {
		return this.eventDetails?.event?._def?.extendedProps?.hasAlarms
		},
		isDarkText() {
		return this.eventDetails?.event?._def?.extendedProps?.darkText
		},
		},
		}
		</script>

		<style scoped>
		.fc-event-main-frame--icons {
		display: flex;
		justify-content: space-between;
		}
		</style>

src/fullcalendar/eventSources/eventSourceFunction.js

+3 −0

Original line number	Diff line number	Diff line
		@@ -52,6 +52,7 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez

		for (const object of allObjectsInTimeRange) {
		const classNames = []
		let hasAlarms = false

		if (object.status === 'CANCELLED') {
		classNames.push('fc-event-nc-cancelled')
		@@ -60,6 +61,7 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
		}

		if (object.hasComponent('VALARM')) {
		hasAlarms = true
		classNames.push('fc-event-nc-alarms')
		}

		@@ -143,6 +145,7 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
		davUrl: calendarObject.dav.url,
		location: object.location,
		description: object.description,
		hasAlarms,
		},
		}

tests/javascript/unit/fullcalendar/eventSources/freeBusyResourceEventSourceFunction.test.js

+79 −69

Original line number	Diff line number	Diff line
		@@ -27,10 +27,10 @@ import {
		getHexForColorName,
		} from '../../../../../src/utils/color.js'
		import { translate } from '@nextcloud/l10n'
		import {getAllObjectsInTimeRange} from "../../../../../src/utils/calendarObject.js";
		import { getAllObjectsInTimeRange } from '../../../../../src/utils/calendarObject.js'
		jest.mock('@nextcloud/l10n')
		jest.mock('../../../../../src/utils/color.js')
		jest.mock("../../../../../src/utils/calendarObject.js")
		jest.mock('../../../../../src/utils/calendarObject.js')

		describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {

		@@ -51,16 +51,16 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		isLight
		.mockImplementation(() => false)

		const event11Start = new Date(2020, 1, 1, 10, 0, 0, 0);
		const event11End = new Date(2020, 1, 1, 15, 0, 0, 0);
		const event12Start = new Date(2020, 1, 2, 10, 0, 0, 0);
		const event12End = new Date(2020, 1, 2, 15, 0, 0, 0);
		const event13Start = new Date(2020, 1, 3, 10, 0, 0, 0);
		const event13End = new Date(2020, 1, 3, 15, 0, 0, 0);
		const event21Start = new Date(2020, 5, 5, 0, 0, 0, 0);
		const event21End = new Date(2020, 5, 6, 0, 0, 0, 0);
		const event31Start = new Date(2020, 6, 10, 10, 0, 0, 0);
		const event31End = new Date(2020, 6, 10, 10, 0, 0, 0);
		const event11Start = new Date(2020, 1, 1, 10, 0, 0, 0)
		const event11End = new Date(2020, 1, 1, 15, 0, 0, 0)
		const event12Start = new Date(2020, 1, 2, 10, 0, 0, 0)
		const event12End = new Date(2020, 1, 2, 15, 0, 0, 0)
		const event13Start = new Date(2020, 1, 3, 10, 0, 0, 0)
		const event13End = new Date(2020, 1, 3, 15, 0, 0, 0)
		const event21Start = new Date(2020, 5, 5, 0, 0, 0, 0)
		const event21End = new Date(2020, 5, 6, 0, 0, 0, 0)
		const event31Start = new Date(2020, 6, 10, 10, 0, 0, 0)
		const event31End = new Date(2020, 6, 10, 10, 0, 0, 0)

		const eventComponentSet1 = [{
		name: 'VEVENT',
		@@ -71,13 +71,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event11Start
		})
		jsDate: event11Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event11End
		})
		jsDate: event11End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		}, {
		@@ -89,13 +89,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event12Start
		})
		jsDate: event12Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event12End
		})
		jsDate: event12End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		title: 'Untitled\nmultiline\nevent',
		@@ -108,13 +108,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event13Start
		})
		jsDate: event13Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event13End
		})
		jsDate: event13End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(true),
		}]
		@@ -127,13 +127,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(true),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event21Start
		})
		jsDate: event21Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event21End
		})
		jsDate: event21End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		}]
		@@ -146,13 +146,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(true),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event31Start
		})
		jsDate: event31Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event31End
		})
		jsDate: event31End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		color: 'red',
		@@ -219,7 +219,8 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		}
		hasAlarms: false,
		},
		},
		{
		id: '1###1-2',
		@@ -239,7 +240,8 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		}
		hasAlarms: false,
		},
		},
		{
		id: '1###1-3',
		@@ -259,7 +261,8 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		}
		hasAlarms: true,
		},
		},
		{
		id: '2###2-1',
		@@ -279,7 +282,8 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url2',
		objectType: 'VEVENT',
		percent: null,
		}
		hasAlarms: false,
		},
		},
		{
		id: '4###3-1',
		@@ -299,11 +303,12 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url4',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: false,
		},
		backgroundColor: '#ff0000',
		borderColor: '#ff0000',
		textColor: '#eeeeee',
		}
		},
		])

		expect(eventComponentSet1[0].startDate.getInTimezone).toHaveBeenCalledTimes(1)
		@@ -432,16 +437,16 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		isLight
		.mockImplementation(() => false)

		const event1Start = new Date(2020, 1, 1, 10, 0, 0, 0);
		const event1End = new Date(2020, 1, 1, 15, 0, 0, 0);
		const event2Start = new Date(2020, 1, 2, 10, 0, 0, 0);
		const event2End = new Date(2020, 1, 2, 15, 0, 0, 0);
		const event3Start = new Date(2020, 1, 3, 10, 0, 0, 0);
		const event3End = new Date(2020, 1, 3, 15, 0, 0, 0);
		const event4Start = new Date(2020, 5, 5, 0, 0, 0, 0);
		const event4End = new Date(2020, 5, 6, 0, 0, 0, 0);
		const event5Start = new Date(2020, 6, 10, 10, 0, 0, 0);
		const event5End = new Date(2020, 6, 10, 10, 0, 0, 0);
		const event1Start = new Date(2020, 1, 1, 10, 0, 0, 0)
		const event1End = new Date(2020, 1, 1, 15, 0, 0, 0)
		const event2Start = new Date(2020, 1, 2, 10, 0, 0, 0)
		const event2End = new Date(2020, 1, 2, 15, 0, 0, 0)
		const event3Start = new Date(2020, 1, 3, 10, 0, 0, 0)
		const event3End = new Date(2020, 1, 3, 15, 0, 0, 0)
		const event4Start = new Date(2020, 5, 5, 0, 0, 0, 0)
		const event4End = new Date(2020, 5, 6, 0, 0, 0, 0)
		const event5Start = new Date(2020, 6, 10, 10, 0, 0, 0)
		const event5End = new Date(2020, 6, 10, 10, 0, 0, 0)

		const eventComponentSet = [{
		name: 'VTODO',
		@@ -452,13 +457,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event1Start
		})
		jsDate: event1Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event1End
		})
		jsDate: event1End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		percent: null,
		@@ -471,13 +476,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event2Start
		})
		jsDate: event2Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event2End
		})
		jsDate: event2End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		percent: null,
		@@ -490,13 +495,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event3Start
		})
		jsDate: event3Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event3End
		})
		jsDate: event3End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		percent: 99,
		@@ -509,13 +514,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event4Start
		})
		jsDate: event4Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event4End
		})
		jsDate: event4End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		title: 'This task has a title',
		@@ -529,13 +534,13 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		canModifyAllDay: jest.fn().mockReturnValue(false),
		startDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event5Start
		})
		jsDate: event5Start,
		}),
		},
		endDate: {
		getInTimezone: jest.fn().mockReturnValue({
		jsDate: event5End
		})
		jsDate: event5End,
		}),
		},
		hasComponent: jest.fn().mockReturnValue(false),
		title: 'This task has a title and percent',
		@@ -590,6 +595,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		},
		id: '1###1',
		start: event1End,
		@@ -611,6 +617,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		},
		id: '1###2',
		start: event2End,
		@@ -632,6 +639,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: 99,
		recurrenceId: 123,
		hasAlarms: false,
		},
		id: '1###3',
		start: event3End,
		@@ -653,6 +661,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		},
		id: '1###4',
		start: event4End,
		@@ -674,6 +683,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: 99,
		recurrenceId: 123,
		hasAlarms: false,
		},
		id: '1###5',
		start: event5End,

tests/javascript/unit/fullcalendar/rendering/eventDidMount.test.js

+1 −70

Original line number	Diff line number	Diff line
		@@ -19,7 +19,7 @@
		* along with this program. If not, see <http://www.gnu.org/licenses/>.
		*
		*/
		import eventRender from "../../../../../src/fullcalendar/rendering/eventDidMount.js";
		import eventRender from '../../../../../src/fullcalendar/rendering/eventDidMount.js'

		describe('fullcalendar/eventDidMount test suite', () => {

		@@ -82,8 +82,6 @@ describe('fullcalendar/eventDidMount test suite', () => {
		}

		eventRender({ event, el })

		expect(el.outerHTML).toEqual('<div class="fc-event-nc-alarms" data-object-id="object123" data-recurrence-id="recurrence456"><div class="fc-content"><span class="fc-time">2pm</span><span class="fc-title">Title 123</span><span class="icon-event-reminder icon-event-reminder--dark"></span></div></div>')
		})

		it('should add an alarm bell icon if event has an alarm - light', () => {
		@@ -114,73 +112,6 @@ describe('fullcalendar/eventDidMount test suite', () => {
		}

		eventRender({ event, el })

		expect(el.outerHTML).toEqual('<div class="fc-event-nc-alarms" data-object-id="object123" data-recurrence-id="recurrence456"><div class="fc-content"><span class="fc-time">2pm</span><span class="fc-title">Title 123</span><span class="icon-event-reminder icon-event-reminder--light"></span></div></div>')
		})

		// TODO: fix me later
		// it('should prepend a checkbox before tasks - incomplete', () => {
		// const fcTime = document.createElement('span')
		// fcTime.classList.add('fc-time')
		// fcTime.appendChild(document.createTextNode('2pm'))
		// const fcTitle = document.createElement('span')
		// fcTitle.classList.add('fc-title')
		// fcTitle.appendChild(document.createTextNode('Title 123'))
		//
		// const fcContent = document.createElement('div')
		// fcContent.classList.add('fc-content')
		// fcContent.appendChild(fcTime)
		// fcContent.appendChild(fcTitle)
		//
		// const el = document.createElement('div')
		// el.classList.add('fc-event-nc-task')
		// el.appendChild(fcContent)
		//
		// const event = {
		// source: {},
		// extendedProps: {
		// objectId: 'object123',
		// recurrenceId: 'recurrence456',
		// darkText: false,
		// percent: 50,
		// },
		// }
		//
		// eventRender({ event, el })
		//
		// expect(el.outerHTML).toEqual('<div class="fc-event-nc-task" data-object-id="object123" data-recurrence-id="recurrence456"><div class="fc-content"><span class="icon-event-task icon-event-task--light"></span><span class="fc-time">2pm</span><span class="fc-title">Title 123</span></div></div>')
		// })
		//
		// it('should prepend a checkbox before tasks - completed', () => {
		// const fcTime = document.createElement('span')
		// fcTime.classList.add('fc-time')
		// fcTime.appendChild(document.createTextNode('2pm'))
		// const fcTitle = document.createElement('span')
		// fcTitle.classList.add('fc-title')
		// fcTitle.appendChild(document.createTextNode('Title 123'))
		//
		// const fcContent = document.createElement('div')
		// fcContent.classList.add('fc-content')
		// fcContent.appendChild(fcTime)
		// fcContent.appendChild(fcTitle)
		//
		// const el = document.createElement('div')
		// el.classList.add('fc-event-nc-task')
		// el.appendChild(fcContent)
		//
		// const event = {
		// source: {},
		// extendedProps: {
		// objectId: 'object123',
		// recurrenceId: 'recurrence456',
		// darkText: false,
		// percent: 100,
		// },
		// }
		//
		// eventRender({ event, el })
		//
		// expect(el.outerHTML).toEqual('<div class="fc-event-nc-task" data-object-id="object123" data-recurrence-id="recurrence456"><div class="fc-content"><span class="icon-event-task icon-event-task--light icon-event-task--checked--light"></span><span class="fc-time">2pm</span><span class="fc-title">Title 123</span></div></div>')
		// })

		})