Merge pull request #114 from ConductionNL/feature/PC108-108/add-conta…

…ctmoment-to-taak

feature/PC108-108/add-contactmoment-to-taak

css/main.css

@@ -79,12 +79,12 @@
 }
 
 .detailGrid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 
 /* Modals */
-.form-group > *  {
+.form-group > * {
   margin-block-end: 10px;
 }
 
@@ -103,4 +103,4 @@
 .modalContent {
   margin: var(--zaa-margin-50);
   text-align: center;
-}
+}

src/entities/taak/taak.mock.ts

@@ -14,6 +14,7 @@ export const mockTaakData = (): TTaak[] => [
 		actie: 'Voorbereiden van auditchecklist, uitvoeren van audits, rapporteren van bevindingen, aanbevelen van verbeteringen.',
 		klant: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
 		medewerker: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
+		contactmoment: 'urn:uuid:6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
 	},
 ]
 

src/entities/taak/taak.ts

@@ -14,6 +14,7 @@ export class Taak implements TTaak {
 	public toelichting: string
 	public actie: string
 	public klant: string
+	public contactmoment: string
 	public medewerker: string
 	constructor(source: TTaak) {
 		this.id = source.id || ''
@@ -27,6 +28,7 @@ export class Taak implements TTaak {
 		this.actie = source.actie || ''
 		this.klant = source.klant || ''
 		this.medewerker = source.medewerker || ''
+		this.contactmoment = source.contactmoment || ''
 	}
 
 	public validate(): SafeParseReturnType<TTaak, unknown> {
@@ -42,6 +44,7 @@ export class Taak implements TTaak {
 			actie: z.string(),
 			klant: z.string(),
 			medewerker: z.string(),
+			contactmoment: z.string().nullable(),
 		})
 
 		return schema.safeParse(this)

src/entities/taak/taak.types.ts

@@ -10,6 +10,7 @@ export type TTaak = {
     onderwerp: string;
     toelichting: string;
     actie: string;
-	klant: string
-	medewerker: string
+	klant: string;
+	medewerker: string;
+	contactmoment: string;
 }

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -130,7 +130,9 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 											:bold="false"
 											:disabled="loading"
 											:loading="fetchLoading"
-											:force-display-actions="true">
+											:active="contactMomenten[i].selectedKlantContactMoment === klantContactmoment.id"
+											:force-display-actions="true"
+											@click="setSelectedContactMoment(i, klantContactmoment.id)">
 											<template #icon>
 												<BriefcaseAccountOutline :size="44" />
 											</template>
@@ -364,6 +366,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 									:bold="false"
 									:details="klantContactmoment.startDate"
 									:disabled="loading"
+									:active="selectedKlantContactMoment === klantContactmoment.id"
 									:force-display-actions="true">
 									<template #icon>
 										<BriefcaseAccountOutline :size="44" />
@@ -506,6 +509,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					Zaak starten
 				</NcActionButton>
 				<NcActionButton v-if="isView"
+					:close-after-click="true"
 					:disabled="contactMoment.status === 'gesloten'"
 					@click="closeContactMoment(contactMoment.id)">
 					<template #icon>
@@ -639,6 +643,7 @@ export default {
 				selectedZaak: null,
 				selectedTaak: null,
 				selectedProduct: null,
+				selectedKlantContactMoment: null,
 			},
 			klantenLoading: false,
 			zaken: [],
@@ -659,16 +664,17 @@ export default {
 					taken: [],
 					berichten: [],
 					klantContactmomenten: [],
+					addedTaken: [],
 				},
 			},
 			selectedContactMoment: 1,
 			auditTrails: [],
 			klant: null,
 			searchKlantModalOpen: false,
 			selectedZaak: null,
+			selectedKlantContactMoment: null,
 			selectedTaak: null,
 			selectedProduct: null,
-			selectedKlantContactMoment: null,
 			startingType: 'all',
 			taakFormOpen: false,
 			taakClientType: 'both',
@@ -677,6 +683,9 @@ export default {
 			viewContactMomentId: null,
 			isContactMomentFormOpen: false,
 
+			klantTaakHover: false,
+			zaakHover: false,
+
 			tabs: [1],
 			tabCounter: 1,
 		}
@@ -714,6 +723,11 @@ export default {
 					selectedTaak: null,
 					selectedProduct: null,
 					selectedKlantContactMoment: null,
+					zaken: [],
+					taken: [],
+					berichten: [],
+					klantContactmomenten: [],
+					addedTaken: [],
 				},
 			}
 			this.tabs.push(index)
@@ -734,6 +748,7 @@ export default {
 			}
 
 			this.selectedZaak = data.zaak
+			this.selectedKlantContactMoment = data.contactmoment
 			this.selectedTaak = data.taak
 			this.selectedProduct = data.product
 
@@ -753,7 +768,6 @@ export default {
 
 			this.$emit('close-modal')
 		},
-
 		// Contactmoment functions
 		addContactMoment(i) {
 
@@ -762,37 +776,46 @@ export default {
 
 			this.loading = true
 
-			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}`,
-				{
-					method,
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						...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(),
-					}),
-				},
-			)
+			delete contactMomentCopy.addedTaken
+
+			contactMomentStore.saveContactMoment({
+				...contactMomentCopy,
+				notitie: contactMomentCopy.notitie,
+				klant: contactMomentCopy.klant?.id ?? '',
+				zaak: contactMomentCopy.selectedZaak ?? '',
+				taak: contactMomentCopy.selectedTaak ?? '',
+				product: contactMomentCopy.selectedProduct ?? '',
+				contactmoment: contactMomentCopy.selectedKlantContactMoment,
+				status: contactMomentCopy.status === 'gesloten' ? 'gesloten' : 'open',
+				startDate: contactMomentCopy.startDate ?? new Date().toISOString(),
+			})
 				.then((response) => {
+					this.contactMoment.addedTaken.forEach(taak => {
+						fetch(`/index.php/apps/zaakafhandelapp/api/taken/${taak}`, {
+							method: 'GET',
+						})
+							.then(response => response.json())
+							.then(data => {
+								fetch(`/index.php/apps/zaakafhandelapp/api/taken/${data.id}`, {
+									method: 'PUT',
+									headers: {
+										'Content-Type': 'application/json',
+									},
+									body: JSON.stringify({
+										...data,
+										contactmoment: response.data.id,
+									}),
+								})
+							})
+					})
+
 					if (this.isView) {
 						response.json().then(data => {
 							this.contactMoment = data
@@ -835,6 +858,7 @@ export default {
 				.catch((err) => {
 					console.error(err)
 				})
+
 		},
 
 		// Search functions
@@ -854,9 +878,12 @@ export default {
 			taakStore.setTaakItem(null)
 		},
 
-		closeTaakForm() {
+		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.taakFormOpen = false
-			this.fetchKlantData(this.contactMomenten[this.selectedContactMoment].klant.id)
 		},
 
 		viewContactMoment(id) {
@@ -868,7 +895,7 @@ export default {
 
 		closeViewContactMomentModal() {
 			this.isContactMomentFormOpen = false
-			navigationStore.setViewModal(null)
+			navigationStore.setViewModal(false)
 		},
 
 		removeKlant(i) {
@@ -1038,6 +1065,11 @@ export default {
 		},
 
 		// Tabs
+		setSelectedContactMoment(id, contactMoment) {
+			if (this.contactMomenten[id].selectedKlantContactMoment === contactMoment) {
+				this.contactMomenten[id].selectedKlantContactMoment = null
+			} else { this.contactMomenten[id].selectedKlantContactMoment = contactMoment }
+		},
 		setSelectedZaak(id, zaak) {
 			if (this.contactMomenten[id].selectedZaak === zaak) {
 				this.contactMomenten[id].selectedZaak = null