cleanup

src/components/Editor/AvatarParticipationStatus.vue

@@ -22,9 +22,16 @@
 
 <template>
 	<div class="avatar-participation-status">
-		<Avatar :disable-tooltip="true"
+		<Avatar v-if="isCircle === true">
+			<template #icon>
+				<GoogleCirclesCommunitiesIcon :size="32" />
+			</template>
+		</Avatar>
+		<Avatar v-if="isCircle !== true"
+			:disable-tooltip="true"
 			:user="avatarLink"
 			:is-no-user="isResource" />
+
 		<template v-if="participationStatus === 'ACCEPTED' && isViewedByOrganizer">
 			<IconCheck class="avatar-participation-status__indicator"
 				fill-color="#32CD32"
@@ -124,7 +131,8 @@
 </template>
 
 <script>
-import { NcAvatar as Avatar } from '@nextcloud/vue'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import GoogleCirclesCommunitiesIcon from 'vue-material-design-icons/GoogleCirclesCommunities.vue'
 import IconCheck from 'vue-material-design-icons/CheckCircle.vue'
 import IconNoResponse from 'vue-material-design-icons/HelpCircle.vue'
 import IconClose from 'vue-material-design-icons/CloseCircle.vue'
@@ -133,8 +141,9 @@ import IconDelegated from 'vue-material-design-icons/ArrowRightDropCircle.vue'
 export default {
 	name: 'AvatarParticipationStatus',
 	components: {
-		Avatar,
-		IconCheck,
+	  Avatar,
+	  GoogleCirclesCommunitiesIcon,
+	  IconCheck,
 	  IconNoResponse,
 	  IconClose,
 	  IconDelegated,
@@ -161,6 +170,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		isCircle: {
+			type: Boolean,
+			required: false,
+		},
 		isSuggestion: {
 			type: Boolean,
 			default: false,

src/components/Editor/Invitees/InviteesList.vue

@@ -34,6 +34,7 @@
 			:attendee="invitee"
 			:is-read-only="isReadOnly"
 			:organizer-display-name="organizerDisplayName"
+			:members="invitee.members"
 			@remove-attendee="removeAttendee" />
 		<NoAttendeesView v-if="isReadOnly && isListEmpty"
 			:message="noInviteesMessage" />
@@ -120,13 +121,29 @@ export default {
 				return !['RESOURCE', 'ROOM'].includes(attendee.attendeeProperty.userType)
 			})
 		},
+		groups() {
+			return this.calendarObjectInstance.attendees.filter(attendee => {
+				return attendee.attendeeProperty.userType === 'GROUP'
+			})
+		},
 		inviteesWithoutOrganizer() {
 			if (!this.calendarObjectInstance.organizer) {
 				return this.invitees
 			}
 
 			return this.invitees
-				.filter(attendee => attendee.uri !== this.calendarObjectInstance.organizer.uri)
+				.filter(attendee => {
+					// Filter attendees which are part of an invited group
+					if (attendee.member) {
+						var isMemberOfGroup = this.groups.some(function(group) {
+							return attendee.member.includes(group.uri) &&
+								attendee.attendeeProperty.userType === 'INDIVIDUAL'
+						})
+					}
+
+					return attendee.uri !== this.calendarObjectInstance.organizer.uri &&
+						!isMemberOfGroup
+				})
 		},
 		hasOrganizer() {
 			return this.calendarObjectInstance.organizer !== null

src/components/Editor/Invitees/InviteesListItem.vue

@@ -23,52 +23,51 @@
 
 <template>
 	<div class="invitees-list-item">
-		<AvatarParticipationStatus :attendee-is-organizer="false"
-			:is-viewed-by-organizer="isViewedByOrganizer"
-			:is-resource="false"
-			:avatar-link="avatarLink"
-			:participation-status="attendee.participationStatus"
-			:organizer-display-name="organizerDisplayName"
-			:common-name="commonName" />
+		<AvatarParticipationStatus :attendee-is-organizer="false" :is-viewed-by-organizer="isViewedByOrganizer"
+			:is-resource="false" :avatar-link="avatarLink" :participation-status="attendee.participationStatus"
+			:organizer-display-name="organizerDisplayName" :common-name="commonName" :is-circle="isCircle" />
 		<div class="invitees-list-item__displayname">
 			{{ commonName }}
 		</div>
 		<div class="invitees-list-item__actions">
+			<NcButton class="icon-collapse" v-if="isCircle"
+				:class="{ 'icon-collapse--open': memberListExpaneded }"
+				type="tertiary"
+				:aria-label="labelButton" @click="toggleMemberList">
+				<template this#icon>
+					<ChevronUp v-if="memberListExpaneded" :size="20" />
+					<ChevronDown v-else :size="20" />
+				</template>
+			</NcButton>
 			<Actions v-if="isViewedByOrganizer">
-				<ActionCheckbox :checked="attendee.rsvp"
-					@change="toggleRSVP">
+				<ActionCheckbox :checked="attendee.rsvp" @change="toggleRSVP">
 					{{ $t('calendar', 'Send email') }}
 				</ActionCheckbox>
 
-				<ActionRadio :name="radioName"
-					:checked="isChair"
-					@change="changeRole('CHAIR')">
+				<ActionRadio :name="radioName" :checked="isChair" @change="changeRole('CHAIR')">
 					{{ $t('calendar', 'Chairperson') }}
 				</ActionRadio>
-				<ActionRadio :name="radioName"
-					:checked="isRequiredParticipant"
-					@change="changeRole('REQ-PARTICIPANT')">
+				<ActionRadio :name="radioName" :checked="isRequiredParticipant" @change="changeRole('REQ-PARTICIPANT')">
 					{{ $t('calendar', 'Required participant') }}
 				</ActionRadio>
-				<ActionRadio :name="radioName"
-					:checked="isOptionalParticipant"
-					@change="changeRole('OPT-PARTICIPANT')">
+				<ActionRadio :name="radioName" :checked="isOptionalParticipant" @change="changeRole('OPT-PARTICIPANT')">
 					{{ $t('calendar', 'Optional participant') }}
 				</ActionRadio>
-				<ActionRadio :name="radioName"
-					:checked="isNonParticipant"
-					@change="changeRole('NON-PARTICIPANT')">
+				<ActionRadio :name="radioName" :checked="isNonParticipant" @change="changeRole('NON-PARTICIPANT')">
 					{{ $t('calendar', 'Non-participant') }}
 				</ActionRadio>
 
 				<ActionButton @click="removeAttendee">
 					<template #icon>
 						<Delete :size="20" decorative />
 					</template>
-					{{ $t('calendar', 'Remove attendee') }}
+					{{ removeAttendeeText }}
 				</ActionButton>
 			</Actions>
 		</div>
+		<div class="member-list">
+			hallo
+		</div>
 	</div>
 </template>
 
@@ -81,6 +80,9 @@ import {
 	NcActionCheckbox as ActionCheckbox,
 } from '@nextcloud/vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+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/Delete.vue'
 
@@ -93,6 +95,9 @@ export default {
 		ActionRadio,
 		Actions,
 		Delete,
+		NcButton,
+		ChevronDown,
+		ChevronUp,
 	},
 	props: {
 		attendee: {
@@ -108,6 +113,11 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+    	return {
+      		memberListExpaneded: false
+    	};
+  	},
 	computed: {
 		/**
 		 * @return {string}
@@ -116,6 +126,16 @@ export default {
 			// return this.$store.getters.getAvatarForContact(this.uri) || this.commonName
 			return this.commonName
 		},
+		/**
+		 * @return {string}
+		 */
+		removeAttendeeText() {
+			if (this.isCircle) {
+				return this.$t('calendar', 'Remove circle')
+			} else {
+				return this.$t('calendar', 'Remove attendee')
+			}
+		},
 		/**
 		 * Common name of the organizer or the uri without the 'mailto:' prefix.
 		 *
@@ -151,6 +171,12 @@ export default {
 			// TODO: check if also viewed by organizer
 			return !this.isReadOnly
 		},
+		isCircle() {
+			return this.attendee.attendeeProperty.userType === 'GROUP'
+		},
+		labelButton() {
+			return this.memberListExpaneded ? t('Collapse menu') : t('Open menu')
+		},
 	},
 	methods: {
 		/**
@@ -178,11 +204,22 @@ export default {
 		removeAttendee() {
 			this.$emit('remove-attendee', this.attendee)
 		},
+		/**
+		 * Toggle member list if attendee is a group
+		 */
+		toggleMemberList(e) {
+			this.$emit('click', e)
+			this.memberListExpaneded = !this.memberListExpaneded
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+.invitees-list-item__actions {
+	display: flex;
+}
+
 .invitees-list-item__displayname {
 	margin-bottom: 17px;
 	text-overflow: ellipsis;
@@ -193,4 +230,9 @@ export default {
 .avatar-participation-status {
 	margin-top: 5px;
 }
+
+.member-list {
+	flex-basis: 100%;
+	width: 100%;
+}
 </style>

src/models/attendee.js

@@ -44,6 +44,8 @@ const getDefaultAttendeeObject = (props = {}) => Object.assign({}, {
 	rsvp: false,
 	// The uri of the attendee
 	uri: null,
+	// Member address of the attendee
+	member: null,
 }, props)
 
 /**
@@ -61,6 +63,8 @@ const mapAttendeePropertyToAttendeeObject = (attendeeProperty) => {
 		role: attendeeProperty.role,
 		rsvp: attendeeProperty.rsvp,
 		uri: attendeeProperty.email,
+		// TODO Expose member attribute in calendar-js
+		member: attendeeProperty._parameters.get('MEMBER')?._value ?? null,
 	})
 }