From e21aabb7da9e1993c51723615919cc63cbd6590e Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Fri, 6 Dec 2024 16:17:20 +0100
Subject: [PATCH 1/7] finished adding rol to zaak

---
 src/entities/rol/rol.types.ts     |   2 +-
 src/modals/Modals.vue             |   3 +
 src/modals/zaken/AddRolToZaak.vue | 149 ++++++++++++++++++++++++++++++
 src/views/rollen/ZaakRollen.vue   |  61 ++++++------
 src/views/zaken/ZaakDetails.vue   |   2 +-
 5 files changed, 189 insertions(+), 28 deletions(-)
 create mode 100644 src/modals/zaken/AddRolToZaak.vue

diff --git a/src/entities/rol/rol.types.ts b/src/entities/rol/rol.types.ts
index e0fbff9..c1b7920 100644
--- a/src/entities/rol/rol.types.ts
+++ b/src/entities/rol/rol.types.ts
@@ -4,7 +4,7 @@ export type TRol = {
     omschrijving: string;
     omschrijvingGeneriek: string;
     url: string;
-    zaak: string;
+    zaak: string; // zaak id
     betrokkene: string;
     betrokkeneType: string;
     afwijkendeNaamBetrokkene: string;
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index f83fda0..b7c4943 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -11,6 +11,7 @@ import { navigationStore } from '../store/store.js'
 		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
 		<AddBerichtToZaak v-if="navigationStore.modal === 'addBerichtToZaak'" />
 		<AddTaakToZaak v-if="navigationStore.modal === 'addTaakToZaak'" />
+		<AddRolToZaak v-if="navigationStore.modal === 'addRolToZaak'" />
 		<!-- ==== -->
 		<EditZaakType />
 		<EditKlant />
@@ -43,6 +44,7 @@ import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
 import EditMedewerker from './medewerkers/EditMedewerker.vue'
 import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
 import AddTaakToZaak from './zaken/AddTaakToZaak.vue'
+import AddRolToZaak from './zaken/AddRolToZaak.vue'
 
 export default {
 	name: 'Modals',
@@ -63,6 +65,7 @@ export default {
 		EditMedewerker,
 		AddBerichtToZaak,
 		AddTaakToZaak,
+		AddRolToZaak,
 	},
 }
 </script>
diff --git a/src/modals/zaken/AddRolToZaak.vue b/src/modals/zaken/AddRolToZaak.vue
new file mode 100644
index 0000000..b62c9e7
--- /dev/null
+++ b/src/modals/zaken/AddRolToZaak.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { zaakStore, navigationStore, rolStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addRolToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Rol toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Rol succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="rollen"
+					v-model="rollen.value"
+					input-label="Rol"
+					:loading="rollenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!rollen?.value || loading"
+				type="primary"
+				@click="addRolToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Rol } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddRolToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			rollenLoading: false,
+			rollen: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.fetchRollenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchRollenData() {
+			this.rollenLoading = true
+
+			rolStore.refreshRollenList()
+				.then(({ data }) => {
+					this.rollen = {
+						options: data
+							// zaak is stored on the rol itself as a singular id, indicating that only rollen without a zaak can be used
+							.filter((rol) => !rol.zaak)
+							.map((rol) => ({
+								id: rol.id,
+								label: rol.title,
+							})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.rollenLoading = false
+				})
+		},
+		addRolToZaak() {
+			this.loading = true
+			this.error = false
+
+			const rolItem = rolStore.rollenList.find((rol) => rol.id === this.rollen.value.id)
+			if (!rolItem) {
+				this.error = 'something went majorly wrong'
+				this.loading = false
+				return
+			}
+
+			const rolItemCopy = _.cloneDeep(rolItem)
+
+			rolItemCopy.zaak = zaakStore.zaakItem.id
+
+			const newRolItem = new Rol(rolItemCopy)
+
+			rolStore.saveRol(newRolItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/views/rollen/ZaakRollen.vue b/src/views/rollen/ZaakRollen.vue
index fc400fe..1807174 100644
--- a/src/views/rollen/ZaakRollen.vue
+++ b/src/views/rollen/ZaakRollen.vue
@@ -4,8 +4,8 @@ import { navigationStore, rolStore } from '../../store/store.js'
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(rollen, i) in rollenList"
+		<div v-if="filteredRollenList?.length">
+			<NcListItem v-for="(rollen, i) in filteredRollenList"
 				:key="`${rollen}${i}`"
 				:name="rollen?.omschrijving"
 				:active="rolStore.rolItem?.id === rollen.id"
@@ -22,21 +22,33 @@ import { navigationStore, rolStore } from '../../store/store.js'
 					{{ rollen?.omschrijving }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="editRol(rollen)">
-						Bewerken
+					<NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setSelected('rollen')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
 					</NcActionButton>
+					<!-- <NcActionButton @click="rolStore.setRolItem(rollen); navigationStore.setModal('rollen')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton> -->
 					<NcActionButton>
-						Verwijderen
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!rollenList?.length && !loading">
+		<div v-if="!filteredRollenList?.length && !loading">
 			Geen rollen gevonden.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!filteredRollenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -66,43 +78,40 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			rollenList: [],
 		}
 	},
+	computed: {
+		filteredRollenList() {
+			return rolStore.rollenList.filter((rol) => rol.zaak === this.zaakId)
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
 		editRol(rol) {
 			rolStore.setRolItem(rol)
 			navigationStore.setModal('editRol')
 		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				`/index.php/apps/zaakafhandelapp/api/zrc/rollen?zaak.id=${zaakId}`,
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.rollenList = data.results
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			rolStore.refreshRollenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
 		toggleRol(rol) {
-			// TODO: toggle rol
+			if (rolStore.rolItem?.id === rol.id) {
+				rolStore.setRolItem(null)
+			} else {
+				rolStore.setRolItem(rol)
+			}
 		},
 		clearText() {
 			this.search = ''
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 50fc0c0..48703ca 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -28,7 +28,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 							</template>
 							Document toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addRol')">
+						<NcActionButton @click="navigationStore.setModal('addRolToZaak')">
 							<template #icon>
 								<AccountPlus :size="20" />
 							</template>

From 8b1b1354162c2ea01d5eea4eaa78fe4092abc184 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 10 Dec 2024 16:48:36 +0100
Subject: [PATCH 2/7] added more fields to medewerker

---
 src/entities/medewerkers/medewerkers.mock.ts  |  1 +
 src/entities/medewerkers/medewerkers.ts       |  4 +-
 src/entities/medewerkers/medewerkers.types.ts |  1 +
 src/modals/medewerkers/EditMedewerker.vue     | 43 +++++--------------
 4 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/entities/medewerkers/medewerkers.mock.ts b/src/entities/medewerkers/medewerkers.mock.ts
index 5fd76c5..6c45360 100644
--- a/src/entities/medewerkers/medewerkers.mock.ts
+++ b/src/entities/medewerkers/medewerkers.mock.ts
@@ -8,6 +8,7 @@ export const mockMedewerkerData = (): TMedewerker[] => [
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
 		email: 'john.doe@example.com',
+		telefoonnummer: '0612345678',
 	},
 ]
 
diff --git a/src/entities/medewerkers/medewerkers.ts b/src/entities/medewerkers/medewerkers.ts
index 0f5eb9f..302c6aa 100644
--- a/src/entities/medewerkers/medewerkers.ts
+++ b/src/entities/medewerkers/medewerkers.ts
@@ -8,6 +8,7 @@ export class Medewerker implements TMedewerker {
 	public tussenvoegsel: string
 	public achternaam: string
 	public email: string
+	public telefoonnummer: string
 
 	constructor(source: TMedewerker) {
 		this.id = source.id || ''
@@ -15,7 +16,7 @@ export class Medewerker implements TMedewerker {
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''
 		this.email = source.email || ''
-
+		this.telefoonnummer = source.telefoonnummer || ''
 	}
 
 	public validate(): SafeParseReturnType<TMedewerker, unknown> {
@@ -25,6 +26,7 @@ export class Medewerker implements TMedewerker {
 			tussenvoegsel: z.string(),
 			achternaam: z.string(),
 			email: z.string().email(),
+			telefoonnummer: z.string().min(1),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/medewerkers/medewerkers.types.ts b/src/entities/medewerkers/medewerkers.types.ts
index 7a50331..3face2b 100644
--- a/src/entities/medewerkers/medewerkers.types.ts
+++ b/src/entities/medewerkers/medewerkers.types.ts
@@ -4,4 +4,5 @@ export type TMedewerker = {
     tussenvoegsel: string;
     achternaam: string;
     email: string;
+    telefoonnummer: string;
 }
diff --git a/src/modals/medewerkers/EditMedewerker.vue b/src/modals/medewerkers/EditMedewerker.vue
index a9db1da..563f726 100644
--- a/src/modals/medewerkers/EditMedewerker.vue
+++ b/src/modals/medewerkers/EditMedewerker.vue
@@ -3,8 +3,7 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editMedewerker'"
-		name="Medewerker"
+	<NcDialog name="Medewerker"
 		size="normal"
 		:can-close="false">
 		<NcNoteCard v-if="success" type="success">
@@ -34,6 +33,13 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 				label="Email adres"
 				maxlength="255"
 				:value.sync="medewerkerItem.email" />
+
+			<NcTextField :disabled="loading"
+				label="Telefoonnummer"
+				minlength="10"
+				maxlength="11"
+				placeholder="06 12345678"
+				:value.sync="medewerkerItem.telefoonnummer" />
 		</div>
 
 		<template #actions>
@@ -99,7 +105,6 @@ export default {
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
 			countryOptions: {
 				options: countries.map((country) => ({
 					id: country.code,
@@ -111,14 +116,10 @@ export default {
 				tussenvoegsel: '',
 				achternaam: '',
 				email: '',
+				telefoonnummer: '',
 			},
 		}
 	},
-	computed: {
-		items() {
-			return this.medewerkerItems
-		},
-	},
 	mounted() {
 		if (medewerkerStore.medewerkerItem?.id) {
 			this.medewerkerItem = {
@@ -127,37 +128,13 @@ export default {
 				tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
 				achternaam: medewerkerStore.medewerkerItem.achternaam || '',
 				email: medewerkerStore.medewerkerItem.email || '',
+				telefoonnummer: medewerkerStore.medewerkerItem.telefoonnummer || '',
 			}
 		}
 	},
-	updated() {
-		if (navigationStore.modal === 'editMedewerker' && !this.hasUpdated) {
-
-			if (medewerkerStore.medewerkerItem?.id) {
-				this.medewerkerItem = {
-					...medewerkerStore.medewerkerItem,
-					voornaam: medewerkerStore.medewerkerItem.voornaam || '',
-					tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
-					achternaam: medewerkerStore.medewerkerItem.achternaam || '',
-					email: medewerkerStore.medewerkerItem.email || '',
-				}
-			}
-			this.hasUpdated = true
-		}
-	},
 	methods: {
 		closeModal() {
 			navigationStore.setModal(false)
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.medewerkerItem = {
-				voornaam: '',
-				tussenvoegsel: '',
-				achternaam: '',
-				email: '',
-			}
 		},
 		async editMedewerker() {
 			this.loading = true

From b9dd716194d502d2cfb94b2fec7b6ae53aa28a0c Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 11 Dec 2024 12:40:54 +0100
Subject: [PATCH 3/7] fixed contactmoment not visible on klanten

---
 src/modals/Modals.vue                         | 13 ++-
 .../contactMomenten/ContactMomentenForm.vue   | 19 +++-
 .../klantRegister/ViewKlantRegister.vue       | 34 +++++--
 .../contactMomenten/ContactMomentDetails.vue  |  2 +-
 .../contactMomenten/ContactMomentenIndex.vue  |  2 +-
 .../contactMomenten/ContactMomentenList.vue   | 10 +-
 src/views/klanten/KlantDetails.vue            | 98 +++++++++++--------
 7 files changed, 119 insertions(+), 59 deletions(-)

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index f83fda0..86d1540 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -11,17 +11,24 @@ import { navigationStore } from '../store/store.js'
 		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
 		<AddBerichtToZaak v-if="navigationStore.modal === 'addBerichtToZaak'" />
 		<AddTaakToZaak v-if="navigationStore.modal === 'addTaakToZaak'" />
-		<!-- ==== -->
+		<!-- contactmomenten -->
+		<ContactMomentenForm v-if="navigationStore.modal === 'contactMomentenForm'" />
+		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
+		<!-- zaaktypen -->
 		<EditZaakType />
+		<!-- klanten -->
 		<EditKlant />
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
+		<!-- berichten -->
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
+		<!-- taken -->
 		<EditTaak v-if="navigationStore.modal === 'editTaak'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
+		<!-- rollen -->
 		<EditRol />
+		<!-- klant register -->
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
-		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
 		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
 	</div>
 </template>
@@ -43,6 +50,7 @@ import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
 import EditMedewerker from './medewerkers/EditMedewerker.vue'
 import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
 import AddTaakToZaak from './zaken/AddTaakToZaak.vue'
+import ContactMomentenForm from './contactMomenten/ContactMomentenForm.vue'
 
 export default {
 	name: 'Modals',
@@ -63,6 +71,7 @@ export default {
 		EditMedewerker,
 		AddBerichtToZaak,
 		AddTaakToZaak,
+		ContactMomentenForm,
 	},
 }
 </script>
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 39f71bd..08f7a0f 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -299,6 +299,13 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * The ID of the klant to fetch data for
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
 		/**
 		 * If true, the form is in view mode and no actions are shown
 		 */
@@ -312,7 +319,7 @@ export default {
 			/**
 			 * determines if this modal is an edit modal or a create modal. Is unrelated to the isView property.
 			 */
-			isEdit: !!this.contactMomentId,
+			isEdit: null,
 			fetchLoading: false, // used as the loading state when editing
 			success: false,
 			loading: false,
@@ -340,8 +347,14 @@ export default {
 		}
 	},
 	mounted() {
-		if (this.contactMomentId) {
-			this.fetchData(this.contactMomentId)
+		const contactMomentId = this.contactMomentId ?? contactMomentStore.contactMomentItem?.id ?? null
+		this.isEdit = !!contactMomentId
+
+		if (this.isEdit) {
+			this.fetchData(contactMomentId)
+		} else if (this.klantId) {
+			// if it is not an edit modal but a klantId is provided, fetch the klant data
+			this.fetchKlantData(this.klantId)
 		}
 	},
 	methods: {
diff --git a/src/modals/klantRegister/ViewKlantRegister.vue b/src/modals/klantRegister/ViewKlantRegister.vue
index 16c2752..074da71 100644
--- a/src/modals/klantRegister/ViewKlantRegister.vue
+++ b/src/modals/klantRegister/ViewKlantRegister.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/store.js'
+import { taakStore, navigationStore, zaakStore, klantStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -133,15 +133,17 @@ import { taakStore, navigationStore, zaakStore, klantStore } from '../../store/s
 					</NcEmptyContent>
 				</BTab>
 				<BTab title="Contact Momenten">
-					<div v-if="contactMomenten?.length">
-						<NcListItem v-for="(contactMoment, key) in contactMomenten"
+					<div v-if="filteredContactMomenten?.length">
+						<NcListItem v-for="(contactMoment, key) in filteredContactMomenten"
 							:key="key"
-							:name="contactMoment.title"
+							:name="getName(klant)"
 							:bold="false"
-							:details="contactMoment.description"
 							:force-display-actions="true">
 							<template #icon>
-								<AccountOutline :size="44" />
+								<CardAccountPhoneOutline :size="44" />
+							</template>
+							<template #subname>
+								{{ new Date(contactMoment.startDate).toLocaleString() }}
 							</template>
 						</NcListItem>
 					</div>
@@ -217,7 +219,7 @@ import Cancel from 'vue-material-design-icons/Cancel.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
 import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
-import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import CardAccountPhoneOutline from 'vue-material-design-icons/CardAccountPhoneOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import EditTaak from '../../modals/taken/EditTaak.vue'
@@ -237,7 +239,6 @@ export default {
 		BriefcaseAccountOutline,
 		CalendarMonthOutline,
 		ChatOutline,
-		AccountOutline,
 		Eye,
 		DotsHorizontal,
 		EditTaakForm: EditTaak,
@@ -268,7 +269,14 @@ export default {
 			currentActiveKlant: {},
 		}
 	},
+	computed: {
+		filteredContactMomenten() {
+			return contactMomentStore.contactMomentenList.filter(contactMoment => contactMoment.klant === this.klant?.id)
+		},
+	},
 	mounted() {
+		contactMomentStore.refreshContactMomentenList()
+
 		if (klantStore.widgetKlantId) {
 			this.currentActiveKlant = klantStore.widgetKlantId
 			this.fetchKlantData(klantStore.widgetKlantId)
@@ -342,6 +350,16 @@ export default {
 				})
 		},
 
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+
 		closeModalFromButton() {
 			setTimeout(() => {
 				this.closeModal()
diff --git a/src/views/contactMomenten/ContactMomentDetails.vue b/src/views/contactMomenten/ContactMomentDetails.vue
index af8c0c3..d27f775 100644
--- a/src/views/contactMomenten/ContactMomentDetails.vue
+++ b/src/views/contactMomenten/ContactMomentDetails.vue
@@ -16,7 +16,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
-						<NcActionButton @click="navigationStore.setModal('editContactMoment')">
+						<NcActionButton @click="navigationStore.setModal('contactMomentenForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
diff --git a/src/views/contactMomenten/ContactMomentenIndex.vue b/src/views/contactMomenten/ContactMomentenIndex.vue
index ca70bc1..f985d80 100644
--- a/src/views/contactMomenten/ContactMomentenIndex.vue
+++ b/src/views/contactMomenten/ContactMomentenIndex.vue
@@ -16,7 +16,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 					<CardAccountPhoneOutline />
 				</template>
 				<template #action>
-					<NcButton type="primary" @click="navigationStore.setModal('editContactMoment')">
+					<NcButton type="primary" @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						Contact moment aanmaken
 					</NcButton>
 				</template>
diff --git a/src/views/contactMomenten/ContactMomentenList.vue b/src/views/contactMomenten/ContactMomentenList.vue
index 454d54e..2be1a1f 100644
--- a/src/views/contactMomenten/ContactMomentenList.vue
+++ b/src/views/contactMomenten/ContactMomentenList.vue
@@ -22,7 +22,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						</template>
 						Ververs
 					</NcActionButton>
-					<NcActionButton @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('editContactMoment')">
+					<NcActionButton @click="contactMomentStore.setContactMomentItem(null); navigationStore.setModal('contactMomentenForm')">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
@@ -46,7 +46,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 						{{ new Date(contactMoment.startDate).toLocaleString() }}
 					</template>
 					<template #actions>
-						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('editContactMoment')">
+						<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('contactMomentenForm')">
 							<template #icon>
 								<Pencil :size="20" />
 							</template>
@@ -112,10 +112,12 @@ export default {
 		}
 	},
 	mounted() {
-		contactMomentStore.refreshContactMomentenList().then(() => {
+		Promise.all([
+			contactMomentStore.refreshContactMomentenList(),
+			klantStore.refreshKlantenList(),
+		]).then(() => {
 			this.loading = false
 		})
-		klantStore.refreshKlantenList()
 	},
 	methods: {
 		editContactMoment(contactMoment) {
diff --git a/src/views/klanten/KlantDetails.vue b/src/views/klanten/KlantDetails.vue
index 936b2b0..6b7dcdf 100644
--- a/src/views/klanten/KlantDetails.vue
+++ b/src/views/klanten/KlantDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, klantStore, taakStore, berichtStore, zaakStore } from '../../store/store.js'
+import { navigationStore, klantStore, taakStore, berichtStore, zaakStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -218,18 +218,20 @@ import { navigationStore, klantStore, taakStore, berichtStore, zaakStore } from
 							</NcEmptyContent>
 						</BTab>
 						<BTab title="Contact Momenten">
-							<div v-if="contactMomenten.length">
-								<NcListItem v-for="(contactMoment, key) in contactMomenten"
+							<div v-if="filteredContactMomenten.length">
+								<NcListItem v-for="(contactMoment, key) in filteredContactMomenten"
 									:key="key"
-									:name="contactMoment.title"
+									:name="getName(klantStore.klantItem)"
 									:bold="false"
-									:details="contactMoment.description"
 									:force-display-actions="true">
 									<template #icon>
-										<AccountOutline :size="44" />
+										<CardAccountPhoneOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ new Date(contactMoment.startDate).toLocaleString() }}
 									</template>
 									<template #actions>
-										<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setModal('viewContactMoment')">
+										<NcActionButton @click="contactMomentStore.setContactMomentItem(contactMoment); navigationStore.setSelected('contactMomenten')">
 											<template #icon>
 												<Eye :size="20" />
 											</template>
@@ -298,6 +300,7 @@ import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountO
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
+import CardAccountPhoneOutline from 'vue-material-design-icons/CardAccountPhoneOutline.vue'
 
 export default {
 	name: 'KlantDetails',
@@ -324,11 +327,17 @@ export default {
 			zaken: [],
 			taken: [],
 			berichten: [],
-			contactMomenten: [],
 			auditTrails: [],
 		}
 	},
+	computed: {
+		filteredContactMomenten() {
+			return contactMomentStore.contactMomentenList.filter(contactMoment => contactMoment.klant === klantStore.klantItem.id)
+		},
+	},
 	mounted() {
+		this.fetchContactMomenten()
+
 		if (klantStore.klantItem?.id) {
 			this.currentActiveKlant = klantStore.klantItem
 			this.fetchKlantData(klantStore.klantItem.id)
@@ -341,38 +350,47 @@ export default {
 		}
 	},
 	methods: {
-		fetchKlantData(id) {
-			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`)
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.zaken = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.taken = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data.results)) {
-						this.berichten = data.results
-					}
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`)
-				})
-				.then(response => response.json())
-				.then(data => {
-					if (Array.isArray(data)) {
-						this.auditTrails = data
-					}
-				})
-				.catch(error => {
-					console.error('Error fetching klant data:', error)
-				})
+		async fetchKlantData(id) {
+			// when using Promise.allSettled, it will return an array of items.
+			// these items contain a status string, which is either 'fulfilled' or 'rejected'.
+			// when fulfilled, it also contains a value, which is the response from the fetch call.
+			const [zakenResult, takenResult, berichtenResult, auditTrailResult] = await Promise.allSettled([
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`).then(response => response.json()),
+				fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`).then(response => response.json()),
+			])
+
+			// Handle zaken
+			if (zakenResult.status === 'fulfilled' && Array.isArray(zakenResult.value.results)) {
+				this.zaken = zakenResult.value.results
+			} else {
+				console.error('Error fetching zaken:', zakenResult.reason)
+			}
+
+			// Handle taken
+			if (takenResult.status === 'fulfilled' && Array.isArray(takenResult.value.results)) {
+				this.taken = takenResult.value.results
+			} else {
+				console.error('Error fetching taken:', takenResult.reason)
+			}
+
+			// Handle berichten
+			if (berichtenResult.status === 'fulfilled' && Array.isArray(berichtenResult.value.results)) {
+				this.berichten = berichtenResult.value.results
+			} else {
+				console.error('Error fetching berichten:', berichtenResult.reason)
+			}
+
+			// Handle audit trail
+			if (auditTrailResult.status === 'fulfilled' && Array.isArray(auditTrailResult.value)) {
+				this.auditTrails = auditTrailResult.value
+			} else {
+				console.error('Error fetching audit trail:', auditTrailResult.reason)
+			}
+		},
+		fetchContactMomenten() {
+			contactMomentStore.refreshContactMomentenList()
 		},
 
 		getName(klant) {

From a5ca10448d66c8dd2c3ca4ca5c8688a3020ec42d Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 11 Dec 2024 14:50:01 +0100
Subject: [PATCH 4/7] enabled create zaak on contactMoment modal

---
 .../contactMomenten/ContactMomentenForm.vue   | 21 ++++++++++++++++++-
 src/modals/zaken/ZaakForm.vue                 | 10 +++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 39f71bd..f0f7182 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -223,7 +223,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</template>
 					Klant taak aanmaken
 				</NcActionButton>
-				<NcActionButton :disabled="true" @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton :disabled="!klant?.id" @click="openZaakForm()">
 					<template #icon>
 						<BriefcaseAccountOutline :size="20" />
 					</template>
@@ -250,6 +250,12 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			:klant-id="klant?.id"
 			@close-modal="closeTaakForm"
 			@save-success="closeTaakForm" />
+
+		<ZaakForm v-if="zaakFormOpen"
+			:dashboard-widget="true"
+			:klant-id="klant?.id"
+			@close-modal="() => (zaakFormOpen = false)"
+			@save-success="zaakFormSaveSuccess" />
 	</NcDialog>
 </template>
 
@@ -261,6 +267,7 @@ import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, N
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
 import EditTaak from '../../modals/taken/EditTaak.vue'
+import ZaakForm from '../../modals/zaken/ZaakForm.vue'
 
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -337,6 +344,7 @@ export default {
 			startingType: 'all',
 			taakFormOpen: false,
 			taakClientType: 'both',
+			zaakFormOpen: false,
 		}
 	},
 	mounted() {
@@ -442,6 +450,17 @@ export default {
 			this.taakFormOpen = false
 		},
 
+		// zaak functions
+		openZaakForm() {
+			zaakStore.setZaakItem(null)
+			this.zaakFormOpen = true
+		},
+
+		zaakFormSaveSuccess() {
+			this.zaakFormOpen = false
+			this.fetchKlantData(this.klant.id)
+		},
+
 		async fetchKlantData(id) {
 			try {
 				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
diff --git a/src/modals/zaken/ZaakForm.vue b/src/modals/zaken/ZaakForm.vue
index ff73091..f705c7d 100644
--- a/src/modals/zaken/ZaakForm.vue
+++ b/src/modals/zaken/ZaakForm.vue
@@ -114,6 +114,15 @@ export default {
 			default: false,
 			required: false,
 		},
+		/**
+		 * The id of the klant that the zaak is for.
+		 * Currently there is no dropdown for selecting a klant.
+		 * So it currently will pass the klantId with the zaak to the API.
+		 */
+		klantId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -230,6 +239,7 @@ export default {
 				...this.zaak,
 				archiefstatus: this.archiefstatus.value?.id || '',
 				zaaktype: this.zaakType.value?.id || '',
+				klant: this.klantId,
 			})
 
 			zaakStore.saveZaak(newZaak)

From 97b35efb3c4c741df05c4b97b4a811d47efa3f78 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 11 Dec 2024 15:02:47 +0100
Subject: [PATCH 5/7] added close contactmoment button on modal

---
 src/modals/contactMomenten/ContactMomentenForm.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 39f71bd..a73d375 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -229,6 +229,12 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</template>
 					Zaak starten
 				</NcActionButton>
+				<NcActionButton :disabled="contactMoment.status === 'gesloten'" @click="() => (contactMoment.status = 'gesloten')">
+					<template #icon>
+						<BriefcaseAccountOutline :size="20" />
+					</template>
+					Sluit Contactmoment
+				</NcActionButton>
 			</NcActions>
 			<NcButton
 				v-if="!isView"
@@ -320,7 +326,7 @@ export default {
 			contactMoment: {
 				titel: '',
 				notitie: '',
-				status: null,
+				status: 'open',
 				startDate: null,
 			},
 			klantenLoading: false,

From 209b90b7f09b8984c19cca4a811b246951c0705e Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 11 Dec 2024 15:10:23 +0100
Subject: [PATCH 6/7] show days until end of task

---
 src/modals/taken/EditTaak.vue | 2 +-
 src/views/taken/TakenList.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modals/taken/EditTaak.vue b/src/modals/taken/EditTaak.vue
index bc0df2d..96858b0 100644
--- a/src/modals/taken/EditTaak.vue
+++ b/src/modals/taken/EditTaak.vue
@@ -437,7 +437,7 @@ export default {
 				medewerker: medewerkerId || null,
 				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)
diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index 3d48e61..d6ff3e7 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -37,7 +37,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					:force-display-actions="true"
 					:active="taakStore.taakItem?.id === taak?.id"
 					:details="taak.status"
-					:counter-number="taak.deadline ? new Date(taak.deadline).toLocaleDateString() : 'no deadline'"
+					:counter-number="taak.deadline ? `${Math.ceil((new Date(taak.deadline) - new Date()) / (1000 * 60 * 60 * 24))} dagen` : 'no deadline'"
 					@click="taakStore.setTaakItem(taak)">
 					<template #icon>
 						<CalendarMonthOutline :class="taakStore.taakItem?.id === taak.id && 'selectedZaakIcon'"

From 2e8223d9b0c34bf4bfcdde302d1bdf32f4439b53 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 12 Dec 2024 14:43:44 +0100
Subject: [PATCH 7/7] added phone number to details page

---
 src/views/medewerkers/MedewerkerDetails.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
index bbeb7ce..4252e52 100644
--- a/src/views/medewerkers/MedewerkerDetails.vue
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -55,6 +55,10 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 						<b>Email adres:</b>
 						<p>{{ medewerkerStore.medewerkerItem.email }}</p>
 					</div>
+					<div>
+						<b>Telefoonnummer:</b>
+						<p>{{ medewerkerStore.medewerkerItem.telefoonnummer }}</p>
+					</div>
 				</div>
 			</div>
 		</div>