Merge pull request #49375 from nextcloud/feat/contacts-menu/js-hook-a…

…ction

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

core/src/components/ContactsMenu/Contact.vue

@@ -23,38 +23,54 @@
 			:inline="contact.topAction ? 1 : 0">
 			<template v-for="(action, idx) in actions">
 				<NcActionLink v-if="action.hyperlink !== '#'"
-					:key="idx"
+					: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 :key="`${idx}-text`" class="other-actions">
 					<template #icon>
 						<img aria-hidden="true" class="contact__action__icon" :src="action.icon">
 					</template>
 					{{ action.title }}
 				</NcActionText>
 			</template>
+			<NcActionButton v-for="action in jsActions"
+				:key="action.id"
+				:close-after-click="true"
+				class="other-actions"
+				@click="action.callback(contact)">
+				<template #icon>
+					<NcIconSvgWrapper class="contact__action__icon-svg"
+						:svg="action.iconSvg(contact)" />
+				</template>
+				{{ action.displayName(contact) }}
+			</NcActionButton>
 		</NcActions>
 	</li>
 </template>
 
 <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 NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import { getEnabledContactsMenuActions } from '@nextcloud/vue/dist/Functions/contactsMenu.js'
 
 export default {
 	name: 'Contact',
 	components: {
 		NcActionLink,
 		NcActionText,
+		NcActionButton,
 		NcActions,
 		NcAvatar,
+		NcIconSvgWrapper,
 	},
 	props: {
 		contact: {
@@ -69,6 +85,9 @@ export default {
 			}
 			return this.contact.actions
 		},
+		jsActions() {
+			return getEnabledContactsMenuActions(this.contact)
+		},
 		preloadedUserStatus() {
 			if (this.contact.status) {
 				return {
@@ -98,6 +117,10 @@ export default {
 			padding: 12px;
 			filter: var(--background-invert-if-dark);
 		}
+
+		&__icon-svg {
+			padding: 5px;
+		}
 	}
 
 	&__avatar {