feat: add organizer selection

Signed-off-by: SebastianKrupinski <krupinskis05@gmail.com>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

src/components/Editor/Invitees/InviteesList.vue

@@ -17,7 +17,10 @@
 			@add-attendee="addAttendee" />
 		<OrganizerListItem v-if="hasOrganizer"
 			:is-read-only="isReadOnly"
-			:organizer="calendarObjectInstance.organizer" />
+			:is-shared-with-me="isSharedWithMe"
+			:organizer="calendarObjectInstance.organizer"
+			:organizer-selection="organizerSelection"
+			@change-organizer="changeOrganizer" />
 		<InviteesListItem v-for="invitee in limitedInviteesWithoutOrganizer"
 			:key="invitee.email"
 			:attendee="invitee"
@@ -81,6 +84,7 @@ import {
 import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee.js'
 import AccountMultipleIcon from 'vue-material-design-icons/AccountMultiple.vue'
 import usePrincipalsStore from '../../../store/principals.js'
+import useCalendarsStore from '../../../store/calendars.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
 import useSettingsStore from '../../../store/settings.js'
 import { mapStores, mapState } from 'pinia'
@@ -102,6 +106,14 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		isSharedWithMe: {
+			type: Boolean,
+			required: true,
+		},
+		calendar: {
+			type: Object,
+			required: true,
+		},
 		calendarObjectInstance: {
 			type: Object,
 			required: true,
@@ -135,7 +147,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapStores(usePrincipalsStore, useCalendarObjectInstanceStore),
+		...mapStores(usePrincipalsStore, useCalendarsStore, useCalendarObjectInstanceStore),
 		...mapState(useSettingsStore, ['talkEnabled']),
 		noInviteesMessage() {
 			return this.$t('calendar', 'No attendees yet')
@@ -214,10 +226,29 @@ export default {
 		hasOrganizer() {
 			return this.calendarObjectInstance.organizer !== null
 		},
-
 		organizerDisplayName() {
 			return organizerDisplayName(this.calendarObjectInstance.organizer)
 		},
+		organizerSelection() {
+			const organizers = []
+			const owner = this.principalsStore.getPrincipalByUrl(this.calendar.owner)
+			const principal = this.principalsStore.getCurrentUserPrincipal
+			if (owner) {
+				organizers.push({
+					id: owner.id,
+					label: owner.displayname,
+					address: owner.emailAddress
+				})
+			}
+			if (principal && owner.id !== principal.id) {
+				organizers.push({
+					id: principal.id,
+					label: principal.displayname,
+					address: principal.emailAddress
+				})
+			}
+			return organizers
+		},
 		isListEmpty() {
 			return !this.calendarObjectInstance.organizer && this.invitees.length === 0
 		},
@@ -268,8 +299,53 @@ export default {
 					.length,
 			})
 		},
+		selectedOrganizer() {
+			let organizer = null
+			if (this.calendarObjectInstance.organizer) {
+				const user = this.calendarObjectInstance.organizer
+				organizer = {
+					label: user.commonName,
+					address: removeMailtoPrefix(user.uri)
+				}
+			} else if (this.principalsStore.getCurrentUserPrincipal) {
+				const user = this.principalsStore.getCurrentUserPrincipal
+				organizer = {
+					label: user.displayname,
+					address: user.emailAddress
+				}
+			}
+			return organizer
+		},
 	},
 	methods: {
+		changeOrganizer({ id, address, label }, attend) {
+			// retrieve current organizer
+			const current = this.selectedOrganizer
+			// remove new organizer from attendees
+			this.calendarObjectInstance.attendees.forEach(function(attendee) {
+				if (removeMailtoPrefix(attendee.uri) === address || removeMailtoPrefix(attendee.uri) === current.address) {
+					this.removeAttendee(attendee)
+				}
+			}, this)
+			// determine if current organizer needs to be converted to a attendee
+			if (attend === true) {
+				this.addAttendee({
+					commonName: current.label,
+					email: current.address,
+					calendarUserType: 'INDIVIDUAL',
+					language: null,
+					timezoneId: null,
+					member: null,
+				})
+			}
+			// set new organizer
+			this.calendarObjectInstanceStore.setOrganizer({
+				calendarObjectInstance: this.calendarObjectInstance,
+				commonName: label,
+				email: address,
+			})
+			this.recentAttendees.push(address)
+		},
 		addAttendee({ commonName, email, calendarUserType, language, timezoneId, member }) {
 			this.calendarObjectInstanceStore.addAttendee({
 				calendarObjectInstance: this.calendarObjectInstance,

src/components/Editor/Invitees/OrganizerListItem.vue

@@ -18,27 +18,65 @@
 		<div class="invitees-list-item__organizer-hint">
 			{{ $t('calendar', '(organizer)') }}
 		</div>
+		<div class="invitees-list-item__actions">
+			<NcActions v-if="!isReadOnly && isSharedWithMe">
+				<template v-for="person in organizerSelection">
+					<NcActionButton v-if="!selectedOrganizer(person.address)"
+						:key="person.address + '-1'"
+						:closeAfterClick = "true"
+						@click="changeOrganizer(person, false)">
+						<template #icon>
+							<Crown :size="20" />
+						</template>
+						{{ $t('calendar', 'Make {label} the organizer', {label: person.label}) }}
+					</NcActionButton>
+					<NcActionButton v-if="!selectedOrganizer(person.address)"
+						:key="person.address + '-2'"
+						:closeAfterClick = "true"
+						@click="changeOrganizer(person, true)">
+						<template #icon>
+							<Crown :size="20" />
+						</template>
+						{{ $t('calendar', 'Make {label} the organizer and attend', {label: person.label}) }}
+					</NcActionButton>
+				</template>
+			</NcActions>
+		</div>
 	</div>
 </template>
 
 <script>
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import Crown from 'vue-material-design-icons/Crown.vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
 	name: 'OrganizerListItem',
 	components: {
 		AvatarParticipationStatus,
+		Crown,
+		NcActions,
+		NcActionButton,
 	},
 	props: {
 		organizer: {
 			type: Object,
 			required: true,
 		},
+		organizerSelection: {
+			type: Array,
+			required: true,
+		},
 		isReadOnly: {
 			type: Boolean,
 			required: true,
 		},
+		isSharedWithMe: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	computed: {
 		/**
@@ -71,6 +109,17 @@ export default {
 			return false
 		},
 	},
+	methods: {
+		selectedOrganizer(address) {
+			if (removeMailtoPrefix(this.organizer.uri) === address) {
+				return true
+			}
+			return false
+		},
+		changeOrganizer(person, attend) {
+			this.$emit('change-organizer', person, attend)
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>

src/mixins/EditorMixin.js

@@ -196,6 +196,18 @@ export default {
 
 			return calendar.readOnly
 		},
+		isSharedWithMe() {
+			if (!this.calendarObject) {
+				return true
+			}
+
+			const calendar = this.calendarsStore.getCalendarById(this.calendarObject.calendarId)
+			if (!calendar) {
+				return true
+			}
+
+			return calendar.isSharedWithMe
+		},
 		/**
 		 * Returns whether the user is an attendee of the event
 		 *

src/views/EditSidebar.vue

@@ -221,8 +221,10 @@
 			</template>
 			<div class="app-sidebar-tab__content">
 				<InviteesList v-if="!isLoading"
+					:calendar="selectedCalendar"
 					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly"
+					:is-read-only="isReadOnlyOrViewing"
+					:is-shared-with-me="isSharedWithMe"
 					:show-header="false"
 					@update-dates="updateDates" />
 			</div>

src/views/EditSimple.vue

@@ -125,6 +125,7 @@
 					:show-header="true"
 					:is-read-only="isReadOnlyOrViewing"
 					:is-shared-with-me="isSharedWithMe"
+					:calendar="selectedCalendar"
 					:calendar-object-instance="calendarObjectInstance"
 					:limit="3" />