Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit f03b8262 authored by Christoph Wurst's avatar Christoph Wurst Committed by backportbot-nextcloud[bot]
Browse files

Revert "Move event rendering to vue" 

This reverts commit 5237a42f.
parent 2b07d97d

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 −74
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

+0 −3
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,7 +143,6 @@ 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

+69 −79
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,8 +219,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
					davUrl: 'url1',

					objectType: 'VEVENT',

					percent: null,

					hasAlarms: false,

				},

				}

			},

			{

				id: '1###1-2',
@@ -240,8 +239,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
					davUrl: 'url1',

					objectType: 'VEVENT',

					percent: null,

					hasAlarms: false,

				},

				}

			},

			{

				id: '1###1-3',
@@ -261,8 +259,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
					davUrl: 'url1',

					objectType: 'VEVENT',

					percent: null,

					hasAlarms: true,

				},

				}

			},

			{

				id: '2###2-1',
@@ -282,8 +279,7 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
					davUrl: 'url2',

					objectType: 'VEVENT',

					percent: null,

					hasAlarms: false,

				},

				}

			},

			{

				id: '4###3-1',
@@ -303,12 +299,11 @@ 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)
@@ -437,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',
@@ -457,13 +452,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,
@@ -476,13 +471,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,
@@ -495,13 +490,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,
@@ -514,13 +509,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',
@@ -534,13 +529,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',
@@ -595,7 +590,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
				objectType: 'VTODO',

				percent: null,

				recurrenceId: 123,

				hasAlarms: false,

			},

			id: '1###1',

			start: event1End,
@@ -617,7 +611,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
				objectType: 'VTODO',

				percent: null,

				recurrenceId: 123,

				hasAlarms: false,

			},

			id: '1###2',

			start: event2End,
@@ -639,7 +632,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
				objectType: 'VTODO',

				percent: 99,

				recurrenceId: 123,

				hasAlarms: false,

			},

			id: '1###3',

			start: event3End,
@@ -661,7 +653,6 @@ describe('fullcalendar/freeBusyResourceEventSourceFunction test suite', () => { 
				objectType: 'VTODO',

				percent: null,

				recurrenceId: 123,

				hasAlarms: false,

			},

			id: '1###4',

			start: event4End,
@@ -683,7 +674,6 @@ 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

+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>')

	// })



})