Feat/add calendar delegation features

src/components/AppNavigation/CalendarList.vue

@@ -77,6 +77,14 @@
 				:calendar="calendar" />
 		</template>
 
+		<NcAppNavigationCaption v-if="sortedCalendars.delegated.length" :name="$t('calendar', 'Delegated')" />
+		<template v-if="!isPublic && sortedCalendars.delegated.length">
+			<CalendarListItem
+				v-for="calendar in sortedCalendars.delegated"
+				:key="calendar.id"
+				:calendar="calendar" />
+		</template>
+
 		<NcAppNavigationSpacer />
 
 		<!-- The header slot must be placed here, otherwise vuedraggable adds undefined as item to the array -->
@@ -98,6 +106,7 @@ 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.js'
 
 const limit = pLimit(1)
 
@@ -129,12 +138,13 @@ export default {
 		return {
 			calendars: [],
 			/**
-			 * Calendars sorted by personal, shared, and deck
+			 * Calendars sorted by personal, shared, deck, and delegated
 			 */
 			sortedCalendars: {
 				personal: [],
 				shared: [],
 				deck: [],
+				delegated: [],
 			},
 
 			disableDragging: false,
@@ -143,7 +153,7 @@ export default {
 	},
 
 	computed: {
-		...mapStores(useCalendarsStore),
+		...mapStores(useCalendarsStore, useDelegationStore),
 		...mapState(useCalendarsStore, {
 			serverCalendars: 'sortedCalendarsSubscriptions',
 		}),
@@ -182,9 +192,15 @@ export default {
 				personal: [],
 				shared: [],
 				deck: [],
+				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 && loadedOwnerPrincipal && !actionsMenuOpen"
+				:user="ownerUserId"
+				:displayName="ownerDisplayname"
+				:title="ownerDisplayname"
+				: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 || isDelegated) && !loadedOwnerPrincipal" 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="ownerUserId" :displayName="ownerDisplayname" :size="30" />
+							</div>
+						</template>
+						{{ ownerDisplayname }}
+					</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
 		},
 
 		/**
@@ -272,6 +301,7 @@ export default {
 		 * Open the calendar modal for this calendar item.
 		 */
 		showEditModal() {
+			console.log('getting here')
 			this.calendarsStore.editCalendarModal = { calendarId: this.calendar.id }
 		},
 
@@ -308,6 +338,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

@@ -126,6 +126,11 @@
 						<SettingsAttachmentsFolder />
 					</NcFormGroup>
 				</NcAppSettingsSection>
+				<NcAppSettingsSection
+					id="settings-modal-delegation"
+					:name="t('calendar', 'Delegation')">
+					<SettingsDelegationSection />
+				</NcAppSettingsSection>
 				<EventLegend />
 				<ShortcutOverview />
 			</NcAppSettingsDialog>
@@ -158,6 +163,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'
@@ -185,6 +191,7 @@ export default {
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,
+		SettingsDelegationSection,
 		ShortcutOverview,
 		CogIcon,
 		NcFormBox,