Merge pull request #113 from ConductionNL/feature/PC108-108/multiple-…

…contactmomenten Added tooltip
ConductionNL · Dec 18, 2024 · f67e5ee · f67e5ee
2 parents 695119c + 4a05f81
commit f67e5ee
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/src/contactmomentenWidget.js b/src/contactmomentenWidget.js
@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import ContactMomentenWidget from './views/widgets/ContactMomentenWidget.vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 OCA.Dashboard.register('zaakAfhandelApp_contactmomenten_widget', async (el, { widget }) => {
 	Vue.mixin({ methods: { t, n } })
+
+	Vue.directive('tooltip', Tooltip)
+
 	const View = Vue.extend(ContactMomentenWidget)
 	new View({
 		propsData: { title: widget.title },

diff --git a/src/main.js b/src/main.js
@@ -2,10 +2,14 @@ import Vue from 'vue'
 import { PiniaVuePlugin } from 'pinia'
 import pinia from './pinia.js'
 import App from './App.vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+
 Vue.mixin({ methods: { t, n } })
 
 Vue.use(PiniaVuePlugin)
 
+Vue.directive('tooltip', Tooltip)
+
 new Vue(
 	{
 		pinia,

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -477,19 +477,27 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				<template #icon>
 					<DotsHorizontal :size="20" />
 				</template>
-				<NcActionButton v-if="!isView" @click="openTaakForm('medewerker')">
+				<NcActionButton v-if="!isView" :close-after-click="true" @click="openTaakForm('medewerker')">
 					<template #icon>
 						<CalendarMonthOutline :size="20" />
 					</template>
 					Medewerker taak aanmaken
 				</NcActionButton>
-				<NcActionButton v-if="!isView" @click="openTaakForm('klant')">
+				<NcActionButton v-if="!isView"
+					v-tooltip="'Een klant taak kan alleen worden aangemaakt als er een klant is geselecteerd.'"
+					:class="{ 'actionButtonDisabled': !contactMomenten[selectedContactMoment].klant?.id }"
+					:close-after-click="true"
+					:disabled="!contactMomenten[selectedContactMoment].klant?.id"
+					@click="openTaakForm('klant')">
 					<template #icon>
 						<CalendarMonthOutline :size="20" />
 					</template>
 					Klant taak aanmaken
 				</NcActionButton>
 				<NcActionButton v-if="!isView"
+					v-tooltip="'Een zaak kan alleen worden gestart als er een klant is geselecteerd.'"
+					:class="{ 'actionButtonDisabled': !contactMomenten[selectedContactMoment].klant?.id }"
+					:close-after-click="true"
 					:disabled="!contactMomenten[selectedContactMoment].klant?.id"
 					@click="openZaakForm()">
 					<template #icon>
@@ -1055,6 +1063,11 @@ export default {
 div[class='modal-container']:has(.ContactMomentenForm) {
 	width: clamp(1000px, 100%, 1200px) !important;
 }
+
+.actionButtonDisabled > button > span {
+	cursor: default !important;
+  }
+
 </style>
 
 <style scoped>
@@ -1115,4 +1128,9 @@ div[class='modal-container']:has(.ContactMomentenForm) {
 .statusContainer {
 	align-items: center;
 }
+
+.actionButtonDisabled {
+	pointer-events: all !important;
+}
+
 </style>