Merge pull request #6306 from nextcloud-libraries/backport/6238/next

[next] feat(NcAvatar): implement custom javascript hook action for the contacts menu

Author: st3iny

src/components/NcAvatar/NcAvatar.vue

@@ -242,12 +242,15 @@ import NcButton from '../NcButton/index.ts'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
+import NcActionButton from '../NcActionButton/index.js'
 import usernameToColor from '../../functions/usernameToColor/index.js'
+import { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'
 import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
 import { getUserStatusText } from '../../utils/UserStatus.ts'
 import { userStatus } from '../../mixins/index.js'
 import { t } from '../../l10n.js'
 import { getRoute } from '../../components/NcRichText/autolink.ts'
+import logger from '../../utils/logger.ts'
 
 import axios from '@nextcloud/axios'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -425,6 +428,7 @@ export default {
 			isAvatarLoaded: false,
 			isMenuLoaded: false,
 			contactsMenuLoading: false,
+			contactsMenuData: {},
 			contactsMenuActions: [],
 			contactsMenuOpenState: false,
 		}
@@ -571,6 +575,24 @@ export default {
 				}
 			})
 
+			for (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {
+				try {
+					actions.push({
+						ncActionComponent: NcActionButton,
+						ncActionComponentProps: {
+							onClick: () => action.callback(this.contactsMenuData),
+						},
+						text: action.displayName(this.contactsMenuData),
+						iconSvg: action.iconSvg(this.contactsMenuData),
+					})
+				} catch (error) {
+					logger.error(`Failed to render ContactsMenu action ${action.id}`, {
+						error,
+						action,
+					})
+				}
+			}
+
 			/**
 			 * @param {string} html The HTML to escape
 			 */
@@ -668,6 +690,7 @@ export default {
 			try {
 				const user = encodeURIComponent(this.user)
 				const { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)
+				this.contactsMenuData = data
 				this.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions
 			} catch (e) {
 				this.contactsMenuOpenState = false

src/functions/contactsMenu/index.ts

@@ -0,0 +1,64 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import logger from '../../utils/logger.ts'
+
+// Taken from \OC\Contacts\ContactsMenu\Entry::jsonSerialize
+export interface ContactsMenuEntry {
+	id: number | string | null
+	fullName: string
+	avatar: string | null
+	topAction: object | null
+	actions: object[]
+	lastMessage: string
+	emailAddresses: string[]
+	profileTitle: string | null
+	profileUrl: string | null
+	status: string | null
+	statusMessage: string | null
+	statusMessageTimestamp: number | null
+	statusIcon: string | null
+	isUser: boolean
+	uid: string | null
+}
+
+export interface ContactsMenuAction {
+	id: string
+	displayName: (entry: ContactsMenuEntry) => string
+	enabled: (entry: ContactsMenuEntry) => boolean
+	iconSvg: (entry: ContactsMenuEntry) => string
+	callback: (entry: ContactsMenuEntry) => void
+}
+
+/**
+ * Register a contacts and avatar menu action that will invoke the given callback on click.
+ *
+ * @param action - The action to register
+ */
+export function registerContactsMenuAction(action: ContactsMenuAction): void {
+	window._nc_contacts_menu_hooks ??= {}
+
+	if (window._nc_contacts_menu_hooks[action.id]) {
+		logger.error(`ContactsMenu action for id ${action.id} has already been registered`, {
+			action,
+		})
+		return
+	}
+
+	window._nc_contacts_menu_hooks[action.id] = action
+}
+
+/**
+ * Get all registered and enabled contacts menu actions for the given menu entry.
+ *
+ * @param entry - The contacts menu entry object as returned by the backend
+ */
+export function getEnabledContactsMenuActions(entry: ContactsMenuEntry): ContactsMenuAction[] {
+	if (!window._nc_contacts_menu_hooks) {
+		return []
+	}
+
+	return Object.values(window._nc_contacts_menu_hooks).filter((action) => action.enabled(entry))
+}

src/functions/index.ts

@@ -4,6 +4,7 @@
  */
 
 export * from './a11y/index.ts'
+export * from './contactsMenu/index.ts'
 export * from './dialog/index.ts'
 export * from './emoji/index.ts'
 export * from './isDarkTheme/index.ts'

src/globals.d.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { ContactsMenuAction } from './functions/contactsMenu/index.ts'
+
 declare const PRODUCTION: boolean
 declare const SCOPE_VERSION: string
 
@@ -23,6 +25,7 @@ declare global {
 		OCP: any
 		// internal global variables
 		_nc_vue_element_id?: number
+		_nc_contacts_menu_hooks: { [id: string]: ContactsMenuAction },
 	}
 }