fixed customer journey

src/entities/index.js

@@ -5,4 +5,5 @@ export * from './klanten/index.js'
 export * from './taak/index.js'
 export * from './bericht/index.js'
 export * from './rol/index.js'
+export * from './medewerkers/index.js'
 export * from './contactmoment/index.js'

src/entities/medewerkers/index.js

@@ -0,0 +1,3 @@
+export * from './medewerkers.ts'
+export * from './medewerkers.types.ts'
+export * from './medewerkers.mock.ts'

src/entities/medewerkers/medewerkers.mock.ts

@@ -0,0 +1,14 @@
+import { Medewerker } from './medewerkers'
+import { TMedewerker } from './medewerkers.types'
+
+export const mockMedewerkerData = (): TMedewerker[] => [
+	{
+		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		voornaam: 'John',
+		tussenvoegsel: 'de',
+		achternaam: 'Doe',
+		email: '[email protected]',
+	},
+]
+
+export const mockMedewerker = (data: TMedewerker[] = mockMedewerkerData()): TMedewerker[] => data.map(item => new Medewerker(item))

src/entities/medewerkers/medewerkers.spec.ts

@@ -0,0 +1,12 @@
+import { Medewerker } from './medewerkers'
+import { mockMedewerkerData } from './medewerkers.mock'
+
+describe('Medewerker Entity', () => {
+	it('should create a Medewerker entity with full data', () => {
+		const medewerker = new Medewerker(mockMedewerkerData()[0])
+
+		expect(medewerker).toBeInstanceOf(Medewerker)
+		expect(medewerker).toEqual(mockMedewerkerData()[0])
+		expect(medewerker.validate().success).toBe(true)
+	})
+})

src/entities/medewerkers/medewerkers.ts

@@ -0,0 +1,33 @@
+import { SafeParseReturnType, z } from 'zod'
+import { TMedewerker } from './medewerkers.types'
+
+export class Medewerker implements TMedewerker {
+
+	public id: string
+	public voornaam: string
+	public tussenvoegsel: string
+	public achternaam: string
+	public email: string
+
+	constructor(source: TMedewerker) {
+		this.id = source.id || ''
+		this.voornaam = source.voornaam || ''
+		this.tussenvoegsel = source.tussenvoegsel || ''
+		this.achternaam = source.achternaam || ''
+		this.email = source.email || ''
+
+	}
+
+	public validate(): SafeParseReturnType<TMedewerker, unknown> {
+		const schema = z.object({
+			id: z.string().optional(),
+			voornaam: z.string().min(1),
+			tussenvoegsel: z.string(),
+			achternaam: z.string(),
+			email: z.string().email(),
+		})
+
+		return schema.safeParse(this)
+	}
+
+}

src/entities/medewerkers/medewerkers.types.ts

@@ -0,0 +1,7 @@
+export type TMedewerker = {
+    id: string;
+    voornaam: string;
+    tussenvoegsel: string;
+    achternaam: string;
+    email: string;
+}

src/modals/Modals.vue

@@ -12,13 +12,14 @@ import { navigationStore } from '../store/store.js'
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
 		<EditBericht />
 		<ViewBerichtAuditTrail v-if="navigationStore.modal === 'viewBerichtAuditTrail'" />
-		<EditTaak />
+		<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'" />
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
 		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
+		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
 	</div>
 </template>
 
@@ -37,6 +38,7 @@ import EditRol from './rollen/EditRol.vue'
 import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 import ViewKlantRegister from './klantRegister/ViewKlantRegister.vue'
 import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
+import EditMedewerker from './medewerkers/EditMedewerker.vue'
 export default {
 	name: 'Modals',
 	components: {
@@ -54,6 +56,7 @@ export default {
 		ViewZaakAuditTrail,
 		ViewKlantRegister,
 		DeleteContactMoment,
+		EditMedewerker,
 	},
 }
 </script>

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore } from '../../store/store.js'
+import { navigationStore, taakStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -27,6 +27,14 @@ import { navigationStore } from '../../store/store.js'
 						<div v-else>
 							Geen klant geselecteerd
 						</div>
+						<div class="statusAndStartDateContainer">
+							<div v-if="status">
+								status: {{ status }}
+							</div>
+							<div v-if="startDate">
+								startDate: {{ new Date(startDate).toLocaleDateString() }}
+							</div>
+						</div>
 					</template>
 				</NcNoteCard>
 				<div v-if="!klant" class="buttonsContainer">
@@ -180,13 +188,13 @@ import { navigationStore } from '../../store/store.js'
 				<template #icon>
 					<DotsHorizontal :size="20" />
 				</template>
-				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton @click="openTaakForm">
 					<template #icon>
-						<BriefcaseAccountOutline :size="20" />
+						<CalendarMonthOutline :size="20" />
 					</template>
-					Zaak starten
+					Taak aanmaken
 				</NcActionButton>
-				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+				<NcActionButton :disabled="true" @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
 					<template #icon>
 						<BriefcaseAccountOutline :size="20" />
 					</template>
@@ -205,6 +213,10 @@ import { navigationStore } from '../../store/store.js'
 				Opslaan
 			</NcButton>
 		</template>
+		<TakenForm v-if="taakFormOpen"
+			:dashboard-widget="true"
+			@close-modal="closeTaakForm"
+			@save-success="closeTaakForm" />
 	</NcDialog>
 </template>
 
@@ -215,6 +227,7 @@ import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, N
 
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
+import TakenForm from '../../modals/taken/WidgetTaakForm.vue'
 
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -248,6 +261,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		contactMomentId: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -256,6 +273,8 @@ export default {
 			error: false,
 			titel: '',
 			notitie: '',
+			status: null,
+			startDate: null,
 			klantenLoading: false,
 			zaken: [],
 			taken: [],
@@ -268,9 +287,13 @@ export default {
 			selectedTaak: null,
 			selectedProduct: null,
 			startingType: 'all',
+			taakFormOpen: false,
 		}
 	},
 	mounted() {
+		if (this.contactMomentId) {
+			this.fetchContactMomentData(this.contactMomentId)
+		}
 	},
 	methods: {
 		// Modal functions
@@ -302,7 +325,7 @@ export default {
 						zaak: this.selectedZaak ?? '',
 						taak: this.selectedTaak ?? '',
 						product: this.selectedProduct ?? '',
-						status: 'open',
+						status: this.status === 'gesloten' ? 'gesloten' : 'open',
 						startDate: new Date().toISOString(),
 					}),
 				},
@@ -334,6 +357,30 @@ export default {
 			this.searchKlantModalOpen = false
 		},
 
+		openTaakForm() {
+			this.taakFormOpen = true
+			taakStore.setTaakItem(null)
+		},
+
+		closeTaakForm() {
+			this.taakFormOpen = false
+		},
+
+		fetchContactMomentData(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/contactmomenten/${id}`)
+				.then(response => response.json())
+				.then(data => {
+					this.titel = data.titel
+					this.notitie = data.notitie
+					this.status = data.status
+					this.startDate = data.startDate
+					this.fetchKlantData(data.klant)
+					this.selectedZaak = data.zaak
+					this.selectedTaak = data.taak
+					this.selectedProduct = data.product
+				})
+		},
+
 		fetchKlantData(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
 				.then(response => response.json())
@@ -470,4 +517,9 @@ div[class='modal-container']:has(.ContactMomentenForm) {
     justify-content: flex-end;
     gap: var(--zaa-margin-10);
 }
+
+.statusAndStartDateContainer {
+	display: flex;
+	gap: var(--zaa-margin-10);
+}
 </style>

src/modals/klanten/EditKlant.vue

@@ -49,7 +49,7 @@ import { klantStore, navigationStore } from '../../store/store.js'
 			</div>
 
 			<NcSelect v-bind="sexOptions"
-				v-model="sexOptions.value"
+				v-model="klantItem.geslacht"
 				:clearable="false"
 				class="wide-select"
 				:disabled="loading"
@@ -261,7 +261,6 @@ export default {
 					{ value: 'vrouw', label: 'Vrouw' },
 					{ value: 'overige', label: 'Overige' },
 				],
-				value: { value: 'man', label: 'Man' },
 			},
 		}
 	},
@@ -272,7 +271,6 @@ export default {
 	},
 	updated() {
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
-
 			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem?.type)
 
 			const country = this.countryOptions.options.find((option) => option.id === klantStore.klantItem?.land)
@@ -326,7 +324,7 @@ export default {
 				achternaam: '',
 				bsn: '',
 				geboortedatum: '',
-				geslacht: '',
+				geslacht: { value: 'man', label: 'Man' },
 				land: '',
 				telefoonnummer: '',
 				emailadres: '',
@@ -346,8 +344,6 @@ export default {
 				subjectIdentificatie: '',
 				subjectType: '',
 			}
-
-			this.sexOptions.value = { value: 'man', label: 'Man' }
 		},
 		async editKlant() {
 			this.loading = true
@@ -358,7 +354,7 @@ export default {
 					type: this.klantItem.type.value,
 					geboortedatum: this.klantItem.geboortedatum !== '' && new Date(this.klantItem.geboortedatum).toISOString(),
 					land: this.klantItem.land.id,
-					geslacht: this.sexOptions.value.value,
+					geslacht: this.klantItem.geslacht.value,
 				})
 				this.success = true
 				this.loading = false