Merge pull request #116 from ConductionNL/feature/PC108-134/add-conta…

…ctmoment-button

feature/PC108-134/add-contactmoment-button

src/entities/klanten/klanten.mock.ts

@@ -6,6 +6,7 @@ export const mockKlantData = (): TKlant[] => [
 		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
 		type: 'persoon',
 		voornaam: 'John',
+		tweedeVoornaam: '',
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
 		bsn: '1234567890',

src/entities/klanten/klanten.ts

@@ -7,6 +7,7 @@ export class Klant implements TKlant {
 	public type: TKlantType
 
 	public voornaam: string
+	public tweedeVoornaam: string
 	public tussenvoegsel: string
 	public achternaam: string
 	public bsn: string
@@ -38,6 +39,7 @@ export class Klant implements TKlant {
 		this.id = source.id || ''
 		this.type = source.type || 'persoon'
 		this.voornaam = source.voornaam || ''
+		this.tweedeVoornaam = source.tweedeVoornaam || ''
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''
 		this.bsn = source.bsn || ''
@@ -67,6 +69,7 @@ export class Klant implements TKlant {
 		const schema = z.object({
 			id: z.string().optional(),
 			voornaam: z.string().min(1),
+			tweedeVoornaam: z.string(),
 			tussenvoegsel: z.string(),
 			achternaam: z.string(),
 			bsn: z.string(),

src/entities/klanten/klanten.types.ts

@@ -4,6 +4,7 @@ export type TKlant = {
     id: string;
     type: TKlantType;
     voornaam: string;
+    tweedeVoornaam: string;
     tussenvoegsel: string;
     achternaam: string;
     bsn: string;

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -13,7 +13,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			<BTabs card>
 				<BTab v-for="i in tabs"
 					:key="'dyn-tab-' + i"
-					:title="'Contactmoment ' + `${contactMomenten[i].klant ? getName(contactMomenten[i].klant) : i}`"
+					:title="contactMomenten[i].klant ? getInitials(contactMomenten[i].klant) : 'Leeg'"
 					:active="selectedContactMoment === i"
 					@click="selectedContactMoment = i">
 					<NcNoteCard v-if="success" type="success">
@@ -238,7 +238,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 							</BTabs>
 						</div>
 
-						<SearchKlantModal v-if="searchKlantModalOpen"
+						<SearchKlantModal v-if="searchKlantModalOpen && i === selectedContactMoment"
 							:dashboard-widget="true"
 							:starting-type="startingType"
 							@selected-klant="fetchKlantData($event)"
@@ -248,13 +248,11 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 						Close tab
 					</NcButton>
 				</BTab>
+
 				<template #tabs-end>
-					<BNavItem class="newTabButton"
-						role="presentation"
-						href="#"
-						@click.prevent="newTab">
-						<Plus :size="20" /> Nieuw contactmoment
-					</BNavItem>
+					<NcButton @click="newTab">
+						<Plus :size="20" />
+					</NcButton>
 				</template>
 			</BTabs>
 		</div>
@@ -554,7 +552,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 
 <script>
 // Components
-import { BTabs, BTab, BNavItem } from 'bootstrap-vue'
+import { BTabs, BTab } from 'bootstrap-vue'
 import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, NcListItem, NcActionButton, NcEmptyContent } from '@nextcloud/vue'
 import _ from 'lodash'
 
@@ -593,7 +591,6 @@ export default {
 		EditTaakForm: EditTaak,
 		BTabs,
 		BTab,
-		BNavItem,
 		// Icons
 		Plus,
 		BriefcaseAccountOutline,
@@ -709,6 +706,7 @@ export default {
 					this.tabs.splice(i, 1)
 				}
 			}
+			this.selectedContactMoment = 1
 		},
 		newTab() {
 			const index = this.tabCounter + 1
@@ -843,7 +841,6 @@ export default {
 					if (this.dashboardWidget === true) {
 						setTimeout(() => {
 							this.closeTab(this.selectedContactMoment)
-							this.selectedContactMoment = 1
 							this.success = false
 							this.succesMessage = false
 						}, 2000)
@@ -1046,11 +1043,24 @@ export default {
 			}
 		},
 
+		getInitials(klant) {
+			if (!klant) return
+
+			if (klant.type === 'persoon') {
+				return `${klant.voornaam?.charAt(0)}.${klant.tweedeVoornaam ? klant.tweedeVoornaam?.charAt(0) + '.' : ''} ${klant.tussenvoegsel} ${klant.achternaam}`
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+
+		},
+
 		getName(klant) {
 			if (!klant) return
 
 			if (klant.type === 'persoon') {
-				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
+				return `${klant.voornaam} ${klant.tweedeVoornaam ?? ''} ${klant.tussenvoegsel ?? ''} ${klant.achternaam}` ?? 'onbekend'
 			}
 			if (klant.type === 'organisatie') {
 				return klant?.bedrijfsnaam ?? 'onbekend'

src/modals/klanten/EditKlant.vue

@@ -27,6 +27,11 @@ import { klantStore, navigationStore } from '../../store/store.js'
 				maxlength="255"
 				:value.sync="klantItem.voornaam" />
 
+			<NcTextField :disabled="loading"
+				label="Tweede voornaam"
+				maxlength="255"
+				:value.sync="klantItem.tweedeVoornaam" />
+
 			<NcTextField :disabled="loading"
 				label="Tussenvoegsel"
 				maxlength="255"
@@ -224,6 +229,7 @@ export default {
 			},
 			klantItem: {
 				voornaam: '',
+				tweedeVoornaam: '',
 				type: 'persoon',
 				tussenvoegsel: '',
 				achternaam: '',
@@ -281,6 +287,7 @@ export default {
 				this.klantItem = {
 					...klantStore.klantItem,
 					voornaam: klantStore.klantItem.voornaam || '',
+					tweedeVoornaam: klantStore.klantItem.tweedeVoornaam || '',
 					type: klantType || { value: 'persoon', label: 'Persoon' },
 					tussenvoegsel: klantStore.klantItem.tussenvoegsel || '',
 					achternaam: klantStore.klantItem.achternaam || '',
@@ -319,6 +326,7 @@ export default {
 			this.hasUpdated = false
 			this.klantItem = {
 				voornaam: '',
+				tweedeVoornaam: '',
 				type: { value: 'persoon', label: 'Persoon' },
 				tussenvoegsel: '',
 				achternaam: '',