fixup! Implement frontend for iMIP data

Author: st3iny

src/components/Imip.vue

@@ -43,8 +43,10 @@
 
 		<EventData :event="parsedEvent" />
 
+		<!-- TODO: actually implement buttons (https://github.com/nextcloud/mail/issues/6803) -->
+		<!-- TODO: "More options" needs more specification -->
+		<!--
 		<div class="imip__actions">
-			<!-- TODO: actually implement buttons (https://github.com/nextcloud/mail/issues/6803) -->
 			<template v-if="isRequest && eventIsInFuture">
 				<Button
 					type="tertiary">
@@ -54,16 +56,16 @@
 					{{ t('mail', 'Decline') }}
 				</Button>
 			</template>
-			<!-- TODO: "More options" needs more specification -->
 			<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 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'
@@ -76,8 +78,8 @@ export default {
 	name: 'Imip',
 	components: {
 		EventData,
-		Button,
-		Actions,
+		// Button,
+		// Actions,
 		CloseIcon,
 		CalendarIcon,
 	},

src/components/imip/EventData.vue

@@ -28,13 +28,13 @@
 			<CalendarIcon class="event-data__row__icon" :size="20" />
 			<div>
 				{{ startDate }}
-				<span v-if="timezone.start && timezone.start !== timezone.end" class="muted">
-					{{ timezone.start }}
+				<span v-if="startTimezone && startTimezone !== endTimezone" class="muted">
+					{{ startTimezone }}
 				</span>
 				<template v-if="endDate">
 					<span> - </span>
 					{{ endDate }}
-					<span v-if="timezone.end" class="muted">{{ timezone.end }}</span>
+					<span v-if="endTimezone" class="muted">{{ endTimezone }}</span>
 				</template>
 			</div>
 		</div>
@@ -51,7 +51,7 @@
 			<ul>
 				<li v-for="{ name, isOrganizer } in attendees" :key="name">
 					{{ name }}
-					<span v-if="isOrganizer" class="muted">(organizer)</span>
+					<span v-if="isOrganizer" class="muted">{{ t('mail', '(organizer)') }}</span>
 				</li>
 			</ul>
 		</div>
@@ -62,7 +62,7 @@
 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 { AttendeeProperty, getReadableTimezoneName } from '@nextcloud/calendar-js'
+import { getReadableTimezoneName } from '@nextcloud/calendar-js'
 import moment from '@nextcloud/moment'
 import { removeMailtoPrefix } from '../../util/eventAttendee'
 
@@ -79,6 +79,22 @@ function isSameDay(a, b) {
 		&& 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: {
@@ -94,7 +110,6 @@ export default {
 	},
 	computed: {
 		/**
-		 *
 		 * @returns {string}
 		 */
 		title() {
@@ -103,7 +118,6 @@ export default {
 		},
 
 		/**
-		 *
 		 * @returns {string}
 		 */
 		startDate() {
@@ -115,7 +129,6 @@ export default {
 		},
 
 		/**
-		 *
 		 * @returns {string|undefined}
 		 */
 		endDate() {
@@ -142,35 +155,27 @@ export default {
 		},
 
 		/**
-		 *
-		 * @returns {{start: (string|undefined), end: (string|undefined)}}
+		 * @returns {string|undefined}
 		 */
-		timezone() {
-			const getTimezone = (date) => {
-				const timezoneId = date.timezoneId
-				if (!timezoneId || timezoneId === 'floating') {
-					return undefined
-				}
-
-				return getReadableTimezoneName(timezoneId)
-			}
+		startTimezone() {
+			return getTimezoneFromDate(this.event.startDate)
+		},
 
-			return {
-				start: getTimezone(this.event.startDate),
-				end: getTimezone(this.event.endDate),
-			}
+		/**
+		 * @returns {string|undefined}
+		 */
+		endTimezone() {
+			return getTimezoneFromDate(this.event.endDate)
 		},
 
 		/**
-		 *
 		 * @returns {string|undefined|null}
 		 */
 		location() {
 			return this.event.location
 		},
 
 		/**
-		 *
 		 * @returns {{name: string, isOrganizer: boolean}[]}
 		 */
 		attendees() {