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

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

src/components/RecipientInfo.vue

@@ -16,10 +16,10 @@
 		</div> -->
 		<div class="recipient-multiple">
 			<div class="recipient-list">
-				<div v-for="(vcard, index) in recipientsVCards"
+				<div v-for="(vCard, index) in recipientsVCards"
 					:key="index"
 					class="recipient-item">
-					<RecipientDetails :contacts="vcard.data" :reload-bus="reloadBus" />
+					<RecipientDetails :contact-key="selectedContacts" :contacts="vCard.data" :reload-bus="reloadBus" />
 					<!--					<Avatar :user="recipient.uid"
 						:display-name="recipient.displayName"
 						:email="recipient.email"
@@ -85,6 +85,9 @@ export default {
 		recipientsVCardsList() {
 			return Object.values(this.recipientsVCards).filter(Boolean)
 		},
+		selectedContact() {
+			return this.$route.params.selectedContact
+		},
 	},
 	watch: {
 		async recipients() {

src/nextcloud-contacts/RecipientDetails.vue

@@ -19,55 +19,18 @@
 		<template v-else>
 			<!-- contact header -->
 			<DetailsHeader>
-				<!-- avatar and upload photo -->
-				<template #avatar>
-					<ContactAvatar :contact="contact"
-						:is-read-only="isReadOnly"
-						:reload-bus="reloadBus"
-						@update-local-contact="updateLocalContact" />
-				</template>
-
 				<!-- fullname -->
 				<template #title>
-					<div v-if="isReadOnly" class="contact-title">
+					<div class="contact-title">
 						{{ contact.fullName }}
 					</div>
-					<input v-else
-						id="contact-fullname"
-						ref="fullname"
-						v-model="contact.fullName"
-						:placeholder="t('contacts', 'Name')"
-						type="text"
-						autocomplete="off"
-						autocorrect="off"
-						spellcheck="false"
-						name="fullname"
-						@click="selectInput">
 				</template>
 
 				<!-- org, title -->
 				<template #subtitle>
-					<template v-if="isReadOnly">
+					<template>
 						<span v-html="formattedSubtitle" />
 					</template>
-					<template v-else>
-						<input id="contact-title"
-							v-model="contact.title"
-							:placeholder="t('contacts', 'Title')"
-							type="text"
-							autocomplete="off"
-							autocorrect="off"
-							spellcheck="false"
-							name="title">
-						<input id="contact-org"
-							v-model="contact.org"
-							:placeholder="t('contacts', 'Company')"
-							type="text"
-							autocomplete="off"
-							autocorrect="off"
-							spellcheck="false"
-							name="org">
-					</template>
 				</template>
 
 				<div v-if="!loadingData" class="contact-details-wrapper">
@@ -81,8 +44,7 @@
 							:contact="contact"
 							:local-contact="localContact"
 							:contacts="contacts"
-							:bus="bus"
-							:is-read-only="isReadOnly" />
+							:bus="bus" />
 					</div>
 					<!-- addressbook change select - no last property because class is not applied here,
 					empty property because this is a required prop on regular property-select. But since
@@ -95,14 +57,12 @@
 						:is-last-property="true"
 						:property="{}"
 						:hide-actions="true"
-						:is-read-only="isReadOnly"
 						class="property--addressbooks property--last" />
 
 					<!-- Groups always visible -->
 					<PropertyGroups :prop-model="groupsModel"
 						:value.sync="localContact.groups"
 						:contact="contact"
-						:is-read-only="isReadOnly"
 						class="property--groups property--last"
 						@update:value="updateGroups" />
 				</div>
@@ -181,19 +141,6 @@ export default {
 		contact() {
 			return this.$store.getters.getContact(this.contactKey)
 		},
-
-		/**
-		 * Conflict message
-		 *
-		 * @return {string|boolean}
-		 */
-		conflict() {
-			if (this.contact.conflict) {
-				return t('contacts', 'The contact you were trying to edit has changed. Please manually refresh the contact. Any further edits will be discarded.')
-			}
-			return false
-		},
-
 		/**
 		 * Contact properties copied and sorted by rfcProps.fieldOrder
 		 *