Merge pull request #86 from ConductionNL/feature/PC108-109/medewerker…

…-contact-info

added more fields to medewerker

src/entities/medewerkers/medewerkers.mock.ts

@@ -8,6 +8,7 @@ export const mockMedewerkerData = (): TMedewerker[] => [
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
 		email: '[email protected]',
+		telefoonnummer: '0612345678',
 	},
 ]
 

src/entities/medewerkers/medewerkers.ts

@@ -8,14 +8,15 @@ export class Medewerker implements TMedewerker {
 	public tussenvoegsel: string
 	public achternaam: string
 	public email: string
+	public telefoonnummer: string
 
 	constructor(source: TMedewerker) {
 		this.id = source.id || ''
 		this.voornaam = source.voornaam || ''
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''
 		this.email = source.email || ''
-
+		this.telefoonnummer = source.telefoonnummer || ''
 	}
 
 	public validate(): SafeParseReturnType<TMedewerker, unknown> {
@@ -25,6 +26,7 @@ export class Medewerker implements TMedewerker {
 			tussenvoegsel: z.string(),
 			achternaam: z.string(),
 			email: z.string().email(),
+			telefoonnummer: z.string().min(1),
 		})
 
 		return schema.safeParse(this)

src/entities/medewerkers/medewerkers.types.ts

@@ -4,4 +4,5 @@ export type TMedewerker = {
     tussenvoegsel: string;
     achternaam: string;
     email: string;
+    telefoonnummer: string;
 }

src/modals/medewerkers/EditMedewerker.vue

@@ -3,8 +3,7 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editMedewerker'"
-		name="Medewerker"
+	<NcDialog name="Medewerker"
 		size="normal"
 		:can-close="false">
 		<NcNoteCard v-if="success" type="success">
@@ -34,6 +33,13 @@ import { medewerkerStore, navigationStore } from '../../store/store.js'
 				label="Email adres"
 				maxlength="255"
 				:value.sync="medewerkerItem.email" />
+
+			<NcTextField :disabled="loading"
+				label="Telefoonnummer"
+				minlength="10"
+				maxlength="11"
+				placeholder="06 12345678"
+				:value.sync="medewerkerItem.telefoonnummer" />
 		</div>
 
 		<template #actions>
@@ -99,7 +105,6 @@ export default {
 			success: false,
 			loading: false,
 			error: false,
-			hasUpdated: false,
 			countryOptions: {
 				options: countries.map((country) => ({
 					id: country.code,
@@ -111,14 +116,10 @@ export default {
 				tussenvoegsel: '',
 				achternaam: '',
 				email: '',
+				telefoonnummer: '',
 			},
 		}
 	},
-	computed: {
-		items() {
-			return this.medewerkerItems
-		},
-	},
 	mounted() {
 		if (medewerkerStore.medewerkerItem?.id) {
 			this.medewerkerItem = {
@@ -127,37 +128,13 @@ export default {
 				tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
 				achternaam: medewerkerStore.medewerkerItem.achternaam || '',
 				email: medewerkerStore.medewerkerItem.email || '',
+				telefoonnummer: medewerkerStore.medewerkerItem.telefoonnummer || '',
 			}
 		}
 	},
-	updated() {
-		if (navigationStore.modal === 'editMedewerker' && !this.hasUpdated) {
-
-			if (medewerkerStore.medewerkerItem?.id) {
-				this.medewerkerItem = {
-					...medewerkerStore.medewerkerItem,
-					voornaam: medewerkerStore.medewerkerItem.voornaam || '',
-					tussenvoegsel: medewerkerStore.medewerkerItem.tussenvoegsel || '',
-					achternaam: medewerkerStore.medewerkerItem.achternaam || '',
-					email: medewerkerStore.medewerkerItem.email || '',
-				}
-			}
-			this.hasUpdated = true
-		}
-	},
 	methods: {
 		closeModal() {
 			navigationStore.setModal(false)
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			this.medewerkerItem = {
-				voornaam: '',
-				tussenvoegsel: '',
-				achternaam: '',
-				email: '',
-			}
 		},
 		async editMedewerker() {
 			this.loading = true

src/views/medewerkers/MedewerkerDetails.vue

@@ -55,6 +55,10 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 						<b>Email adres:</b>
 						<p>{{ medewerkerStore.medewerkerItem.email }}</p>
 					</div>
+					<div>
+						<b>Telefoonnummer:</b>
+						<p>{{ medewerkerStore.medewerkerItem.telefoonnummer }}</p>
+					</div>
 				</div>
 			</div>
 		</div>