Merge pull request #4352 from nextcloud/backport/4351/stable3.4 (31c8ce1b) · Commits · e / infra / ecloud / nextcloud-apps / calendar

src/components/CalendarGrid.vue

+1 −7

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

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

		<script>
		@@ -60,7 +56,6 @@ 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'
		@@ -76,7 +71,6 @@ export default {
		name: 'CalendarGrid',
		components: {
		FullCalendar,
		EventRender,
		},
		props: {
		/**

src/components/EventRender.vue

deleted100644 → 0

+0 −88

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: iconColor }" />
		<AccountMultiple v-if="hasAttendees"
		:size="14"
		:style="{ color: iconColor }" />
		</div>
		</div>
		</div>
		</template>

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

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

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

src/fullcalendar/eventSources/eventSourceFunction.js

+0 −4

Original line number	Diff line number	Diff line
		@@ -52,7 +52,6 @@ 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')
		@@ -61,7 +60,6 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
		}

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

		@@ -145,8 +143,6 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
		davUrl: calendarObject.dav.url,
		location: object.location,
		description: object.description,
		hasAlarms,
		hasAttendees: object.hasProperty('ATTENDEE'),
		},
		}

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

+69 −100

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,16 +71,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		}, {
		name: 'VEVENT',
		id: '1-2',
		@@ -90,16 +89,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		title: 'Untitled\nmultiline\nevent',
		}, {
		name: 'VEVENT',
		@@ -110,16 +108,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		}]
		const eventComponentSet2 = [{
		name: 'VEVENT',
		@@ -130,16 +127,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		}]
		const eventComponentSet4 = [{
		name: 'VEVENT',
		@@ -150,16 +146,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		color: 'red',
		}]

		@@ -224,9 +219,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: false,
		hasAttendees: false,
		},
		}
		},
		{
		id: '1###1-2',
		@@ -246,9 +239,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: false,
		hasAttendees: false,
		},
		}
		},
		{
		id: '1###1-3',
		@@ -268,9 +259,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url1',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: true,
		hasAttendees: false,
		},
		}
		},
		{
		id: '2###2-1',
		@@ -290,9 +279,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url2',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: false,
		hasAttendees: false,
		},
		}
		},
		{
		id: '4###3-1',
		@@ -312,13 +299,11 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		davUrl: 'url4',
		objectType: 'VEVENT',
		percent: null,
		hasAlarms: false,
		hasAttendees: false,
		},
		backgroundColor: '#ff0000',
		borderColor: '#ff0000',
		textColor: '#eeeeee',
		},
		}
		])

		expect(eventComponentSet1[0].startDate.getInTimezone).toHaveBeenCalledTimes(1)
		@@ -447,16 +432,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',
		@@ -467,16 +452,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		percent: null,
		}, {
		name: 'VTODO',
		@@ -487,16 +471,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		percent: null,
		}, {
		name: 'VTODO',
		@@ -507,16 +490,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		percent: 99,
		}, {
		name: 'VTODO',
		@@ -527,16 +509,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		title: 'This task has a title',
		percent: null,
		}, {
		@@ -548,16 +529,15 @@ 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),
		hasProperty: jest.fn().mockReturnValue(false),
		title: 'This task has a title and percent',
		percent: 99,
		}, {
		@@ -568,7 +548,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		getReferenceRecurrenceId: jest.fn().mockReturnValue({ unixTime: 123 }),
		canModifyAllDay: jest.fn().mockReturnValue(false),
		hasComponent: jest.fn().mockReturnValue(false),
		hasProperty: jest.fn().mockReturnValue(false),
		title: 'Task without Due',
		startDate: null,
		endDate: null,
		@@ -611,8 +590,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		hasAttendees: false,
		},
		id: '1###1',
		start: event1End,
		@@ -634,8 +611,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		hasAttendees: false,
		},
		id: '1###2',
		start: event2End,
		@@ -657,8 +632,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: 99,
		recurrenceId: 123,
		hasAlarms: false,
		hasAttendees: false,
		},
		id: '1###3',
		start: event3End,
		@@ -680,8 +653,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: null,
		recurrenceId: 123,
		hasAlarms: false,
		hasAttendees: false
		},
		id: '1###4',
		start: event4End,
		@@ -703,8 +674,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => {
		objectType: 'VTODO',
		percent: 99,
		recurrenceId: 123,
		hasAlarms: false,
		hasAttendees: false,
		},
		id: '1###5',
		start: event5End,

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

+70 −1

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,6 +82,8 @@ 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', () => {
		@@ -112,6 +114,73 @@ 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>')
		// })

		})