From f030aec06ea22037d4cbe4fee43e9aa28c028a9f Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 1 Jul 2022 16:00:26 +0200
Subject: [PATCH] Implement frontend for iMIP data

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/Imip.vue           | 181 ++++++++++++++++++++++++
 src/components/Message.vue        |  12 ++
 src/components/imip/EventData.vue | 222 ++++++++++++++++++++++++++++++
 src/util/eventAttendee.js         |  35 +++++
 4 files changed, 450 insertions(+)
 create mode 100644 src/components/Imip.vue
 create mode 100644 src/components/imip/EventData.vue
 create mode 100644 src/util/eventAttendee.js

diff --git a/src/components/Imip.vue b/src/components/Imip.vue
new file mode 100644
index 0000000000..c7ac715495
--- /dev/null
+++ b/src/components/Imip.vue
@@ -0,0 +1,181 @@
+<!--
+  - @copyright Copyright (c) 2022 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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 class="imip">
+		<div
+			v-if="isRequest"
+			class="imip__type">
+			<span v-if="wasUpdated">{{ t('mail', 'An event you have been invited to was updated') }}</span>
+			<span v-else>{{ t('mail', 'You have been invited to an event') }}</span>
+		</div>
+		<div
+			v-else-if="isReply"
+			class="imip__type">
+			<CalendarIcon :size="20" />
+			<span>{{ t('mail', 'This event was updated') }}</span>
+		</div>
+		<div
+			v-else-if="isCancel"
+			class="imip__type">
+			<CloseIcon :size="20" fill-color="red" />
+			<span>{{ t('mail', 'This event was cancelled') }}</span>
+		</div>
+
+		<EventData :event="parsedEvent" />
+
+		<!-- TODO: actually implement buttons (https://github.com/nextcloud/mail/issues/6803) -->
+		<!-- TODO: "More options" needs more specification -->
+		<!--
+		<div class="imip__actions">
+			<template v-if="isRequest && eventIsInFuture">
+				<Button
+					type="tertiary">
+					{{ t('mail', 'Accept') }}
+				</Button>
+				<Button type="tertiary">
+					{{ t('mail', 'Decline') }}
+				</Button>
+			</template>
+			<Actions :menu-title="t('mail', 'More options')" />
+		</div>
+		-->
+	</div>
+</template>
+
+<script>
+import EventData from './imip/EventData'
+// import Button from '@nextcloud/vue/dist/Components/Button'
+// import Actions from '@nextcloud/vue/dist/Components/Actions'
+import CloseIcon from 'vue-material-design-icons/Close'
+import CalendarIcon from 'vue-material-design-icons/Calendar'
+import { getParserManager } from '@nextcloud/calendar-js'
+
+const REQUEST = 'REQUEST'
+const REPLY = 'REPLY'
+const CANCEL = 'CANCEL'
+
+export default {
+	name: 'Imip',
+	components: {
+		EventData,
+		// Button,
+		// Actions,
+		CloseIcon,
+		CalendarIcon,
+	},
+	props: {
+		scheduling: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			REQUEST,
+			CANCEL,
+			REPLY,
+		}
+	},
+	computed: {
+		/**
+		 * @returns {string}
+		 */
+		method() {
+			return this.scheduling.method
+		},
+
+		/**
+		 * @returns {boolean}
+		 */
+		isRequest() {
+			return this.method === REQUEST
+		},
+
+		/**
+		 * @returns {boolean}
+		 */
+		isReply() {
+			return this.method === REPLY
+		},
+
+		/**
+		 * @returns {boolean}
+		 */
+		isCancel() {
+			return this.method === CANCEL
+		},
+
+		/**
+		 * @returns {boolean}
+		 */
+		wasUpdated() {
+			// TODO: ask backend whether invitation is new or was updated
+			return false
+		},
+
+		/**
+		 * @returns {EventComponent|undefined}
+		 */
+		parsedEvent() {
+			const parserManager = getParserManager()
+			const parser = parserManager.getParserForFileType('text/calendar')
+			parser.parse(this.scheduling.contents)
+
+			const vCalendar = parser.getItemIterator().next().value
+			if (!vCalendar) {
+				return undefined
+			}
+
+			const vEvent = vCalendar.getEventIterator().next().value
+			return vEvent ?? undefined
+		},
+
+		/**
+		 * @returns {boolean}
+		 */
+		eventIsInFuture() {
+			return this.parsedEvent.startDate.jsDate.getTime() > new Date().getTime()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.imip {
+	display: flex;
+	flex-direction: column;
+	border: solid 2px var(--color-border);
+	border-radius: var(--border-radius-large);
+	padding: 10px;
+
+	&__type {
+		display: flex;
+		gap: 5px;
+	}
+
+	&__actions {
+		display: flex;
+		margin-top: 15px;
+	}
+}
+</style>
diff --git a/src/components/Message.vue b/src/components/Message.vue
index f20a174774..94afbbb677 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -27,6 +27,12 @@
 		<div v-if="itineraries.length > 0" class="message-itinerary">
 			<Itinerary :entries="itineraries" :message-id="message.messageId" />
 		</div>
+		<div v-if="message.scheduling.length > 0" class="message-imip">
+			<Imip
+				v-for="scheduling in message.scheduling"
+				:key="scheduling.id"
+				:scheduling="scheduling" />
+		</div>
 		<MessageHTMLBody v-if="message.hasHtmlBody"
 			:url="htmlUrl"
 			:message="message"
@@ -54,6 +60,7 @@ import MessageAttachments from './MessageAttachments'
 import MessageEncryptedBody from './MessageEncryptedBody'
 import MessageHTMLBody from './MessageHTMLBody'
 import MessagePlainTextBody from './MessagePlainTextBody'
+import Imip from './Imip'
 
 export default {
 	name: 'Message',
@@ -63,6 +70,7 @@ export default {
 		MessageEncryptedBody,
 		MessageHTMLBody,
 		MessagePlainTextBody,
+		Imip,
 	},
 	props: {
 		envelope: {
@@ -103,4 +111,8 @@ export default {
 	border-radius: 22px;
 	background-color: var(--color-background-darker);
 }
+
+.message-imip {
+	padding: 5px 10px;
+}
 </style>
diff --git a/src/components/imip/EventData.vue b/src/components/imip/EventData.vue
new file mode 100644
index 0000000000..f56f63daad
--- /dev/null
+++ b/src/components/imip/EventData.vue
@@ -0,0 +1,222 @@
+<!--
+  - @copyright Copyright (c) 2022 Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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 class="event-data">
+		<h2>{{ title }}</h2>
+
+		<div class="event-data__row event-data__row--date">
+			<CalendarIcon class="event-data__row__icon" :size="20" />
+			<div>
+				{{ startDate }}
+				<span v-if="startTimezone && startTimezone !== endTimezone" class="muted">
+					{{ startTimezone }}
+				</span>
+				<template v-if="endDate">
+					<span> - </span>
+					{{ endDate }}
+					<span v-if="endTimezone" class="muted">{{ endTimezone }}</span>
+				</template>
+			</div>
+		</div>
+
+		<div
+			v-if="location"
+			class="event-data__row event-data__row--location">
+			<MapMarkerIcon class="event-data__row__icon" :size="20" />
+			<span>{{ location }}</span>
+		</div>
+
+		<div class="event-data__row event-data__row--participants">
+			<AccountMultipleIcon class="event-data__row__icon" :size="20" />
+			<ul>
+				<li v-for="{ name, isOrganizer } in attendees" :key="name">
+					{{ name }}
+					<span v-if="isOrganizer" class="muted">{{ t('mail', '(organizer)') }}</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import AccountMultipleIcon from 'vue-material-design-icons/AccountMultiple'
+import CalendarIcon from 'vue-material-design-icons/Calendar'
+import MapMarkerIcon from 'vue-material-design-icons/MapMarker'
+import { getReadableTimezoneName } from '@nextcloud/calendar-js'
+import moment from '@nextcloud/moment'
+import { removeMailtoPrefix } from '../../util/eventAttendee'
+
+/**
+ * Check whether two dates are on the exact same day, month and year.
+ *
+ * @param {Date} a Date a
+ * @param {Date} b Date b
+ * @returns {boolean} True if both dates a and b are on the same day, month and year.
+ */
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear()
+		&& a.getMonth() === b.getMonth()
+		&& a.getDate() === b.getDate()
+}
+
+/**
+ * Get a human readable timezone name from a DateTimeValue.
+ * If timezone is floating, undefined will be returned.
+ *
+ * @param {DateTimeValue} date Date
+ * @returns {string|undefined} Human readable timezone name or undefined
+ */
+function getTimezoneFromDate(date) {
+	const timezoneId = date.timezoneId
+	if (!timezoneId || timezoneId === 'floating') {
+		return undefined
+	}
+
+	return getReadableTimezoneName(timezoneId)
+}
+
+export default {
+	name: 'EventData',
+	components: {
+		AccountMultipleIcon,
+		CalendarIcon,
+		MapMarkerIcon,
+	},
+	props: {
+		event: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		/**
+		 * @returns {string}
+		 */
+		title() {
+			// Use || here to handle empty strings as well
+			return this.event.title || this.t('mail', 'Untitled event')
+		},
+
+		/**
+		 * @returns {string}
+		 */
+		startDate() {
+			if (this.event.isAllDay()) {
+				return moment(this.event.startDate.jsDate).format('ll')
+			}
+
+			return moment(this.event.startDate.jsDate).format('ll LT')
+		},
+
+		/**
+		 * @returns {string|undefined}
+		 */
+		endDate() {
+			const start = this.event.startDate.jsDate
+			const end = this.event.endDate.jsDate
+
+			let date
+			if (this.event.isAllDay()) {
+				// All day events end a day later, so we need to subtract a day
+				end.setDate(end.getDate() - 1)
+				if (isSameDay(start, end)) {
+					return undefined
+				}
+				date = moment(end).format('ll')
+			} else {
+				if (isSameDay(start, end)) {
+					date = moment(end).format('LT')
+				} else {
+					date = moment(end).format('ll LT')
+				}
+			}
+
+			return date
+		},
+
+		/**
+		 * @returns {string|undefined}
+		 */
+		startTimezone() {
+			return getTimezoneFromDate(this.event.startDate)
+		},
+
+		/**
+		 * @returns {string|undefined}
+		 */
+		endTimezone() {
+			return getTimezoneFromDate(this.event.endDate)
+		},
+
+		/**
+		 * @returns {string|undefined|null}
+		 */
+		location() {
+			return this.event.location
+		},
+
+		/**
+		 * @returns {{name: string, isOrganizer: boolean}[]}
+		 */
+		attendees() {
+			const attendees = []
+			for (const attendee of [
+				...this.event.getPropertyIterator('ORGANIZER'),
+				...this.event.getAttendeeIterator(),
+			]) {
+				const attendeeData = {
+					name: attendee.commonName ?? removeMailtoPrefix(attendee.email),
+					isOrganizer: attendee.isOrganizer(),
+				}
+
+				attendees.push(attendeeData)
+			}
+			return attendees
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.event-data {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+
+	&__row {
+		display: flex;
+
+		&__icon {
+			align-self: start;
+			margin: 0 10px;
+
+			// Fix slight misalignment caused by align-self: start
+			padding-top: 2px;
+		}
+	}
+}
+
+.muted {
+	color: var(--color-text-lighter);
+}
+</style>
diff --git a/src/util/eventAttendee.js b/src/util/eventAttendee.js
new file mode 100644
index 0000000000..1a672e416a
--- /dev/null
+++ b/src/util/eventAttendee.js
@@ -0,0 +1,35 @@
+/**
+ * @copyright Copyright (c) 2022 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+/*
+ * Remove the mailto prefix from a URI and return it
+ *
+ * @param {string} uri URI to remove the prefix from
+ * @return {string} URI without a mailto prefix
+ */
+export function removeMailtoPrefix(uri) {
+	if (uri.startsWith('mailto:')) {
+		return uri.substr(7)
+	}
+
+	return uri
+}