From 335ff4df6059a1b357801e8cd22bb9cd982ccb0c Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 4 Dec 2024 14:27:08 +0100
Subject: [PATCH 1/2] PC108-73: person widget is by default empty

---
 src/views/widgets/PersonenWidget.vue | 57 +++++++++++-----------------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/views/widgets/PersonenWidget.vue b/src/views/widgets/PersonenWidget.vue
index 61ff41d..a7159b8 100644
--- a/src/views/widgets/PersonenWidget.vue
+++ b/src/views/widgets/PersonenWidget.vue
@@ -5,16 +5,22 @@ import { klantStore, navigationStore } from '../../store/store.js'
 <template>
 	<div class="personenContainer">
 		<div class="itemContainer">
-			<NcDashboardWidget :items="items"
-				:loading="loading"
+			<NcDashboardWidget :items="personenItems"
 				:item-menu="itemMenu"
 				@show="onShow">
 				<template #empty-content>
-					<NcEmptyContent name="Geen personen gevonden">
-						<template #icon>
-							<AccountOutline />
-						</template>
-					</NcEmptyContent>
+					<div>
+						<NcEmptyContent v-if="loading" name="Persoon laden...">
+							<template #icon>
+								<NcLoadingIcon />
+							</template>
+						</NcEmptyContent>
+						<NcEmptyContent v-if="!loading" name="Geen personen gevonden">
+							<template #icon>
+								<AccountOutline />
+							</template>
+						</NcEmptyContent>
+					</div>
 				</template>
 			</NcDashboardWidget>
 		</div>
@@ -46,7 +52,7 @@ import { klantStore, navigationStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextcloud/vue'
+import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
@@ -63,6 +69,7 @@ export default {
 		NcTextField,
 		AccountOutline,
 		ViewKlantRegister,
+		NcLoadingIcon,
 	},
 
 	data() {
@@ -81,41 +88,23 @@ export default {
 		}
 	},
 
-	computed: {
-		items() {
-			return this.personenItems
-		},
-	},
-
-	mounted() {
-		this.fetchPersonenItems()
-	},
-
 	methods: {
-		fetchPersonenItems() {
-			this.loading = true
-			klantStore.searchPersons()
-				.then(() => {
-					this.personenItems = klantStore.klantenList.map(person => ({
-						id: person.id,
-						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
-						subText: person.emailadres,
-						avatarUrl: this.getItemIcon(),
-					}))
-					this.loading = false
-				})
-		},
 		search() {
+			if (!this.searchPerson.trim()) {
+				this.personenItems = []
+				return
+			}
+
 			this.loading = true
+
 			klantStore.searchPersons(this.searchPerson)
-				.then(() => {
-					this.personenItems = klantStore.klantenList.map(person => ({
+				.then(({ data }) => {
+					this.personenItems = data.map(person => ({
 						id: person.id,
 						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
 						avatarUrl: this.getItemIcon(),
 					}))
-					this.loading = false
 				})
 				.finally(() => {
 					this.loading = false

From d9dbbef246034803c760fef5b2a8b816f9307896 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Wed, 4 Dec 2024 16:49:02 +0100
Subject: [PATCH 2/2] PC108-72: persoon widget gebruik geavanceerde zoek dialog

---
 .../contactMomenten/ContactMomentenForm.vue   |  3 +-
 src/modals/klanten/SearchKlantModal.vue       | 76 ++++++++++++++-----
 src/views/widgets/PersonenWidget.vue          | 57 ++++++--------
 3 files changed, 84 insertions(+), 52 deletions(-)

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
index 625974c..08ee7e6 100644
--- a/src/modals/contactMomenten/ContactMomentenForm.vue
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -173,7 +173,8 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 			<SearchKlantModal v-if="searchKlantModalOpen"
 				:dashboard-widget="true"
 				:starting-type="startingType"
-				@selected-klant="fetchKlantData($event)"
+				select-button-label="Koppelen"
+				@selected-klant="fetchKlantData($event?.id)"
 				@close-modal="closeSearchKlantModal" />
 		</div>
 		<template #actions>
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
index f0721b9..2724681 100644
--- a/src/modals/klanten/SearchKlantModal.vue
+++ b/src/modals/klanten/SearchKlantModal.vue
@@ -3,8 +3,7 @@ import { klantStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcDialog
-		:name="startingType === 'persoon' ? 'Persoon zoeken' : 'Organisatie zoeken'"
+	<NcDialog :name="modalType.singular + ' zoeken'"
 		size="normal"
 		label-id="searchKlantModal"
 		dialog-classes="SearchKlantModal"
@@ -12,28 +11,28 @@ import { klantStore } from '../../store/store.js'
 		@closing="closeModalFromButton()">
 		<div class="listContainer">
 			<div class="filtersContainer">
-				<NcCheckboxRadioSwitch v-if="startingType === 'persoon'"
+				<NcCheckboxRadioSwitch v-if="startingType === 'persoon' || startingType === 'all'"
 					:checked.sync="klantenSearchType"
 					value="geboortedatum_achternaam"
 					name="klantenSearchType"
 					type="radio">
 					Geboortedatum + achternaam
 				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="startingType === 'persoon'"
+				<NcCheckboxRadioSwitch v-if="startingType === 'persoon' || startingType === 'all'"
 					:checked.sync="klantenSearchType"
 					value="bsn"
 					name="klantenSearchType"
 					type="radio">
 					BSN
 				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie'"
+				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie' || startingType === 'all'"
 					:checked.sync="klantenSearchType"
 					value="bedrijfsnaam"
 					name="klantenSearchType"
 					type="radio">
 					Bedrijfsnaam
 				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie'"
+				<NcCheckboxRadioSwitch v-if="startingType === 'organisatie' || startingType === 'all'"
 					:checked.sync="klantenSearchType"
 					value="kvkNummer"
 					name="klantenSearchType"
@@ -100,17 +99,17 @@ import { klantStore } from '../../store/store.js'
 				<NcListItem v-for="(klant, i) in klanten"
 					:key="`${klant}${i}`"
 					:name="`${getSex(klant)} ${getName(klant)} ${getSubname(klant)}`"
-					:active="selectedKlant === klant?.id"
+					:active="selectedKlant?.id === klant?.id"
 					:force-display-actions="true"
 					:details="_.upperFirst(klant.type)"
-					@click="setActive(klant.id)">
+					@click="setActive(klant)">
 					<template #icon>
 						<OfficeBuildingOutline v-if="klant.type === 'organisatie'"
-							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							:class="selectedKlant?.id === klant?.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 						<AccountOutline v-if="klant.type === 'persoon'"
-							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							:class="selectedKlant?.id === klant?.id && 'selectedZaakIcon'"
 							disable-menu
 							:size="44" />
 					</template>
@@ -121,7 +120,7 @@ import { klantStore } from '../../store/store.js'
 			</div>
 
 			<div v-if="!klanten?.length && !loading">
-				Geen {{ startingType === 'persoon' ? 'personen' : 'organisaties' }} gevonden.
+				Geen {{ modalType.plural }} gevonden.
 			</div>
 
 			<NcLoadingIcon v-if="loading"
@@ -143,11 +142,11 @@ import { klantStore } from '../../store/store.js'
 			<NcButton
 				type="primary"
 				:disabled="!selectedKlant"
-				@click="addKlant()">
+				@click="selectKlant()">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
-				Koppelen
+				{{ selectButtonLabel }}
 			</NcButton>
 		</template>
 	</NcDialog>
@@ -180,14 +179,47 @@ export default {
 		NcLoadingIcon,
 	},
 	props: {
+		/**
+		 * Determines the initial type of customer search to display
+		 * @param { "persoon" | "organisatie" | "all" } startingType - The type of customer search to display
+		 * @default 'all'
+		 *
+		 * Controls which type of customer search is initially shown:
+		 * - 'persoon': Only show person search options (BSN, name, birthdate etc)
+		 * - 'organisatie': Only show organization search options (company name, KVK number etc)
+		 * - 'all': Show both person and organization search options (default)
+		 *
+		 * This affects both the UI display and search behavior. The search will be restricted
+		 * to only the specified customer type if 'persoon' or 'organisatie' is set.
+		 */
 		startingType: {
+			type: String,
+			required: true, // required is set to true as I want developers to be aware of the functionality they're adding / using
+			validator(value) {
+				return ['persoon', 'organisatie', 'all'].includes(value)
+			},
+		},
+		/**
+		 * The label of the select button
+		 * @param {string} selectButtonLabel - The label of the select button
+		 * @default Selecteren
+		 */
+		selectButtonLabel: {
 			type: String,
 			required: false,
-			default: 'all',
+			default: 'Selecteren',
 		},
 	},
 	data() {
 		return {
+			modalType: (() => {
+				const typeMap = {
+					persoon: { plural: 'personen', singular: 'persoon' },
+					organisatie: { plural: 'organisaties', singular: 'organisatie' },
+					all: { plural: 'klanten', singular: 'klant' },
+				}
+				return typeMap[this.startingType] || typeMap.all
+			})(),
 			succes: false,
 			loading: false,
 			error: false,
@@ -213,6 +245,13 @@ export default {
 					bedrijfsnaam: ' met bedrijfsnaam',
 					kvkNummer: ' met KVK nummer',
 				},
+				all: {
+					default: 'klant',
+					geboortedatum_achternaam: ' met geboortedatum en achternaam',
+					bsn: ' met BSN',
+					bedrijfsnaam: ' met bedrijfsnaam',
+					kvkNummer: ' met KVK nummer',
+				},
 			}
 			const commonLabels = {
 				postcode_huisnummer: ' met postcode en huisnummer',
@@ -237,9 +276,8 @@ export default {
 			this.$emit('close-modal')
 
 		},
-		addKlant() {
-			// eslint-disable-next-line no-console
-			console.log('added')
+		selectKlant() {
+			console.info('klant selected', this.selectedKlant?.id)
 			this.$emit('selected-klant', this.selectedKlant)
 			this.closeModalFromButton()
 		},
@@ -272,7 +310,7 @@ export default {
 
 			const searchParams = new URLSearchParams({
 				...(this.searchQuery && queryParams),
-				...(this.startingType && { type: this.startingType }),
+				...(this.startingType !== 'all' && { type: this.startingType }),
 			}).toString()
 
 			klantStore.searchKlanten(searchParams)
@@ -329,7 +367,7 @@ export default {
 			return ''
 		},
 		setActive(klant) {
-			if (this.selectedKlant === klant) {
+			if (this.selectedKlant?.id === (klant?.id || Symbol('default id'))) {
 				this.selectedKlant = null
 			} else { this.selectedKlant = klant }
 		},
diff --git a/src/views/widgets/PersonenWidget.vue b/src/views/widgets/PersonenWidget.vue
index a7159b8..b179b06 100644
--- a/src/views/widgets/PersonenWidget.vue
+++ b/src/views/widgets/PersonenWidget.vue
@@ -26,37 +26,37 @@ import { klantStore, navigationStore } from '../../store/store.js'
 		</div>
 
 		<div class="searchContainer">
-			<NcTextField :disabled="loading"
-				label="Zoeken op voornaam"
-				maxlength="255"
-				class="searchField"
-				:value.sync="searchPerson" />
-
 			<NcButton type="primary"
 				:disabled="loading"
 				class="searchButton"
-				@click="search">
+				@click="() => (searchKlantModalOpen = true)">
 				<template #icon>
 					<Search :size="20" />
 				</template>
-				Zoeken
+				Zoek
 			</NcButton>
 
 			<ViewKlantRegister v-if="isModalOpen"
 				:dashboard-widget="true"
-				:klant-id="klantStore.widgetKlantId"
-				@save-success="fetchPersonenItems" />
+				:klant-id="klantStore.widgetKlantId" />
+
+			<SearchKlantModal v-if="searchKlantModalOpen"
+				:dashboard-widget="true"
+				starting-type="persoon"
+				@selected-klant="createKlantItems($event)"
+				@close-modal="() => (searchKlantModalOpen = false)" />
 		</div>
 	</div>
 </template>
 
 <script>
 // Components
-import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
+import { NcDashboardWidget, NcEmptyContent, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import ViewKlantRegister from '../../modals/klantRegister/ViewKlantRegister.vue'
+import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
 
 export default {
 	name: 'PersonenWidget',
@@ -66,7 +66,6 @@ export default {
 		NcEmptyContent,
 		NcButton,
 		Search,
-		NcTextField,
 		AccountOutline,
 		ViewKlantRegister,
 		NcLoadingIcon,
@@ -79,6 +78,7 @@ export default {
 			personenItems: [],
 			searchPerson: '',
 			selectedKlantId: '',
+			searchKlantModalOpen: false,
 			itemMenu: {
 				show: {
 					text: 'Bekijk',
@@ -89,26 +89,13 @@ export default {
 	},
 
 	methods: {
-		search() {
-			if (!this.searchPerson.trim()) {
-				this.personenItems = []
-				return
-			}
-
-			this.loading = true
-
-			klantStore.searchPersons(this.searchPerson)
-				.then(({ data }) => {
-					this.personenItems = data.map(person => ({
-						id: person.id,
-						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
-						subText: person.emailadres,
-						avatarUrl: this.getItemIcon(),
-					}))
-				})
-				.finally(() => {
-					this.loading = false
-				})
+		createKlantItems(klant) {
+			this.personenItems = [{
+				id: klant.id,
+				mainText: `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}`,
+				subText: klant.emailadres,
+				avatarUrl: this.getItemIcon(),
+			}]
 		},
 		getItemIcon() {
 			const theme = getTheme()
@@ -121,6 +108,12 @@ export default {
 
 			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/account-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/account-outline.svg`
 		},
+		openSearchKlantModal() {
+			this.searchKlantModalOpen = true
+		},
+		closeSearchKlantModal() {
+			this.searchKlantModalOpen = false
+		},
 		onShow(item) {
 			klantStore.setWidgetKlantId(item.id)