From 3006090e6112bccc3057646c05e0e2e5911e9171 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 17 Dec 2024 17:17:02 +0100
Subject: [PATCH 1/2] WIP on feature/PC108-108/multiple-contactmomenten

---
 lib/Controller/ZaakTypenController.php        |   1 -
 .../contactMomenten/ContactMomentenForm.vue   | 712 +++++++++++++-----
 .../contactMomenten/ContactMomentDetails.vue  |   2 +-
 3 files changed, 543 insertions(+), 172 deletions(-)

diff --git a/lib/Controller/ZaakTypenController.php b/lib/Controller/ZaakTypenController.php
index 3991b5d..ffed1e1 100644
--- a/lib/Controller/ZaakTypenController.php
+++ b/lib/Controller/ZaakTypenController.php
@@ -96,7 +96,6 @@ public function update(string $id): JSONResponse
         // Remove the 'id' field if it exists, as we're creating a new object
         unset($data['id']);
 
-		// Add the id field from the object path
 		$data['id'] = $id;
 
         // Save the new catalog object
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 7e04059..f211f41 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -9,190 +9,465 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 		dialog-classes="ContactMomentenForm"
 		:close-on-click-outside="false"
 		@closing="closeModalFromButton()">
-		<NcNoteCard v-if="success" type="success">
-			<p>Contactmoment succesvol opgeslagen</p>
-		</NcNoteCard>
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div v-if="!success">
-			<div class="headerContainer">
-				<div class="personInfoContainer">
-					<NcNoteCard type="info" class="noteCard">
-						<template #default>
-							<div v-if="klant">
-								{{ `${getSex(klant)} ${getName(klant)}` }}
-								<div v-if="klant?.type === 'persoon'" class="flexContainer">
-									<div>
-										Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
-									</div>
-									<div>
-										Geboorteplaats: {{ klant?.plaats ?? 'N/A' }}
-									</div>
+		<div v-if="!isView" class="tabContainer">
+			<BTabs card>
+				<BTab v-for="i in tabs"
+					:key="'dyn-tab-' + i"
+					:title="'Contactmoment ' + `${contactMomenten[i].klant ? getName(contactMomenten[i].klant) : i}`"
+					@click="selectedContactMoment = i">
+					<NcNoteCard v-if="success" type="success">
+						<p>Contactmoment succesvol opgeslagen</p>
+					</NcNoteCard>
+					<NcNoteCard v-if="error" type="error">
+						<p>{{ error }}</p>
+					</NcNoteCard>
+
+					<div v-if="!success">
+						<div class="headerContainer">
+							<div class="personInfoContainer">
+								<NcNoteCard type="info" class="noteCard">
+									<template #default>
+										<div v-if="contactMomenten[i].klant">
+											{{ `${getSex(contactMomenten[i].klant)} ${getName(contactMomenten[i].klant)}` }}
+											<div v-if="contactMomenten[i].klant?.type === 'persoon'" class="flexContainer">
+												<div>
+													Geboortedatum: {{ getValidISOstring(contactMomenten[i].klant?.geboortedatum) ? new Date(contactMomenten[i].klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+												</div>
+												<div>
+													Geboorteplaats: {{ contactMomenten[i].klant?.plaats ?? 'N/A' }}
+												</div>
+											</div>
+											<div v-if="contactMomenten[i].klant?.type === 'organisatie'" class="flexContainer">
+												<div>
+													KVK: {{ contactMomenten[i].klant?.kvkNummer ?? 'N/A' }}
+												</div>
+												<div>
+													Locatie: {{ contactMomenten[i].klant?.postcode ?? 'N/A' }} {{ contactMomenten[i].klant?.straatnaam ?? 'N/A' }}
+												</div>
+											</div>
+										</div>
+										<div v-else>
+											Geen klant geselecteerd
+										</div>
+									</template>
+								</NcNoteCard>
+							</div>
+							<div v-if="!contactMomenten[i].klant" class="buttonsContainer">
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="openSearchKlantModal('persoon')">
+										<template #icon>
+											<Plus :size="20" />
+										</template>
+										Persoon zoeken
+									</NcButton>
 								</div>
-								<div v-if="klant?.type === 'organisatie'" class="flexContainer">
-									<div>
-										KVK: {{ klant?.kvkNummer ?? 'N/A' }}
-									</div>
-									<div>
-										Locatie: {{ klant?.postcode ?? 'N/A' }} {{ klant?.straatnaam ?? 'N/A' }}
-									</div>
+								<div class="orContainer">
+									of
+								</div>
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="openSearchKlantModal('organisatie')">
+										<template #icon>
+											<Plus :size="20" />
+										</template>
+										Organisatie zoeken
+									</NcButton>
 								</div>
 							</div>
-							<div v-else>
-								Geen klant geselecteerd
+
+							<div v-if="contactMomenten[i].klant && !isView" class="buttonsContainer">
+								<div>
+									<NcButton
+										:disabled="loading"
+										:loading="fetchLoading"
+										type="primary"
+										@click="contactMomenten[i].klant = null">
+										<template #icon>
+											<Minus :size="20" />
+										</template>
+										Klant ontkoppelen
+									</NcButton>
+								</div>
 							</div>
-						</template>
-					</NcNoteCard>
-				</div>
-				<div v-if="!klant" class="buttonsContainer">
-					<div>
-						<NcButton
-							:disabled="loading"
-							:loading="fetchLoading"
-							type="primary"
-							@click="openSearchKlantModal('persoon')">
-							<template #icon>
-								<Plus :size="20" />
-							</template>
-							Persoon zoeken
-						</NcButton>
-					</div>
-					<div class="orContainer">
-						of
-					</div>
-					<div>
-						<NcButton
-							:disabled="loading"
-							:loading="fetchLoading"
-							type="primary"
-							@click="openSearchKlantModal('organisatie')">
-							<template #icon>
-								<Plus :size="20" />
-							</template>
-							Organisatie zoeken
-						</NcButton>
-					</div>
-				</div>
+							<div v-if="isView" class="statusContainer">
+								<div v-if="contactMomenten[i].status">
+									Status: {{ contactMomenten[i].status }}
+								</div>
+								<div v-if="contactMomenten[i].startDate">
+									Start datum: {{ new Date(contactMomenten[i].startDate).toLocaleDateString() }}
+								</div>
+							</div>
+						</div>
 
-				<div v-if="klant && !isView" class="buttonsContainer">
-					<div>
-						<NcButton
-							:disabled="loading"
-							:loading="fetchLoading"
-							type="primary"
-							@click="klant = null">
-							<template #icon>
-								<Minus :size="20" />
-							</template>
-							Klant ontkoppelen
-						</NcButton>
+						<div v-if="!success" class="form-group">
+							<NcTextArea :value.sync="contactMomenten[i].notitie"
+								label="Notitie"
+								:disabled="loading"
+								:loading="fetchLoading"
+								placeholder="Notitie" />
+						</div>
+						<div class="tabContainer">
+							<BTabs content-class="mt-3" justified>
+								<BTab :title="`Contactmomenten ${contactMomenten[i].klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
+									<div v-if="klantContactmomenten.length">
+										<NcListItem v-for="(klantContactmoment, key) in klantContactmomenten"
+											:key="key"
+											:name="getName(contactMomenten[i].klant)"
+											:bold="false"
+											:details="klantContactmoment.startDate"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="selectedContactMoment === klantContactmoment.id"
+											:force-display-actions="true"
+											@click="setSelectedContactMoment(klantContactmoment.id)">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+											<template #subname>
+												{{ new Date(klantContactmoment.startDate).toLocaleString() }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen contactmomenten gevonden">
+										<template #description>
+											Er zijn geen contactmomenten gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Zaken ${contactMomenten[i].klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
+									<div v-if="zaken.length">
+										<NcListItem v-for="(zaak, key) in zaken"
+											:key="key"
+											:name="zaak.identificatie"
+											:bold="false"
+											:details="zaak.startdatum"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="selectedZaak === zaak.id"
+											:force-display-actions="true"
+											@click="setSelectedZaak(zaak.id)">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+											<template #subname>
+												{{ zaak.omschrijving }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
+										<template #description>
+											Er zijn geen zaken gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Taken ${contactMomenten[i].klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
+									<div v-if="taken.length">
+										<NcListItem v-for="(taak, key) in taken"
+											:key="key"
+											:name="taak.title"
+											:bold="false"
+											:details="taak.status"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="selectedTaak === taak.id"
+											:force-display-actions="true"
+											@click="setSelectedTaak(taak.id)">
+											<template #icon>
+												<CalendarMonthOutline :size="44" />
+											</template>
+
+											<template #subname>
+												{{ taak.omschrijving }}
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
+										<template #description>
+											Er zijn geen taken gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+								<BTab :title="`Producten ${contactMomenten[selectedContactMoment].klant ? (contactMomenten[selectedContactMoment].klant?.producten?.length ? `(${contactMomenten[selectedContactMoment].klant?.producten?.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[selectedContactMoment].klant?.producten?.length">
+										<NcListItem v-for="(product, key) in contactMomenten[selectedContactMoment].klant.producten"
+											:key="key"
+											:name="product.naam ?? 'N/A'"
+											:bold="false"
+											:details="product.omschrijving ?? 'N/A'"
+											:disabled="loading"
+											:loading="fetchLoading"
+											:active="selectedProduct === product.id"
+											:force-display-actions="true"
+											@click="setSelectedProduct(product.id)">
+											<template #icon>
+												<BriefcaseAccountOutline :size="44" />
+											</template>
+										</NcListItem>
+									</div>
+									<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
+										<template #description>
+											Er zijn geen producten gevonden voor deze klant.
+										</template>
+									</NcEmptyContent>
+								</BTab>
+							</BTabs>
+						</div>
+
+						<SearchKlantModal v-if="searchKlantModalOpen"
+							:dashboard-widget="true"
+							:starting-type="startingType"
+							@selected-klant="fetchKlantData($event)"
+							@close-modal="closeSearchKlantModal" />
 					</div>
-				</div>
-				<div v-if="isView" class="statusContainer">
-					<div v-if="contactMoment.status">
-						Status: {{ contactMoment.status }}
+					<NcButton
+						v-if="tabs.length > 1"
+						@click="closeTab(i)">
+						Close tab
+					</NcButton>
+				</BTab>
+				<template #tabs-end>
+					<BNavItem class="newTabButton"
+						role="presentation"
+						href="#"
+						@click.prevent="newTab">
+						<Plus :size="20" /> Nieuw contactmoment
+					</BNavItem>
+				</template>
+				<template #empty>
+					<div class="text-center text-muted">
+						There are no open tabs<br>
+						Open a new tab using the <b>+</b> button above.
 					</div>
-					<div v-if="contactMoment.startDate">
-						Start datum: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
+				</template>
+			</BTabs>
+		</div>
+		<div v-if="isView">
+			<NcNoteCard v-if="success" type="success">
+				<p>Contactmoment succesvol opgeslagen</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+
+			<div v-if="!success">
+				<div class="headerContainer">
+					<div class="personInfoContainer">
+						<NcNoteCard type="info" class="noteCard">
+							<template #default>
+								<div v-if="klant">
+									{{ `${getSex(klant)} ${getName(klant)}` }}
+									<div v-if="klant?.type === 'persoon'" class="flexContainer">
+										<div>
+											Geboortedatum: {{ getValidISOstring(klant?.geboortedatum) ? new Date(klant?.geboortedatum).toLocaleDateString() : 'N/A' }}
+										</div>
+										<div>
+											Geboorteplaats: {{ klant?.plaats ?? 'N/A' }}
+										</div>
+									</div>
+									<div v-if="klant?.type === 'organisatie'" class="flexContainer">
+										<div>
+											KVK: {{ klant?.kvkNummer ?? 'N/A' }}
+										</div>
+										<div>
+											Locatie: {{ klant?.postcode ?? 'N/A' }} {{ klant?.straatnaam ?? 'N/A' }}
+										</div>
+									</div>
+								</div>
+								<div v-else>
+									Geen klant geselecteerd
+								</div>
+							</template>
+						</NcNoteCard>
 					</div>
-				</div>
-			</div>
-
-			<div v-if="!success" class="form-group">
-				<NcTextArea :value.sync="contactMoment.notitie"
-					label="Notitie"
-					:disabled="loading"
-					:loading="fetchLoading"
-					placeholder="Notitie" />
-			</div>
-			<div class="tabContainer">
-				<BTabs content-class="mt-3" justified>
-					<BTab :title="`Zaken ${klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
-						<div v-if="zaken.length">
-							<NcListItem v-for="(zaak, key) in zaken"
-								:key="key"
-								:name="zaak.identificatie"
-								:bold="false"
-								:details="zaak.startdatum"
+					<div v-if="!klant" class="buttonsContainer">
+						<div>
+							<NcButton
 								:disabled="loading"
 								:loading="fetchLoading"
-								:active="selectedZaak === zaak.id"
-								:force-display-actions="true"
-								@click="setSelectedZaak(zaak.id)">
+								type="primary"
+								@click="openSearchKlantModal('persoon')">
 								<template #icon>
-									<BriefcaseAccountOutline :size="44" />
+									<Plus :size="20" />
 								</template>
-								<template #subname>
-									{{ zaak.omschrijving }}
-								</template>
-							</NcListItem>
+								Persoon zoeken
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
-							<template #description>
-								Er zijn geen zaken gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-					<BTab :title="`Taken ${klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
-						<div v-if="taken.length">
-							<NcListItem v-for="(taak, key) in taken"
-								:key="key"
-								:name="taak.title"
-								:bold="false"
-								:details="taak.status"
+						<div class="orContainer">
+							of
+						</div>
+						<div>
+							<NcButton
 								:disabled="loading"
 								:loading="fetchLoading"
-								:active="selectedTaak === taak.id"
-								:force-display-actions="true"
-								@click="setSelectedTaak(taak.id)">
+								type="primary"
+								@click="openSearchKlantModal('organisatie')">
 								<template #icon>
-									<CalendarMonthOutline :size="44" />
+									<Plus :size="20" />
 								</template>
-
-								<template #subname>
-									{{ taak.omschrijving }}
-								</template>
-							</NcListItem>
+								Organisatie zoeken
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
-							<template #description>
-								Er zijn geen taken gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-					<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
-						<div v-if="klant?.producten?.length">
-							<NcListItem v-for="(product, key) in klant.producten"
-								:key="key"
-								:name="product.naam ?? 'N/A'"
-								:bold="false"
-								:details="product.omschrijving ?? 'N/A'"
+					</div>
+
+					<div v-if="klant && !isView" class="buttonsContainer">
+						<div>
+							<NcButton
 								:disabled="loading"
 								:loading="fetchLoading"
-								:active="selectedProduct === product.id"
-								:force-display-actions="true"
-								@click="setSelectedProduct(product.id)">
+								type="primary"
+								@click="klant = null">
 								<template #icon>
-									<BriefcaseAccountOutline :size="44" />
+									<Minus :size="20" />
 								</template>
-							</NcListItem>
+								Klant ontkoppelen
+							</NcButton>
 						</div>
-						<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
-							<template #description>
-								Er zijn geen producten gevonden voor deze klant.
-							</template>
-						</NcEmptyContent>
-					</BTab>
-				</BTabs>
-			</div>
+					</div>
+					<div v-if="isView" class="statusContainer">
+						<div v-if="contactMoment.status">
+							Status: {{ contactMoment.status }}
+						</div>
+						<div v-if="contactMoment.startDate">
+							Start datum: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
+						</div>
+					</div>
+				</div>
+
+				<div v-if="!success" class="form-group">
+					<NcTextArea :value.sync="contactMoment.notitie"
+						label="Notitie"
+						:disabled="loading"
+						:loading="fetchLoading"
+						placeholder="Notitie" />
+				</div>
+				<div class="tabContainer">
+					<BTabs content-class="mt-3" justified>
+						<BTab :title="`Contactmomenten ${klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
+							<div v-if="klantContactmomenten.length">
+								<NcListItem v-for="(klantContactmoment, key) in klantContactmomenten"
+									:key="key"
+									:name="getName(klant)"
+									:bold="false"
+									:details="klantContactmoment.startDate"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedContactMoment === klantContactmoment.id"
+									:force-display-actions="true"
+									@click="setSelectedContactMoment(klantContactmoment.id)">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ new Date(klantContactmoment.startDate).toLocaleString() }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="closeContactMoment">
+											<template #icon>
+												<ProgressClose :size="20" />
+											</template>
+											Sluiten
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen contactmomenten gevonden">
+								<template #description>
+									Er zijn geen contactmomenten gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Zaken ${klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
+							<div v-if="zaken.length">
+								<NcListItem v-for="(zaak, key) in zaken"
+									:key="key"
+									:name="zaak.identificatie"
+									:bold="false"
+									:details="zaak.startdatum"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedZaak === zaak.id"
+									:force-display-actions="true"
+									@click="setSelectedZaak(zaak.id)">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+									<template #subname>
+										{{ zaak.omschrijving }}
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
+								<template #description>
+									Er zijn geen zaken gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Taken ${klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
+							<div v-if="taken.length">
+								<NcListItem v-for="(taak, key) in taken"
+									:key="key"
+									:name="taak.title"
+									:bold="false"
+									:details="taak.status"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedTaak === taak.id"
+									:force-display-actions="true"
+									@click="setSelectedTaak(taak.id)">
+									<template #icon>
+										<CalendarMonthOutline :size="44" />
+									</template>
+
+									<template #subname>
+										{{ taak.omschrijving }}
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
+								<template #description>
+									Er zijn geen taken gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+						<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
+							<div v-if="klant?.producten?.length">
+								<NcListItem v-for="(product, key) in klant.producten"
+									:key="key"
+									:name="product.naam ?? 'N/A'"
+									:bold="false"
+									:details="product.omschrijving ?? 'N/A'"
+									:disabled="loading"
+									:loading="fetchLoading"
+									:active="selectedProduct === product.id"
+									:force-display-actions="true"
+									@click="setSelectedProduct(product.id)">
+									<template #icon>
+										<BriefcaseAccountOutline :size="44" />
+									</template>
+								</NcListItem>
+							</div>
+							<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
+								<template #description>
+									Er zijn geen producten gevonden voor deze klant.
+								</template>
+							</NcEmptyContent>
+						</BTab>
+					</BTabs>
+				</div>
 
-			<SearchKlantModal v-if="searchKlantModalOpen"
-				:dashboard-widget="true"
-				:starting-type="startingType"
-				@selected-klant="fetchKlantData($event)"
-				@close-modal="closeSearchKlantModal" />
+				<SearchKlantModal v-if="searchKlantModalOpen"
+					:dashboard-widget="true"
+					:starting-type="startingType"
+					@selected-klant="fetchKlantData($event)"
+					@close-modal="closeSearchKlantModal" />
+			</div>
 		</div>
 		<template #actions>
 			<NcButton
@@ -229,7 +504,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</template>
 					Zaak starten
 				</NcActionButton>
-				<NcActionButton :disabled="contactMoment.status === 'gesloten'" @click="closeContactMoment">
+				<NcActionButton v-if="isView" :disabled="contactMoment.status === 'gesloten'" @click="() => (contactMoment.status = 'gesloten')">
 					<template #icon>
 						<BriefcaseAccountOutline :size="20" />
 					</template>
@@ -239,9 +514,9 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			<NcButton
 				v-if="!isView"
 				type="primary"
-				:disabled="!klant || loading || success || fetchLoading"
+				:disabled="!contactMomenten[selectedContactMoment].klant || loading || success || fetchLoading"
 				:loading="loading"
-				@click="addContactMoment()">
+				@click="addContactMoment(selectedContactMoment)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
 					<ContentSaveOutline v-else :size="20" />
@@ -267,9 +542,10 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 <script>
 // Components
-import { BTabs, BTab } from 'bootstrap-vue'
+import { BTabs, BTab, BNavItem } from 'bootstrap-vue'
 import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, NcListItem, NcActionButton, NcEmptyContent } from '@nextcloud/vue'
 
+import getValidISOstring from '../../services/getValidISOstring.js'
 // Forms
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
 import EditTaak from '../../modals/taken/EditTaak.vue'
@@ -283,7 +559,7 @@ 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 getValidISOstring from '../../services/getValidISOstring.js'
+import ProgressClose from 'vue-material-design-icons/ProgressClose.vue'
 
 export default {
 	name: 'ContactMomentenForm',
@@ -297,6 +573,9 @@ export default {
 		NcActionButton,
 		NcEmptyContent,
 		EditTaakForm: EditTaak,
+		BTabs,
+		BTab,
+		BNavItem,
 		// Icons
 		Plus,
 		BriefcaseAccountOutline,
@@ -342,12 +621,28 @@ export default {
 				notitie: '',
 				status: 'open',
 				startDate: null,
+				klant: null,
+				selectedZaak: null,
+				selectedTaak: null,
+				selectedProduct: null,
 			},
 			klantenLoading: false,
 			zaken: [],
 			taken: [],
 			berichten: [],
-			contactMomenten: [],
+			klantContactmomenten: [],
+			contactMomenten: {
+				1: {
+					notitie: '',
+					status: 'open',
+					startDate: null,
+					klant: null,
+					selectedZaak: null,
+					selectedTaak: null,
+					selectedProduct: null,
+				},
+			},
+			selectedContactMoment: 1,
 			auditTrails: [],
 			klant: null,
 			searchKlantModalOpen: false,
@@ -358,6 +653,9 @@ export default {
 			taakFormOpen: false,
 			taakClientType: 'both',
 			zaakFormOpen: false,
+
+			tabs: [1],
+			tabCounter: 1,
 		}
 	},
 	mounted() {
@@ -372,6 +670,33 @@ export default {
 		}
 	},
 	methods: {
+
+		closeTab(x) {
+			for (let i = 0; i < this.tabs.length; i++) {
+				if (this.tabs[i] === x) {
+					this.tabs.splice(i, 1)
+				}
+			}
+		},
+		newTab() {
+			console.log(this.tabCounter + 1)
+			const index = this.tabCounter + 1
+			this.contactMomenten = {
+				...this.contactMomenten,
+				[index]: {
+					notitie: '',
+					status: 'open',
+					startDate: null,
+					klant: null,
+					selectedZaak: null,
+					selectedTaak: null,
+					selectedProduct: null,
+				},
+			}
+			this.tabs.push(index)
+			this.tabCounter = this.tabCounter + 1
+		},
+
 		async fetchData(id) {
 			this.fetchLoading = true
 
@@ -394,6 +719,31 @@ export default {
 			this.fetchLoading = false
 		},
 
+		test(contactmoment) {
+			console.log(contactmoment)
+		},
+
+		test1(event) {
+			this.selectedContactMoment = Object.keys(this.contactMomenten).length + 1
+			this.contactMomenten = {
+				...this.contactMomenten,
+				[Object.keys(this.contactMomenten).length + 1]: {
+					notitie: '',
+					status: 'open',
+					startDate: null,
+					klant: null,
+					selectedZaak: null,
+					selectedTaak: null,
+					selectedProduct: null,
+				},
+			}
+		},
+
+		test2(i) {
+			this.selectedContactMoment = i
+			this.contactMoment = this.contactMomenten[i]
+		},
+
 		// Modal functions
 		closeModalFromButton() {
 			setTimeout(() => {
@@ -407,7 +757,11 @@ export default {
 		},
 
 		// Contactmoment functions
-		addContactMoment() {
+		addContactMoment(i) {
+
+			this.selectedContactMoment = i
+			this.contactMoment = this.contactMomenten[i]
+
 			this.loading = true
 
 			const endpoint = this.contactMomentId ? `contactmomenten/${this.contactMomentId}` : 'contactmomenten'
@@ -502,22 +856,29 @@ export default {
 		async fetchKlantData(id) {
 			try {
 				const klantResponse = await fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
-				this.klant = await klantResponse.json()
+				// ifselectedContactMoment
+				if (this.isView) {
+					this.klant = await klantResponse.json()
+				} else {
+					this.contactMomenten[this.selectedContactMoment].klant = await klantResponse.json()
+				}
 
 				// fetch all data in parallel
-				const [zakenRes, takenRes, berichtenRes, auditTrailRes] = await Promise.all([
+				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`),
 				])
 
 				// parse all data
-				const [zakenData, takenData, berichtenData, auditTrailData] = await Promise.all([
+				const [zakenData, takenData, berichtenData, auditTrailData, contactMomentenData] = await Promise.all([
 					zakenRes.json(),
 					takenRes.json(),
 					berichtenRes.json(),
 					auditTrailRes.json(),
+					contactMomentenRes.json(),
 				])
 
 				// set data
@@ -533,6 +894,9 @@ export default {
 				if (Array.isArray(auditTrailData)) {
 					this.auditTrails = auditTrailData
 				}
+				if (Array.isArray(contactMomentenData.results)) {
+					this.klantContactmomenten = contactMomentenData.results
+				}
 
 			} catch (error) {
 				console.error('Error in fetchKlantData:', error)
@@ -541,6 +905,8 @@ export default {
 		},
 
 		getName(klant) {
+			if (!klant) return
+
 			if (klant.type === 'persoon') {
 				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
 			}
@@ -621,6 +987,12 @@ div[class='modal-container']:has(.ContactMomentenForm) {
     margin-block-end: var(--zaa-margin-20);
 }
 
+.newTabButton > a {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 .modalButtonsContainer {
     display: flex;
     justify-content: flex-end;
diff --git a/src/views/contactMomenten/ContactMomentDetails.vue b/src/views/contactMomenten/ContactMomentDetails.vue
index d27f775..79e5d53 100644
--- a/src/views/contactMomenten/ContactMomentDetails.vue
+++ b/src/views/contactMomenten/ContactMomentDetails.vue
@@ -97,7 +97,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 							</div>
 							<NcEmptyContent v-else icon="icon-history" title="Geen audit trail gevonden">
 								<template #description>
-									Er is geen audit trail gevonden voor deze bericht.
+									Er is geen audit trail gevonden voor dit contactmoment.
 								</template>
 							</NcEmptyContent>
 						</BTab>

From e1b56fe24f3d3bb4ceae4237d527c3a5fb7c0d13 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 17 Dec 2024 18:35:43 +0100
Subject: [PATCH 2/2] Added multiple contactmoment functionality

---
 .../contactMomenten/ContactMomentenForm.vue   | 224 ++++++++++--------
 1 file changed, 123 insertions(+), 101 deletions(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index f211f41..d296226 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -14,6 +14,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				<BTab v-for="i in tabs"
 					:key="'dyn-tab-' + i"
 					:title="'Contactmoment ' + `${contactMomenten[i].klant ? getName(contactMomenten[i].klant) : i}`"
+					:active="selectedContactMoment === i"
 					@click="selectedContactMoment = i">
 					<NcNoteCard v-if="success" type="success">
 						<p>Contactmoment succesvol opgeslagen</p>
@@ -115,18 +116,15 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 						</div>
 						<div class="tabContainer">
 							<BTabs content-class="mt-3" justified>
-								<BTab :title="`Contactmomenten ${contactMomenten[i].klant ? (klantContactmomenten.length ? `(${klantContactmomenten.length})` : '(0)') : ''}`">
-									<div v-if="klantContactmomenten.length">
-										<NcListItem v-for="(klantContactmoment, key) in klantContactmomenten"
+								<BTab :title="`Contactmomenten ${contactMomenten[i].klant ? (contactMomenten[i].klantContactmomenten?.length ? `(${contactMomenten[i].klantContactmomenten.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].klantContactmomenten?.length">
+										<NcListItem v-for="(klantContactmoment, key) in contactMomenten[i].klantContactmomenten"
 											:key="key"
 											:name="getName(contactMomenten[i].klant)"
 											:bold="false"
-											:details="klantContactmoment.startDate"
 											:disabled="loading"
 											:loading="fetchLoading"
-											:active="selectedContactMoment === klantContactmoment.id"
-											:force-display-actions="true"
-											@click="setSelectedContactMoment(klantContactmoment.id)">
+											:force-display-actions="true">
 											<template #icon>
 												<BriefcaseAccountOutline :size="44" />
 											</template>
@@ -141,18 +139,18 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 										</template>
 									</NcEmptyContent>
 								</BTab>
-								<BTab :title="`Zaken ${contactMomenten[i].klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
-									<div v-if="zaken.length">
-										<NcListItem v-for="(zaak, key) in zaken"
+								<BTab :title="`Zaken ${contactMomenten[i].klant ? (contactMomenten[i].zaken?.length ? `(${contactMomenten[i].zaken.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].zaken?.length">
+										<NcListItem v-for="(zaak, key) in contactMomenten[i].zaken"
 											:key="key"
 											:name="zaak.identificatie"
 											:bold="false"
 											:details="zaak.startdatum"
 											:disabled="loading"
 											:loading="fetchLoading"
-											:active="selectedZaak === zaak.id"
+											:active="contactMomenten[i].selectedZaak === zaak.id"
 											:force-display-actions="true"
-											@click="setSelectedZaak(zaak.id)">
+											@click="setSelectedZaak(i, zaak.id)">
 											<template #icon>
 												<BriefcaseAccountOutline :size="44" />
 											</template>
@@ -167,18 +165,18 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 										</template>
 									</NcEmptyContent>
 								</BTab>
-								<BTab :title="`Taken ${contactMomenten[i].klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
-									<div v-if="taken.length">
-										<NcListItem v-for="(taak, key) in taken"
+								<BTab :title="`Taken ${contactMomenten[i].klant ? (contactMomenten[i].taken?.length ? `(${contactMomenten[i].taken.length})` : '(0)') : ''}`">
+									<div v-if="contactMomenten[i].taken?.length">
+										<NcListItem v-for="(taak, key) in contactMomenten[i].taken"
 											:key="key"
 											:name="taak.title"
 											:bold="false"
 											:details="taak.status"
 											:disabled="loading"
 											:loading="fetchLoading"
-											:active="selectedTaak === taak.id"
+											:active="contactMomenten[i].selectedTaak === taak.id"
 											:force-display-actions="true"
-											@click="setSelectedTaak(taak.id)">
+											@click="setSelectedTaak(i, taak.id)">
 											<template #icon>
 												<CalendarMonthOutline :size="44" />
 											</template>
@@ -203,7 +201,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 											:details="product.omschrijving ?? 'N/A'"
 											:disabled="loading"
 											:loading="fetchLoading"
-											:active="selectedProduct === product.id"
+											:active="contactMomenten[i].selectedProduct === product.id"
 											:force-display-actions="true"
 											@click="setSelectedProduct(product.id)">
 											<template #icon>
@@ -227,7 +225,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 							@close-modal="closeSearchKlantModal" />
 					</div>
 					<NcButton
-						v-if="tabs.length > 1"
+						v-if="tabs.length > 1 && !success"
 						@click="closeTab(i)">
 						Close tab
 					</NcButton>
@@ -240,12 +238,6 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 						<Plus :size="20" /> Nieuw contactmoment
 					</BNavItem>
 				</template>
-				<template #empty>
-					<div class="text-center text-muted">
-						There are no open tabs<br>
-						Open a new tab using the <b>+</b> button above.
-					</div>
-				</template>
 			</BTabs>
 		</div>
 		<div v-if="isView">
@@ -357,24 +349,13 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:bold="false"
 									:details="klantContactmoment.startDate"
 									:disabled="loading"
-									:loading="fetchLoading"
-									:active="selectedContactMoment === klantContactmoment.id"
-									:force-display-actions="true"
-									@click="setSelectedContactMoment(klantContactmoment.id)">
+									:force-display-actions="true">
 									<template #icon>
 										<BriefcaseAccountOutline :size="44" />
 									</template>
 									<template #subname>
 										{{ new Date(klantContactmoment.startDate).toLocaleString() }}
 									</template>
-									<template #actions>
-										<NcActionButton @click="closeContactMoment">
-											<template #icon>
-												<ProgressClose :size="20" />
-											</template>
-											Sluiten
-										</NcActionButton>
-									</template>
 								</NcListItem>
 							</div>
 							<NcEmptyContent v-else icon="icon-folder" title="Geen contactmomenten gevonden">
@@ -393,8 +374,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:disabled="loading"
 									:loading="fetchLoading"
 									:active="selectedZaak === zaak.id"
-									:force-display-actions="true"
-									@click="setSelectedZaak(zaak.id)">
+									:force-display-actions="true">
 									<template #icon>
 										<BriefcaseAccountOutline :size="44" />
 									</template>
@@ -419,8 +399,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:disabled="loading"
 									:loading="fetchLoading"
 									:active="selectedTaak === taak.id"
-									:force-display-actions="true"
-									@click="setSelectedTaak(taak.id)">
+									:force-display-actions="true">
 									<template #icon>
 										<CalendarMonthOutline :size="44" />
 									</template>
@@ -446,8 +425,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:disabled="loading"
 									:loading="fetchLoading"
 									:active="selectedProduct === product.id"
-									:force-display-actions="true"
-									@click="setSelectedProduct(product.id)">
+									:force-display-actions="true">
 									<template #icon>
 										<BriefcaseAccountOutline :size="44" />
 									</template>
@@ -504,9 +482,9 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</template>
 					Zaak starten
 				</NcActionButton>
-				<NcActionButton v-if="isView" :disabled="contactMoment.status === 'gesloten'" @click="() => (contactMoment.status = 'gesloten')">
+				<NcActionButton v-if="isView" :disabled="contactMoment.status === 'gesloten'" @click="closeContactMoment(contactMoment.id)">
 					<template #icon>
-						<BriefcaseAccountOutline :size="20" />
+						<ProgressClose :size="20" />
 					</template>
 					Sluit Contactmoment
 				</NcActionButton>
@@ -544,6 +522,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 // Components
 import { BTabs, BTab, BNavItem } from 'bootstrap-vue'
 import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, NcListItem, NcActionButton, NcEmptyContent } from '@nextcloud/vue'
+import _ from 'lodash'
 
 import getValidISOstring from '../../services/getValidISOstring.js'
 // Forms
@@ -551,6 +530,9 @@ import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
 import EditTaak from '../../modals/taken/EditTaak.vue'
 import ZaakForm from '../../modals/zaken/ZaakForm.vue'
 
+// Entities
+import { ContactMoment } from '../../entities/index.js'
+
 // Icons
 import Plus from 'vue-material-design-icons/Plus.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
@@ -640,6 +622,11 @@ export default {
 					selectedZaak: null,
 					selectedTaak: null,
 					selectedProduct: null,
+					selectedKlantContactMoment: null,
+					zaken: [],
+					taken: [],
+					berichten: [],
+					klantContactmomenten: [],
 				},
 			},
 			selectedContactMoment: 1,
@@ -649,6 +636,7 @@ export default {
 			selectedZaak: null,
 			selectedTaak: null,
 			selectedProduct: null,
+			selectedKlantContactMoment: null,
 			startingType: 'all',
 			taakFormOpen: false,
 			taakClientType: 'both',
@@ -679,7 +667,6 @@ export default {
 			}
 		},
 		newTab() {
-			console.log(this.tabCounter + 1)
 			const index = this.tabCounter + 1
 			this.contactMomenten = {
 				...this.contactMomenten,
@@ -691,6 +678,7 @@ export default {
 					selectedZaak: null,
 					selectedTaak: null,
 					selectedProduct: null,
+					selectedKlantContactMoment: null,
 				},
 			}
 			this.tabs.push(index)
@@ -719,31 +707,6 @@ export default {
 			this.fetchLoading = false
 		},
 
-		test(contactmoment) {
-			console.log(contactmoment)
-		},
-
-		test1(event) {
-			this.selectedContactMoment = Object.keys(this.contactMomenten).length + 1
-			this.contactMomenten = {
-				...this.contactMomenten,
-				[Object.keys(this.contactMomenten).length + 1]: {
-					notitie: '',
-					status: 'open',
-					startDate: null,
-					klant: null,
-					selectedZaak: null,
-					selectedTaak: null,
-					selectedProduct: null,
-				},
-			}
-		},
-
-		test2(i) {
-			this.selectedContactMoment = i
-			this.contactMoment = this.contactMomenten[i]
-		},
-
 		// Modal functions
 		closeModalFromButton() {
 			setTimeout(() => {
@@ -767,6 +730,14 @@ export default {
 			const endpoint = this.contactMomentId ? `contactmomenten/${this.contactMomentId}` : 'contactmomenten'
 			const method = this.contactMomentId ? 'PUT' : 'POST'
 
+			const contactMomentCopy = _.cloneDeep(this.contactMoment)
+
+			delete contactMomentCopy.taken
+			delete contactMomentCopy.zaken
+			delete contactMomentCopy.berichten
+			delete contactMomentCopy.klantContactmomenten
+			delete contactMomentCopy.auditTrails
+
 			fetch(
 				`/index.php/apps/zaakafhandelapp/api/${endpoint}`,
 				{
@@ -775,14 +746,14 @@ export default {
 						'Content-Type': 'application/json',
 					},
 					body: JSON.stringify({
-						...this.contactMoment,
-						notitie: this.contactMoment.notitie,
-						klant: this.klant?.id ?? '',
-						zaak: this.selectedZaak ?? '',
-						taak: this.selectedTaak ?? '',
-						product: this.selectedProduct ?? '',
-						status: this.contactMoment.status === 'gesloten' ? 'gesloten' : 'open',
-						startDate: this.contactMoment.startDate ?? new Date().toISOString(),
+						...contactMomentCopy,
+						notitie: contactMomentCopy.notitie,
+						klant: contactMomentCopy.klant?.id ?? '',
+						zaak: contactMomentCopy.selectedZaak ?? '',
+						taak: contactMomentCopy.selectedTaak ?? '',
+						product: contactMomentCopy.selectedProduct ?? '',
+						status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
+						startDate: contactMomentCopy.startDate ?? new Date().toISOString(),
 					}),
 				},
 			)
@@ -805,10 +776,25 @@ export default {
 					this.success = true
 					this.loading = false
 
-					setTimeout(this.closeModal, 2000)
+					if (!this.dashboardWidget) {
+						setTimeout(() => {
+							this.closeModal()
+						}, 2000)
+					}
 
 					if (this.dashboardWidget === true) {
-						this.$emit('save-success')
+						setTimeout(() => {
+							this.closeTab(this.selectedContactMoment)
+							this.selectedContactMoment = 1
+							this.success = false
+							this.succesMessage = false
+						}, 2000)
+						if (this.tabs.length === 1) {
+							this.$emit('save-success')
+							setTimeout(() => {
+								this.closeModal()
+							}, 2000)
+						}
 					}
 				})
 				.catch((err) => {
@@ -848,9 +834,25 @@ export default {
 			this.fetchKlantData(this.klant.id)
 		},
 
-		closeContactMoment() {
-			this.contactMoment.status = 'gesloten'
-			if (this.isView) this.addContactMoment()
+		async closeContactMoment(id) {
+			const { data } = await contactMomentStore.getContactMoment(id)
+
+			if (data?.status === 'gesloten') {
+				console.info('Contactmoment is already closed')
+				return
+			}
+			const newContactMoment = new ContactMoment({
+				...data,
+				status: 'gesloten',
+			})
+
+			contactMomentStore.saveContactMoment(newContactMoment)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.closeModal()
+						this.$emit('save-success')
+					}
+				})
 		},
 
 		async fetchKlantData(id) {
@@ -883,19 +885,39 @@ export default {
 
 				// set data
 				if (Array.isArray(zakenData.results)) {
-					this.zaken = zakenData.results
+					if (this.isView) {
+						this.zaken = zakenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].zaken = zakenData.results
+					}
 				}
 				if (Array.isArray(takenData.results)) {
-					this.taken = takenData.results
+					if (this.isView) {
+						this.taken = takenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].taken = takenData.results
+					}
 				}
 				if (Array.isArray(berichtenData.results)) {
-					this.berichten = berichtenData.results
+					if (this.isView) {
+						this.berichten = berichtenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].berichten = berichtenData.results
+					}
 				}
 				if (Array.isArray(auditTrailData)) {
-					this.auditTrails = auditTrailData
+					if (this.isView) {
+						this.auditTrails = auditTrailData
+					} else {
+						this.contactMomenten[this.selectedContactMoment].auditTrails = auditTrailData
+					}
 				}
 				if (Array.isArray(contactMomentenData.results)) {
-					this.klantContactmomenten = contactMomentenData.results
+					if (this.isView) {
+						this.klantContactmomenten = contactMomentenData.results
+					} else {
+						this.contactMomenten[this.selectedContactMoment].klantContactmomenten = contactMomentenData.results
+					}
 				}
 
 			} catch (error) {
@@ -923,22 +945,22 @@ export default {
 		},
 
 		// Tabs
-		setSelectedZaak(zaak) {
-			if (this.selectedZaak === zaak) {
-				this.selectedZaak = null
-			} else { this.selectedZaak = zaak }
+		setSelectedZaak(id, zaak) {
+			if (this.contactMomenten[id].selectedZaak === zaak) {
+				this.contactMomenten[id].selectedZaak = null
+			} else { this.contactMomenten[id].selectedZaak = zaak }
 		},
 
-		setSelectedTaak(taak) {
-			if (this.selectedTaak === taak) {
-				this.selectedTaak = null
-			} else { this.selectedTaak = taak }
+		setSelectedTaak(id, taak) {
+			if (this.contactMomenten[id].selectedTaak === taak) {
+				this.contactMomenten[id].selectedTaak = null
+			} else { this.contactMomenten[id].selectedTaak = taak }
 		},
 
-		setSelectedProduct(product) {
-			if (this.selectedProduct === product) {
-				this.selectedProduct = null
-			} else { this.selectedProduct = product }
+		setSelectedProduct(id, product) {
+			if (this.contactMomenten[id].selectedProduct === product) {
+				this.contactMomenten[id].selectedProduct = null
+			} else { this.contactMomenten[id].selectedProduct = product }
 		},
 	},
 }