Merge pull request #70 from ConductionNL/feature/PC108-77/geslacht-dr…

…opdown added dropdown for geslacht
ConductionNL · Dec 2, 2024 · 805fe9f · 805fe9f
2 parents 7c9eca3 + 9a5dd6d
commit 805fe9f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 16 deletions.
diff --git a/src/entities/klanten/klanten.mock.ts b/src/entities/klanten/klanten.mock.ts
@@ -10,7 +10,7 @@ export const mockKlantData = (): TKlant[] => [
 		achternaam: 'Doe',
 		bsn: '1234567890',
 		geboortedatum: '1990-01-01',
-		isMale: true,
+		geslacht: 'man',
 		land: 'Nederland',
 		telefoonnummer: '0612345678',
 		emailadres: '[email protected]',

diff --git a/src/entities/klanten/klanten.ts b/src/entities/klanten/klanten.ts
@@ -11,7 +11,7 @@ export class Klant implements TKlant {
 	public achternaam: string
 	public bsn: string
 	public geboortedatum: string
-	public isMale: boolean
+	public geslacht: "man" | "vrouw" | "overige"
 	public land: string
 
 	public telefoonnummer: string
@@ -42,7 +42,7 @@ export class Klant implements TKlant {
 		this.achternaam = source.achternaam || ''
 		this.bsn = source.bsn || ''
 		this.geboortedatum = source.geboortedatum || ''
-		this.isMale = source.isMale || false
+		this.geslacht = source.geslacht || null
 		this.land = source.land || ''
 		this.telefoonnummer = source.telefoonnummer || ''
 		this.emailadres = source.emailadres || ''
@@ -71,7 +71,7 @@ export class Klant implements TKlant {
 			achternaam: z.string(),
 			bsn: z.string(),
 			geboortedatum: z.string(),
-			isMale: z.boolean(),
+			geslacht: z.enum(["man", "vrouw", "overige"]).or(z.null()),
 			land: z.string(),
 			telefoonnummer: z.string(),
 			emailadres: z.string().email(),

diff --git a/src/entities/klanten/klanten.types.ts b/src/entities/klanten/klanten.types.ts
@@ -8,7 +8,7 @@ export type TKlant = {
     achternaam: string;
     bsn: string;
     geboortedatum: string;
-    isMale: boolean;
+    geslacht: 'man' | 'vrouw' | 'overige';
     land: string;
     telefoonnummer: string;
     emailadres: string;

diff --git a/src/modals/klanten/EditKlant.vue b/src/modals/klanten/EditKlant.vue
@@ -47,13 +47,18 @@ import { klantStore, navigationStore } from '../../store/store.js'
 					:disabled="loading"
 					input-label="Geboortedatum" />
 			</div>
-			<NcCheckboxRadioSwitch :checked.sync="klantItem.isMale">
-				Is een man?
-			</NcCheckboxRadioSwitch>
+
+			<NcSelect v-bind="sexOptions"
+				v-model="sexOptions.value"
+				:clearable="false"
+				class="wide-select"
+				:disabled="loading"
+				input-label="Geslacht" />
+
 			<NcSelect
 				v-bind="countryOptions"
 				v-model="klantItem.land"
-				class="country-select"
+				class="wide-select"
 				:disabled="loading"
 				input-label="Land" />
 
@@ -180,7 +185,6 @@ import {
 	NcNoteCard,
 	NcSelect,
 	NcDateTimePicker,
-	NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'
 import { countries } from '../../data/countries.js'
 
@@ -200,7 +204,6 @@ export default {
 		NcNoteCard,
 		NcSelect,
 		NcDateTimePicker,
-		NcCheckboxRadioSwitch,
 		// Icons
 		ContentSaveOutline,
 		Cancel,
@@ -226,7 +229,7 @@ export default {
 				achternaam: '',
 				bsn: '',
 				geboortedatum: '',
-				isMale: false,
+				geslacht: '',
 				land: '',
 				telefoonnummer: '',
 				emailadres: '',
@@ -252,6 +255,14 @@ export default {
 					{ value: 'organisatie', label: 'Organisatie' },
 				],
 			},
+			sexOptions: {
+				options: [
+					{ value: 'man', label: 'Man' },
+					{ value: 'vrouw', label: 'Vrouw' },
+					{ value: 'overige', label: 'Overige' },
+				],
+				value: { value: 'man', label: 'Man' },
+			},
 		}
 	},
 	computed: {
@@ -266,6 +277,8 @@ export default {
 
 			const country = this.countryOptions.options.find((option) => option.id === klantStore.klantItem?.land)
 
+			const sex = this.sexOptions.options.find((option) => option.value === klantStore.klantItem?.geslacht)
+
 			if (klantStore.klantItem?.id) {
 				this.klantItem = {
 					...klantStore.klantItem,
@@ -275,7 +288,7 @@ export default {
 					achternaam: klantStore.klantItem.achternaam || '',
 					bsn: klantStore.klantItem.bsn || '',
 					geboortedatum: klantStore.klantItem.geboortedatum ? new Date(klantStore.klantItem.geboortedatum) : '',
-					isMale: klantStore.klantItem.isMale || false,
+					geslacht: sex || { value: 'man', label: 'Man' },
 					land: country || '',
 					telefoonnummer: klantStore.klantItem.telefoonnummer || '',
 					emailadres: klantStore.klantItem.emailadres || '',
@@ -313,7 +326,7 @@ export default {
 				achternaam: '',
 				bsn: '',
 				geboortedatum: '',
-				isMale: false,
+				geslacht: '',
 				land: '',
 				telefoonnummer: '',
 				emailadres: '',
@@ -333,6 +346,8 @@ export default {
 				subjectIdentificatie: '',
 				subjectType: '',
 			}
+
+			this.sexOptions.value = { value: 'man', label: 'Man' }
 		},
 		async editKlant() {
 			this.loading = true
@@ -343,6 +358,7 @@ export default {
 					type: this.klantItem.type.value,
 					geboortedatum: this.klantItem.geboortedatum !== '' && new Date(this.klantItem.geboortedatum).toISOString(),
 					land: this.klantItem.land.id,
+					geslacht: this.sexOptions.value.value,
 				})
 				this.success = true
 				this.loading = false
@@ -361,7 +377,7 @@ export default {
 </script>
 
 <style scoped>
-.country-select {
+.wide-select {
 	width: 100%;
 }
 </style>
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
@@ -99,7 +99,7 @@ import { klantStore } from '../../store/store.js'
 			<div v-if="klanten?.length && !loading">
 				<NcListItem v-for="(klant, i) in klanten"
 					:key="`${klant}${i}`"
-					:name="`(${klant.isMale ? 'm' : 'v'}) ${getName(klant)} ${getSubname(klant)}`"
+					:name="`${getSex(klant)} ${getName(klant)} ${getSubname(klant)}`"
 					:active="selectedKlant === klant?.id"
 					:force-display-actions="true"
 					:details="_.upperFirst(klant.type)"
@@ -322,6 +322,12 @@ export default {
 			}
 			return 'onbekend'
 		},
+		getSex(klant) {
+			if (klant.type === 'persoon') {
+				return `(${klant?.geslacht})`
+			}
+			return ''
+		},
 		setActive(klant) {
 			if (this.selectedKlant === klant) {
 				this.selectedKlant = null