changed information on customer card

ConductionNL · Dec 4, 2024 · afd8c2f · afd8c2f
1 parent dd0b976
commit afd8c2f
Showing 1 changed file with 35 additions and 16 deletions.
diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -18,24 +18,36 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 		<div v-if="!success">
 			<div class="headerContainer">
-				<NcNoteCard type="info" class="noteCard">
-					<template #default>
-						<div v-if="klant">
-							{{ getName(klant) }}
-						</div>
-						<div v-else>
-							Geen klant geselecteerd
-						</div>
-						<div class="statusAndStartDateContainer">
-							<div v-if="contactMoment.status">
-								status: {{ contactMoment.status }}
+				<div class="personInfoContainer">
+					<NcNoteCard type="info" class="noteCard">
+						<template #default>
+							<div v-if="klant">
+								{{ `${getSex(klant)} ${getName(klant)}` }}
+							</div>
+							<div v-else>
+								Geen klant geselecteerd
 							</div>
-							<div v-if="contactMoment.startDate">
-								startDate: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
+							<div class="flexContainer">
+								<div>
+									Geboortedatum: {{ getValidISOstring(klant.geboortedatum) ? new Date(klant.geboortedatum).toLocaleDateString() : 'N/A' }}
+								</div>
+								<div>
+									Geboorteplaats: {{ klant.plaats ?? 'N/A' }}
+								</div>
 							</div>
+						</template>
+					</NcNoteCard>
+
+					<div class="flexContainer">
+						<div v-if="contactMoment.status">
+							status: {{ contactMoment.status }}
 						</div>
-					</template>
-				</NcNoteCard>
+						<div v-if="contactMoment.startDate">
+							startDate: {{ new Date(contactMoment.startDate).toLocaleDateString() }}
+						</div>
+					</div>
+				</div>
+
 				<div v-if="!klant" class="buttonsContainer">
 					<div>
 						<NcButton
@@ -244,6 +256,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'
 
 export default {
 	name: 'ContactMomentenForm',
@@ -462,6 +475,12 @@ export default {
 			}
 			return 'onbekend'
 		},
+		getSex(klant) {
+			if (klant.type === 'persoon') {
+				return `(${klant?.geslacht})`
+			}
+			return ''
+		},
 
 		// Tabs
 		setSelectedZaak(zaak) {
@@ -534,7 +553,7 @@ div[class='modal-container']:has(.ContactMomentenForm) {
     gap: var(--zaa-margin-10);
 }
 
-.statusAndStartDateContainer {
+.flexContainer {
 	display: flex;
 	gap: var(--zaa-margin-10);
 }