From aee627c678d55e4072e6e731723f032534c09186 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Wed, 23 Oct 2024 00:23:25 +0200
Subject: [PATCH] Getting the dialogs to actually work

---
 lib/Controller/BerichtenController.php |  15 +-
 lib/Controller/KlantenController.php   |  14 +-
 lib/Controller/TakenController.php     |  15 +-
 lib/Controller/ZaakTypenController.php |  15 +-
 lib/Controller/ZakenController.php     |  15 +-
 lib/Service/ObjectService.php          |   2 +-
 src/modals/Modals.vue                  |   3 +
 src/modals/berichten/AddBericht.vue    | 183 -------------
 src/modals/berichten/EditBericht.vue   | 312 +++++++++++++---------
 src/modals/klanten/AddKlant.vue        | 196 --------------
 src/modals/klanten/EditKlant.vue       | 348 ++++++++++++++-----------
 src/modals/taken/AddTaak.vue           | 147 -----------
 src/modals/taken/EditTaak.vue          | 194 ++++++++------
 src/modals/zaakTypen/EditZaakType.vue  |  14 +-
 src/modals/zaken/AddZaak.vue           | 184 -------------
 src/modals/zaken/EditZaak.vue          | 215 +++++++++++++++
 src/views/berichten/BerichtenIndex.vue |   2 +-
 src/views/berichten/BerichtenList.vue  |   4 +-
 src/views/klanten/KlantenIndex.vue     |   2 +-
 src/views/klanten/KlantenList.vue      |   2 +-
 src/views/settings/Settings.vue        |   8 +
 src/views/taken/TakenIndex.vue         |   2 +-
 src/views/taken/TakenList.vue          |   2 +-
 src/views/zaken/ZakenIndex.vue         |   2 +-
 24 files changed, 759 insertions(+), 1137 deletions(-)
 delete mode 100644 src/modals/berichten/AddBericht.vue
 delete mode 100644 src/modals/klanten/AddKlant.vue
 delete mode 100644 src/modals/taken/AddTaak.vue
 delete mode 100644 src/modals/zaken/AddZaak.vue
 create mode 100644 src/modals/zaken/EditZaak.vue

diff --git a/lib/Controller/BerichtenController.php b/lib/Controller/BerichtenController.php
index 80e3679..1b6dba2 100644
--- a/lib/Controller/BerichtenController.php
+++ b/lib/Controller/BerichtenController.php
@@ -2,12 +2,9 @@
 
 namespace OCA\ZaakAfhandelApp\Controller;
 
-use GuzzleHttp\Client;
-use OCA\ZaakAfhandelApp\Service\CallService;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\JSONResponse;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\IRequest;
 
 class BerichtenController extends Controller
@@ -30,7 +27,7 @@ public function __construct(
 	 *
 	 * @return JSONResponse
 	 */
-	public function index(CallService $callService): JSONResponse
+	public function index(): JSONResponse
 	{
 		 // Retrieve all request parameters
 		 $requestParams = $this->request->getParams();
@@ -50,7 +47,7 @@ public function index(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function show(string $id, CallService $callService): JSONResponse
+	public function show(string $id): JSONResponse
 	{
         // Fetch the catalog object by its ID
         $object = $this->objectService->getObject('berichten', $id);
@@ -68,7 +65,7 @@ public function show(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function create(CallService $callService): JSONResponse
+	public function create(): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -91,7 +88,7 @@ public function create(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function update(string $id, CallService $callService): JSONResponse
+	public function update(string $id): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -114,7 +111,7 @@ public function update(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function destroy(string $id, CallService $callService): JSONResponse
+	public function destroy(string $id): JSONResponse
 	{
         // Delete the catalog object
         $result = $this->objectService->deleteObject('berichten', $id);
diff --git a/lib/Controller/KlantenController.php b/lib/Controller/KlantenController.php
index 7666369..a8363eb 100644
--- a/lib/Controller/KlantenController.php
+++ b/lib/Controller/KlantenController.php
@@ -2,11 +2,9 @@
 
 namespace OCA\ZaakAfhandelApp\Controller;
 
-use GuzzleHttp\Client;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\JSONResponse;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\IRequest;
 
 class KlantenController extends Controller
@@ -31,7 +29,7 @@ public function __construct
 	 *
 	 * @return JSONResponse
      */
-    public function index(CallService $klantenService): JSONResponse
+    public function index(): JSONResponse
     {
         // Retrieve all request parameters
         $requestParams = $this->request->getParams();
@@ -51,7 +49,7 @@ public function index(CallService $klantenService): JSONResponse
 	 *
 	 * @return JSONResponse
      */
-    public function show(string $id, CallService $klantenService): JSONResponse
+    public function show(string $id): JSONResponse
     {
         // Fetch the catalog object by its ID
         $object = $this->objectService->getObject('klanten', $id);
@@ -69,7 +67,7 @@ public function show(string $id, CallService $klantenService): JSONResponse
 	 *
 	 * @return JSONResponse
      */
-    public function create(CallService $callService): JSONResponse
+    public function create(): JSONResponse
     {
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -92,7 +90,7 @@ public function create(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
      */
-    public function update(string $id, CallService $callService): JSONResponse
+    public function update(string $id): JSONResponse
     {
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -115,7 +113,7 @@ public function update(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
      */
-    public function destroy(string $id, CallService $callService): JSONResponse
+    public function destroy(string $id): JSONResponse
     {
         // Delete the catalog object
         $result = $this->objectService->deleteObject('klanten', $id);
diff --git a/lib/Controller/TakenController.php b/lib/Controller/TakenController.php
index 62e8ca4..6d58e69 100644
--- a/lib/Controller/TakenController.php
+++ b/lib/Controller/TakenController.php
@@ -2,12 +2,9 @@
 
 namespace OCA\ZaakAfhandelApp\Controller;
 
-use GuzzleHttp\Client;
-use OCA\ZaakAfhandelApp\Service\CallService;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\JSONResponse;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\IRequest;
 
 class TakenController extends Controller
@@ -29,7 +26,7 @@ public function __construct(
 	 *
 	 * @return JSONResponse
 	 */
-	public function index(CallService $klantenService): JSONResponse
+	public function index(): JSONResponse
 	{
 		 // Retrieve all request parameters
 		 $requestParams = $this->request->getParams();
@@ -49,7 +46,7 @@ public function index(CallService $klantenService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function show(string $id, CallService $klantenService): JSONResponse
+	public function show(string $id): JSONResponse
 	{
         // Fetch the catalog object by its ID
         $object = $this->objectService->getObject('taken', $id);
@@ -67,7 +64,7 @@ public function show(string $id, CallService $klantenService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function create(CallService $callService): JSONResponse
+	public function create(): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -90,7 +87,7 @@ public function create(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function update(string $id, CallService $callService): JSONResponse
+	public function update(string $id): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -113,7 +110,7 @@ public function update(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function destroy(string $id, CallService $callService): JSONResponse
+	public function destroy(string $id): JSONResponse
 	{
         // Delete the catalog object
         $result = $this->objectService->deleteObject('taken', $id);
diff --git a/lib/Controller/ZaakTypenController.php b/lib/Controller/ZaakTypenController.php
index d300f5a..41451f2 100644
--- a/lib/Controller/ZaakTypenController.php
+++ b/lib/Controller/ZaakTypenController.php
@@ -2,12 +2,9 @@
 
 namespace OCA\ZaakAfhandelApp\Controller;
 
-use GuzzleHttp\Client;
-use OCA\ZaakAfhandelApp\Service\CallService;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\JSONResponse;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\IRequest;
 
 class ZaakTypenController extends Controller
@@ -30,7 +27,7 @@ public function __construct(
 	 *
 	 * @return JSONResponse
 	 */
-	public function index(CallService $callService): JSONResponse
+	public function index(): JSONResponse
 	{
 		 // Retrieve all request parameters
 		 $requestParams = $this->request->getParams();
@@ -50,7 +47,7 @@ public function index(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function show(string $id, CallService $callService): JSONResponse
+	public function show(string $id): JSONResponse
 	{
         // Fetch the catalog object by its ID
         $object = $this->objectService->getObject('zaaktypen', $id);
@@ -68,7 +65,7 @@ public function show(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function create(CallService $callService): JSONResponse
+	public function create(): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -91,7 +88,7 @@ public function create(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function update(string $id, CallService $callService): JSONResponse
+	public function update(string $id): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -114,7 +111,7 @@ public function update(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function destroy(string $id, CallService $callService): JSONResponse
+	public function destroy(string $id): JSONResponse
 	{
         // Delete the catalog object
         $result = $this->objectService->deleteObject('zaaktypen', $id);
diff --git a/lib/Controller/ZakenController.php b/lib/Controller/ZakenController.php
index 5939eeb..57ee6ee 100644
--- a/lib/Controller/ZakenController.php
+++ b/lib/Controller/ZakenController.php
@@ -2,12 +2,9 @@
 
 namespace OCA\ZaakAfhandelApp\Controller;
 
-use GuzzleHttp\Client;
-use OCA\ZaakAfhandelApp\Service\CallService;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\JSONResponse;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
 use OCP\IRequest;
 
 /**
@@ -32,7 +29,7 @@ public function __construct(
 	 *
 	 * @return JSONResponse
 	 */
-	public function index(CallService $callService): JSONResponse
+	public function index(): JSONResponse
 	{
 		 // Retrieve all request parameters
         $requestParams = $this->request->getParams();
@@ -52,7 +49,7 @@ public function index(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function show(string $id, CallService $callService): JSONResponse
+	public function show(string $id): JSONResponse
 	{
         // Fetch the catalog object by its ID
         $object = $this->objectService->getObject('zaken', $id);
@@ -70,7 +67,7 @@ public function show(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function create(CallService $callService): JSONResponse
+	public function create(): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -93,7 +90,7 @@ public function create(CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function update(string $id, CallService $callService): JSONResponse
+	public function update(string $id): JSONResponse
 	{
         // Get all parameters from the request
         $data = $this->request->getParams();
@@ -116,7 +113,7 @@ public function update(string $id, CallService $callService): JSONResponse
 	 *
 	 * @return JSONResponse
 	 */
-	public function destroy(string $id, CallService $callService): JSONResponse
+	public function destroy(string $id): JSONResponse
 	{
         // Delete the catalog object
         $result = $this->objectService->deleteObject('zaken', $id);
diff --git a/lib/Service/ObjectService.php b/lib/Service/ObjectService.php
index 925212a..1674c9c 100644
--- a/lib/Service/ObjectService.php
+++ b/lib/Service/ObjectService.php
@@ -36,7 +36,7 @@ public function __construct(
 		private readonly IAppManager $appManager,
 		private readonly IAppConfig $config,
 	) {
-		$this->appName = 'opencatalogi';
+		$this->appName = 'zaakafhandelapp';
 	}
 
 	/**
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index c1389fd..1613d36 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -10,6 +10,7 @@ import { navigationStore } from '../store/store.js'
 		<EditBericht />
 		<EditTaak />
 		<EditRol />
+		<EditZaak />
 	</div>
 </template>
 
@@ -19,6 +20,7 @@ import EditKlant from './klanten/EditKlant.vue'
 import EditBericht from './berichten/EditBericht.vue'
 import EditTaak from './taken/EditTaak.vue'
 import EditRol from './rollen/EditRol.vue'
+import EditZaak from './zaken/EditZaak.vue'
 
 export default {
 	name: 'Modals',
@@ -28,6 +30,7 @@ export default {
 		EditBericht,
 		EditTaak,
 		EditRol,
+		EditZaak
 	},
 }
 </script>
diff --git a/src/modals/berichten/AddBericht.vue b/src/modals/berichten/AddBericht.vue
deleted file mode 100644
index 4962ad3..0000000
--- a/src/modals/berichten/AddBericht.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<script setup>
-import { navigationStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcModal v-if="navigationStore.modal === 'addBericht'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modal__content">
-			<h2>Bericht aanmaken</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.title"
-					label="Title" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.onderwerp"
-					label="Onderwerp" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichttekst"
-					label="Berichttekst" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.berichtItem.inhoud"
-					label="Inhoud (base64)" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.bijlageType"
-					label="Bijlage type" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.soortGebruiker"
-					label="Soort gebruiker" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.publicatieDatum"
-					label="Publicatiedatum" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.aanmaakDatum"
-					label="Aanmaak datum" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichtType"
-					label="Bericht type" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.referentie"
-					label="Referentie" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichtID"
-					label="Bericht ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.batchID"
-					label="Batch ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.gebruikerID"
-					label="Gebruiker ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.onderwerp"
-					label="Volgorde" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
-				:disabled="loading"
-				type="primary"
-				@click="addBericht()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import { NcButton, NcLoadingIcon, NcModal, NcTextField, NcTextArea, NcNoteCard } from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-export default {
-	name: 'AddBericht',
-	components: {
-		NcModal,
-		NcTextField,
-		NcTextArea,
-		NcButton,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		Plus,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-		}
-	},
-	mounted() {
-		// Lets create an empty zaak item
-		store.setBerichtItem([])
-	},
-	methods: {
-		closeModal() {
-			navigationStore.modal = false
-		},
-		addBericht() {
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/berichten',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.berichtItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getBerichtenList()
-					response.json().then((data) => {
-						store.setBerichtItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
-				})
-		},
-	},
-}
-</script>
-
-<style>
-.modal__content {
-    margin: var(--zaa-margin-50);
-    text-align: center;
-}
-
-.berichtDetailsContainer {
-    margin-block-start: var(--zaa-margin-20);
-    margin-inline-start: var(--zaa-margin-20);
-    margin-inline-end: var(--zaa-margin-20);
-}
-
-.success {
-    color: green;
-}
-</style>
diff --git a/src/modals/berichten/EditBericht.vue b/src/modals/berichten/EditBericht.vue
index ff337a6..c87a779 100644
--- a/src/modals/berichten/EditBericht.vue
+++ b/src/modals/berichten/EditBericht.vue
@@ -1,171 +1,229 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { berichtStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal v-if="navigationStore.modal === 'editBericht'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modal__content">
-			<h2>Bericht aanpassen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.title"
-					label="Title" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.onderwerp"
-					label="Onderwerp" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichttekst"
-					label="Berichttekst" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.berichtItem.inhoud"
-					label="Inhoud (base64)" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.bijlageType"
-					label="Bijlage type" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.soortGebruiker"
-					label="Soort gebruiker" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.publicatieDatum"
-					label="Publicatiedatum" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.aanmaakDatum"
-					label="Aanmaak datum" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichtType"
-					label="Bericht type" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.referentie"
-					label="Referentie" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.berichtID"
-					label="Bericht ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.batchID"
-					label="Batch ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.gebruikerID"
-					label="Gebruiker ID" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.berichtItem.onderwerp"
-					label="Volgorde" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
+	<NcDialog v-if="navigationStore.modal === 'editBericht'"
+		name="Bericht"
+		size="normal"
+		:can-close="false">
+		<NcNoteCard v-if="success" type="success">
+			<p>Bericht succesvol aangepast</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<div v-if="!success" class="form-group">
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.title"
+				label="Title" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.onderwerp"
+				label="Onderwerp" />
+
+			<NcTextArea
+				:disabled="loading"
+				:value.sync="berichtItem.berichttekst"
+				label="Berichttekst" />
+
+			<NcTextArea
+				:disabled="loading"
+				:value.sync="berichtItem.inhoud"
+				label="Inhoud (base64)" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.bijlageType"
+				label="Bijlage type" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.soortGebruiker"
+				label="Soort gebruiker" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.publicatieDatum"
+				label="Publicatiedatum" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.aanmaakDatum"
+				label="Aanmaak datum" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.berichtType"
+				label="Bericht type" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.referentie"
+				label="Referentie" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.berichtID"
+				label="Bericht ID" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.batchID"
+				label="Batch ID" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.gebruikerID"
+				label="Gebruiker ID" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="berichtItem.onderwerp"
+				label="Volgorde" />
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success"
 				:disabled="loading"
 				type="primary"
 				@click="editBericht()">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
+					<ContentSaveOutline v-if="!loading && berichtStore.berichtItem?.id" :size="20" />
+					<Plus v-if="!loading && !berichtStore.berichtItem?.id" :size="20" />
 				</template>
-				Opslaan
+				{{ berichtStore.berichtItem?.id ? 'Opslaan' : 'Aanmaken' }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon, NcModal, NcTextField, NcTextArea } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon, NcDialog, NcTextField, NcTextArea } from '@nextcloud/vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
 
 export default {
 	name: 'EditBericht',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcTextArea,
 		NcButton,
 		NcLoadingIcon,
 		// Icons
 		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
 	},
 	data() {
 		return {
-			succes: false,
+			success: false,
 			loading: false,
 			error: false,
+			hasUpdated: false,
+			berichtItem: {
+				title: '',
+				onderwerp: '',
+				berichttekst: '',
+				inhoud: '',
+				bijlageType: '',
+				soortGebruiker: '',
+				publicatieDatum: '',
+				aanmaakDatum: '',
+				berichtType: '',
+				referentie: '',
+				berichtID: '',
+				batchID: '',
+				gebruikerID: '',
+				volgorde: '',
+			},
 		}
 	},
 	updated() {
-		if (navigationStore.modal === 'editBericht' && this.hasUpdated) {
-			if (this.bericht === store.berichtItem) return
-			this.hasUpdated = false
-		}
 		if (navigationStore.modal === 'editBericht' && !this.hasUpdated) {
+			if (berichtStore.berichtItem?.id) {
+				this.berichtItem = {
+					...berichtStore.berichtItem,
+					title: berichtStore.berichtItem.title || '',
+					onderwerp: berichtStore.berichtItem.onderwerp || '',
+					berichttekst: berichtStore.berichtItem.berichttekst || '',
+					inhoud: berichtStore.berichtItem.inhoud || '',
+					bijlageType: berichtStore.berichtItem.bijlageType || '',
+					soortGebruiker: berichtStore.berichtItem.soortGebruiker || '',
+					publicatieDatum: berichtStore.berichtItem.publicatieDatum || '',
+					aanmaakDatum: berichtStore.berichtItem.aanmaakDatum || '',
+					berichtType: berichtStore.berichtItem.berichtType || '',
+					referentie: berichtStore.berichtItem.referentie || '',
+					berichtID: berichtStore.berichtItem.berichtID || '',
+					batchID: berichtStore.berichtItem.batchID || '',
+					gebruikerID: berichtStore.berichtItem.gebruikerID || '',
+					volgorde: berichtStore.berichtItem.volgorde || '',
+				}
+			}
 			this.hasUpdated = true
-			this.bericht = store.berichtItem
 		}
 	},
 	methods: {
 		closeModal() {
-			navigationStore.modal = false
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.berichtItem = {
+				title: '',
+				onderwerp: '',
+				berichttekst: '',
+				inhoud: '',
+				bijlageType: '',
+				soortGebruiker: '',
+				publicatieDatum: '',
+				aanmaakDatum: '',
+				berichtType: '',
+				referentie: '',
+				berichtID: '',
+				batchID: '',
+				gebruikerID: '',
+				volgorde: '',
+			}
 		},
-		editBericht() {
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/berichten/${store.berichtItem.id}`,
-				{
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.berichtItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getBerichtenList()
-					response.json().then((data) => {
-						store.setBerichtItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
+		async editBericht() {
+			this.loading = true
+			try {
+				await berichtStore.saveBericht({
+					...this.berichtItem,
 				})
+				this.success = true
+				this.loading = false
+				setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the bericht'
+			}
+		},
+		openLink(url, target) {
+			window.open(url, target)
 		},
 	},
 }
diff --git a/src/modals/klanten/AddKlant.vue b/src/modals/klanten/AddKlant.vue
deleted file mode 100644
index c48eeef..0000000
--- a/src/modals/klanten/AddKlant.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script setup>
-import { navigationStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcModal v-if="navigationStore.modal === 'addKlant'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modal__content">
-			<h2>Klant toevoegen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>KLant succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField :disabled="loading"
-					label="Voornaam"
-					maxlength="255"
-					:value.sync="store.klantItem.voornaam" />
-
-				<NcTextField :disabled="loading"
-					label="Tussenvoegsel"
-					maxlength="255"
-					:value.sync="store.klantItem.tussenvoegsel" />
-
-				<NcTextField :disabled="loading"
-					label="Achternaam"
-					maxlength="255"
-					:value.sync="store.klantItem.achternaam" />
-
-				<NcTextField :disabled="loading"
-					label="Telefoonnummer"
-					maxlength="255"
-					:value.sync="store.klantItem.telefoonnummer" />
-
-				<NcTextField :disabled="loading"
-					label="Email adres"
-					maxlength="255"
-					:value.sync="store.klantItem.emailadres" />
-
-				<NcTextField :disabled="loading"
-					label="Functie"
-					maxlength="255"
-					:value.sync="store.klantItem.functie" />
-
-				<NcTextField :disabled="loading"
-					label="Aanmaak kanaal"
-					maxlength="255"
-					:value.sync="store.klantItem.aanmaakkanaal" />
-
-				<NcTextField :disabled="loading"
-					label="Bron organisatie"
-					maxlength="255"
-					:value.sync="store.klantItem.bronorganisatie" />
-
-				<NcTextField :disabled="loading"
-					label="Bedrijfsnaam"
-					maxlength="255"
-					:value.sync="store.klantItem.bedrijfsnaam" />
-
-				<NcTextField :disabled="loading"
-					label="Website Url"
-					maxlength="255"
-					:value.sync="store.klantItem.websiteUrl" />
-
-				<NcTextField :disabled="loading"
-					label="Url"
-					maxlength="255"
-					:value.sync="store.klantItem.url" />
-
-				<NcTextField :disabled="loading"
-					label="Geverifieerd"
-					maxlength="255"
-					:value.sync="store.klantItem.geverifieerd" />
-
-				<NcTextField :disabled="loading"
-					label="Subject"
-					maxlength="255"
-					:value.sync="store.klantItem.subject" />
-
-				<NcTextField :disabled="loading"
-					label="Subject Identificatie"
-					maxlength="255"
-					:value.sync="store.klantItem.subjectIdentificatie" />
-
-				<NcTextField :disabled="loading"
-					label="Subject Type"
-					maxlength="255"
-					:value.sync="store.klantItem.subjectType" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
-				:disabled="!store.klantItem.voornaam || loading"
-				type="primary"
-				@click="addKlant()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import {
-	NcButton,
-	NcModal,
-	NcTextField,
-	NcLoadingIcon,
-	NcNoteCard,
-} from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-export default {
-	name: 'AddKlant',
-	components: {
-		NcModal,
-		NcTextField,
-		NcButton,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		Plus,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-		}
-	},
-	updated() {
-		if (navigationStore.modal === 'addKlant' && !this.hasUpdated) {
-			this.hasUpdated = true
-		}
-	},
-	methods: {
-		closeModal() {
-			navigationStore.modal = false
-		},
-		addKlant() {
-			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/klanten',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.klantItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getKlantenList()
-					response.json().then((data) => {
-						store.setKlantItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
-				})
-		},
-	},
-}
-</script>
-
-<style>
-.modal__content {
-    margin: var(--zaa-margin-50);
-    text-align: center;
-}
-
-.zaakDetailsContainer {
-    margin-block-start: var(--zaa-margin-20);
-    margin-inline-start: var(--zaa-margin-20);
-    margin-inline-end: var(--zaa-margin-20);
-}
-
-.success {
-    color: green;
-}
-</style>
diff --git a/src/modals/klanten/EditKlant.vue b/src/modals/klanten/EditKlant.vue
index 906602d..6b78d92 100644
--- a/src/modals/klanten/EditKlant.vue
+++ b/src/modals/klanten/EditKlant.vue
@@ -1,205 +1,241 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { klantStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal v-if="navigationStore.modal === 'editKlant'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modal__content">
-			<h2>Klant aanpassen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField :disabled="loading"
-					label="Voornaam"
-					maxlength="255"
-					:value.sync="store.klantItem.voornaam" />
-
-				<NcTextField :disabled="loading"
-					label="Tussenvoegsel"
-					maxlength="255"
-					:value.sync="store.klantItem.tussenvoegsel" />
-
-				<NcTextField :disabled="loading"
-					label="Achternaam"
-					maxlength="255"
-					:value.sync="store.klantItem.achternaam" />
-
-				<NcTextField :disabled="loading"
-					label="Telefoonnummer"
-					maxlength="255"
-					:value.sync="store.klantItem.telefoonnummer" />
-
-				<NcTextField :disabled="loading"
-					label="Email adres"
-					maxlength="255"
-					:value.sync="store.klantItem.emailadres" />
-
-				<NcTextField :disabled="loading"
-					label="Functie"
-					maxlength="255"
-					:value.sync="store.klantItem.functie" />
-
-				<NcTextField :disabled="loading"
-					label="Aanmaak kanaal"
-					maxlength="255"
-					:value.sync="store.klantItem.aanmaakkanaal" />
-
-				<NcTextField :disabled="loading"
-					label="Bron organisatie"
-					maxlength="255"
-					:value.sync="store.klantItem.bronorganisatie" />
-
-				<NcTextField :disabled="loading"
-					label="Bedrijfsnaam"
-					maxlength="255"
-					:value.sync="store.klantItem.bedrijfsnaam" />
-
-				<NcTextField :disabled="loading"
-					label="Website Url"
-					maxlength="255"
-					:value.sync="store.klantItem.websiteUrl" />
-
-				<NcTextField :disabled="loading"
-					label="Url"
-					maxlength="255"
-					:value.sync="store.klantItem.url" />
-
-				<NcTextField :disabled="loading"
-					label="Geverifieerd"
-					maxlength="255"
-					:value.sync="store.klantItem.geverifieerd" />
-
-				<NcTextField :disabled="loading"
-					label="Subject"
-					maxlength="255"
-					:value.sync="store.klantItem.subject" />
-
-				<NcTextField :disabled="loading"
-					label="Subject Identificatie"
-					maxlength="255"
-					:value.sync="store.klantItem.subjectIdentificatie" />
-
-				<NcTextField :disabled="loading"
-					label="Subject Type"
-					maxlength="255"
-					:value.sync="store.klantItem.subjectType" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
+	<NcDialog v-if="navigationStore.modal === 'editKlant'"
+		name="Klant"
+		size="normal"
+		:can-close="false">
+		<NcNoteCard v-if="success" type="success">
+			<p>Klant succesvol aangepast</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<div v-if="!success" class="form-group">
+			<NcTextField :disabled="loading"
+				label="Voornaam"
+				maxlength="255"
+				:value.sync="klantItem.voornaam" />
+
+			<NcTextField :disabled="loading"
+				label="Tussenvoegsel"
+				maxlength="255"
+				:value.sync="klantItem.tussenvoegsel" />
+
+			<NcTextField :disabled="loading"
+				label="Achternaam"
+				maxlength="255"
+				:value.sync="klantItem.achternaam" />
+
+			<NcTextField :disabled="loading"
+				label="Telefoonnummer"
+				maxlength="255"
+				:value.sync="klantItem.telefoonnummer" />
+
+			<NcTextField :disabled="loading"
+				label="Email adres"
+				maxlength="255"
+				:value.sync="klantItem.emailadres" />
+
+			<NcTextField :disabled="loading"
+				label="Functie"
+				maxlength="255"
+				:value.sync="klantItem.functie" />
+
+			<NcTextField :disabled="loading"
+				label="Aanmaak kanaal"
+				maxlength="255"
+				:value.sync="klantItem.aanmaakkanaal" />
+
+			<NcTextField :disabled="loading"
+				label="Bron organisatie"
+				maxlength="255"
+				:value.sync="klantItem.bronorganisatie" />
+
+			<NcTextField :disabled="loading"
+				label="Bedrijfsnaam"
+				maxlength="255"
+				:value.sync="klantItem.bedrijfsnaam" />
+
+			<NcTextField :disabled="loading"
+				label="Website Url"
+				maxlength="255"
+				:value.sync="klantItem.websiteUrl" />
+
+			<NcTextField :disabled="loading"
+				label="Url"
+				maxlength="255"
+				:value.sync="klantItem.url" />
+
+			<NcTextField :disabled="loading"
+				label="Geverifieerd"
+				maxlength="255"
+				:value.sync="klantItem.geverifieerd" />
+
+			<NcTextField :disabled="loading"
+				label="Subject"
+				maxlength="255"
+				:value.sync="klantItem.subject" />
+
+			<NcTextField :disabled="loading"
+				label="Subject Identificatie"
+				maxlength="255"
+				:value.sync="klantItem.subjectIdentificatie" />
+
+			<NcTextField :disabled="loading"
+				label="Subject Type"
+				maxlength="255"
+				:value.sync="klantItem.subjectType" />
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success"
 				:disabled="loading"
 				type="primary"
 				@click="editKlant()">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
+					<ContentSaveOutline v-if="!loading && klantStore.klantItem?.id" :size="20" />
+					<Plus v-if="!loading && !klantStore.klantItem?.id" :size="20" />
 				</template>
-				Opslaan
+				{{ klantStore.klantItem?.id ? 'Opslaan' : 'Aanmaken' }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
 import {
 	NcButton,
-	NcModal,
+	NcDialog,
 	NcTextField,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
 
 export default {
 	name: 'EditKlant',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcButton,
 		NcLoadingIcon,
 		// Icons
 		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
 	},
 	data() {
 		return {
-			succes: false,
+			success: false,
 			loading: false,
 			error: false,
+			hasUpdated: false,
+			klantItem: {
+				voornaam: '',
+				tussenvoegsel: '',
+				achternaam: '',
+				telefoonnummer: '',
+				emailadres: '',
+				functie: '',
+				aanmaakkanaal: '',
+				bronorganisatie: '',
+				bedrijfsnaam: '',
+				websiteUrl: '',
+				url: '',
+				geverifieerd: '',
+				subject: '',
+				subjectIdentificatie: '',
+				subjectType: '',
+			},
 		}
 	},
 	updated() {
-		if (navigationStore.modal === 'editKlant' && this.hasUpdated) {
-			if (this.klant === store.klantItem) return
-			this.hasUpdated = false
-		}
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
-			// uncomment when api works
-			// this.fetchData(store.klantId)
+			if (klantStore.klantItem?.id) {
+				this.klantItem = {
+					...klantStore.klantItem,
+					voornaam: klantStore.klantItem.voornaam || '',
+					tussenvoegsel: klantStore.klantItem.tussenvoegsel || '',
+					achternaam: klantStore.klantItem.achternaam || '',
+					telefoonnummer: klantStore.klantItem.telefoonnummer || '',
+					emailadres: klantStore.klantItem.emailadres || '',
+					functie: klantStore.klantItem.functie || '',
+					aanmaakkanaal: klantStore.klantItem.aanmaakkanaal || '',
+					bronorganisatie: klantStore.klantItem.bronorganisatie || '',
+					bedrijfsnaam: klantStore.klantItem.bedrijfsnaam || '',
+					websiteUrl: klantStore.klantItem.websiteUrl || '',
+					url: klantStore.klantItem.url || '',
+					geverifieerd: klantStore.klantItem.geverifieerd || '',
+					subject: klantStore.klantItem.subject || '',
+					subjectIdentificatie: klantStore.klantItem.subjectIdentificatie || '',
+					subjectType: klantStore.klantItem.subjectType || '',
+				}
+			}
 			this.hasUpdated = true
-			this.klant = store.klantItem
 		}
 	},
 	methods: {
-		fetchData(id) {
-			this.klantLoading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/klanten/${id}`,
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.klant = data
-						this.klant.data = JSON.stringify(data.data)
-						this.catalogi.value = [data.catalogi]
-						this.metaData.value = [data.metaData]
-					})
-					this.klantLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.klantLoading = false
-				})
-		},
 		closeModal() {
-			navigationStore.modal = false
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.klantItem = {
+				voornaam: '',
+				tussenvoegsel: '',
+				achternaam: '',
+				telefoonnummer: '',
+				emailadres: '',
+				functie: '',
+				aanmaakkanaal: '',
+				bronorganisatie: '',
+				bedrijfsnaam: '',
+				websiteUrl: '',
+				url: '',
+				geverifieerd: '',
+				subject: '',
+				subjectIdentificatie: '',
+				subjectType: '',
+			}
 		},
-		editKlant() {
+		async editKlant() {
 			this.loading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/klanten/${store.klantItem.id}`,
-				{
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.klantItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getKlantenList()
-					response.json().then((data) => {
-						store.setKlantItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
+			try {
+				await klantStore.saveKlant({
+					...this.klantItem,
 				})
+				this.success = true
+				this.loading = false
+				setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the klant'
+			}
+		},
+		openLink(url, target) {
+			window.open(url, target)
 		},
 	},
 }
diff --git a/src/modals/taken/AddTaak.vue b/src/modals/taken/AddTaak.vue
deleted file mode 100644
index 6e052d3..0000000
--- a/src/modals/taken/AddTaak.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script setup>
-import { navigationStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcModal v-if="navigationStore.modal === 'addTaak'" ref="modalRef" @close="closeModal">
-		<div class="modalContent">
-			<h2>Taak toevoegen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.title"
-					label="Titel"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.type"
-					label="Type"
-					maxlength="255" />
-
-				<NcSelect
-					v-bind="statusOptions"
-					v-model="store.taakItem.status"
-					:disabled="loading"
-					input-label="Status"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.onderwerp"
-					label="Onderwerp"
-					maxlength="255" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.taakItem.toelichting"
-					label="Toelichting" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
-				:disabled="!store.taakItem.onderwerp || loading"
-				type="primary"
-				@click="addTaak()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import {
-	NcButton,
-	NcModal,
-	NcTextField,
-	NcTextArea,
-	NcSelect,
-	NcLoadingIcon,
-	NcNoteCard,
-} from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-export default {
-	name: 'AddTaak',
-	components: {
-		NcModal,
-		NcTextField,
-		NcTextArea,
-		NcButton,
-		NcSelect,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		Plus,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-			// Opties
-			statusOptions: [{
-				key: 'key',
-				value: 'value',
-			}],
-		}
-	},
-	updated() {
-		if (navigationStore.modal === 'addTaak' && !this.hasUpdated) {
-			this.fetchZaken()
-			this.hasUpdated = true
-		}
-	},
-	methods: {
-		closeModal() {
-			this.hasUpdated = false
-			navigationStore.setModal(false)
-			store.setTaakZaakId(false)
-
-		},
-		addTaak() {
-			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/taken',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.taakItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getTakenList()
-					response.json().then((data) => {
-						store.setTaakItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
-				})
-		},
-	},
-}
-</script>
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 563b34d..cba355c 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -1,80 +1,97 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { taakStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal v-if="navigationStore.modal === 'editTaak'" ref="modalRef" @close="navigationStore.setModal(false)">
-		<div class="modalContent">
-			<h2>Taak aanpassen</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
+	<NcDialog v-if="navigationStore.modal === 'editTaak'"
+		name="Taak"
+		size="normal"
+		:can-close="false">
+		<NcNoteCard v-if="success" type="success">
+			<p>Taak succesvol aangepast</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
 
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.title"
-					label="Titel"
-					maxlength="255" />
+		<div v-if="!success" class="form-group">
+			<NcTextField
+				:disabled="loading"
+				:value.sync="taakItem.title"
+				label="Titel"
+				maxlength="255" />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.type"
-					label="Type"
-					maxlength="255" />
+			<NcTextField
+				:disabled="loading"
+				:value.sync="taakItem.type"
+				label="Type"
+				maxlength="255" />
 
-				<NcSelect
-					v-bind="statusOptions"
-					v-model="store.taakItem.status"
-					:disabled="loading"
-					input-label="Status"
-					required />
+			<NcSelect
+				v-bind="statusOptions"
+				v-model="taakItem.status"
+				:disabled="loading"
+				input-label="Status"
+				required />
 
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.taakItem.onderwerp"
-					label="Onderwerp"
-					maxlength="255" />
+			<NcTextField
+				:disabled="loading"
+				:value.sync="taakItem.onderwerp"
+				label="Onderwerp"
+				maxlength="255" />
 
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.taakItem.toelichting"
-					label="Toelichting" />
-			</div>
+			<NcTextArea
+				:disabled="loading"
+				:value.sync="taakItem.toelichting"
+				label="Toelichting" />
+		</div>
 
-			<NcButton
-				v-if="!succes"
+		<template #actions>
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success"
 				:disabled="loading"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
+					<ContentSaveOutline v-if="!loading && taakStore.taakItem?.id" :size="20" />
+					<Plus v-if="!loading && !taakStore.taakItem?.id" :size="20" />
 				</template>
-				Opslaan
+				{{ taakStore.taakItem?.id ? 'Opslaan' : 'Aanmaken' }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
 import {
 	NcButton,
-	NcModal,
+	NcDialog,
 	NcTextField,
 	NcTextArea,
 	NcSelect,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
 
 export default {
 	name: 'EditTaak',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcTextArea,
 		NcButton,
@@ -82,61 +99,72 @@ export default {
 		NcLoadingIcon,
 		// Icons
 		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
 	},
 	data() {
 		return {
-			succes: false,
+			success: false,
 			loading: false,
 			error: false,
+			hasUpdated: false,
+			taakItem: {
+				title: '',
+				type: '',
+				status: '',
+				onderwerp: '',
+				toelichting: '',
+			},
 		}
 	},
 	updated() {
-		if (navigationStore.modal === 'editTaak' && this.hasUpdated) {
-			if (this.taak === store.taakItem) return
-			this.hasUpdated = false
-		}
 		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
-			this.taak = store.taakItem
-			this.fetchZaken()
-			this.setStatusOptions()
+			if (taakStore.taakItem?.id) {
+				this.taakItem = {
+					...taakStore.taakItem,
+					title: taakStore.taakItem.title || '',
+					type: taakStore.taakItem.type || '',
+					status: taakStore.taakItem.status || '',
+					onderwerp: taakStore.taakItem.onderwerp || '',
+					toelichting: taakStore.taakItem.toelichting || '',
+				}
+			}
 			this.hasUpdated = true
 		}
 	},
 	methods: {
 		closeModal() {
-			navigationStore.modal = false
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.taakItem ={
+				title: '',
+				type: '',
+				status: '',
+				onderwerp: '',
+				toelichting: '',
+			}
 		},
-		editTaak() {
+		async editTaak() {
 			this.loading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/taken/${store.taakItem.id}`,
-				{
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.taakItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					store.getTakenList()
-					response.json().then((data) => {
-						store.setTaakItem(data)
-					})
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					this.error = err
-					console.error(err)
+			try {
+				await taakStore.saveTaak({
+					...this.taakItem,
 				})
+				this.success = true
+				this.loading = false
+				setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the taak'
+			}
+		},
+		openLink(url, target) {
+			window.open(url, target)
 		},
 	},
 }
diff --git a/src/modals/zaakTypen/EditZaakType.vue b/src/modals/zaakTypen/EditZaakType.vue
index c3bd6fb..7068a20 100644
--- a/src/modals/zaakTypen/EditZaakType.vue
+++ b/src/modals/zaakTypen/EditZaakType.vue
@@ -6,13 +6,13 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 	<NcModal v-if="navigationStore.modal === 'editZaakType'" ref="modalRef" @close="navigationStore.setModal(false)">
 		<div class="modalContent">
 			<h2>Zaak aanpassen</h2>
-			<NcNoteCard v-if="succes" type="success">
+			<NcNoteCard v-if="success" type="success">
 				<p>Bijlage succesvol toegevoegd</p>
 			</NcNoteCard>
 			<NcNoteCard v-if="error" type="error">
 				<p>{{ error }}</p>
 			</NcNoteCard>
-			<div v-if="!succes" class="form-group">
+			<div v-if="!success" class="form-group">
 				<NcTextField
 					:disabled="loading"
 					:value.sync="zaakTypeStore.zaakTypeItem.identificatie"
@@ -198,14 +198,12 @@ export default {
 		}
 	},
 	updated() {
-		if (store.modal === 'editZaak' && this.hasUpdated) {
-			if (this.zaak === store.zaakItem) return
+		if (navigationStore.modal === 'editZaakType' && this.hasUpdated) {
+			if (this.zaakType === zaakTypeStore.zaakTypeItem) return
 			this.hasUpdated = false
 		}
-		if (store.modal === 'editZaak' && !this.hasUpdated) {
-			this.zaak = store.zaakItem
-			this.setArchiefStatusOptions()
-			this.fetchZaakType()
+		if (navigationStore.modal === 'editZaakType' && !this.hasUpdated) {
+			this.zaakType = zaakTypeStore.zaakTypeItem
 			this.hasUpdated = true
 		}
 	},
diff --git a/src/modals/zaken/AddZaak.vue b/src/modals/zaken/AddZaak.vue
deleted file mode 100644
index 14ef252..0000000
--- a/src/modals/zaken/AddZaak.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<script setup>
-import { store } from '../../store.js'
-</script>
-
-<template>
-	<NcModal v-if="store.modal === 'addZaak'" ref="modalRef" @close="store.setModal(false)">
-		<div class="modalContent">
-			<h2>Zaak starten</h2>
-			<NcNoteCard v-if="succes" type="success">
-				<p>Bijlage succesvol toegevoegd</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-
-			<div v-if="!succes" class="form-group">
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.identificatie"
-					label="Identificatie"
-					maxlength="255"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.omschrijving"
-					label="Omschrijving"
-					maxlength="255" />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.bronorganisatie"
-					label="Bron organisatie"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.verantwoordelijkeOrganisatie"
-					label="Verantwoordelijke Organisatie"
-					maxlength="9"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.startdatum"
-					label="Startdatum"
-					maxlength="9"
-					required />
-
-				<NcSelect
-					v-bind="store.zaakItem.zaaktype"
-					v-model="zaaktype.value"
-					:disabled="loading"
-					input-label="Zaaktype"
-					required />
-
-				<NcSelect
-					:disabled="loading"
-					:value.sync="store.zaakItem.Archiefstatus"
-					input-label="Archiefstatus"
-					required />
-
-				<NcTextField
-					:disabled="loading"
-					:value.sync="store.zaakItem.registratiedatum"
-					label="Registratiedatum"
-					maxlength="255" />
-
-				<NcTextArea
-					:disabled="loading"
-					:value.sync="store.zaakItem.toelichting"
-					label="Toelichting" />
-			</div>
-
-			<NcButton
-				v-if="!succes"
-				:disabled="!store.zaakItem.zaaktype || loading"
-				type="primary"
-				@click="addZaak()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import { NcButton, NcModal, NcTextField, NcSelect, NcTextArea, NcLoadingIcon } from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-export default {
-	name: 'AddZaak',
-	components: {
-		NcModal,
-		NcTextField,
-		NcButton,
-		NcSelect,
-		NcTextArea,
-		NcLoadingIcon,
-		// Icons
-		Plus,
-	},
-	data() {
-		return {
-			succes: false,
-			loading: false,
-			error: false,
-			// Select options
-			zaakTypeLoading: false,
-			zaaktype: false,
-		}
-	},
-	mounted() {
-		// Lets create an empty zaak item
-		store.setZaakItem([])
-		// Get a zaaktype lisy  @todo should be part of a service
-		this.fetchZaakType()
-	},
-	methods: {
-		addZaak() {
-			this.loading = true
-			fetch(
-				'index.php/apps/zaakafhandelapp/api/zrc/zaken',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(store.zaakItem),
-				},
-			)
-				.then((response) => {
-					this.succes = true
-					this.loading = false
-					// Get the modal to self close
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						store.setModal(false)
-					}, 2000)
-				})
-				.catch((err) => {
-					this.loading = false
-					console.error(err)
-				})
-		},
-		fetchZaakType() {
-			this.zaakTypeLoading = true
-			fetch('/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen', {
-				method: 'GET',
-			})
-				.then((response) => {
-					response.json().then((data) => {
-
-						this.zaaktype = {
-							options: Object.entries(data.results).map((zaaktype) => ({
-								id: zaaktype[1].id,
-								label: zaaktype[1].name,
-							})),
-
-						}
-					})
-					this.zaakTypeLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.zaakTypeLoading = false
-				})
-		},
-	},
-}
-</script>
-
-<style>
-.modalContent {
-    margin: var(--zaa-margin-50);
-    text-align: center;
-}
-
-</style>
diff --git a/src/modals/zaken/EditZaak.vue b/src/modals/zaken/EditZaak.vue
new file mode 100644
index 0000000..70cc2c2
--- /dev/null
+++ b/src/modals/zaken/EditZaak.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { zaakStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog v-if="navigationStore.modal === 'addZaak'" 
+		name="Zaak"
+		size="normal"
+		:can-close="false">
+		<NcNoteCard v-if="success" type="success">
+			<p>Zaak succesvol aangepast</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<div v-if="!success" class="form-group">
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.identificatie"
+				label="Identificatie"
+				maxlength="255"
+				required />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.omschrijving"
+				label="Omschrijving"
+				maxlength="255" />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.bronorganisatie"
+				label="Bron organisatie"
+				maxlength="9"
+				required />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.verantwoordelijkeOrganisatie"
+				label="Verantwoordelijke Organisatie"
+				maxlength="9"
+				required />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.startdatum"
+				label="Startdatum"
+				maxlength="9"
+				required />
+
+			<NcSelect
+				v-bind="zaakItem.zaaktype"
+				v-model="zaaktype.value"
+				:disabled="loading"
+				input-label="Zaaktype"
+				required />
+
+			<NcSelect
+				:disabled="loading"
+				:value.sync="zaakItem.Archiefstatus"
+				input-label="Archiefstatus"
+				required />
+
+			<NcTextField
+				:disabled="loading"
+				:value.sync="zaakItem.registratiedatum"
+				label="Registratiedatum"
+				maxlength="255" />
+
+			<NcTextArea
+				:disabled="loading"
+				:value.sync="zaakItem.toelichting"
+				label="Toelichting" />
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="!success"
+				:disabled="loading"
+				type="primary"
+				@click="editZaak()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading && zaakStore.zaakItem?.id" :size="20" />
+					<Plus v-if="!loading && !zaakStore.zaakItem?.id" :size="20" />
+				</template>
+				{{ zaakStore.zaakItem?.id ? 'Opslaan' : 'Aanmaken' }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcTextField, NcSelect, NcTextArea, NcLoadingIcon } from '@nextcloud/vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
+
+export default {
+	name: 'EditZaak',
+	components: {
+		NcDialog,
+		NcTextField,
+		NcButton,
+		NcSelect,
+		NcTextArea,
+		NcLoadingIcon,
+		// Icons
+		ContentSaveOutline,
+		Cancel,
+		Plus,
+		Help,
+	},
+	data() {
+		return {
+			succes: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			zaakItem: {
+				identificatie: '',
+				omschrijving: '',
+				bronorganisatie: '',
+				verantwoordelijkeOrganisatie: '',
+				startdatum: '',
+				zaaktype: '',
+				Archiefstatus: '',
+				registratiedatum: '',
+				toelichting: '',
+			},
+			// Select options
+			zaakTypeLoading: false,
+			zaaktype: false,
+		}
+	},
+	updated() {
+		if (navigationStore.modal === 'editZaak' && !this.hasUpdated) {
+			if (zaakStore.zaakItem?.id) {
+				this.zaakItem = {
+					...zaakStore.zaakItem,
+					identificatie: zaakStore.zaakItem.identificatie || '',
+					omschrijving: zaakStore.zaakItem.omschrijving || '',
+					bronorganisatie: zaakStore.zaakItem.bronorganisatie || '',
+					verantwoordelijkeOrganisatie: zaakStore.zaakItem.verantwoordelijkeOrganisatie || '',
+					startdatum: zaakStore.zaakItem.startdatum || '',
+					zaaktype: zaakStore.zaakItem.zaaktype || '',
+					Archiefstatus: zaakStore.zaakItem.Archiefstatus || '',
+					registratiedatum: zaakStore.zaakItem.registratiedatum || '',
+					toelichting: zaakStore.zaakItem.toelichting || '',
+				}
+			}
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.zaakItem = {
+				identificatie: '',
+				omschrijving: '',
+				bronorganisatie: '',
+				verantwoordelijkeOrganisatie: '',
+				startdatum: '',
+				zaaktype: '',
+				Archiefstatus: '',
+				registratiedatum: '',
+				toelichting: '',
+			}
+		},
+		async editZaak() {
+			this.loading = true
+			try {
+				await zaakStore.saveZaak({
+					...this.zaakItem,
+				})
+				this.success = true
+				this.loading = false
+				setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the zaak'
+			}
+		},
+		openLink(url, target) {
+			window.open(url, target)
+		},
+	},
+}
+</script>
+
+<style>
+.modalContent {
+    margin: var(--zaa-margin-50);
+    text-align: center;
+}
+
+</style>
diff --git a/src/views/berichten/BerichtenIndex.vue b/src/views/berichten/BerichtenIndex.vue
index 23fb17f..64ab8a4 100644
--- a/src/views/berichten/BerichtenIndex.vue
+++ b/src/views/berichten/BerichtenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					<ChatOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('addBericht')">
+					<NcButton type="primary" @click="navigationStore.setModal('editBericht')">
 						Bericht aanmaken
 					</NcButton>
 				</template>
diff --git a/src/views/berichten/BerichtenList.vue b/src/views/berichten/BerichtenList.vue
index 91b6bdb..d9854c7 100644
--- a/src/views/berichten/BerichtenList.vue
+++ b/src/views/berichten/BerichtenList.vue
@@ -22,7 +22,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="navigationStore.setModal('addBericht')">
+					<NcActionButton @click="berichtStore.setBerichtItem(null); navigationStore.setModal('editBericht')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
@@ -38,7 +38,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					:details="'1h'"
 					:counter-number="44"
 					:force-display-actions="true"
-					@click="navigationStore.setBerichtItem(bericht)">
+					@click="berichtStore.setBerichtItem(bericht)">
 					<template #icon>
 						<ChatOutline :class="berichtStore.berichtItem?.id === bericht.id && 'selectedZaakIcon'"
 							disable-menu
diff --git a/src/views/klanten/KlantenIndex.vue b/src/views/klanten/KlantenIndex.vue
index a6c94a9..5dcd5e1 100644
--- a/src/views/klanten/KlantenIndex.vue
+++ b/src/views/klanten/KlantenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 					<AccountOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('addKlant')">
+					<NcButton type="primary" @click="navigationStore.setModal('editKlant')">
 						Klant toevoegen
 					</NcButton>
 				</template>
diff --git a/src/views/klanten/KlantenList.vue b/src/views/klanten/KlantenList.vue
index 63c0d12..7e2970b 100644
--- a/src/views/klanten/KlantenList.vue
+++ b/src/views/klanten/KlantenList.vue
@@ -22,7 +22,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="navigationStore.setModal('addKlant')">
+					<NcActionButton @click="klantStore.setKlantItem(null); navigationStore.setModal('editKlant')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
diff --git a/src/views/settings/Settings.vue b/src/views/settings/Settings.vue
index 155f8e2..9403741 100644
--- a/src/views/settings/Settings.vue
+++ b/src/views/settings/Settings.vue
@@ -191,6 +191,13 @@ export default {
 				availableSchemas: [],
 				loading: false,
 			},
+			zaaktypen: {
+				selectedSource: '',
+				selectedRegister: '',
+				selectedSchema: '',
+				availableSchemas: [],
+				loading: false,
+			},
 			labelOptions: {
 				options: [
 					{ label: 'Internal', value: 'internal' },
@@ -208,6 +215,7 @@ export default {
 				{ id: 'organisaties', title: 'Organisaties', description: 'Configureer de opslag voor organisatiegegevens', helpLink: 'https://example.com/help/organisaties' },
 				{ id: 'personen', title: 'Personen', description: 'Configureer de opslag voor persoonsgegevens', helpLink: 'https://example.com/help/personen' },
 				{ id: 'zaken', title: 'Zaken', description: 'Configureer de opslag voor zaken', helpLink: 'https://example.com/help/zaken' },
+				{ id: 'zaaktypen', title: 'Zaaktypen', description: 'Configureer de opslag voor zaaktypen', helpLink: 'https://example.com/help/zaaktypen' },
 			],
 		}
 	},
diff --git a/src/views/taken/TakenIndex.vue b/src/views/taken/TakenIndex.vue
index e3ca7ad..04f421e 100644
--- a/src/views/taken/TakenIndex.vue
+++ b/src/views/taken/TakenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					<CalendarMonthOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('addTaak')">
+					<NcButton type="primary" @click="navigationStore.setModal('editTaak')">
 						Taak toevoegen
 					</NcButton>
 				</template>
diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index ce9eed1..579500c 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -22,7 +22,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="navigationStore.setModal('addTaak')">
+					<NcActionButton @click="taakStore.setTaakItem(null); navigationStore.setModal('editTaak')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
diff --git a/src/views/zaken/ZakenIndex.vue b/src/views/zaken/ZakenIndex.vue
index c5e2604..1230838 100644
--- a/src/views/zaken/ZakenIndex.vue
+++ b/src/views/zaken/ZakenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 					<BriefcaseAccountOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="zaakStore.setZaakItem(null); navigationStore.setModal('zaakForm')">
+					<NcButton type="primary" @click="zaakStore.setZaakItem(null); navigationStore.setModal('editZaak')">
 						Zaak starten
 					</NcButton>
 				</template>