feat: add organizer selection

Signed-off-by: SebastianKrupinski <[email protected]>

css/app-sidebar.scss

@@ -883,6 +883,7 @@
 }
 
 .resource-search-list-item,
+.organizer-select-list-item,
 .invitees-search-list-item {
 	display: flex;
 	align-items: center;
@@ -917,6 +918,7 @@
 }
 
 .resource-search__multiselect,
+.organizer-select__multiselect,
 .invitees-search__multiselect {
 	width: 100%;
 }

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,47 @@ 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
+		},
+		organizerSelected() {
+			let organizer = null
+			if (this.calendarObjectInstance.organizer !== null) {
+				const user = this.calendarObjectInstance.organizer
+				organizer = {
+					label: user.commonName,
+					address: removeMailtoPrefix(user.uri)
+				}
+			}
+			else if (this.principalsStore.getCurrentUserPrincipal !== null) {
+				const user = this.principalsStore.getCurrentUserPrincipal
+				organizer = {
+					label: user.displayname,
+					address: user.emailAddress
+				}
+			}
+			return organizer
+		},
 		isListEmpty() {
 			return !this.calendarObjectInstance.organizer && this.invitees.length === 0
 		},
@@ -270,6 +319,14 @@ export default {
 		},
 	},
 	methods: {
+		changeOrganizer({ id, address, label }) {
+			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,50 @@
 		<div class="invitees-list-item__organizer-hint">
 			{{ $t('calendar', '(organizer)') }}
 		</div>
+		<div class="invitees-list-item__actions">
+			<NcActions v-if="!isReadOnly && isSharedWithMe">
+				<NcActionRadio v-for="person in organizerSelection"
+					name="organizerSelector"
+					:key="person.address"
+					:checked="selectedOrganizer(person.address)"
+					@change="changeOrganizer(person)">
+					{{ person.label }}
+				</NcActionRadio>
+			</NcActions>
+		</div>
 	</div>
 </template>
 
 <script>
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
 
 export default {
 	name: 'OrganizerListItem',
 	components: {
 		AvatarParticipationStatus,
+		NcActions,
+		NcActionRadio,
 	},
 	props: {
 		organizer: {
 			type: Object,
 			required: true,
 		},
+		organizerSelection: {
+			type: Array,
+			required: true,
+		},
 		isReadOnly: {
 			type: Boolean,
 			required: true,
 		},
+		isSharedWithMe: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	computed: {
 		/**
@@ -71,6 +94,17 @@ export default {
 			return false
 		},
 	},
+	methods: {
+		selectedOrganizer(address) {
+			if (removeMailtoPrefix(this.organizer.uri) === address) {
+				return true
+			}
+			return false
+		},
+		changeOrganizer(person) {
+			this.$emit('change-organizer', person)
+		},
+	},
 }
 </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" />