Merge pull request #87 from ConductionNL/feature/PC108-113/klant-cont…

…actmoment

fixed contactmoment not visible on klanten

src/modals/Modals.vue

@@ -11,18 +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'" />
-		<!-- ==== -->
+    <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>
@@ -44,6 +51,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'
 import AddRolToZaak from './zaken/AddRolToZaak.vue'
 
 export default {
@@ -65,6 +73,7 @@ export default {
 		EditMedewerker,
 		AddBerichtToZaak,
 		AddTaakToZaak,
+		ContactMomentenForm,
 		AddRolToZaak,
 	},
 }

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: {

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/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>

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>

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

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