Merge pull request #8085 from nextcloud/feat/add-calendar-delegation-features

Feat/add calendar delegation features

Author: GVodyanov

src/components/AppNavigation/CalendarList.vue

@@ -101,6 +101,19 @@
 				:calendar="calendar" />
 		</template>
 
+		<template v-if="!isPublic && isDelegationSupported && sortedCalendars.delegated.length">
+			<template v-for="group in delegatedGroups" :key="group.delegatorUrl">
+				<NcAppNavigationCaption
+					:name="group.readOnly
+						? $t('calendar', 'Delegated by {name} (read-only)', { name: group.displayname })
+						: $t('calendar', 'Delegated by {name}', { name: group.displayname })" />
+				<CalendarListItem
+					v-for="calendar in group.calendars"
+					:key="calendar.id"
+					:calendar="calendar" />
+			</template>
+		</template>
+
 		<NcAppNavigationSpacer />
 
 		<!-- The header slot must be placed here, otherwise vuedraggable adds undefined as item to the array -->
@@ -122,6 +135,9 @@ import CalendarListItemLoadingPlaceholder from './CalendarList/CalendarListItemL
 import CalendarListNew from './CalendarList/CalendarListNew.vue'
 import PublicCalendarListItem from './CalendarList/PublicCalendarListItem.vue'
 import useCalendarsStore from '../../store/calendars.js'
+import useDelegationStore from '../../store/delegation.ts'
+import usePrincipalsStore from '../../store/principals.js'
+import { isAfterVersion } from '../../utils/nextcloudVersion.ts'
 
 const limit = pLimit(1)
 
@@ -153,13 +169,14 @@ export default {
 		return {
 			calendars: [],
 			/**
-			 * Calendars sorted by personal, shared, deck, and tasks
+			 * Calendars sorted by personal, shared, deck, and delegated
 			 */
 			sortedCalendars: {
 				personal: [],
 				shared: [],
 				deck: [],
 				tasks: [],
+				delegated: [],
 			},
 
 			disableDragging: false,
@@ -168,14 +185,43 @@ export default {
 	},
 
 	computed: {
-		...mapStores(useCalendarsStore),
+		...mapStores(useCalendarsStore, useDelegationStore, usePrincipalsStore),
 		...mapState(useCalendarsStore, {
 			serverCalendars: 'sortedCalendarsSubscriptions',
 		}),
 
 		loadingKeyCalendars() {
 			return this._uid + '-loading-placeholder-calendars'
 		},
+
+		isDelegationSupported() {
+			return isAfterVersion(34)
+		},
+
+		/**
+		 * Delegated calendars grouped by the delegator (the user who granted
+		 * proxy access), which may differ from each calendar's owner when the
+		 * delegator only has access via a regular share.
+		 *
+		 * @return {Array<{delegatorUrl: string, displayname: string, calendars: object[]}>}
+		 */
+		delegatedGroups() {
+			const groups = new Map()
+			for (const calendar of this.sortedCalendars.delegated) {
+				const delegatorUrl = calendar.delegatorUrl || calendar.owner || ''
+				if (!groups.has(delegatorUrl)) {
+					const principal = this.principalsStore.getPrincipalByUrl(delegatorUrl)
+					groups.set(delegatorUrl, {
+						delegatorUrl,
+						displayname: principal?.displayname || principal?.userId || '',
+						readOnly: !!calendar.readOnly,
+						calendars: [],
+					})
+				}
+				groups.get(delegatorUrl).calendars.push(calendar)
+			}
+			return Array.from(groups.values())
+		},
 	},
 
 	watch: {
@@ -208,9 +254,15 @@ export default {
 				shared: [],
 				deck: [],
 				tasks: [],
+				delegated: [],
 			}
 
 			this.calendars.forEach((calendar) => {
+				if (calendar.isDelegated) {
+					this.sortedCalendars.delegated.push(calendar)
+					return
+				}
+
 				if (calendar.isSharedWithMe) {
 					this.sortedCalendars.shared.push(calendar)
 					return

src/components/AppNavigation/CalendarList/CalendarListItem.vue

@@ -26,16 +26,36 @@
 
 		<template #counter>
 			<LinkVariant v-if="isSharedByMe" :size="20" />
+			<NcAvatar
+				v-else-if="isDelegated && loadedDelegatorPrincipal && !actionsMenuOpen"
+				:user="delegatorUserId"
+				:displayName="delegatorDisplayname"
+				:title="delegatorDisplayname"
+				:hideStatus="true"
+				:size="20"
+				class="delegated-counter-avatar" />
 			<NcAvatar
 				v-else-if="isSharedWithMe && loadedOwnerPrincipal && !actionsMenuOpen"
 				:user="ownerUserId"
 				:displayName="ownerDisplayname" />
-			<div v-else-if="isSharedWithMe && !loadedOwnerPrincipal" class="icon icon-loading" />
+			<div v-else-if="(isSharedWithMe && !loadedOwnerPrincipal) || (isDelegated && !loadedDelegatorPrincipal)" class="icon icon-loading" />
 		</template>
 
 		<template #actions>
 			<template v-if="!isBeingDeleted">
-				<template v-if="isSharedWithMe">
+				<template v-if="isDelegated">
+					<NcActionCaption :name="$t('calendar', 'Delegated to you by')" />
+					<NcActionText class="delegated-action-text">
+						<template #icon>
+							<div class="actions-icon-avatar">
+								<NcAvatar :user="delegatorUserId" :displayName="delegatorDisplayname" :size="30" />
+							</div>
+						</template>
+						{{ delegatorDisplayname }}
+					</NcActionText>
+					<NcActionSeparator />
+				</template>
+				<template v-else-if="isSharedWithMe">
 					<NcActionCaption :name="$t('calendar', 'Shared with you by')" />
 					<NcActionText>
 						<template #icon>
@@ -143,7 +163,7 @@ export default {
 		canBeShared() {
 			// The backend falsely reports incoming editable shares as being shareable
 			// Ref https://github.com/nextcloud/calendar/issues/5755
-			if (this.calendar.isSharedWithMe) {
+			if (this.calendar.isSharedWithMe || this.calendar.isDelegated) {
 				return false
 			}
 
@@ -165,7 +185,16 @@ export default {
 		 * @return {boolean}
 		 */
 		isSharedWithMe() {
-			return this.calendar.isSharedWithMe
+			return this.calendar.isSharedWithMe && !this.calendar.isDelegated
+		},
+
+		/**
+		 * Is the calendar delegated to me by another user?
+		 *
+		 * @return {boolean}
+		 */
+		isDelegated() {
+			return !!this.calendar.isDelegated
 		},
 
 		/**
@@ -186,6 +215,10 @@ export default {
 			return this.principalsStore.getPrincipalByUrl(this.calendar.owner) !== undefined
 		},
 
+		loadedDelegatorPrincipal() {
+			return this.principalsStore.getPrincipalByUrl(this.calendar.delegatorUrl) !== undefined
+		},
+
 		ownerUserId() {
 			const principal = this.principalsStore.getPrincipalByUrl(this.calendar.owner)
 			if (principal) {
@@ -204,6 +237,16 @@ export default {
 			return ''
 		},
 
+		delegatorUserId() {
+			const principal = this.principalsStore.getPrincipalByUrl(this.calendar.delegatorUrl)
+			return principal?.userId || ''
+		},
+
+		delegatorDisplayname() {
+			const principal = this.principalsStore.getPrincipalByUrl(this.calendar.delegatorUrl)
+			return principal?.displayname || principal?.userId || ''
+		},
+
 		/**
 		 * compute aria-description for AppNavigationItem link
 		 *
@@ -308,6 +351,16 @@ export default {
 		height: 44px;
 	}
 
+	// Size and position the delegated avatar in the counter slot to match icon buttons
+	.delegated-counter-avatar {
+		margin-inline-start: auto;
+	}
+
+	// Vertically align the owner name with the avatar in the "Delegated to you by" row
+	:deep(.action-text__text) {
+		align-self: center ;
+	}
+
 	// Hide avatars if list item is hovered
 	:deep(.app-navigation-entry:hover .app-navigation-entry__counter-wrapper) {
 		display: none;

src/components/AppNavigation/Settings.vue

@@ -135,6 +135,12 @@
 						<SettingsAttachmentsFolder />
 					</NcFormGroup>
 				</NcAppSettingsSection>
+				<NcAppSettingsSection
+					v-if="isDelegationSupported"
+					id="settings-modal-delegation"
+					:name="t('calendar', 'Delegation')">
+					<SettingsDelegationSection />
+				</NcAppSettingsSection>
 				<EventLegend />
 				<ShortcutOverview />
 			</NcAppSettingsDialog>
@@ -167,6 +173,7 @@ import CogIcon from 'vue-material-design-icons/CogOutline.vue'
 import CalendarPicker from '../Shared/CalendarPicker.vue'
 import EventLegend from './Settings/EventLegend.vue'
 import SettingsAttachmentsFolder from './Settings/SettingsAttachmentsFolder.vue'
+import SettingsDelegationSection from './Settings/SettingsDelegationSection.vue'
 import SettingsImportSection from './Settings/SettingsImportSection.vue'
 import SettingsTimezoneSelect from './Settings/SettingsTimezoneSelect.vue'
 import ShortcutOverview from './Settings/ShortcutOverview.vue'
@@ -187,6 +194,7 @@ import {
 	getAmountHoursMinutesAndUnitForAllDayEvents,
 } from '../../utils/alarms.js'
 import logger from '../../utils/logger.js'
+import { isAfterVersion } from '../../utils/nextcloudVersion.ts'
 
 export default {
 	name: 'Settings',
@@ -199,6 +207,7 @@ export default {
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,
+		SettingsDelegationSection,
 		ShortcutOverview,
 		CogIcon,
 		NcFormBox,
@@ -264,6 +273,10 @@ export default {
 			return this.savingBirthdayCalendar || this.loadingCalendars
 		},
 
+		isDelegationSupported() {
+			return isAfterVersion(34)
+		},
+
 		files() {
 			return this.importFilesStore.importFiles
 		},