From 82a12add31c4e36d85d6b5176aab930e746cb916 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 3 Dec 2024 17:27:22 +0100
Subject: [PATCH 1/4] improved taak modal code

---
 src/modals/Modals.vue                         |   3 -
 .../contactMomenten/ContactMomentenForm.vue   |   5 +-
 .../klantRegister/ViewKlantRegister.vue       |   6 +-
 src/modals/taken/EditTaak.vue                 | 243 +++++++----
 src/modals/taken/WidgetTaakForm.vue           | 380 ------------------
 src/store/modules/taak.js                     |   4 +-
 src/views/widgets/TakenWidget.vue             |   9 +-
 7 files changed, 179 insertions(+), 471 deletions(-)
 delete mode 100644 src/modals/taken/WidgetTaakForm.vue

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 7cbe23d..685eeba 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -13,7 +13,6 @@ import { navigationStore } from '../store/store.js'
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
 		<EditTaak v-if="navigationStore.modal === 'editTaak'" />
-		<WidgetTaakForm v-if="navigationStore.modal === 'widgetTaakForm'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
 		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
@@ -33,7 +32,6 @@ import EditBericht from './berichten/EditBericht.vue'
 import ViewBerichtAuditTrail from './berichten/ViewBerichtAuditTrail.vue'
 import EditTaak from './taken/EditTaak.vue'
 import ViewTaakAuditTrail from './taken/ViewTaakAuditTrail.vue'
-import WidgetTaakForm from './taken/WidgetTaakForm.vue'
 import EditRol from './rollen/EditRol.vue'
 import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 import ViewKlantRegister from './klantRegister/ViewKlantRegister.vue'
@@ -50,7 +48,6 @@ export default {
 		EditBericht,
 		ViewBerichtAuditTrail,
 		EditTaak,
-		WidgetTaakForm,
 		ViewTaakAuditTrail,
 		EditRol,
 		ViewZaakAuditTrail,
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 625974c..2376c7d 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -220,7 +220,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			</NcButton>
 		</template>
 
-		<TakenForm v-if="taakFormOpen"
+		<EditTaakForm v-if="taakFormOpen"
 			:dashboard-widget="true"
 			@close-modal="closeTaakForm"
 			@save-success="closeTaakForm" />
@@ -234,7 +234,7 @@ import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, N
 
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
-import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -256,6 +256,7 @@ export default {
 		NcListItem,
 		NcActionButton,
 		NcEmptyContent,
+		EditTaakForm: EditTaak,
 		// Icons
 		Plus,
 		BriefcaseAccountOutline,
diff --git a/src/modals/klantRegister/ViewKlantRegister.vue b/src/modals/klantRegister/ViewKlantRegister.vue
index ea65707..16c2752 100644
--- a/src/modals/klantRegister/ViewKlantRegister.vue
+++ b/src/modals/klantRegister/ViewKlantRegister.vue
@@ -194,7 +194,7 @@ import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/s
 			:selected-klant-from-widget="klant"
 			@save-success="fetchZaakItems" />
 
-		<WidgetTaakForm v-if="taakModalOpen"
+		<EditTaakForm v-if="taakModalOpen"
 			:dashboard-widget="true"
 			:selected-klant-from-widget="klant"
 			@save-success="fetchTaakItems" />
@@ -220,7 +220,7 @@ import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import WidgetTaakForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 import WidgetZaakForm from '../../modals/zaken/WidgetZaakForm.vue'
 
 export default {
@@ -240,7 +240,7 @@ export default {
 		AccountOutline,
 		Eye,
 		DotsHorizontal,
-		WidgetTaakForm,
+		EditTaakForm: EditTaak,
 		WidgetZaakForm,
 	},
 	props: {
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index 4ea62c1..c4c62b2 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore, navigationStore, klantStore } from '../../store/store.js'
+import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -47,12 +47,15 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				:value.sync="taakItem.toelichting"
 				label="Toelichting" />
 
-			<NcSelect
-				v-bind="klanten"
-				v-model="klanten.value"
-				input-label="Klant"
-				:loading="klantenLoading"
-				:disabled="loading" />
+			<div>
+				<NcSelect
+					v-bind="medewerkers"
+					v-model="medewerkers.value"
+					:user-select="true"
+					input-label="Medewerker"
+					:loading="medewerkersLoading"
+					:disabled="loading" />
+			</div>
 		</div>
 
 		<template #actions>
@@ -69,7 +72,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading || klantenLoading || !taakItem.title || !taakItem.deadline"
+				:disabled="loading || medewerkersLoading || !taakItem.title || !taakItem.deadline"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -117,19 +120,63 @@ export default {
 		Help,
 	},
 	props: {
+		/**
+		 * Whether the modal is being used within a dashboard widget.
+		 *
+		 * If true, the modal will emit a 'save-success' event upon successful taak saving.
+		 */
 		dashboardWidget: {
 			type: Boolean,
 			required: false,
 		},
+		/**
+		 * ID of a medewerker (employee) to pre-select in the dropdown.
+		 *
+		 * This prop has the highest priority when determining which medewerker to select:
+		 * 1. selectedMedewerker prop (if provided)
+		 * 2. medewerker ID from taakId prop fetch result (if taakId provided)
+		 * 3. taakStore.taakItem.klant
+		 *
+		 * Note: While functional, using this prop is not recommended. Instead, prefer using
+		 * the taakId prop to load a complete taak, or let the component handle medewerker
+		 * selection based on the taakStore state.
+		 *
+		 * If the provided klant ID does not exist in the database, or is in any other way invalid,
+		 * the medewerker dropdown will not have a default/selected option.
+		 */
+		selectedMedewerker: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * ID of the taak (task) to load and edit.
+		 *
+		 * When provided, this prop takes precedence over any ID present in `taakStore.taakItem`.
+		 * The component will:
+		 * 1. Fetch the taak data associated with this ID from the API
+		 * 2. Load the fetched data into the form, overwriting any existing taak data in the modal
+		 * 3. Pre-select the associated medewerker (employee) if one exists
+		 *
+		 * @example
+		 * <EditTaak taakId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 * <EditTaak :taakId="taakStore.taakItem?.id" />
+		 */
+		taakId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
+			// state
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
-			klantenLoading: false,
-			klanten: [],
+			// data
+			/** medewerkers is a list of clients (also known as klanten throughout the code / app) */
+			medewerkers: [],
+			medewerkersLoading: false,
+			// item
 			taakItem: {
 				title: '',
 				type: '',
@@ -138,30 +185,59 @@ export default {
 				onderwerp: '',
 				toelichting: '',
 			},
+			executorOptions: {
+				options: [
+					{
+						id: 'klant',
+						label: 'Klant',
+					},
+					{
+						id: 'medewerker',
+						label: 'Medewerker',
+					},
+				],
+				value: {
+					id: 'klant',
+					label: 'Klant',
+				},
+			},
+			statusOptions: {
+				options: [
+					{
+						id: 'status1',
+						label: 'Status 1',
+					},
+					{
+						id: 'status2',
+						label: 'Status 2',
+					},
+					{
+						id: 'status3',
+						label: 'Status 3',
+					},
+				],
+			},
 		}
 	},
 	mounted() {
-		this.fetchKlanten()
-	},
-	updated() {
-		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
-			if (taakStore.taakItem?.id) {
-				this.taakItem = {
-					...taakStore.taakItem,
-					title: taakStore.taakItem.title || '',
-					type: taakStore.taakItem.type || '',
-					status: taakStore.taakItem.status || '',
-					deadline: new Date(taakStore.taakItem.deadline),
-					onderwerp: taakStore.taakItem.onderwerp || '',
-					toelichting: taakStore.taakItem.toelichting || '',
-					klant: klantStore.klantItem?.id || '',
-				}
-				this.fetchKlanten()
-			} else {
-				this.taakItem.klant = klantStore.klantItem?.id || ''
-				this.fetchKlanten()
+		if (this.taakId) {
+			this.fetchTaakData(this.taakId)
+		} else if (taakStore.taakItem?.id) {
+			// fetchMedewerkers also gets called by fetchTaakData, if taakId is provided. So we don't need to call it first
+			this.fetchMedewerkers()
+
+			this.taakItem = {
+				...taakStore.taakItem,
+				title: taakStore.taakItem.title || '',
+				type: taakStore.taakItem.type || '',
+				status: taakStore.taakItem.status || 'open',
+				deadline: new Date(taakStore.taakItem.deadline),
+				onderwerp: taakStore.taakItem.onderwerp || '',
+				toelichting: taakStore.taakItem.toelichting || '',
+				klant: klantStore.klantItem?.id || '',
 			}
-			this.hasUpdated = true
+		} else {
+			this.fetchMedewerkers()
 		}
 	},
 	methods: {
@@ -171,68 +247,83 @@ export default {
 			}, 300)
 		},
 		closeModal() {
-			navigationStore.setModal(false)
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
+			navigationStore.setModal(null)
+
+			if (this.dashboardWidget === true) {
+				this.$emit('close-modal')
+			}
+		},
+		async fetchTaakData(id) {
+			const { entity: taakEntity } = await taakStore.getTaak(id)
+
 			this.taakItem = {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-				klant: '',
+				...taakEntity,
+				deadline: new Date(taakEntity.deadline),
 			}
+
+			this.fetchMedewerkers(taakEntity?.klant)
 		},
-		fetchKlanten() {
-			this.klantenLoading = true
+		/**
+		 * @param {string} medewerkerId - Optional ID of the medewerker to select. Will take precedence over the ID present in `taakStore.taakItem`.
+		 *                                If none are provided the default selected medewerker will be `null`.
+		 */
+		fetchMedewerkers(medewerkerId = null) {
+			medewerkerStore.refreshMedewerkersList()
+				.then(({ data }) => {
 
-			klantStore.refreshKlantenList()
-				.then(({ response, data }) => {
-					const selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
+					const taakKlantId = taakStore.taakItem?.klant
+					const searchId = (this.selectedMedewerker ?? medewerkerId ?? taakKlantId)?.toString()
+
+					const selectedMedewerker = data.find((medewerker) => medewerker?.id.toString() === searchId) || null
+
+					this.medewerkers = {
+						options: data.map((medewerker) => ({
+							id: medewerker.id,
+							displayName: `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}`,
+							subName: medewerker.email,
+							icon: medewerker.icon ?? '',
 
-					this.klanten = {
-						options: data.map((klant) => ({
-							id: klant.id,
-							label: klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : klant.bedrijfsnaam,
 						})),
-						value: selectedKlant
+						value: selectedMedewerker
 							? {
-								id: selectedKlant?.id,
-								label: selectedKlant?.type === 'persoon' ? `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}` : selectedKlant.bedrijfsnaam,
+								id: selectedMedewerker?.id,
+								displayName: `${selectedMedewerker.voornaam} ${selectedMedewerker.tussenvoegsel} ${selectedMedewerker.achternaam}`,
+								subName: selectedMedewerker.email,
+								icon: selectedMedewerker.icon ?? '',
 							}
 							: null,
 					}
-
-					this.klantenLoading = false
 				})
 				.catch((err) => {
 					console.error(err)
-					this.klantenLoading = false
+				})
+				.finally(() => {
+					this.medewerkersLoading = false
 				})
 		},
 		async editTaak() {
 			this.loading = true
-			try {
-				await taakStore.saveTaak({
-					...this.taakItem,
-					klant: this.klanten.value?.id ?? '',
-					status: this.status === 'gesloten' ? 'gesloten' : 'open',
-					deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
-				}, this.dashboardWidget)
-				this.success = true
-				this.loading = false
-				setTimeout(this.closeModal, 2000)
-				if (this.dashboardWidget === true) {
-					this.$emit('save-success')
-				}
-			} catch (error) {
-				this.loading = false
-				this.success = false
-				this.error = error.message || 'An error occurred while saving the taak'
-			}
+
+			taakStore.saveTaak({
+				...this.taakItem,
+				klant: this.medewerkers.value?.id ?? '',
+				status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
+				deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
+			}, { doNotRefresh: true })
+				.then(({ response }) => {
+					this.success = response.ok
+					setTimeout(this.closeModal, 2000)
+
+					if (this.dashboardWidget === true && response.ok) {
+						this.$emit('save-success')
+					}
+				})
+				.catch((err) => {
+					this.error = err.message || 'An error occurred while saving the taak'
+				})
+				.finally(() => {
+					this.loading = false
+				})
 		},
 		openLink(url, target) {
 			window.open(url, target)
diff --git a/src/modals/taken/WidgetTaakForm.vue b/src/modals/taken/WidgetTaakForm.vue
deleted file mode 100644
index 1a5ada3..0000000
--- a/src/modals/taken/WidgetTaakForm.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<script setup>
-import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcDialog
-		name="Taak"
-		size="normal"
-		@closing="closeModalFromButton()">
-		<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="!success" class="form-group">
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.title"
-				required
-				label="Titel"
-				maxlength="255" />
-
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.type"
-				label="Type"
-				maxlength="255" />
-
-			<!-- <NcSelect
-				v-bind="statusOptions"
-				v-model="taakItem.status"
-				:disabled="loading"
-				input-label="Status"
-				required /> -->
-
-			<div>
-				<p>Deadline</p>
-				<NcDateTimePicker
-					v-model="taakItem.deadline"
-					:disabled="loading"
-					required />
-			</div>
-
-			<NcTextField
-				:disabled="loading"
-				:value.sync="taakItem.onderwerp"
-				label="Onderwerp"
-				maxlength="255" />
-
-			<NcTextArea
-				:disabled="loading"
-				:value.sync="taakItem.toelichting"
-				label="Toelichting" />
-
-			<!-- <NcSelect
-				v-bind="klanten"
-				v-model="klanten.value"
-				input-label="Klant"
-				:loading="klantenLoading"
-				:disabled="loading" /> -->
-
-			<!-- <<NcSelect
-				v-bind="executorOptions"
-				v-model="executorOptions.value"
-				input-label="Klant of Medewerker"
-				:loading="klantenLoading"
-				:disabled="loading" />
-			<div v-if="executorOptions.value.id === 'klant'">
-				<NcSelect
-					v-bind="klanten"
-					v-model="klanten.value"
-					input-label="Klant"
-					:loading="klantenLoading"
-					:disabled="loading" />
-			</div> -->
-			<div>
-				<NcSelect
-					v-bind="medewerkers"
-					v-model="medewerkers.value"
-					:user-select="true"
-					input-label="Medewerker"
-					:loading="medewerkersLoading"
-					:disabled="loading" />
-			</div>
-		</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 || klantenLoading || !taakItem.title || !taakItem.deadline"
-				type="primary"
-				@click="editTaak()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading && taakStore.taakItem?.id" :size="20" />
-					<Plus v-if="!loading && !taakStore.taakItem?.id" :size="20" />
-				</template>
-				{{ taakStore.taakItem?.id ? 'Opslaan' : 'Aanmaken' }}
-			</NcButton>
-		</template>
-	</NcDialog>
-</template>
-
-<script>
-import {
-	NcButton,
-	NcDialog,
-	NcTextField,
-	NcTextArea,
-	NcDateTimePicker,
-	NcSelect,
-	NcLoadingIcon,
-	NcNoteCard,
-} 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: 'WidgetTaakForm',
-	components: {
-		NcDialog,
-		NcTextField,
-		NcTextArea,
-		NcDateTimePicker,
-		NcButton,
-		NcSelect,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		ContentSaveOutline,
-		Cancel,
-		Plus,
-		Help,
-	},
-	props: {
-		dashboardWidget: {
-			type: Boolean,
-			required: false,
-		},
-		selectedKlantFromWidget: {
-			type: Object,
-			default: null,
-			required: false,
-		},
-		taakId: {
-			type: String,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			success: false,
-			loading: false,
-			error: false,
-			hasUpdated: false,
-			klantenLoading: false,
-			klanten: [],
-			medewerkersLoading: false,
-			medewerkers: [],
-			taakItem: {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-			},
-			executorOptions: {
-				options: [
-					{
-						id: 'klant',
-						label: 'Klant',
-					},
-					{
-						id: 'medewerker',
-						label: 'Medewerker',
-					},
-				],
-				value: {
-					id: 'klant',
-					label: 'Klant',
-				},
-			},
-			statusOptions: {
-				options: [
-					{
-						id: 'status1',
-						label: 'Status 1',
-					},
-					{
-						id: 'status2',
-						label: 'Status 2',
-					},
-					{
-						id: 'status3',
-						label: 'Status 3',
-					},
-				],
-			},
-		}
-	},
-	mounted() {
-		this.fetchKlanten()
-		this.fetchMedewerkers()
-		if (this.taakId) {
-			this.fetchTaakData(this.taakId)
-		}
-	},
-	updated() {
-		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
-			if (taakStore.taakItem?.id) {
-				this.taakItem = {
-					...taakStore.taakItem,
-					title: taakStore.taakItem.title || '',
-					type: taakStore.taakItem.type || '',
-					status: 'open',
-					deadline: new Date(taakStore.taakItem.deadline),
-					onderwerp: taakStore.taakItem.onderwerp || '',
-					toelichting: taakStore.taakItem.toelichting || '',
-					klant: klantStore.klantItem?.id || '',
-				}
-				this.fetchKlanten()
-			} else {
-				this.taakItem.klant = klantStore.klantItem?.id || ''
-				this.fetchKlanten()
-			}
-			this.hasUpdated = true
-		}
-	},
-	methods: {
-		closeModalFromButton() {
-			setTimeout(() => {
-				this.closeModal()
-			}, 300)
-		},
-		closeModal() {
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.taakItem = {
-				title: '',
-				type: '',
-				status: '',
-				deadline: new Date(),
-				onderwerp: '',
-				toelichting: '',
-				klant: '',
-			}
-			if (this.dashboardWidget === true) {
-				this.$emit('save-success')
-			} else {
-				navigationStore.setModal(null)
-				this.$emit('close-modal')
-			}
-		},
-
-		fetchTaakData(id) {
-			fetch(`/index.php/apps/zaakafhandelapp/api/taken/${id}`)
-				.then(response => response.json())
-				.then(data => {
-					this.taakItem = {
-						...data,
-						deadline: new Date(data.deadline),
-					}
-
-					this.fetchMedewerkers()
-				})
-		},
-		fetchKlanten() {
-			this.klantenLoading = true
-
-			klantStore.refreshKlantenList()
-				.then(({ response, data }) => {
-
-					let selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
-
-					if (this.selectedKlantFromWidget) {
-						selectedKlant = data.filter((klant) => klant?.id.toString() === this.selectedKlantFromWidget.id?.toString())[0] || null
-					}
-
-					this.klanten = {
-						options: data.map((klant) => ({
-							id: klant.id,
-							label: klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : klant.bedrijfsnaam,
-						})),
-						value: selectedKlant
-							? {
-								id: selectedKlant?.id,
-								label: selectedKlant?.type === 'persoon' ? `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}` : selectedKlant.bedrijfsnaam,
-							}
-							: null,
-					}
-
-					this.klantenLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.klantenLoading = false
-				})
-		},
-		fetchMedewerkers() {
-			medewerkerStore.refreshMedewerkersList()
-				.then(({ response, data }) => {
-
-					let selectedMedewerker = data.filter((medewerker) => medewerker?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
-
-					if (this.taakId) {
-						selectedMedewerker = data.filter((medewerker) => medewerker?.id.toString() === this.taakItem.klant?.toString())[0] || null
-					}
-
-					this.medewerkers = {
-						options: data.map((medewerker) => ({
-							id: medewerker.id,
-							displayName: `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}`,
-							subName: medewerker.email,
-							icon: medewerker.icon ?? '',
-
-						})),
-						value: selectedMedewerker
-							? {
-								id: selectedMedewerker?.id,
-								displayName: `${selectedMedewerker.voornaam} ${selectedMedewerker.tussenvoegsel} ${selectedMedewerker.achternaam}`,
-								subName: selectedMedewerker.email,
-								icon: selectedMedewerker.icon ?? '',
-
-							}
-							: null,
-					}
-
-					this.medewerkersLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.medewerkersLoading = false
-				})
-		},
-		async editTaak() {
-			this.loading = true
-
-			try {
-				await taakStore.saveTaak({
-					...this.taakItem,
-					klant: this.medewerkers.value?.id ?? '',
-					status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
-					deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
-				}, this.dashboardWidget)
-				this.success = true
-				this.loading = false
-				setTimeout(this.closeModal, 2000)
-				if (this.dashboardWidget === true) {
-					this.$emit('save-success')
-				}
-			} 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)
-		},
-	},
-}
-</script>
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 118c8ad..7385013 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -108,7 +108,7 @@ export const useTaakStore = defineStore('taken', {
 			return { response }
 		},
 		// Create or save a taak from store
-		async saveTaak(taakItem, widget = false) {
+		async saveTaak(taakItem, options = {}) {
 			if (!taakItem) {
 				throw new Error('No taak item to save')
 			}
@@ -139,7 +139,7 @@ export const useTaakStore = defineStore('taken', {
 			const entity = new Taak(data)
 
 			this.setTaakItem(data)
-			if (!widget) {
+			if (!options.doNotRefresh) {
 				this.refreshTakenList()
 			}
 
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index a47889e..12e500e 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -35,10 +35,10 @@ import { taakStore, navigationStore } from '../../store/store.js'
 			</NcButton>
 		</div>
 
-		<TakenForm v-if="isModalOpen"
+		<EditTaakForm v-if="isModalOpen"
 			:dashboard-widget="true"
 			:taak-id="taakId"
-			@save-success="closeModal"
+			@save-success="fetchTaakItems"
 			@close-modal="closeModal" />
 	</div>
 </template>
@@ -54,7 +54,7 @@ import { Taak } from '../../entities/index.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
-import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 
 export default {
 	name: 'TakenWidget',
@@ -64,6 +64,7 @@ export default {
 		NcEmptyContent,
 		NcButton,
 		Plus,
+		EditTaakForm: EditTaak,
 	},
 
 	data() {
@@ -130,13 +131,11 @@ export default {
 		closeModal() {
 			this.isModalOpen = false
 			navigationStore.setModal(null)
-			this.fetchTaakItems()
 		},
 
 		onShow(event) {
 			this.taakId = event.id
 			this.isModalOpen = true
-			navigationStore.setModal('widgetTaakForm')
 		},
 
 		getSluitenIcon() {

From 2863b2f7ac60576eb7046264ef82247c49ce5a8e Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 3 Dec 2024 17:33:16 +0100
Subject: [PATCH 2/4] removed a incorrect comment

---
 src/modals/taken/EditTaak.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index c4c62b2..f11b604 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -173,7 +173,6 @@ export default {
 			loading: false,
 			error: false,
 			// data
-			/** medewerkers is a list of clients (also known as klanten throughout the code / app) */
 			medewerkers: [],
 			medewerkersLoading: false,
 			// item

From c969c114661b0d3559cc6f8836bdfb6a07145726 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 5 Dec 2024 12:02:42 +0100
Subject: [PATCH 3/4] added some change requests

---
 .../contactMomenten/ContactMomentenForm.vue   |  18 +-
 src/modals/taken/EditTaak.vue                 | 239 ++++++++++++++----
 2 files changed, 198 insertions(+), 59 deletions(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 2376c7d..e8fa78d 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -83,7 +83,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			</div>
 
 			<div v-if="!success" class="form-group">
-				<NcTextArea v-model="contactMoment.notitie"
+				<NcTextArea :value.sync="contactMoment.notitie"
 					label="Notitie"
 					:disabled="loading"
 					:loading="fetchLoading"
@@ -193,11 +193,17 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				<template #icon>
 					<DotsHorizontal :size="20" />
 				</template>
-				<NcActionButton @click="openTaakForm">
+				<NcActionButton @click="openTaakForm('medewerker')">
 					<template #icon>
 						<CalendarMonthOutline :size="20" />
 					</template>
-					Taak aanmaken
+					Medewerker taak aanmaken
+				</NcActionButton>
+				<NcActionButton @click="openTaakForm('klant')">
+					<template #icon>
+						<CalendarMonthOutline :size="20" />
+					</template>
+					Klant taak aanmaken
 				</NcActionButton>
 				<NcActionButton :disabled="true" @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
 					<template #icon>
@@ -222,6 +228,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 		<EditTaakForm v-if="taakFormOpen"
 			:dashboard-widget="true"
+			:client-type="taakClientType"
+			:klant-id="klant?.id"
 			@close-modal="closeTaakForm"
 			@save-success="closeTaakForm" />
 	</NcDialog>
@@ -309,6 +317,7 @@ export default {
 			selectedProduct: null,
 			startingType: 'all',
 			taakFormOpen: false,
+			taakClientType: 'both',
 		}
 	},
 	mounted() {
@@ -404,8 +413,9 @@ export default {
 			this.searchKlantModalOpen = false
 		},
 
-		openTaakForm() {
+		openTaakForm(clientType = 'both') {
 			this.taakFormOpen = true
+			this.taakClientType = clientType
 			taakStore.setTaakItem(null)
 		},
 
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index f11b604..d138611 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -48,13 +48,29 @@ import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../s
 				label="Toelichting" />
 
 			<div>
-				<NcSelect
-					v-bind="medewerkers"
-					v-model="medewerkers.value"
-					:user-select="true"
-					input-label="Medewerker"
-					:loading="medewerkersLoading"
-					:disabled="loading" />
+				<NcCheckboxRadioSwitch v-if="clientType === 'both'"
+					:checked.sync="useMedewerkerInsteadOfKlant"
+					type="switch">
+					Klant / Medewerker
+				</NcCheckboxRadioSwitch>
+
+				<div>
+					<NcSelect v-if="clientType !== 'medewerker' || (clientType === 'both' && !useMedewerkerInsteadOfKlant)"
+						v-bind="klanten"
+						v-model="klanten.value"
+						:user-select="true"
+						input-label="Klant*"
+						:loading="klantenLoading"
+						:disabled="loading" />
+
+					<NcSelect v-if="clientType !== 'klant' || (clientType === 'both' && useMedewerkerInsteadOfKlant)"
+						v-bind="medewerkers"
+						v-model="medewerkers.value"
+						:user-select="true"
+						input-label="Medewerker*"
+						:loading="medewerkersLoading"
+						:disabled="loading" />
+				</div>
 			</div>
 		</div>
 
@@ -72,7 +88,14 @@ import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../s
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading || medewerkersLoading || !taakItem.title || !taakItem.deadline"
+				:disabled="loading
+					|| medewerkersLoading
+					|| !taakItem.title
+					|| !taakItem.deadline
+					|| (clientType === 'both' && !useMedewerkerInsteadOfKlant && !klanten.value?.id)
+					|| (clientType === 'both' && useMedewerkerInsteadOfKlant && !medewerkers.value?.id)
+					|| (clientType === 'klant' && !klanten.value?.id)
+					|| (clientType === 'medewerker' && !medewerkers.value?.id)"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -94,6 +117,7 @@ import {
 	NcTextArea,
 	NcDateTimePicker,
 	NcSelect,
+	NcCheckboxRadioSwitch,
 	NcLoadingIcon,
 	NcNoteCard,
 } from '@nextcloud/vue'
@@ -102,6 +126,20 @@ 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'
 
+/**
+ * EditTaak component
+ *
+ * This component allows users to create and edit a taak (task).
+ * It fetches data from the API and pre-selects the associated medewerker (employee) if one exists.
+ * The component provides options to change the client type, pre-select a klant (client), and disable the klant dropdown.
+ *
+ * Props:
+ * - `dashboardWidget` (Boolean, optional): Whether the modal is being used within a dashboard widget. If true, the modal will emit a 'save-success' event upon successful taak saving.
+ * - `taakId` (String, optional): ID of the taak (task) to load and edit. When provided, this prop takes precedence over any ID present in `taakStore.taakItem`. The component will fetch the taak data associated with this ID from the API, load the fetched data into the form, and pre-select the associated medewerker (employee) if one exists.
+ * - `clientType` (String, required): Determines which client type to use for the taak. Depending on the value, it'll show either the klant dropdown, medewerker dropdown, or both as default.
+ * - `klantId` (String, optional): ID of the klant (client) to pre-select in the klanten dropdown. When provided, this prop will attempt to find and select the klant with the given ID in the klanten dropdown. If the klant ID does not exist in the dropdown options, no klant will be pre-selected.
+ * - `medewerkerId` (String, optional): ID of the medewerker (employee) to pre-select in the medewerkers dropdown. When provided, this prop will attempt to find and select the medewerker with the given ID in the medewerkers dropdown. If the medewerker ID does not exist in the dropdown options, no medewerker will be pre-selected.
+ */
 export default {
 	name: 'EditTaak',
 	components: {
@@ -111,6 +149,7 @@ export default {
 		NcDateTimePicker,
 		NcButton,
 		NcSelect,
+		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcNoteCard,
 		// Icons
@@ -129,25 +168,6 @@ export default {
 			type: Boolean,
 			required: false,
 		},
-		/**
-		 * ID of a medewerker (employee) to pre-select in the dropdown.
-		 *
-		 * This prop has the highest priority when determining which medewerker to select:
-		 * 1. selectedMedewerker prop (if provided)
-		 * 2. medewerker ID from taakId prop fetch result (if taakId provided)
-		 * 3. taakStore.taakItem.klant
-		 *
-		 * Note: While functional, using this prop is not recommended. Instead, prefer using
-		 * the taakId prop to load a complete taak, or let the component handle medewerker
-		 * selection based on the taakStore state.
-		 *
-		 * If the provided klant ID does not exist in the database, or is in any other way invalid,
-		 * the medewerker dropdown will not have a default/selected option.
-		 */
-		selectedMedewerker: {
-			type: String,
-			default: null,
-		},
 		/**
 		 * ID of the taak (task) to load and edit.
 		 *
@@ -165,6 +185,56 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Determines which client type to use for the taak.
+		 *
+		 * Depending on the value, it'll show either the klant dropdown, medewerker dropdown, or both as default.
+		 *
+		 * Possible values:
+		 * - 'klant': Only the klant (client) dropdown will be shown.
+		 * - 'medewerker': Only the medewerker (employee) dropdown will be shown.
+		 * - 'both': Both the klant and medewerker dropdowns will be shown.
+		 *
+		 * @default 'both'
+		 */
+		clientType: {
+			type: String,
+			/** @type { 'both' } */
+			default: 'both',
+			/**
+			 * @param { 'klant' | 'medewerker' | 'both' } value - The value to validate.
+			 * @return {boolean} Returns true if the value is valid, false otherwise.
+			 */
+			validator: (value) => ['klant', 'medewerker', 'both'].includes(value),
+		},
+		/**
+		 * ID of the klant (client) to pre-select in the klanten dropdown.
+		 *
+		 * When provided, this prop will:
+		 * 1. Attempt to find and select the klant with the given ID in the klanten dropdown.
+		 * 2. If the klant ID does not exist in the dropdown options, no klant will be pre-selected.
+		 *
+		 * @example
+		 * <EditTaak klantId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * ID of the medewerker (employee) to pre-select in the medewerkers dropdown.
+		 *
+		 * When provided, this prop will:
+		 * 1. Attempt to find and select the medewerker with the given ID in the medewerkers dropdown.
+		 * 2. If the medewerker ID does not exist in the dropdown options, no medewerker will be pre-selected.
+		 *
+		 * @example
+		 * <EditTaak medewerkerId="2469afb2-950b-48a3-a7ea-9667557c373d" />
+		 */
+		medewerkerId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -172,7 +242,10 @@ export default {
 			success: false,
 			loading: false,
 			error: false,
+			useMedewerkerInsteadOfKlant: false,
 			// data
+			klanten: [],
+			klantenLoading: false,
 			medewerkers: [],
 			medewerkersLoading: false,
 			// item
@@ -219,25 +292,7 @@ export default {
 		}
 	},
 	mounted() {
-		if (this.taakId) {
-			this.fetchTaakData(this.taakId)
-		} else if (taakStore.taakItem?.id) {
-			// fetchMedewerkers also gets called by fetchTaakData, if taakId is provided. So we don't need to call it first
-			this.fetchMedewerkers()
-
-			this.taakItem = {
-				...taakStore.taakItem,
-				title: taakStore.taakItem.title || '',
-				type: taakStore.taakItem.type || '',
-				status: taakStore.taakItem.status || 'open',
-				deadline: new Date(taakStore.taakItem.deadline),
-				onderwerp: taakStore.taakItem.onderwerp || '',
-				toelichting: taakStore.taakItem.toelichting || '',
-				klant: klantStore.klantItem?.id || '',
-			}
-		} else {
-			this.fetchMedewerkers()
-		}
+		this.fetchData()
 	},
 	methods: {
 		closeModalFromButton() {
@@ -252,15 +307,78 @@ export default {
 				this.$emit('close-modal')
 			}
 		},
-		async fetchTaakData(id) {
-			const { entity: taakEntity } = await taakStore.getTaak(id)
+		async fetchData() {
+			let taakEntity
+
+			// if taakId is provided, fetch the taak data from the API
+			if (this.taakId) {
+				const { entity } = await taakStore.getTaak(this.taakId)
+				taakEntity = entity
+			} else if (taakStore.taakItem?.id) {
+				taakEntity = taakStore.taakItem
+			}
+
+			if (taakEntity) {
+				this.taakItem = {
+					...this.taakItem,
+					...taakEntity,
+					title: taakEntity.title || '',
+					type: taakEntity.type || '',
+					status: taakEntity.status || 'open',
+					deadline: new Date(taakEntity.deadline),
+					onderwerp: taakEntity.onderwerp || '',
+					toelichting: taakEntity.toelichting || '',
+					klant: taakEntity?.klant || '',
+					medewerker: taakEntity?.medewerker || '',
+				}
 
-			this.taakItem = {
-				...taakEntity,
-				deadline: new Date(taakEntity.deadline),
+				if (this.clientType === 'both') {
+					this.useMedewerkerInsteadOfKlant = !!taakEntity?.medewerker
+				}
 			}
 
-			this.fetchMedewerkers(taakEntity?.klant)
+			if (this.clientType !== 'medewerker') this.fetchKlanten(taakEntity?.klant) // will either pass a id or undefined
+			if (this.clientType !== 'klant') this.fetchMedewerkers(taakEntity?.medewerker)
+		},
+		/**
+		 * @param {string} klantId - Optional ID of the klant to select. Will take precedence over the ID present in `taakStore.taakItem`.
+		 *                           If none are provided the default selected klant will be `null`.
+		 */
+		fetchKlanten(klantId = null) {
+			this.klantenLoading = true
+
+			klantStore.refreshKlantenList()
+				.then(({ data }) => {
+
+					const taakKlantId = taakStore.taakItem?.klant
+					const searchId = (this.klantId ?? klantId ?? taakKlantId)?.toString()
+
+					const selectedKlant = data.find((klant) => klant?.id.toString() === searchId) || null
+
+					this.klanten = {
+						options: data.map((klant) => ({
+							id: klant.id,
+							displayName: `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}`,
+							subName: klant.email,
+							icon: klant.icon ?? '',
+
+						})),
+						value: selectedKlant
+							? {
+								id: selectedKlant?.id,
+								displayName: `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}`,
+								subName: selectedKlant.email,
+								icon: selectedKlant.icon ?? '',
+							}
+							: null,
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.klantenLoading = false
+				})
 		},
 		/**
 		 * @param {string} medewerkerId - Optional ID of the medewerker to select. Will take precedence over the ID present in `taakStore.taakItem`.
@@ -270,8 +388,8 @@ export default {
 			medewerkerStore.refreshMedewerkersList()
 				.then(({ data }) => {
 
-					const taakKlantId = taakStore.taakItem?.klant
-					const searchId = (this.selectedMedewerker ?? medewerkerId ?? taakKlantId)?.toString()
+					const taakMedewerkerId = taakStore.taakItem?.medewerker
+					const searchId = (this.medewerkerId ?? medewerkerId ?? taakMedewerkerId)?.toString()
 
 					const selectedMedewerker = data.find((medewerker) => medewerker?.id.toString() === searchId) || null
 
@@ -303,9 +421,20 @@ export default {
 		async editTaak() {
 			this.loading = true
 
+			let klantId
+			if (this.clientType !== 'medewerker' && (this.clientType !== 'both' || !this.useMedewerkerInsteadOfKlant)) {
+				klantId = this.klanten.value?.id
+			}
+
+			let medewerkerId
+			if (this.clientType !== 'klant' && (this.clientType !== 'both' || this.useMedewerkerInsteadOfKlant)) {
+				medewerkerId = this.medewerkers.value?.id
+			}
+
 			taakStore.saveTaak({
 				...this.taakItem,
-				klant: this.medewerkers.value?.id ?? '',
+				klant: klantId || null,
+				medewerker: medewerkerId || null,
 				status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
 				deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
 			}, { doNotRefresh: true })

From 21b728de5e6c0de7b96849b71fa61fdfd8edcd57 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Fri, 6 Dec 2024 12:39:36 +0100
Subject: [PATCH 4/4] Cleanup

---
 src/entities/taak/taak.mock.ts              |  1 +
 src/entities/taak/taak.ts                   |  4 +-
 src/entities/taak/taak.types.ts             |  3 +-
 src/modals/medewerkers/EditMedewerker.vue   | 13 ++++-
 src/modals/taken/EditTaak.vue               |  4 +-
 src/views/medewerkers/MedewerkerDetails.vue | 10 ++--
 src/views/medewerkers/MedewerkerList.vue    |  9 +---
 src/views/taken/TaakDetails.vue             | 56 +++++++++++++++++++--
 8 files changed, 79 insertions(+), 21 deletions(-)

diff --git a/src/entities/taak/taak.mock.ts b/src/entities/taak/taak.mock.ts
index 979f181..c938903 100644
--- a/src/entities/taak/taak.mock.ts
+++ b/src/entities/taak/taak.mock.ts
@@ -13,6 +13,7 @@ export const mockTaakData = (): TTaak[] => [
 		toelichting: 'Deze taak omvat het uitvoeren van een gedetailleerde interne audit van de bedrijfsprocessen om te controleren of alle afdelingen voldoen aan de vastgestelde kwaliteitsnormen. De bevindingen worden gedocumenteerd en er worden aanbevelingen gedaan voor verbeteringen.',
 		actie: 'Voorbereiden van auditchecklist, uitvoeren van audits, rapporteren van bevindingen, aanbevelen van verbeteringen.',
 		klant: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
+		medewerker: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
 	},
 ]
 
diff --git a/src/entities/taak/taak.ts b/src/entities/taak/taak.ts
index 8f75c80..9e34c14 100644
--- a/src/entities/taak/taak.ts
+++ b/src/entities/taak/taak.ts
@@ -14,7 +14,7 @@ export class Taak implements TTaak {
 	public toelichting: string
 	public actie: string
 	public klant: string
-
+	public medewerker: string
 	constructor(source: TTaak) {
 		this.id = source.id || ''
 		this.title = source.title || ''
@@ -26,6 +26,7 @@ export class Taak implements TTaak {
 		this.toelichting = source.toelichting || ''
 		this.actie = source.actie || ''
 		this.klant = source.klant || ''
+		this.medewerker = source.medewerker || ''
 	}
 
 	public validate(): SafeParseReturnType<TTaak, unknown> {
@@ -40,6 +41,7 @@ export class Taak implements TTaak {
 			toelichting: z.string(),
 			actie: z.string(),
 			klant: z.string(),
+			medewerker: z.string(),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/taak/taak.types.ts b/src/entities/taak/taak.types.ts
index 141bd6f..f1dc534 100644
--- a/src/entities/taak/taak.types.ts
+++ b/src/entities/taak/taak.types.ts
@@ -10,5 +10,6 @@ export type TTaak = {
     onderwerp: string;
     toelichting: string;
     actie: string;
-    klant: string;
+	klant: string
+	medewerker: string
 }
diff --git a/src/modals/medewerkers/EditMedewerker.vue b/src/modals/medewerkers/EditMedewerker.vue
index 130d194..a9db1da 100644
--- a/src/modals/medewerkers/EditMedewerker.vue
+++ b/src/modals/medewerkers/EditMedewerker.vue
@@ -33,7 +33,7 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 			<NcTextField :disabled="loading"
 				label="Email adres"
 				maxlength="255"
-				:value.sync="medewerkerItem.emailadres" />
+				:value.sync="medewerkerItem.email" />
 		</div>
 
 		<template #actions>
@@ -119,6 +119,17 @@ export default {
 			return this.medewerkerItems
 		},
 	},
+	mounted() {
+		if (medewerkerStore.medewerkerItem?.id) {
+			this.medewerkerItem = {
+				...medewerkerStore.medewerkerItem,
+				voornaam: medewerkerStore.medewerkerItem.voornaam || '',
+				tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
+				achternaam: medewerkerStore.medewerkerItem.achternaam || '',
+				email: medewerkerStore.medewerkerItem.email || '',
+			}
+		}
+	},
 	updated() {
 		if (navigationStore.modal === 'editMedewerker' && !this.hasUpdated) {
 
diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index d138611..bc0df2d 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -55,7 +55,7 @@ import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../s
 				</NcCheckboxRadioSwitch>
 
 				<div>
-					<NcSelect v-if="clientType !== 'medewerker' || (clientType === 'both' && !useMedewerkerInsteadOfKlant)"
+					<NcSelect v-if="(clientType !== 'medewerker' && (clientType !== 'both' || clientType === 'both' && !useMedewerkerInsteadOfKlant))"
 						v-bind="klanten"
 						v-model="klanten.value"
 						:user-select="true"
@@ -63,7 +63,7 @@ import { taakStore, navigationStore, klantStore, medewerkerStore } from '../../s
 						:loading="klantenLoading"
 						:disabled="loading" />
 
-					<NcSelect v-if="clientType !== 'klant' || (clientType === 'both' && useMedewerkerInsteadOfKlant)"
+					<NcSelect v-if="(clientType !== 'klant' && (clientType !== 'both' || clientType === 'both' && useMedewerkerInsteadOfKlant))"
 						v-bind="medewerkers"
 						v-model="medewerkers.value"
 						:user-select="true"
diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
index 76bf8f5..bbeb7ce 100644
--- a/src/views/medewerkers/MedewerkerDetails.vue
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -16,7 +16,7 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
-						<NcActionButton @click="navigationStore.setModal('editKlant')">
+						<NcActionButton @click="navigationStore.setModal('editMedewerker')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -40,7 +40,7 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 							</template>
 							Zaak starten
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setDialog('deleteKlant')">
+						<NcActionButton @click="navigationStore.setDialog('deleteMedewerker')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
 							</template>
@@ -51,8 +51,10 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 				<span> {{ medewerkerStore.medewerkerItem.subject }} </span>
 
 				<div class="gridContent">
-					<b>Email adres:</b>
-					<p>{{ medewerkerStore.medewerkerItem.emailadres }}</p>
+					<div>
+						<b>Email adres:</b>
+						<p>{{ medewerkerStore.medewerkerItem.email }}</p>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/views/medewerkers/MedewerkerList.vue b/src/views/medewerkers/MedewerkerList.vue
index f6c5bde..b43f6f4 100644
--- a/src/views/medewerkers/MedewerkerList.vue
+++ b/src/views/medewerkers/MedewerkerList.vue
@@ -44,7 +44,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ getSubname(medewerker) }}
+						{{ medewerker.email }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="medewerkerStore.setMedewerkerItem(medewerker); navigationStore.setModal('editMedewerker')">
@@ -119,12 +119,7 @@ export default {
 			return name
 		},
 		getName(medewerker) {
-			return medewerker?.voornaam ?? 'onbekend'
-
-		},
-		getSubname(medewerker) {
-			return medewerker?.tussenvoegsel ? `${medewerker.tussenvoegsel} ${medewerker.achternaam}` : medewerker?.achternaam ? `${medewerker.achternaam}` : 'onbekend'
-
+			return `${medewerker?.voornaam} ${medewerker?.tussenvoegsel} ${medewerker?.achternaam}`
 		},
 		deleteKlant() {
 			fetch(
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index dd2310d..da686ab 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore, klantStore } from '../../store/store.js'
+import { navigationStore, taakStore, klantStore, medewerkerStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -35,7 +35,24 @@ import { navigationStore, taakStore, klantStore } from '../../store/store.js'
 							<b>Sammenvatting:</b>
 							<span>{{ taakStore.taakItem.onderwerp }}</span>
 						</div>
-						<div>
+						<div v-if="taakStore.taakItem.medewerker">
+							<b>Medewerker:</b>
+							<span v-if="medewerkerLoading">Loading...</span>
+							<div v-if="!medewerkerLoading" class="buttonLinkContainer">
+								<span>{{ getMedewerkerName(medewerker) }}</span>
+								<NcActions>
+									<NcActionLink :aria-label="`ga naar ${getMedewerkerName(medewerker)}`"
+										:name="getMedewerkerName(medewerker)"
+										@click="goToMedewerker()">
+										<template #icon>
+											<OpenInApp :size="20" />
+										</template>
+										{{ getMedewerkerName(medewerker) }}
+									</NcActionLink>
+								</NcActions>
+							</div>
+						</div>
+						<div v-if="taakStore.taakItem.klant">
 							<b>Klant:</b>
 							<span v-if="klantLoading">Loading...</span>
 							<div v-if="!klantLoading" class="buttonLinkContainer">
@@ -125,22 +142,26 @@ export default {
 		return {
 			currentActiveTaak: null,
 			auditTrails: [],
-			klant: [],
+			klant: null,
+			medewerker: null,
 			klantLoading: false,
+			medewerkerLoading: false,
 		}
 	},
 	mounted() {
 		if (taakStore.taakItem?.id) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
-			this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
 		}
 	},
 	updated() {
 		if (taakStore.taakItem?.id && JSON.stringify(this.currentActiveTaak) !== JSON.stringify(taakStore.taakItem)) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
-			this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
+			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
 		}
 	},
 	methods: {
@@ -156,10 +177,17 @@ export default {
 		getKlantName(klant) {
 			return klant?.type === 'persoon' ? `${klant?.voornaam} ${klant?.tussenvoegsel} ${klant?.achternaam}` : klant?.bedrijfsnaam
 		},
+		getMedewerkerName(medewerker) {
+			return `${medewerker?.voornaam} ${medewerker?.tussenvoegsel} ${medewerker?.achternaam}`
+		},
 		goToKlant() {
 			klantStore.setKlantItem(this.klant)
 			navigationStore.setSelected('klanten')
 		},
+		goToMedewerker() {
+			medewerkerStore.setMedewerkerItem(this.medewerker)
+			navigationStore.setSelected('medewerkers')
+		},
 		fetchKlant(klant) {
 			this.klantLoading = true
 
@@ -178,6 +206,24 @@ export default {
 				})
 
 		},
+		fetchMedewerker(medewerker) {
+			this.medewerkerLoading = true
+
+			fetch(`/index.php/apps/zaakafhandelapp/api/medewerkers/${medewerker}`, {
+				method: 'GET',
+			})
+				.then((response) => {
+					response.json().then((data) => {
+						this.medewerker = data
+					})
+					this.medewerkerLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.medewerkerLoading = false
+				})
+
+		},
 	},
 }
 </script>