From cd74ebc1b838dc63ff528693c8212c4192211916 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Wed, 23 Oct 2024 14:42:39 +0200
Subject: [PATCH 1/2] feat: create a readonly contactdetails

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/ReadOnlyContactDetails.vue | 443 ++++++++++++++++++++++
 1 file changed, 443 insertions(+)
 create mode 100644 src/components/ReadOnlyContactDetails.vue

diff --git a/src/components/ReadOnlyContactDetails.vue b/src/components/ReadOnlyContactDetails.vue
new file mode 100644
index 000000000..da3cfe340
--- /dev/null
+++ b/src/components/ReadOnlyContactDetails.vue
@@ -0,0 +1,443 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div>
+		<!-- nothing selected or contact not found -->
+		<EmptyContent v-if="!contact"
+			class="empty-content"
+			:name="t('mail', 'No data for this contact')"
+			:description="t('mail', 'No user selected or the user has no data on their profile')">
+			<template #icon>
+				<IconContact :size="20" />
+			</template>
+		</EmptyContent>
+
+		<div class="recipient-details-content">
+			<div class="contact-title">
+				<h6>
+					{{ contact.fullName }}
+				</h6>
+				<template v-if="isReadOnly">
+					<!-- Subtitle here -->
+					<span v-html="formattedSubtitle" />
+				</template>
+			</div>
+			<div v-if="!loadingData" class="contact-details-wrapper">
+				<div v-for="(properties, name) in groupedProperties"
+					:key="name">
+					<ContactDetailsProperty v-for="(property, index) in properties"
+						:key="`${index}-${contact.key}-${property.name}`"
+						:is-first-property="index===0"
+						:is-last-property="index === properties.length - 1"
+						:property="property"
+						:contact="contact"
+						:local-contact="localContact"
+						:contacts="contacts"
+						:is-read-only="isReadOnly"
+						:bus="bus" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { isMobile, NcEmptyContent as EmptyContent } from '@nextcloud/vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import mitt from 'mitt'
+import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty.vue'
+import { loadState } from '@nextcloud/initial-state'
+import Contact from '../store/contacts.js'
+import rfcProps from '../models/rfcProps.js'
+import validate from '../services/validate.js'
+
+const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
+
+export default {
+	name: 'ReadOnlyContactDetails',
+
+	components: {
+		ContactDetailsProperty,
+		EmptyContent,
+		IconContact,
+
+	},
+
+	mixins: [isMobile],
+
+	props: {
+		/* 		contactKey: {
+			type: String,
+			default: undefined,
+		}, */
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
+		desc: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		/* 		addressbooks: {
+			type: Object,
+			required: true,
+		}, */
+		contact: {
+			type: Contact,
+			required: true,
+		},
+		contacts: {
+			type: Array,
+			default: () => [],
+		},
+
+	},
+
+	data() {
+		return {
+			loadingData: false,
+			loadingUpdate: false,
+			// if true, the local contact have been fixed and requires a push
+			fixed: false,
+			contactDetailsSelector: '.contact-details',
+			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
+
+			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
+			bus: mitt(),
+			showMenuPopover: false,
+			profileEnabled,
+			localContact: undefined,
+			editMode: false,
+
+		}
+	},
+
+	computed: {
+		/**
+		 * Read-only representation of the contact title and organization.
+		 *
+		 * @return {string}
+		 */
+		formattedSubtitle() {
+			const title = this.contact.title
+			const organization = this.contact.org
+
+			if (title && organization) {
+				return t('contacts', '{title} at {organization}', {
+					title,
+					organization,
+				})
+			} else if (title) {
+				return title
+			} else if (organization) {
+				return organization
+			}
+
+			return ''
+		},
+		/* 		// store getter
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+		contact() {
+			return this.$store.getters.getContact(this.contactKey)
+		}, */
+		/**
+		 * Contact properties copied and sorted by rfcProps.fieldOrder
+		 *
+		 * @return {Array}
+		 */
+		sortedProperties() {
+			if (!this.localContact || !this.localContact.properties) {
+				return []
+			}
+			return this.localContact.properties
+				.slice(0)
+				.sort((a, b) => {
+					const nameA = a.name.split('.').pop()
+					const nameB = b.name.split('.').pop()
+					return rfcProps.fieldOrder.indexOf(nameA) - rfcProps.fieldOrder.indexOf(nameB)
+				})
+		},
+
+		/**
+		 * Contact properties filtered and grouped by rfcProps.fieldOrder
+		 *
+		 * @return {object}
+		 */
+		groupedProperties() {
+			if (!this.sortedProperties) {
+				return {}
+			}
+			return this.sortedProperties.reduce((list, property) => {
+				if (!this.canDisplay(property)) {
+					return list
+				}
+				if (!list[property.name]) {
+					list[property.name] = []
+				}
+				list[property.name].push(property)
+				return list
+			}, {})
+		},
+		/**
+		 * The address book is read-only (e.g. shared with me).
+		 *
+		 * @return {boolean}
+		 */
+		addressbookIsReadOnly() {
+			return this.contact.addressbook?.readOnly
+		},
+		isReadOnly() {
+			return this.addressbookIsReadOnly || !this.editMode
+		},
+
+		/* /!**
+		 * Fake model to use the propertySelect component
+		 *
+		 * @return {object}
+		 *!/
+		addressbookModel() {
+			return {
+				readableName: t('mail', 'Address book'),
+				icon: 'icon-address-book',
+				options: this.addressbooksOptions,
+			}
+		},
+		/!**
+		 * Store getters filtered and mapped to usable object
+		 * This is the list of addressbooks that are available
+		 *
+		 * @return {{id: string, name: string, readOnly: boolean}[]}
+		 *!/
+		addressbooksOptions() {
+			return this.addressbooks
+				.filter(addressbook => addressbook.enabled)
+				.map(addressbook => {
+					return {
+						id: addressbook.id,
+						name: addressbook.displayName,
+						readOnly: addressbook.readOnly,
+					}
+				})
+		},
+ */
+		/**
+		 * Usable addressbook object linked to the local contact
+		 *
+		 * @param {string} [addressbookId] set the addressbook id
+		 * @return {string}
+		 */
+		addressbook: {
+			get() {
+				return this.contact.addressbook.id
+			},
+			set(addressbookId) {
+				// Only move when the address book actually changed to prevent a conflict.
+				if (this.contact.addressbook.id !== addressbookId) {
+					this.moveContactToAddressbook(addressbookId)
+				}
+			},
+		},
+
+		/**
+		 * Fake model to use the propertyGroups component
+		 *
+		 * @return {object}
+		 */
+		groupsModel() {
+			return {
+				readableName: t('mail', 'Contact groups'),
+				icon: 'icon-contacts-dark',
+			}
+		},
+	},
+	watch: {
+		contact: {
+			handler(contact) {
+				this.updateLocalContact(contact)
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		updateGroups(value) {
+			this.newGroupsValue = value
+		},
+		/**
+		 * Send the local clone of contact to the store
+		 */
+		async updateContact() {
+			this.fixed = false
+			this.loadingUpdate = true
+			try {
+				await this.$store.dispatch('updateContact', this.localContact)
+			} finally {
+				this.loadingUpdate = false
+			}
+
+			// if we just created the contact, we need to force update the
+			// localContact to match the proper store contact
+			if (!this.localContact.dav) {
+				this.logger.debug('New contact synced!', { localContact: this.localContact })
+				// fetching newly created & storred contact
+				const contact = this.$store.getters.getContact(this.localContact.key)
+				await this.updateLocalContact(contact)
+			}
+		},
+		/**
+		 *  Update this.localContact and set this.fixed
+		 *
+		 * @param {Contact} contact the contact to clone
+		 */
+		async updateLocalContact(contact) {
+			// create empty contact and copy inner data
+			const localContact = Object.assign(
+				Object.create(Object.getPrototypeOf(contact)),
+				contact,
+			)
+			this.fixed = validate(localContact)
+
+			this.localContact = localContact
+			this.newGroupsValue = [...this.localContact.groups]
+		},
+		/**
+		 * Should display the property
+		 *
+		 * @param {Property} property the property to check
+		 * @return {boolean}
+		 */
+		canDisplay(property) {
+			// Make sure we have some model for the property and check for ITEM.PROP custom label format
+			const propModel = rfcProps.properties[property.name.split('.').pop()]
+
+			const propType = propModel && propModel.force
+				? propModel.force
+				: property.getDefaultType()
+
+			return propModel && propType !== 'unknown'
+		},
+
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// List of all properties
+.contact-details-wrapper {
+	display: inline;
+	align-items: flex-start;
+	padding-bottom: 20px;
+	gap: 15px;
+	float: left;
+}
+@media only screen and (max-width: 600px) {
+	.contact-details-wrapper {
+		display: block;
+	}
+}
+
+section.contact-details {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+#qrcode-modal {
+	:deep(.modal-container) {
+		display: flex;
+		padding: 10px;
+		background-color: #fff;
+		.qrcode {
+			max-width: 100%;
+		}
+	}
+}
+
+:deep(.v-select.select) {
+	min-width: 0;
+	flex: 1 auto;
+}
+
+:deep(.v-select.select .vs__selected-options), :deep(.vs__search) {
+	min-height: unset;
+	margin: 0 !important;
+}
+
+:deep(.vs__selected) {
+	height: calc(var(--default-clickable-area) - var(--default-grid-baseline)) !important;
+	margin: calc(var(--default-grid-baseline) / 2);
+}
+
+#pick-addressbook-modal {
+	:deep(.modal-container) {
+		display: flex;
+		overflow: visible;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+		margin-bottom: 20px;
+		padding: 10px;
+		background-color: #fff;
+		.multiselect {
+			flex: 1 1 100%;
+			width: 100%;
+			margin-bottom: 20px;
+		}
+	}
+}
+
+.action-item {
+	background-color: var(--color-primary-element-light);
+	border-radius: var(--border-radius-rounded);
+}
+
+:deep(.button-vue--vue-tertiary:hover),
+:deep(.button-vue--vue-tertiary:active) {
+	background-color: var(--color-primary-element-light-hover) !important;
+}
+
+.related-resources {
+	display:inline-grid;
+	margin-top: 88px;
+	flex-direction: column;
+	margin-bottom: -30px;
+}
+@media only screen and (max-width: 1600px) {
+	.related-resources {
+		float: left;
+		display: inline-grid;
+		margin-left: 80px;
+		flex-direction: column;
+		margin-bottom: 0;
+		margin-top: 40px;
+	}
+}
+
+.last-edit {
+	display: inline-flex;
+}
+// forcing the size only for contacts app to fit the text size of the contacts app
+:deep(.related-resources__header h5) {
+	font-size: medium;
+	opacity: .7;
+	color: var(--color-primary-element);
+}
+
+.address-book {
+	min-width: 260px !important;
+}
+
+.empty-content {
+	height: 100%;
+}
+.contact-title {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-top: -10px;
+}
+</style>

From a09618304d1f648da5d6b6b2f474b1be6442a856 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Wed, 30 Oct 2024 13:39:09 +0100
Subject: [PATCH 2/2] fixup! feat: create a readonly contactdetails

---
 lib/AppInfo/Application.php                   |   3 +
 lib/Event/LoadContactsOcaApiEvent.php         |  15 ++
 lib/Listener/LoadContactsOcaApi.php           |  34 +++
 src/oca.js                                    |  26 +++
 src/oca/mountContactDetails.js                |  48 +++++
 .../ReadOnlyContactDetails.vue                | 196 ++++++++----------
 vite.config.js                                |   1 +
 7 files changed, 218 insertions(+), 105 deletions(-)
 create mode 100644 lib/Event/LoadContactsOcaApiEvent.php
 create mode 100644 lib/Listener/LoadContactsOcaApi.php
 create mode 100644 src/oca.js
 create mode 100644 src/oca/mountContactDetails.js
 rename src/{components => views}/ReadOnlyContactDetails.vue (69%)

diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 31f0f19a4..aebba7b70 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -6,7 +6,9 @@
 namespace OCA\Contacts\AppInfo;
 
 use OCA\Contacts\Dav\PatchPlugin;
+use OCA\Contacts\Event\LoadContactsOcaApiEvent;
 use OCA\Contacts\Listener\LoadContactsFilesActions;
+use OCA\Contacts\Listener\LoadContactsOcaApi;
 use OCA\Files\Event\LoadAdditionalScriptsEvent;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
@@ -28,6 +30,7 @@ public function __construct() {
 
 	public function register(IRegistrationContext $context): void {
 		$context->registerEventListener(LoadAdditionalScriptsEvent::class, LoadContactsFilesActions::class);
+		$context->registerEventListener(LoadContactsOcaApiEvent::class, LoadContactsOcaApi::class);
 	}
 
 	public function boot(IBootContext $context): void {
diff --git a/lib/Event/LoadContactsOcaApiEvent.php b/lib/Event/LoadContactsOcaApiEvent.php
new file mode 100644
index 000000000..4418c45c0
--- /dev/null
+++ b/lib/Event/LoadContactsOcaApiEvent.php
@@ -0,0 +1,15 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Contacts\Event;
+
+use OCP\EventDispatcher\Event;
+
+class LoadContactsOcaApiEvent extends Event {
+}
diff --git a/lib/Listener/LoadContactsOcaApi.php b/lib/Listener/LoadContactsOcaApi.php
new file mode 100644
index 000000000..ef53b5576
--- /dev/null
+++ b/lib/Listener/LoadContactsOcaApi.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Contacts\Listener;
+
+use OCA\Contacts\AppInfo\Application;
+use OCA\Contacts\Event\LoadContactsOcaApiEvent;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Util;
+
+class LoadContactsOcaApi implements IEventListener {
+	public function __construct(
+		private IInitialState $initialState,
+	) {
+	}
+
+	public function handle(Event $event): void {
+		if (!($event instanceof LoadContactsOcaApiEvent)) {
+			return;
+		}
+
+		// TODO: do we need to provide more initial state?
+		$this->initialState->provideInitialState('supportedNetworks', []);
+		Util::addScript(Application::APP_ID, 'contacts-oca');
+	}
+}
diff --git a/src/oca.js b/src/oca.js
new file mode 100644
index 000000000..6bc360184
--- /dev/null
+++ b/src/oca.js
@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
+// Global scss sheets
+import './css/contacts.scss'
+
+// Dialogs css
+import '@nextcloud/dialogs/style.css'
+
+window.OCA ??= {}
+window.OCA.Contacts = {
+	/**
+	 * @param {HTMLElement} el Html element to mount the component at
+	 * @param {string} contactEmailAddress Email address of the contact whose details to display
+	 * @return {Promise<object>} Mounted Vue instance (vm)
+	 */
+	async mountContactDetails(el, contactEmailAddress) {
+		const { mountContactDetails } = await import('./oca/mountContactDetails.js')
+		return mountContactDetails(el, contactEmailAddress)
+	},
+}
diff --git a/src/oca/mountContactDetails.js b/src/oca/mountContactDetails.js
new file mode 100644
index 000000000..091a9ab51
--- /dev/null
+++ b/src/oca/mountContactDetails.js
@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue from 'vue'
+import ReadOnlyContactDetails from '../views/ReadOnlyContactDetails.vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
+
+/** GLOBAL COMPONENTS AND DIRECTIVE */
+import ClickOutside from 'vue-click-outside'
+import { Tooltip as VTooltip } from '@nextcloud/vue'
+
+import store from '../store/index.js'
+import logger from '../services/logger.js'
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} contactEmailAddress
+ * @return {Promise<object>}
+ */
+export async function mountContactDetails(el, contactEmailAddress) {
+	Vue.use(PiniaVuePlugin)
+	const pinia = createPinia()
+
+	// Register global directives
+	Vue.directive('ClickOutside', ClickOutside)
+	Vue.directive('Tooltip', VTooltip)
+
+	Vue.prototype.t = t
+	Vue.prototype.n = n
+
+	Vue.prototype.appName = appName
+	Vue.prototype.appVersion = appVersion
+	Vue.prototype.logger = logger
+	Vue.prototype.OC = window.OC
+	Vue.prototype.OCA = window.OCA
+
+	const Component = Vue.extend(ReadOnlyContactDetails)
+	const vueElement = new Component({
+		pinia,
+		store,
+		propsData: {
+			contactEmailAddress,
+		},
+	}).$mount(el)
+	return vueElement
+}
diff --git a/src/components/ReadOnlyContactDetails.vue b/src/views/ReadOnlyContactDetails.vue
similarity index 69%
rename from src/components/ReadOnlyContactDetails.vue
rename to src/views/ReadOnlyContactDetails.vue
index da3cfe340..7af32bad3 100644
--- a/src/components/ReadOnlyContactDetails.vue
+++ b/src/views/ReadOnlyContactDetails.vue
@@ -4,55 +4,54 @@
 -->
 
 <template>
-	<div>
-		<!-- nothing selected or contact not found -->
-		<EmptyContent v-if="!contact"
-			class="empty-content"
-			:name="t('mail', 'No data for this contact')"
-			:description="t('mail', 'No user selected or the user has no data on their profile')">
-			<template #icon>
-				<IconContact :size="20" />
-			</template>
-		</EmptyContent>
-
-		<div class="recipient-details-content">
-			<div class="contact-title">
-				<h6>
-					{{ contact.fullName }}
-				</h6>
-				<template v-if="isReadOnly">
-					<!-- Subtitle here -->
-					<span v-html="formattedSubtitle" />
-				</template>
-			</div>
-			<div v-if="!loadingData" class="contact-details-wrapper">
-				<div v-for="(properties, name) in groupedProperties"
-					:key="name">
-					<ContactDetailsProperty v-for="(property, index) in properties"
-						:key="`${index}-${contact.key}-${property.name}`"
-						:is-first-property="index===0"
-						:is-last-property="index === properties.length - 1"
-						:property="property"
-						:contact="contact"
-						:local-contact="localContact"
-						:contacts="contacts"
-						:is-read-only="isReadOnly"
-						:bus="bus" />
-				</div>
+	<!-- nothing selected or contact not found -->
+	<NcEmptyContent v-if="!contact"
+		class="empty-content"
+		:name="t('mail', 'No data for this contact')"
+		:description="t('mail', 'No user selected or the user has no data on their profile')">
+		<template #icon>
+			<IconContact :size="20" />
+		</template>
+	</NcEmptyContent>
+	<div v-else
+		class="recipient-details-content">
+		<div class="contact-title">
+			<h6>
+				{{ contact.fullName }}
+			</h6>
+			<!-- Subtitle here -->
+			<span v-html="formattedSubtitle" />
+		</div>
+		<div class="contact-details-wrapper">
+			<div v-for="(properties, name) in groupedProperties"
+				:key="name">
+				<ContactDetailsProperty v-for="(property, index) in properties"
+					:key="`${index}-${contact.key}-${property.name}`"
+					:is-first-property="index === 0"
+					:is-last-property="index === properties.length - 1"
+					:property="property"
+					:contact="contact"
+					:local-contact="localContact"
+					:contacts="[contact]"
+					:is-read-only="true"
+					:bus="bus" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { isMobile, NcEmptyContent as EmptyContent } from '@nextcloud/vue'
+import { isMobile, NcEmptyContent } from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import mitt from 'mitt'
-import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty.vue'
+import { namespaces as NS } from '@nextcloud/cdav-library'
 import { loadState } from '@nextcloud/initial-state'
-import Contact from '../store/contacts.js'
+import ContactDetailsProperty from '../components/ContactDetails/ContactDetailsProperty.vue'
+import Contact from '../models/contact.js'
 import rfcProps from '../models/rfcProps.js'
 import validate from '../services/validate.js'
+import client from '../services/cdav.js'
+import usePrincipalsStore from '../store/principals.js'
 
 const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
 
@@ -61,58 +60,41 @@ export default {
 
 	components: {
 		ContactDetailsProperty,
-		EmptyContent,
+		NcEmptyContent,
 		IconContact,
-
 	},
 
 	mixins: [isMobile],
 
 	props: {
-		/* 		contactKey: {
-			type: String,
-			default: undefined,
-		}, */
+		contactEmailAddress: {
+			types: String,
+			required: true,
+		},
+		/*
 		reloadBus: {
 			type: Object,
 			required: true,
 		},
+		*/
+		// TODO: is desc used?
 		desc: {
 			type: String,
 			required: false,
 			default: '',
 		},
-		/* 		addressbooks: {
-			type: Object,
-			required: true,
-		}, */
-		contact: {
-			type: Contact,
-			required: true,
-		},
-		contacts: {
-			type: Array,
-			default: () => [],
-		},
-
 	},
 
 	data() {
 		return {
-			loadingData: false,
-			loadingUpdate: false,
-			// if true, the local contact have been fixed and requires a push
-			fixed: false,
 			contactDetailsSelector: '.contact-details',
 			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
 
-			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
 			bus: mitt(),
 			showMenuPopover: false,
 			profileEnabled,
+			contact: undefined,
 			localContact: undefined,
-			editMode: false,
-
 		}
 	},
 
@@ -139,10 +121,10 @@ export default {
 
 			return ''
 		},
-		/* 		// store getter
 		addressbooks() {
 			return this.$store.getters.getAddressbooks
 		},
+		/* 		// store getter
 		contact() {
 			return this.$store.getters.getContact(this.contactKey)
 		}, */
@@ -156,8 +138,7 @@ export default {
 				return []
 			}
 			return this.localContact.properties
-				.slice(0)
-				.sort((a, b) => {
+				.toSorted((a, b) => {
 					const nameA = a.name.split('.').pop()
 					const nameB = b.name.split('.').pop()
 					return rfcProps.fieldOrder.indexOf(nameA) - rfcProps.fieldOrder.indexOf(nameB)
@@ -192,10 +173,6 @@ export default {
 		addressbookIsReadOnly() {
 			return this.contact.addressbook?.readOnly
 		},
-		isReadOnly() {
-			return this.addressbookIsReadOnly || !this.editMode
-		},
-
 		/* /!**
 		 * Fake model to use the propertySelect component
 		 *
@@ -229,19 +206,10 @@ export default {
 		/**
 		 * Usable addressbook object linked to the local contact
 		 *
-		 * @param {string} [addressbookId] set the addressbook id
 		 * @return {string}
 		 */
-		addressbook: {
-			get() {
-				return this.contact.addressbook.id
-			},
-			set(addressbookId) {
-				// Only move when the address book actually changed to prevent a conflict.
-				if (this.contact.addressbook.id !== addressbookId) {
-					this.moveContactToAddressbook(addressbookId)
-				}
-			},
+		addressbook() {
+			return this.contact.addressbook.id
 		},
 
 		/**
@@ -264,43 +232,61 @@ export default {
 			immediate: true,
 		},
 	},
+	async beforeMount() {
+		// Init client and stores
+		await client.connect({ enableCardDAV: true })
+		const principalsStore = usePrincipalsStore()
+		principalsStore.setCurrentUserPrincipal(client)
+		await this.$store.dispatch('getAddressbooks')
+
+		// Fetch contact
+		await this.fetchContact()
+	},
 	methods: {
+		async fetchContact() {
+			const email = this.contactEmailAddress
+
+			console.log('abooks', this.addressbooks)
+			const result = await Promise.all(
+				this.addressbooks.map(async (addressBook) => [
+					addressBook.dav,
+					await addressBook.dav.addressbookQuery([{
+						name: [NS.IETF_CARDDAV, 'prop-filter'],
+						attributes: [['name', 'EMAIL']],
+						children: [{
+							name: [NS.IETF_CALDAV, 'text-match'],
+							value: email,
+						}],
+					}]),
+				])
+			)
+			const contacts = result.flatMap(([addressBook, vcards]) =>
+				vcards.map((vcard) => new Contact(vcard.data, addressBook)),
+			)
+
+			// TODO: find strategy to merge contacts?
+			this.contact = contacts.find(contact => contact.email === email)
+		},
 		updateGroups(value) {
 			this.newGroupsValue = value
 		},
 		/**
-		 * Send the local clone of contact to the store
-		 */
-		async updateContact() {
-			this.fixed = false
-			this.loadingUpdate = true
-			try {
-				await this.$store.dispatch('updateContact', this.localContact)
-			} finally {
-				this.loadingUpdate = false
-			}
-
-			// if we just created the contact, we need to force update the
-			// localContact to match the proper store contact
-			if (!this.localContact.dav) {
-				this.logger.debug('New contact synced!', { localContact: this.localContact })
-				// fetching newly created & storred contact
-				const contact = this.$store.getters.getContact(this.localContact.key)
-				await this.updateLocalContact(contact)
-			}
-		},
-		/**
-		 *  Update this.localContact and set this.fixed
+		 *  Update this.localContact
 		 *
 		 * @param {Contact} contact the contact to clone
 		 */
 		async updateLocalContact(contact) {
+			if (!contact) {
+				this.localContact = undefined
+				return
+			}
+
 			// create empty contact and copy inner data
 			const localContact = Object.assign(
 				Object.create(Object.getPrototypeOf(contact)),
 				contact,
 			)
-			this.fixed = validate(localContact)
+			validate(localContact)
 
 			this.localContact = localContact
 			this.newGroupsValue = [...this.localContact.groups]
diff --git a/vite.config.js b/vite.config.js
index 69a048f12..aa2e85bc0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,7 @@ export default createAppConfig({
 	'main': path.join(__dirname, 'src', 'main.js'),
 	'files-action': path.join(__dirname, 'src', 'files-action.js'),
 	'admin-settings': path.join(__dirname, 'src', 'admin-settings.js'),
+	'oca': path.join(__dirname, 'src', 'oca.js'),
 }, {
 	inlineCSS: false,
 })