fixup! feat: add recipient info on the right side of the composer

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

src/components/Composer.vue

@@ -476,6 +476,7 @@ import UnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal
 import UnfoldLessHorizontal from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
 import Paperclip from 'vue-material-design-icons/Paperclip.vue'
 import IconFormat from 'vue-material-design-icons/FormatUnderline.vue'
+import { namespaces as NS } from '@nextcloud/cdav-library'
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getCanonicalLocale, getFirstDay, getLocale, translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
@@ -674,6 +675,7 @@ export default {
 			loadingIndicatorCc: false,
 			loadingIndicatorBcc: false,
 			isActionsOpen: false,
+			isAddAttachmentsOpen: false,
 			isMoreActionsOpen: false,
 			selectedDate,
 			sendAtVal: this.sendAt,
@@ -1240,6 +1242,21 @@ export default {
 		},
 		onNewToAddr(option) {
 			this.onNewAddr(option, this.selectTo, 'to')
+			// this.$store.getters.getAddressBooks.forEach(addressBook => {
+			// 	console.info(addressBook)
+			// 	addressBook.addressbookQuery([{
+			// 		name: [NS.IETF_CARDDAV, 'comp-filter'],
+			// 		attributes: [['name', 'VCARD']],
+			// 		children: [{
+			// 			name: [NS.IETF_CARDDAV, 'prop-filter'],
+			// 			attributes: [['name', 'EMAIL']],
+			// 			children: [{
+			// 				name: [NS.IETF_CALDAV, 'text-match'],
+			// 				value: option.email,
+			// 			}],
+			// 		}],
+			// 	}])
+			// })
 		},
 		onNewCcAddr(option) {
 			this.onNewAddr(option, this.selectCc, 'cc')

src/components/NewMessageModal.vue

@@ -115,7 +115,7 @@
 				</div>
 
 				<div v-if="composerData.to && composerData.to.length > 0" class="right-pane">
-					<RecipientInfo :recipient-info="composerData.to" />
+					<RecipientInfo :recipient="composerData.to" />
 				</div>
 			</div>
 		</template>

src/components/RecipientInfo.vue

@@ -1,25 +1,26 @@
 <template>
 	<div class="recipient-info">
-		<div v-if="recipientInfo.length === 1" class="recipient-single">
-			<Avatar :user="recipientInfo[0].uid"
-				:display-name="recipientInfo[0].displayName"
-				:email="recipientInfo[0].email"
+		<!-- <div v-if="recipient.length === 1" class="recipient-single">
+			<Avatar :user="recipient.uid"
+				:display-name="recipient.displayName"
+				:email="recipient.email"
 				:size="128"
 				:disable-tooltip="true"
-				:disable-menu="true" />
+				:url="photoUrl" />
 			<div class="recipient-details">
-				<p>{{ recipientInfo[0].displayName }}</p>
+				<p>{{ recipient.displayName }}</p>
 				<p class="recipient-email">
-					{{ recipientInfo[0].email }}
+					{{ recipient.email }}
 				</p>
 			</div>
-		</div>
-		<div v-else class="recipient-multiple">
+		</div> -->
+		<div class="recipient-multiple">
 			<div class="recipient-list">
-				<div v-for="(recipient, index) in recipientInfo"
-					:key="recipient.uid"
+				<div v-for="(vcard, index) in recipientsVCards"
+					 :key="index"
 					class="recipient-item">
-					<Avatar :user="recipient.uid"
+					{{ vcard.data ? vcard.data : 'No data available' }}
+					<!--					<Avatar :user="recipient.uid"
 						:display-name="recipient.displayName"
 						:email="recipient.email"
 						:size="64"
@@ -40,7 +41,7 @@
 								{{ recipient.email }}
 							</p>
 						</div>
-					</div>
+					</div>-->
 				</div>
 			</div>
 		</div>
@@ -51,6 +52,8 @@
 import Avatar from './Avatar.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
+import { mapGetters } from 'vuex'
+import { namespaces as NS } from '@nextcloud/cdav-library'
 
 export default {
 	components: {
@@ -59,17 +62,92 @@ export default {
 		IconArrowDown,
 	},
 	props: {
-		recipientInfo: {
+		recipient: {
 			type: Array,
 			required: true,
 		},
 	},
 	data() {
 		return {
 			expandedIndex: null,
+			photoUrl: undefined,
+			recipientsVCards: {},
+			loadingParticipants: {},
 		}
 	},
+	computed: {
+		...mapGetters(['getAddressBooks', 'composerMessage']),
+		/**
+		 * @return {{ label: string, email: string }[]}
+		 */
+		recipients() {
+			return this.composerMessage.data.to
+		},
+
+		recipientsVCardsList() {
+			return Object.values(this.recipientsVCards).filter(Boolean)
+		},
+	},
+	watch: {
+		async recipients() {
+			// New 'to' list
+			const newEmails = this.recipients.map(recipient => recipient.email)
+			// Emails we had
+			const oldEmails = Object.keys(this.recipientsVCards)
+			// Emails that were added
+			const addedEmails = newEmails.filter(email => !oldEmails.includes(email))
+			// Emails that were removed
+			const removedEmails = oldEmails.filter(email => !newEmails.includes(email))
+
+			// Delete removed recipients
+			for (const email of removedEmails) {
+				this.$delete(this.recipientsVCards, email)
+			}
+
+			await Promise.all(addedEmails.map(email => this.fetchRecipientInfo(email)))
+		},
+	},
 	methods: {
+		async fetchRecipientInfo(email) {
+			if (this.loadingParticipants[email]) {
+				// is already loading
+				return
+			}
+
+			// loading
+			this.$set(this.loadingParticipants, email, true)
+
+			// Fetch the cards from all the address books
+			const result = await Promise.all(this.getAddressBooks.map(async addressBook => {
+				return await addressBook.addressbookQuery([{
+					name: [NS.IETF_CARDDAV, 'comp-filter'],
+					attributes: [['name', 'VCARD']],
+					children: [{
+						name: [NS.IETF_CARDDAV, 'prop-filter'],
+						attributes: [['name', 'EMAIL']],
+						children: [{
+							name: [NS.IETF_CALDAV, 'text-match'],
+							value: email,
+						}],
+					}],
+				}])
+			}))
+
+			const vcards = result.flat()
+
+			// Let's assume we have no more than 1 card for a recipient
+			const vcard = vcards[0]
+
+			if (vcard) {
+				// Save the card
+				this.$set(this.recipientsVCards, email, vcard)
+			}
+
+			// Loading is finished
+			this.$delete(this.loadingParticipants, email)
+
+			console.info(this.recipientsVCards)
+		},
 		toggleExpand(index) {
 			this.expandedIndex = this.expandedIndex === index ? null : index
 		},

src/service/caldavService.js

@@ -45,7 +45,10 @@ const getClient = () => {
  * Initializes the client for use in the user-view
  */
 export async function initializeClientForUserView() {
-	await getClient().connect({ enableCalDAV: true })
+	await getClient().connect({
+		enableCalDAV: true,
+		enableCardDAV: true,
+	})
 }
 
 /**
@@ -66,11 +69,23 @@ export function getCalendarHome() {
 	return getClient().calendarHomes[0]
 }
 
+/**
+ * Fetch all address books from the server
+ *
+ * @return {Promise<AddressBookHome>}
+ */
+export function getAddressBookHomes() {
+	return getClient().addressBookHomes[0]
+}
+
 /**
  * Fetch all collections in the calendar home from the server
  *
  * @return {Promise<Collection[]>}
  */
 export async function findAll() {
-	return await getCalendarHome().findAllCalDAVCollectionsGrouped()
+	return {
+		calendarGroups: await getCalendarHome().findAllCalDAVCollectionsGrouped(),
+		addressBooks: await getAddressBookHomes().findAllAddressBooks(),
+	}
 }

src/store/actions.js

@@ -1358,10 +1358,13 @@ export default {
 	 */
 	async loadCollections({ commit }) {
 		await handleHttpAuthErrors(commit, async () => {
-			const { calendars } = await findAll()
+			const { calendarGroups: { calendars }, addressBooks } = await findAll()
 			for (const calendar of calendars) {
 				commit('addCalendar', { calendar })
 			}
+			for (const addressBook of addressBooks) {
+				commit('addAddressBook', { addressBook })
+			}
 		})
 	},
 

src/store/getters.js

@@ -116,6 +116,7 @@ export const getters = {
 	getCurrentUserPrincipal: (state) => state.currentUserPrincipal,
 	getCurrentUserPrincipalEmail: (state) => state.currentUserPrincipal?.email,
 	getCalendars: (state) => state.calendars,
+	getAddressBooks: (state) => state.addressBooks,
 	getClonedCalendars: (state) => state.calendars.map(calendar => {
 		// Hack: We need to clone all calendars because some methods (e.g. calendarQuery) are
 		// unnecessarily mutating the object and causing vue warnings (if used outside of

src/store/index.js

@@ -103,6 +103,7 @@ export default new Store({
 				masterPasswordEnabled: false,
 				sieveScript: {},
 				calendars: [],
+				addressBooks: [],
 				smimeCertificates: [],
 				hasFetchedInitialEnvelopes: false,
 				followUpFeatureAvailable: false,

src/store/mutations.js

@@ -480,6 +480,9 @@ export default {
 	addCalendar(state, { calendar }) {
 		state.calendars = [...state.calendars, calendar]
 	},
+	addAddressBook(state, { addressBook }) {
+		state.addressBooks = [...state.addressBooks, addressBook]
+	},
 	setGoogleOauthUrl(state, url) {
 		state.googleOauthUrl = url
 	},