From ff62150cb07da3faf8e0a3e3377115262cbbbbad Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 2 Jan 2025 13:21:51 +0100
Subject: [PATCH 1/3] fixed search customer modal not opening

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

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 60b36d2..d4adaec 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -250,6 +250,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 						</div>
 
 						<SearchKlantModal v-if="searchKlantModalOpen && i === selectedContactMoment"
+							class="higher-index"
 							:dashboard-widget="true"
 							:starting-type="startingType"
 							@selected-klant="fetchKlantData($event)"
@@ -469,6 +470,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				</div>
 
 				<SearchKlantModal v-if="searchKlantModalOpen"
+					class="higher-index"
 					:dashboard-widget="true"
 					:starting-type="startingType"
 					@selected-klant="fetchKlantData($event)"
@@ -541,12 +543,14 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 		</template>
 
 		<ViewContactMoment v-if="isContactMomentFormOpen"
+			class="higher-index"
 			:dashboard-widget="true"
 			:contact-moment-id="viewContactMomentId"
 			:is-view="viewContactMomentIsView"
 			@close-modal="closeViewContactMomentModal" />
 
 		<EditTaakForm v-if="taakFormOpen"
+			class="higher-index"
 			:dashboard-widget="true"
 			:client-type="taakClientType"
 			:klant-id="contactMomenten[selectedContactMoment].klant?.id"
@@ -554,6 +558,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			@save-success="closeTaakForm" />
 
 		<ZaakForm v-if="zaakFormOpen"
+			class="higher-index"
 			:dashboard-widget="true"
 			:klant-id="contactMomenten[selectedContactMoment].klant?.id"
 			@close-modal="() => (zaakFormOpen = false)"
@@ -719,7 +724,7 @@ export default {
 					this.tabs.splice(i, 1)
 				}
 			}
-			this.selectedContactMoment = 1
+			this.selectedContactMoment = this.tabs[0]
 		},
 		newTab() {
 			const index = this.tabCounter + 1
@@ -1211,4 +1216,7 @@ div[class='modal-container']:has(.ContactMomentenForm) {
 	pointer-events: all !important;
 }
 
+.higher-index {
+	z-index: 10000 !important;
+}
 </style>

From ceb9a8cd33aea7eadde0997c24db3ea10b2ddb8a Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 6 Jan 2025 11:31:01 +0100
Subject: [PATCH 2/3] Add klant with disabled button if employe or channel is
 not selected

---
 .../contactMomenten/ContactMomentenForm.vue   | 28 ++++++++++---------
 src/views/widgets/ContactMomentenWidget.vue   |  1 +
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 6471fba..f8debf2 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { contactMomentStore, medewerkerStore, navigationStore, taakStore, zaakStore } from '../../store/store.js'
+import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -121,12 +121,14 @@ import { contactMomentStore, medewerkerStore, navigationStore, taakStore, zaakSt
 							<div class="flexContainer">
 								<NcSelect v-bind="channels"
 									v-model="channels.values[i-1]"
-									input-label="Kanaal" />
+									input-label="Kanaal"
+									required />
 
 								<NcSelect v-bind="medewerkers"
 									v-model="medewerkers.values[i-1]"
 									input-label="Medewerker"
-									:user-select="true" />
+									:user-select="true"
+									required />
 							</div>
 						</div>
 						<div class="tabContainer">
@@ -557,7 +559,7 @@ import { contactMomentStore, medewerkerStore, navigationStore, taakStore, zaakSt
 			</NcActions>
 			<NcButton v-if="!isView"
 				type="primary"
-				:disabled="!contactMomenten[selectedContactMoment].klant || loading || success || fetchLoading"
+				:disabled="!contactMomenten[selectedContactMoment].klant || !medewerkers.values[selectedContactMoment - 1]?.id || !channels.values[selectedContactMoment - 1]?.value || loading || success || fetchLoading"
 				:loading="loading"
 				@click="addContactMoment(selectedContactMoment)">
 				<template #icon>
@@ -904,7 +906,7 @@ export default {
 				startDate: contactMomentCopy.startDate ?? new Date().toISOString(),
 				status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
 				contactmoment: contactMomentCopy.selectedKlantContactMoment,
-				medewerker: this.medewerkers.values[this.selectedContactMoment - 1].email,
+				medewerker: this.medewerkers.options[this.selectedContactMoment - 1].id,
 				kanaal: this.channels.values[this.selectedContactMoment - 1].value,
 			}, { redirect: !this.dashboardWidget })
 				.then((response) => {
@@ -984,7 +986,7 @@ export default {
 		closeTaakForm(e) {
 			if (e) {
 				this.contactMomenten[this.selectedContactMoment].addedTaken.push(e)
-				this.contactMomenten[this.selectedContactMoment].klant?.id && this.fetchKlantData(this.contactMomenten[this.selectedContactMoment].klant.id)
+				this.contactMomenten[this.selectedContactMoment]?.klant?.id && this.fetchKlantData(this.contactMomenten[this.selectedContactMoment]?.klant?.id)
 			}
 			this.taakFormOpen = false
 		},
@@ -1072,9 +1074,9 @@ export default {
 
 		},
 
-		async fetchKlantData(id) {
+		async fetchKlantData(klant) {
 			try {
-				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}`)
 				// ifselectedContactMoment
 				if (this.isView) {
 					this.klant = await klantResponse.json()
@@ -1109,11 +1111,11 @@ export default {
 				 */
 				// #1
 				const results = await Promise.allSettled([
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/contactmomenten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/zaken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/taken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/berichten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/audit_trail`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/contactmomenten`),
 				])
 
 				// #2 & #3
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index e12cf56..a30eb65 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -221,6 +221,7 @@ export default {
 			this.isContactMomentFormOpen = false
 			this.isView = false
 			navigationStore.setModal(null)
+			this.fetchContactMomentItems()
 		},
 		// === EVENTS ===
 		/**

From 8948a0a546d48d8e8c3b53b4ba16c4273f6c6155 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 6 Jan 2025 13:09:40 +0100
Subject: [PATCH 3/3] fixed viewing of contactmoment

---
 .../contactMomenten/ContactMomentenForm.vue   |  33 +++---
 .../contactMomenten/ViewContactMoment.vue     | 104 +++++++++++++-----
 2 files changed, 96 insertions(+), 41 deletions(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index f8debf2..e2f88e9 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -302,8 +302,10 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									{{ `${getSex(klant)} ${getName(klant)}` }}
 									<div v-if="klant?.type === 'persoon'" class="flexContainer">
 										<div>
-											Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new
-												Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+											Geboortedatum: {{
+												getValidISOstring(klant?.geboortedatum) ? new
+													Date(klant?.geboortedatum).toLocaleDateString() :
+												'N/A' }}
 										</div>
 										<div>
 											Geboorteplaats: {{ klant?.plaats ?? 'N/A' }}
@@ -391,15 +393,14 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:key="key"
 									:name="getName(klant)"
 									:bold="false"
-									:details="klantContactmoment.startDate"
 									:disabled="loading"
 									:active="selectedKlantContactMoment === klantContactmoment.id"
 									:force-display-actions="true">
 									<template #icon>
-										<Phone v-if="klantContactmoment.kanaal === 'Telefoon'" :size="44" />
-										<EmailOutline v-else-if="klantContactmoment.kanaal === 'E-mail'" :size="44" />
-										<FaceAgent v-else-if="klantContactmoment.kanaal === 'Balie'" :size="44" />
-										<MailboxOpenOutline v-else-if="klantContactmoment.kanaal === 'Brief'" :size="44" />
+										<Phone v-if="klantContactmoment.kanaal === 'telefoon'" :size="44" />
+										<EmailOutline v-else-if="klantContactmoment.kanaal === 'email'" :size="44" />
+										<FaceAgent v-else-if="klantContactmoment.kanaal === 'balie'" :size="44" />
+										<MailboxOpenOutline v-else-if="klantContactmoment.kanaal === 'brief'" :size="44" />
 										<BriefcaseAccountOutline v-else :size="44" />
 									</template>
 									<template #subname>
@@ -1075,8 +1076,9 @@ export default {
 		},
 
 		async fetchKlantData(klant) {
+			const klantId = klant.id ?? klant
 			try {
-				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}`)
+				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}`)
 				// ifselectedContactMoment
 				if (this.isView) {
 					this.klant = await klantResponse.json()
@@ -1111,11 +1113,11 @@ export default {
 				 */
 				// #1
 				const results = await Promise.allSettled([
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/zaken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/taken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/berichten`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/audit_trail`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant.id}/contactmomenten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/zaken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/taken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/berichten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/audit_trail`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/contactmomenten`),
 				])
 
 				// #2 & #3
@@ -1168,7 +1170,10 @@ export default {
 
 				if (contactMomentenData?.results && Array.isArray(contactMomentenData.results)) {
 					if (this.isView) {
-						this.klantContactmomenten = contactMomentenData.results
+						const filteredResults = contactMomentenData.results.filter((contactMoment) =>
+							contactMoment.id !== this.contactMoment.id,
+						)
+						this.klantContactmomenten = filteredResults
 					} else {
 						this.contactMomenten[this.selectedContactMoment].klantContactmomenten = contactMomentenData.results
 					}
diff --git a/src/modals/contactMomenten/ViewContactMoment.vue b/src/modals/contactMomenten/ViewContactMoment.vue
index 3df2aa4..60ca20b 100644
--- a/src/modals/contactMomenten/ViewContactMoment.vue
+++ b/src/modals/contactMomenten/ViewContactMoment.vue
@@ -117,12 +117,18 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:key="key"
 									:name="getName(klant)"
 									:bold="false"
-									:details="new Date(klantContactmoment.startDate).toLocaleString()"
 									:disabled="loading"
 									:active="selectedKlantContactMoment === klantContactmoment.id"
 									:force-display-actions="true">
 									<template #icon>
-										<BriefcaseAccountOutline :size="44" />
+										<Phone v-if="klantContactmoment.kanaal === 'telefoon'" :size="44" />
+										<EmailOutline v-else-if="klantContactmoment.kanaal === 'email'" :size="44" />
+										<FaceAgent v-else-if="klantContactmoment.kanaal === 'balie'" :size="44" />
+										<MailboxOpenOutline v-else-if="klantContactmoment.kanaal === 'brief'" :size="44" />
+										<BriefcaseAccountOutline v-else :size="44" />
+									</template>
+									<template #subname>
+										{{ new Date(klantContactmoment.startDate).toLocaleString() }}
 									</template>
 								</NcListItem>
 							</div>
@@ -281,6 +287,10 @@ import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
+import Phone from 'vue-material-design-icons/Phone.vue'
+import EmailOutline from 'vue-material-design-icons/EmailOutline.vue'
+import FaceAgent from 'vue-material-design-icons/FaceAgent.vue'
+import MailboxOpenOutline from 'vue-material-design-icons/MailboxOpenOutline.vue'
 
 export default {
 	name: 'ViewContactMoment',
@@ -603,9 +613,10 @@ export default {
 				})
 		},
 
-		async fetchKlantData(id) {
+		async fetchKlantData(klant) {
+			const klantId = klant.id ?? klant
 			try {
-				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}`)
 				// ifselectedContactMoment
 				if (this.isView) {
 					this.klant = await klantResponse.json()
@@ -613,56 +624,94 @@ export default {
 					this.contactMomenten[this.selectedContactMoment].klant = await klantResponse.json()
 				}
 
-				// fetch all data in parallel
-				const [zakenRes, takenRes, berichtenRes, auditTrailRes, contactMomentenRes] = await Promise.all([
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`),
-					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/contactmomenten`),
+				/**
+				 * This code block handles parallel fetching and parsing of multiple API endpoints in a fault-tolerant way.
+				 * Here's what happens step by step:
+				 *
+				 * 1. First, we initiate 5 parallel fetch requests using Promise.allSettled():
+				 *    - This allows all requests to run simultaneously rather than sequentially
+				 *    - Unlike Promise.all(), allSettled() won't fail if some requests fail
+				 *    - Each request fetches different data for the same klant ID (cases, tasks, messages etc)
+				 *
+				 * 2. Once all fetches complete (successfully or not), we process the responses:
+				 *    - results contains an array of 5 promise results
+				 *    - Each result is either {status: 'fulfilled', value: Response} or {status: 'rejected', reason: Error}
+				 *
+				 * 3. We then parse the JSON from successful responses using another Promise.allSettled():
+				 *    - For each fulfilled fetch with ok status, we parse the JSON asynchronously
+				 *    - For failed fetches or non-ok responses, we return null
+				 *    - This creates another layer of fault tolerance during JSON parsing
+				 *
+				 * 4. Finally, we destructure the parsed results into separate variables:
+				 *    - Each variable gets either the parsed JSON data or null if any step failed
+				 *    - This gives us clean variables to work with, regardless of failures
+				 *
+				 * The end result is we get all our data in parallel, with proper error handling,
+				 * and clean null values for any failed requests rather than thrown exceptions.
+				 */
+				// #1
+				const results = await Promise.allSettled([
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/zaken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/taken`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/berichten`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/audit_trail`),
+					fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klantId}/contactmomenten`),
 				])
 
-				// parse all data
-				const [zakenData, takenData, berichtenData, auditTrailData, contactMomentenData] = await Promise.all([
-					zakenRes.json(),
-					takenRes.json(),
-					berichtenRes.json(),
-					auditTrailRes.json(),
-					contactMomentenRes.json(),
-				])
+				// #2 & #3
+				const parsedResults = await Promise.allSettled(
+					results.map(async (result) => {
+						if (result.status === 'fulfilled' && result.value.ok) {
+							return await result.value.json()
+						}
+						return null
+					}),
+				)
 
-				// set data
-				if (Array.isArray(zakenData.results)) {
+				// #4
+				const [zakenData, takenData, berichtenData, auditTrailData, contactMomentenData] = parsedResults.map(result =>
+					result.status === 'fulfilled' ? result.value : null,
+				)
+
+				// set data, checking for null values
+				if (zakenData?.results && Array.isArray(zakenData.results)) {
 					if (this.isView) {
 						this.zaken = zakenData.results
 					} else {
 						this.contactMomenten[this.selectedContactMoment].zaken = zakenData.results
 					}
 				}
-				if (Array.isArray(takenData.results)) {
+
+				if (takenData?.results && Array.isArray(takenData.results)) {
 					if (this.isView) {
 						this.taken = takenData.results
 					} else {
 						this.contactMomenten[this.selectedContactMoment].taken = takenData.results
 					}
 				}
-				if (Array.isArray(berichtenData.results)) {
+
+				if (berichtenData?.results && Array.isArray(berichtenData.results)) {
 					if (this.isView) {
 						this.berichten = berichtenData.results
 					} else {
 						this.contactMomenten[this.selectedContactMoment].berichten = berichtenData.results
 					}
 				}
-				if (Array.isArray(auditTrailData)) {
+
+				if (auditTrailData && Array.isArray(auditTrailData)) {
 					if (this.isView) {
 						this.auditTrails = auditTrailData
 					} else {
 						this.contactMomenten[this.selectedContactMoment].auditTrails = auditTrailData
 					}
 				}
-				if (Array.isArray(contactMomentenData.results)) {
+
+				if (contactMomentenData?.results && Array.isArray(contactMomentenData.results)) {
 					if (this.isView) {
-						this.klantContactmomenten = contactMomentenData.results
+						const filteredResults = contactMomentenData.results.filter((contactMoment) =>
+							contactMoment.id !== this.contactMoment.id,
+						)
+						this.klantContactmomenten = filteredResults
 					} else {
 						this.contactMomenten[this.selectedContactMoment].klantContactmomenten = contactMomentenData.results
 					}
@@ -670,7 +719,8 @@ export default {
 
 			} catch (error) {
 				console.error('Error in fetchKlantData:', error)
-				throw error
+				// Don't throw the error, as we want the component to continue working
+				// even if some data failed to load
 			}
 		},