feat(invitees): add copy button for attendee emails

Signed-off-by: Abhinav Ohri <[email protected]>

Author: abhinavohri

src/components/Editor/Invitees/AttendeeDisplay.vue

@@ -0,0 +1,97 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="attendee-display" :class="{ 'attendee-display--compact': hasMembers }">
+		<div class="attendee-display__name">
+			<slot name="displayname">
+				{{ displayName }}
+			</slot>
+		</div>
+		<span v-if="email && !hasMembers" :title="email" class="attendee-display__button-wrapper">
+			<NcButton
+				class="attendee-display__button"
+				variant="tertiary-no-background"
+				:aria-label="$t('calendar', 'Copy name and email address')"
+				@click="handleCopy">
+				<template #icon>
+					<ContentCopy :size="16" />
+				</template>
+			</NcButton>
+		</span>
+	</div>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { NcButton } from '@nextcloud/vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+export default {
+	name: 'AttendeeDisplay',
+	components: {
+		NcButton,
+		ContentCopy,
+	},
+
+	props: {
+		displayName: {
+			type: String,
+			required: true,
+		},
+
+		email: {
+			type: String,
+			required: true,
+		},
+
+		hasMembers: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	methods: {
+		async handleCopy() {
+			try {
+				const text = `${this.displayName} <${this.email}>`
+				await navigator.clipboard.writeText(text)
+				showSuccess(this.$t('calendar', 'Copied to clipboard'))
+			} catch (e) {
+				showError(this.$t('calendar', 'Failed to copy'))
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.attendee-display {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	overflow: hidden;
+	margin-bottom: calc(var(--default-grid-baseline) * 4);
+
+	&--compact {
+		margin-bottom: 0;
+	}
+
+	&__name {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	&__button-wrapper {
+		flex-shrink: 0;
+		display: flex;
+	}
+
+	&__button {
+		flex-shrink: 0;
+	}
+}
+</style>

src/components/Editor/Invitees/InviteesListItem.vue

@@ -16,16 +16,21 @@
 			:common-name="commonName"
 			:timezone="timezone"
 			:is-group="isGroup" />
-		<div
-			class="invitees-list-item__displayname"
-			:class="{ 'invitees-list-item__groupname': members.length }">
-			{{ commonName }}
-			<span
-				v-if="members.length"
-				class="invitees-list-item__member-count">
-				({{ $n('calendar', '%n member', '%n members', members.length) }})
-			</span>
-		</div>
+
+		<AttendeeDisplay
+			:display-name="commonName"
+			:email="attendeeEmail"
+			:has-members="!!members.length">
+			<template #displayname>
+				{{ commonName }}
+				<span
+					v-if="members.length"
+					class="invitees-list-item__member-count">
+					({{ $n('calendar', '%n member', '%n members', members.length) }})
+				</span>
+			</template>
+		</AttendeeDisplay>
+
 		<div class="invitees-list-item__actions">
 			<NcButton
 				v-if="members.length"
@@ -116,6 +121,7 @@ import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import Delete from 'vue-material-design-icons/TrashCanOutline.vue'
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import AttendeeDisplay from './AttendeeDisplay.vue'
 import { getAttendeeDetails } from '../../../services/attendeeDetails.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
@@ -132,6 +138,7 @@ export default {
 		NcButton,
 		ChevronDown,
 		ChevronUp,
+		AttendeeDisplay,
 	},
 
 	props: {
@@ -207,6 +214,15 @@ export default {
 			return ''
 		},
 
+		/**
+		 * Email address without the 'mailto:' prefix
+		 *
+		 * @return {string}
+		 */
+		attendeeEmail() {
+			return this.attendee.uri ? removeMailtoPrefix(this.attendee.uri) : ''
+		},
+
 		radioName() {
 			return this._uid + '-role-radio-input-group'
 		},
@@ -302,17 +318,6 @@ export default {
 	display: flex;
 }
 
-.invitees-list-item__displayname {
-	margin-bottom: 17px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-.invitees-list-item__groupname {
-	margin-bottom: 0px;
-}
-
 .avatar-participation-status {
 	margin-top: 5px;
 }

src/components/Editor/Invitees/OrganizerListItem.vue

@@ -14,9 +14,11 @@
 			:organizer-display-name="commonName"
 			:schedule-status="organizer.attendeeProperty.getParameterFirstValue('SCHEDULE-STATUS')"
 			participation-status="ACCEPTED" />
-		<div class="invitees-list-item__displayname">
-			{{ commonName }}
-		</div>
+
+		<AttendeeDisplay
+			:display-name="commonName"
+			:email="organizerEmail" />
+
 		<div class="invitees-list-item__organizer-hint">
 			{{ $t('calendar', '(organizer)') }}
 		</div>
@@ -54,11 +56,13 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import Crown from 'vue-material-design-icons/CrownOutline.vue'
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import AttendeeDisplay from './AttendeeDisplay.vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
 
 export default {
 	name: 'OrganizerListItem',
 	components: {
+		AttendeeDisplay,
 		AvatarParticipationStatus,
 		Crown,
 		NcActions,
@@ -117,6 +121,15 @@ export default {
 			return ''
 		},
 
+		/**
+		 * Email address without the 'mailto:' prefix
+		 *
+		 * @return {string}
+		 */
+		organizerEmail() {
+			return this.organizer.uri ? removeMailtoPrefix(this.organizer.uri) : ''
+		},
+
 		isResource() {
 			// The organizer does not have a tooltip
 			return false