finished widget make zaak modal

src/modals/zaken/ZaakForm.vue

@@ -108,6 +108,13 @@ export default {
 		NcSelect,
 		NcTextArea,
 	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			default: false,
+			required: false,
+		},
+	},
 	data() {
 		return {
 			zaak: {
@@ -164,6 +171,7 @@ export default {
 	methods: {
 		closeModal() {
 			navigationStore.setModal(null)
+			this?.dashboardWidget && this.$emit('close')
 			this.success = null
 			this.loading = false
 			this.zaak = {
@@ -228,6 +236,8 @@ export default {
 				.then(({ response }) => {
 					this.success = response.ok
 					setTimeout(this.closeModal, 2500)
+
+					this?.dashboardWidget && this.$emit('save-success')
 				})
 				.catch((err) => {
 					console.error(err)
@@ -239,3 +249,10 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>

src/views/widgets/ZakenWidget.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { zaakStore } from '../../store/store.js'
+import { navigationStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -18,12 +18,17 @@ import { zaakStore } from '../../store/store.js'
 			</NcDashboardWidget>
 		</div>
 
-		<NcButton type="primary" @click="search">
+		<NcButton type="primary" @click="openModal">
 			<template #icon>
 				<Plus :size="20" />
 			</template>
 			Zaak aanmaken
 		</NcButton>
+
+		<ZaakForm v-if="isModalOpen"
+			:dashboard-widget="true"
+			@save-success="fetchZaakItems"
+			@close="closeModal" />
 	</div>
 </template>
 
@@ -33,34 +38,32 @@ import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 
+import ZaakForm from '../../modals/zaken/ZaakForm.vue'
+
 export default {
 	name: 'ZakenWidget',
-
 	components: {
 		NcDashboardWidget,
 		NcEmptyContent,
 		NcButton,
 		Plus,
 		Folder,
 	},
-
 	data() {
 		return {
 			loading: false,
+			isModalOpen: false,
 			zaakItems: [],
 		}
 	},
-
 	computed: {
 		items() {
 			return this.zaakItems
 		},
 	},
-
 	mounted() {
 		this.fetchZaakItems()
 	},
-
 	methods: {
 		fetchZaakItems() {
 			this.loading = true
@@ -76,16 +79,25 @@ export default {
 					this.loading = false
 				})
 		},
+		openModal() {
+			this.isModalOpen = true
+			zaakStore.setZaakItem(null)
+			navigationStore.setModal('zaakForm')
+		},
+		closeModal() {
+			this.isModalOpen = false
+			navigationStore.setModal(null)
+		},
 		search() {
 			console.info('click')
 		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},
 	},
-
 }
 </script>
+
 <style scoped>
 .zakenContainer{
     display: flex;
@@ -98,10 +110,3 @@ export default {
 	margin-block-end: var(--zaa-margin-10);
  }
 </style>
-<style>
-:root {
-	--zaa-margin-10: 10px;
-	--zaa-margin-20: 20px;
-	--zaa-margin-50: 50px;
-  }
-</style>