feat(contacts-menu): implement custom javascript hook action

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

Author: st3iny

core/src/components/ContactsMenu/Contact.vue

@@ -22,21 +22,33 @@
 		<NcActions v-if="actions.length"
 			:inline="contact.topAction ? 1 : 0">
 			<template v-for="(action, idx) in actions">
-				<NcActionLink v-if="action.hyperlink !== '#'"
-					:key="idx"
+				<NcActionLink v-if="action.type === 'LinkAction' && action.hyperlink !== '#'"
+					:key="`${idx}-link`"
 					:href="action.hyperlink"
 					class="other-actions">
 					<template #icon>
 						<img aria-hidden="true" class="contact__action__icon" :src="action.icon">
 					</template>
 					{{ action.title }}
 				</NcActionLink>
-				<NcActionText v-else :key="idx" class="other-actions">
+				<NcActionText v-else-if="action.type === 'LinkAction'"
+					:key="`${idx}-text`"
+					class="other-actions">
 					<template #icon>
 						<img aria-hidden="true" class="contact__action__icon" :src="action.icon">
 					</template>
 					{{ action.title }}
 				</NcActionText>
+				<NcActionButton v-else-if="action.type === 'JavascriptAction' && hasContactsMenuHook(action.hook)"
+					:key="`${idx}-hook`"
+					:close-after-click="true"
+					class="other-actions"
+					@click="callContactsMenuHook(action.hook)">
+					<template #icon>
+						<img aria-hidden="true" class="contact__action__icon" :src="action.icon">
+					</template>
+					{{ action.title }}
+				</NcActionButton>
 			</template>
 		</NcActions>
 	</li>
@@ -45,14 +57,20 @@
 <script>
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import {
+	callContactsMenuHook,
+	hasContactsMenuHook,
+} from '@nextcloud/vue/dist/Functions/contactsMenu.js'
 
 export default {
 	name: 'Contact',
 	components: {
 		NcActionLink,
 		NcActionText,
+		NcActionButton,
 		NcActions,
 		NcAvatar,
 	},
@@ -80,6 +98,10 @@ export default {
 			return undefined
 		},
 	},
+	methods: {
+		hasContactsMenuHook,
+		callContactsMenuHook,
+	},
 }
 </script>
 

lib/private/Contacts/ContactsMenu/ActionFactory.php

@@ -5,7 +5,9 @@
  */
 namespace OC\Contacts\ContactsMenu;
 
+use OC\Contacts\ContactsMenu\Actions\JavascriptAction;
 use OC\Contacts\ContactsMenu\Actions\LinkAction;
+use OCP\Contacts\ContactsMenu\IAction;
 use OCP\Contacts\ContactsMenu\IActionFactory;
 use OCP\Contacts\ContactsMenu\ILinkAction;
 
@@ -28,4 +30,21 @@ public function newLinkAction(string $icon, string $name, string $href, string $
 	public function newEMailAction(string $icon, string $name, string $email, string $appId = ''): ILinkAction {
 		return $this->newLinkAction($icon, $name, 'mailto:' . $email, $appId);
 	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function newJavascriptAction(
+		string $icon,
+		string $name,
+		string $hook,
+		string $appId = '',
+	): IAction {
+		$action = new JavascriptAction();
+		$action->setIcon($icon);
+		$action->setName($name);
+		$action->setHook($hook);
+		$action->setAppId($appId);
+		return $action;
+	}
 }

lib/private/Contacts/ContactsMenu/Actions/JavascriptAction.php

@@ -0,0 +1,71 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OC\Contacts\ContactsMenu\Actions;
+
+use OCP\Contacts\ContactsMenu\IAction;
+
+/**
+ * @since 31.0.0
+ */
+class JavascriptAction implements IAction {
+	public const TYPE = 'JavascriptAction';
+
+	private string $icon = '';
+	private string $name = '';
+	private int $priority = 10;
+	private string $appId = '';
+	private string $hook = '';
+
+	public function setIcon(string $icon) {
+		$this->icon = $icon;
+	}
+
+	public function getName(): string {
+		return $this->name;
+	}
+
+	public function setName(string $name) {
+		$this->name = $name;
+	}
+
+	public function setPriority(int $priority) {
+		$this->priority = $priority;
+	}
+
+	public function getPriority(): int {
+		return $this->priority;
+	}
+
+	public function setAppId(string $appId) {
+		$this->appId = $appId;
+	}
+
+	public function getAppId(): string {
+		return $this->appId;
+	}
+
+	public function getHook(): string {
+		return $this->hook;
+	}
+
+	public function setHook(string $hook): void {
+		$this->hook = $hook;
+	}
+
+	function jsonSerialize() {
+		return [
+			'type' => self::TYPE,
+			'title' => $this->name,
+			'icon' => $this->icon,
+			'appId' => $this->appId,
+			'hook' => $this->hook,
+		];
+	}
+}

lib/private/Contacts/ContactsMenu/Actions/LinkAction.php

@@ -8,6 +8,8 @@
 use OCP\Contacts\ContactsMenu\ILinkAction;
 
 class LinkAction implements ILinkAction {
+	public const TYPE = 'LinkAction';
+
 	private string $icon = '';
 	private string $name = '';
 	private string $href = '';
@@ -64,6 +66,7 @@ public function getAppId(): string {
 	 */
 	public function jsonSerialize(): array {
 		return [
+			'type' => self::TYPE,
 			'title' => $this->name,
 			'icon' => $this->icon,
 			'hyperlink' => $this->href,

lib/public/Contacts/ContactsMenu/IActionFactory.php

@@ -34,4 +34,22 @@ public function newLinkAction(string $icon, string $name, string $href, string $
 	 * @return ILinkAction
 	 */
 	public function newEMailAction(string $icon, string $name, string $email, string $appId = ''): ILinkAction;
+
+	/**
+	 * Construct and return a new javascript hook action for the contacts menu
+	 *
+	 * @since 31.0.0
+	 *
+	 * @param string $icon full path to the action's icon
+	 * @param string $name localized name of the action
+	 * @param string $hook id of the javascript hook as registered in the frontend
+	 * @param string $appId the appName registering the action
+	 * @return IAction
+	 */
+	public function newJavascriptAction(
+		string $icon,
+		string $name,
+		string $hook,
+		string $appId = '',
+	): IAction;
 }