Merge branch 'development' into feature/PC108-88/zaak-afhandel-termijn

src/entities/medewerkers/medewerkers.mock.ts

@@ -8,6 +8,7 @@ export const mockMedewerkerData = (): TMedewerker[] => [
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
 		email: '[email protected]',
+		telefoonnummer: '0612345678',
 	},
 ]
 

src/entities/medewerkers/medewerkers.ts

@@ -8,14 +8,15 @@ export class Medewerker implements TMedewerker {
 	public tussenvoegsel: string
 	public achternaam: string
 	public email: string
+	public telefoonnummer: string
 
 	constructor(source: TMedewerker) {
 		this.id = source.id || ''
 		this.voornaam = source.voornaam || ''
 		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)

src/entities/medewerkers/medewerkers.types.ts

@@ -4,4 +4,5 @@ export type TMedewerker = {
     tussenvoegsel: string;
     achternaam: string;
     email: string;
+    telefoonnummer: string;
 }

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;

src/modals/Modals.vue

@@ -11,17 +11,25 @@ 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'" />
+		<!-- 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 +51,8 @@ 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'
+import AddRolToZaak from './zaken/AddRolToZaak.vue'
 
 export default {
 	name: 'Modals',
@@ -63,6 +73,8 @@ export default {
 		EditMedewerker,
 		AddBerichtToZaak,
 		AddTaakToZaak,
+		ContactMomentenForm,
+		AddRolToZaak,
 	},
 }
 </script>

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -223,12 +223,18 @@ 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>
 					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"
@@ -250,6 +256,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 +273,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'
@@ -299,6 +312,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,15 +332,15 @@ 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,
 			error: false,
 			contactMoment: {
 				titel: '',
 				notitie: '',
-				status: null,
+				status: 'open',
 				startDate: null,
 			},
 			klantenLoading: false,
@@ -337,11 +357,18 @@ export default {
 			startingType: 'all',
 			taakFormOpen: false,
 			taakClientType: 'both',
+			zaakFormOpen: false,
 		}
 	},
 	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: {
@@ -442,6 +469,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}`)

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()

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

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)