feat: create a read-only contactdetails component

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 register(IRegistrationContext $context): void {
 		$context->registerEventListener(LoadAdditionalScriptsEvent::class, LoadContactsFilesActions::class);
+		$context->registerEventListener(LoadContactsOcaApiEvent::class, LoadContactsOcaApi::class);
 	}
 
 	public function boot(IBootContext $context): void {

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 {
+}

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');
+	}
+}

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)
+	},
+}

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
+}