Added taken modal on widget

src/modals/berichten/EditBericht.vue

@@ -197,7 +197,6 @@ export default {
 			setTimeout(() => {
 				this.closeModal()
 			}, 300)
-
 		},
 		closeModal() {
 			navigationStore.setModal(false)

src/modals/taken/EditTaak.vue

@@ -6,7 +6,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 	<NcDialog v-if="navigationStore.modal === 'editTaak'"
 		name="Taak"
 		size="normal"
-		:can-close="false">
+		@closing="closeModalFromButton()">
 		<NcNoteCard v-if="success" type="success">
 			<p>Taak succesvol aangepast</p>
 		</NcNoteCard>
@@ -18,6 +18,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 			<NcTextField
 				:disabled="loading"
 				:value.sync="taakItem.title"
+				required
 				label="Titel"
 				maxlength="255" />
 
@@ -45,10 +46,12 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				:value.sync="taakItem.toelichting"
 				label="Toelichting" />
 
-			<NcTextField
-				:disabled="true"
-				:value="taakItem.klant"
-				label="Klant" />
+			<NcSelect
+				v-bind="klanten"
+				v-model="klanten.value"
+				input-label="Klant"
+				:loading="klantenLoading"
+				:disabled="loading" />
 		</div>
 
 		<template #actions>
@@ -65,7 +68,7 @@ import { taakStore, navigationStore, klantStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading"
+				:disabled="loading || klantenLoading || !taakItem.title"
 				type="primary"
 				@click="editTaak()">
 				<template #icon>
@@ -110,19 +113,26 @@ export default {
 		Plus,
 		Help,
 	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			required: false,
+		},
+	},
 	data() {
 		return {
 			success: false,
 			loading: false,
 			error: false,
 			hasUpdated: false,
+			klantenLoading: false,
+			klanten: [],
 			taakItem: {
 				title: '',
 				type: '',
 				status: '',
 				onderwerp: '',
 				toelichting: '',
-				klant: '',
 			},
 			statusOptions: {
 				options: [
@@ -142,6 +152,9 @@ export default {
 			},
 		}
 	},
+	mounted() {
+		this.fetchKlanten()
+	},
 	updated() {
 		if (navigationStore.modal === 'editTaak' && !this.hasUpdated) {
 			if (taakStore.taakItem?.id) {
@@ -161,6 +174,11 @@ export default {
 		}
 	},
 	methods: {
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
 		closeModal() {
 			navigationStore.setModal(false)
 			this.success = false
@@ -176,15 +194,46 @@ export default {
 				klant: '',
 			}
 		},
+		fetchKlanten() {
+			this.klantenLoading = true
+
+			klantStore.refreshKlantenList()
+				.then(({ response, data }) => {
+					const selectedKlant = data.filter((klant) => klant?.id.toString() === taakStore.taakItem?.klant?.toString())[0] || null
+
+					this.klanten = {
+						options: data.map((klant) => ({
+							id: klant.id,
+							label: klant.type === 'persoon' ? `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` : klant.bedrijfsnaam,
+						})),
+						value: selectedKlant
+							? {
+								id: selectedKlant?.id,
+								label: selectedKlant?.type === 'persoon' ? `${selectedKlant.voornaam} ${selectedKlant.tussenvoegsel} ${selectedKlant.achternaam}` : selectedKlant.bedrijfsnaam,
+							}
+							: null,
+					}
+
+					this.klantenLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.klantenLoading = false
+				})
+		},
 		async editTaak() {
 			this.loading = true
 			try {
 				await taakStore.saveTaak({
 					...this.taakItem,
-				})
+					klant: this.klanten.value?.id ?? '',
+				}, this.dashboardWidget)
 				this.success = true
 				this.loading = false
 				setTimeout(this.closeModal, 2000)
+				if (this.dashboardWidget === true) {
+					this.$emit('save-success')
+				}
 			} catch (error) {
 				this.loading = false
 				this.success = false

src/sidebars/search/SearchSideBar.vue

@@ -303,7 +303,7 @@ export default {
 		},
 		getSubname(klant) {
 			if (klant.type === 'persoon') {
-				return klant?.voorvoegsel ? `${klant.voorvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
 			}
 			if (klant.type === 'organisatie') {
 				return klant?.websiteUrl ?? 'onbekend'

src/store/modules/taak.js

@@ -95,7 +95,7 @@ export const useTaakStore = defineStore('taken', {
 			return { response }
 		},
 		// Create or save a taak from store
-		async saveTaak(taakItem) {
+		async saveTaak(taakItem, widget = false) {
 			if (!taakItem) {
 				throw new Error('No taak item to save')
 			}
@@ -126,7 +126,9 @@ export const useTaakStore = defineStore('taken', {
 			const entity = new Taak(data)
 
 			this.setTaakItem(data)
-			this.refreshTakenList()
+			if (!widget) {
+				this.refreshTakenList()
+			}
 
 			return { response, data, entity }
 		},

src/views/klanten/KlantenList.vue

@@ -129,7 +129,7 @@ export default {
 		},
 		getSubname(klant) {
 			if (klant.type === 'persoon') {
-				return klant?.voorvoegsel ? `${klant.voorvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
 			}
 			if (klant.type === 'organisatie') {
 				return klant?.websiteUrl ?? 'onbekend'

src/views/taken/TaakDetails.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore } from '../../store/store.js'
+import { navigationStore, taakStore, klantStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -31,8 +31,27 @@ import { navigationStore, taakStore } from '../../store/store.js'
 				</div>
 				<div class="grid">
 					<div class="gridContent">
-						<b>Sammenvatting:</b>
-						<span>{{ taakStore.taakItem.onderwerp }}</span>
+						<div>
+							<b>Sammenvatting:</b>
+							<span>{{ taakStore.taakItem.onderwerp }}</span>
+						</div>
+						<div>
+							<b>Klant:</b>
+							<span v-if="klantLoading">Loading...</span>
+							<div v-if="!klantLoading" class="buttonLinkContainer">
+								<span>{{ getKlantName(klant) }}</span>
+								<NcActions>
+									<NcActionLink :aria-label="`ga naar ${getKlantName(klant)}`"
+										:name="getKlantName(klant)"
+										@click="goToKlant()">
+										<template #icon>
+											<OpenInApp :size="20" />
+										</template>
+										{{ getKlantName(klant) }}
+									</NcActionLink>
+								</NcActions>
+							</div>
+						</div>
 					</div>
 				</div>
 
@@ -79,7 +98,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcActionLink } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
@@ -88,31 +107,40 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
+import OpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 
 export default {
 	name: 'TaakDetails',
 	components: {
+		NcActionLink,
 		// Icons
 		Pencil,
 		DotsHorizontal,
 		TrashCanOutline,
+		OpenInApp,
+		TimelineQuestionOutline,
+		Eye,
 	},
 	data() {
 		return {
 			currentActiveTaak: null,
 			auditTrails: [],
+			klant: [],
+			klantLoading: false,
 		}
 	},
 	mounted() {
 		if (taakStore.taakItem?.id) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
+			this.fetchKlant(taakStore.taakItem.klant)
 		}
 	},
 	updated() {
 		if (taakStore.taakItem?.id && JSON.stringify(this.currentActiveTaak) !== JSON.stringify(taakStore.taakItem)) {
 			this.currentActiveTaak = taakStore.taakItem
 			this.fetchAuditTrails(taakStore.taakItem.id)
+			this.fetchKlant(taakStore.taakItem.klant)
 		}
 	},
 	methods: {
@@ -125,6 +153,31 @@ export default {
 					}
 				})
 		},
+		getKlantName(klant) {
+			return klant?.type === 'persoon' ? `${klant?.voornaam} ${klant?.tussenvoegsel} ${klant?.achternaam}` : klant?.bedrijfsnaam
+		},
+		goToKlant() {
+			klantStore.setKlantItem(this.klant)
+			navigationStore.setSelected('klanten')
+		},
+		fetchKlant(klant) {
+			this.klantLoading = true
+
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${klant}`, {
+				method: 'GET',
+			})
+				.then((response) => {
+					response.json().then((data) => {
+						this.klant = data
+					})
+					this.klantLoading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.klantLoading = false
+				})
+
+		},
 	},
 }
 </script>
@@ -158,4 +211,9 @@ h4 {
   gap: 25px;
 }
 
+.buttonLinkContainer {
+	display: flex;
+	align-items: center;
+}
+
 </style>

src/views/widgets/ContactMomentenWidget.vue

@@ -27,8 +27,7 @@ import { berichtStore, navigationStore } from '../../store/store.js'
 
 		<BerichtForm v-if="isModalOpen"
 			:dashboard-widget="true"
-			@save-success="fetchBerichtItems"
-			@close="closeModal" />
+			@save-success="fetchBerichtItems" />
 	</div>
 </template>
 

src/views/widgets/PersonenWidget.vue

@@ -82,7 +82,7 @@ export default {
 				.then(() => {
 					this.personenItems = klantStore.klantenList.map(person => ({
 						id: person.id,
-						mainText: `${person.voornaam} ${person.achternaam}`,
+						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
 						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
 					}))
@@ -95,7 +95,7 @@ export default {
 				.then(() => {
 					this.personenItems = klantStore.klantenList.map(person => ({
 						id: person.id,
-						mainText: `${person.voornaam} ${person.achternaam}`,
+						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
 						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
 					}))