Merge pull request #58 from ConductionNL/feature/PC108-93/multiple-is…

…sues

feature/PC108-93/multiple-issues

src/entities/taak/taak.mock.ts

@@ -8,6 +8,7 @@ export const mockTaakData = (): TTaak[] => [
 		zaak: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
 		type: 'Audit',
 		status: 'verwerkt',
+		deadline: '2024-12-01T00:00:00.000Z',
 		onderwerp: 'Uitvoering van een interne audit om de naleving van kwaliteitsnormen te controleren.',
 		toelichting: 'Deze taak omvat het uitvoeren van een gedetailleerde interne audit van de bedrijfsprocessen om te controleren of alle afdelingen voldoen aan de vastgestelde kwaliteitsnormen. De bevindingen worden gedocumenteerd en er worden aanbevelingen gedaan voor verbeteringen.',
 		actie: 'Voorbereiden van auditchecklist, uitvoeren van audits, rapporteren van bevindingen, aanbevelen van verbeteringen.',

src/entities/taak/taak.ts

@@ -1,5 +1,6 @@
 import { SafeParseReturnType, z } from 'zod'
 import { TTaak, ZaakID } from './taak.types'
+import getValidISOstring from '../../services/getValidISOstring'
 
 export class Taak implements TTaak {
 
@@ -8,6 +9,7 @@ export class Taak implements TTaak {
 	public zaak: ZaakID
 	public type: string
 	public status: string
+	public deadline: string
 	public onderwerp: string
 	public toelichting: string
 	public actie: string
@@ -19,6 +21,7 @@ export class Taak implements TTaak {
 		this.zaak = source.zaak || ''
 		this.type = source.type || ''
 		this.status = source.status || ''
+		this.deadline = getValidISOstring(source.deadline)
 		this.onderwerp = source.onderwerp || ''
 		this.toelichting = source.toelichting || ''
 		this.actie = source.actie || ''
@@ -32,6 +35,7 @@ export class Taak implements TTaak {
 			zaak: z.string().min(1),
 			type: z.string().min(1),
 			status: z.string().min(1),
+			deadline: z.string().datetime().nullable(),
 			onderwerp: z.string().min(1),
 			toelichting: z.string(),
 			actie: z.string(),

src/entities/taak/taak.types.ts

@@ -6,6 +6,7 @@ export type TTaak = {
     zaak: ZaakID;
     type: string;
     status: string;
+    deadline: string;
     onderwerp: string;
     toelichting: string;
     actie: string;

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -322,37 +322,54 @@ export default {
 				.then(response => response.json())
 				.then(data => {
 					this.klant = data
-					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`)
 				})
+				.catch(error => {
+					console.error('Error fetching klant:', error)
+					throw error // if this one fails, fetching the rest is pointless
+				})
+
+			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`)
 				})
+				.catch(error => {
+					console.error('Error fetching klant zaken:', error)
+				})
+
+			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`)
 				})
+				.catch(error => {
+					console.error('Error fetching klant taken:', error)
+				})
+
+			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`)
 				})
+				.catch(error => {
+					console.error('Error fetching klant berichten:', error)
+				})
+
+			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)
+					console.error('Error fetching klant audit trail:', error)
 				})
 		},
 

src/modals/taken/EditTaak.vue

@@ -35,6 +35,14 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				input-label="Status"
 				required />
 
+			<div>
+				<p>Deadline</p>
+				<NcDateTimePicker
+					v-model="taakItem.deadline"
+					:clearable="true"
+					:disabled="loading" />
+			</div>
+
 			<NcTextField
 				:disabled="loading"
 				:value.sync="taakItem.onderwerp"
@@ -88,6 +96,7 @@ import {
 	NcDialog,
 	NcTextField,
 	NcTextArea,
+	NcDateTimePicker,
 	NcSelect,
 	NcLoadingIcon,
 	NcNoteCard,
@@ -103,6 +112,7 @@ export default {
 		NcDialog,
 		NcTextField,
 		NcTextArea,
+		NcDateTimePicker,
 		NcButton,
 		NcSelect,
 		NcLoadingIcon,
@@ -131,6 +141,7 @@ export default {
 				title: '',
 				type: '',
 				status: '',
+				deadline: new Date(),
 				onderwerp: '',
 				toelichting: '',
 			},
@@ -163,6 +174,7 @@ export default {
 					title: taakStore.taakItem.title || '',
 					type: taakStore.taakItem.type || '',
 					status: taakStore.taakItem.status || '',
+					deadline: new Date(taakStore.taakItem.deadline),
 					onderwerp: taakStore.taakItem.onderwerp || '',
 					toelichting: taakStore.taakItem.toelichting || '',
 					klant: klantStore.klantItem?.id || '',
@@ -191,6 +203,7 @@ export default {
 				title: '',
 				type: '',
 				status: '',
+				deadline: new Date(),
 				onderwerp: '',
 				toelichting: '',
 				klant: '',
@@ -229,6 +242,8 @@ export default {
 				await taakStore.saveTaak({
 					...this.taakItem,
 					klant: this.klanten.value?.id ?? '',
+					status: this.taakItem.status?.id ?? null,
+					deadline: this.taakItem.deadline.toISOString(),
 				}, this.dashboardWidget)
 				this.success = true
 				this.loading = false

src/services/getTheme.js

@@ -12,14 +12,12 @@
 export const getTheme = () => {
 	if (document.body.hasAttribute('data-theme-light')) {
 		return 'light'
-	}
-
-	if (document.body.hasAttribute('data-theme-dark')) {
+	} else if (document.body.hasAttribute('data-theme-dark')) {
+		return 'dark'
+	} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+		return 'light'
+	} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
 		return 'dark'
-	}
-
-	if (document.body.hasAttribute('data-theme-default')) {
-		return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
 	}
 	return 'light'
 }

src/services/getValidISOstring.js

@@ -0,0 +1,20 @@
+/**
+ * Converts a given date string or Date object to a valid ISO string.
+ *
+ * this function can double as a validator for ISO / date strings
+ *
+ * If the dateString is valid it will return the ISO string,
+ * if it is not a valid dateString it will return null.
+ *
+ * @param { string | Date } dateString The date string or Date object to be converted.
+ * @return { string | null } The ISO string representation of the date or null.
+ */
+export default function getValidISOstring(dateString) {
+	const date = new Date(dateString)
+
+	if (!isNaN(date.getTime())) {
+		return date.toISOString()
+	} else {
+		return null
+	}
+}

src/views/taken/TakenList.vue

@@ -36,8 +36,8 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					:name="taak?.title"
 					:force-display-actions="true"
 					:active="taakStore.taakItem?.id === taak?.id"
-					:details="'1h'"
-					:counter-number="44"
+					:details="taak.status"
+					:counter-number="taak.deadline ? new Date(taak.deadline).toLocaleDateString() : 'no deadline'"
 					@click="taakStore.setTaakItem(taak)">
 					<template #icon>
 						<CalendarMonthOutline :class="taakStore.taakItem?.id === taak.id && 'selectedZaakIcon'"

src/views/widgets/ContactMomentenWidget.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, contactMomentStore } from '../../store/store.js'
+import { navigationStore, contactMomentStore, klantStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -73,15 +73,27 @@ export default {
 	methods: {
 		fetchContactMomentItems() {
 			this.loading = true
-			contactMomentStore.refreshContactMomentenList()
-				.then(() => {
-					this.contactMomentItems = contactMomentStore.contactMomentenList.map(contactMoment => ({
+
+			Promise.all([
+				contactMomentStore.refreshContactMomentenList(),
+				klantStore.refreshKlantenList(),
+			])
+				.then(([contactMomentResponse, klantResponse]) => {
+					this.contactMomentItems = contactMomentResponse.entities.map(contactMoment => ({
 						id: contactMoment.id,
-						mainText: contactMoment.titel,
+						mainText: (() => { // this is a self calling function to get the klant name
+							const klant = klantResponse.entities.find(klant => klant.id === contactMoment.klant)
+							if (klant) {
+								const tussenvoegsel = klant.tussenvoegsel ? klant.tussenvoegsel + ' ' : ''
+								return `${klant.voornaam} ${tussenvoegsel}${klant.achternaam}`
+							}
+							return ''
+						})(),
 						subText: new Date(contactMoment.startDate).toLocaleString(),
 						avatarUrl: this.getItemIcon(),
 					}))
-
+				})
+				.finally(() => {
 					this.loading = false
 				})
 		},