Merge pull request #142 from ConductionNL/feature/PC108-152/personen-…

…actie-menu

finished klant actions

.github/workflows/pull-request-lint-check.yaml

@@ -3,7 +3,8 @@ name: Lint Check
 on:
   pull_request:
     branches:
-      - develop
+      - development
+      - main
 
 jobs:
   lint-check:

src/modals/taken/EditTaak.vue

@@ -555,7 +555,7 @@ export default {
 				medewerker: medewerkerId || null,
 				status: this.taakItem.status === 'gesloten' ? 'gesloten' : 'open',
 				deadline: this.taakItem.deadline ? this.taakItem.deadline.toISOString() : null,
-			})
+			}, { redirect: !this.dashboardWidget })
 				.then((response) => {
 					this.success = response.response.ok
 

src/modals/zaken/ZaakForm.vue

@@ -241,7 +241,7 @@ export default {
 				klant: this.klantId,
 			})
 
-			zaakStore.saveZaak(newZaak)
+			zaakStore.saveZaak(newZaak, { redirect: !this.dashboardWidget })
 				.then(({ response }) => {
 					this.success = response.ok
 

src/services/icons/icon/icon-briefcase-account-outline.js

@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'briefcase account outline' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconBriefcaseAccountOutline() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-briefcase-account-outline-dark' : 'icon-briefcase-account-outline-light'
+}

src/services/icons/icon/icon-calendar-month-outline.js

@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'calendar month outline' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconCalendarMonthOutline() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-calendar-month-outline-dark' : 'icon-calendar-month-outline-light'
+}

src/services/icons/icon/icon-card-account-phone-outline.js

@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'card account phone outline' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconCardAccountPhoneOutline() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-card-account-phone-outline-dark' : 'icon-card-account-phone-outline-light'
+}

src/services/icons/index.js

@@ -1,7 +1,28 @@
+/*
+ * This file serves as a central hub for CSS based icon management in the application.
+ * It exports functions that return the appropriate icon class names based on the current theme.
+ *
+ * The actual icon definitions (CSS classes) are located in '/css/icons.css'.
+ * To add new icons:
+ * 1. Add the icon definitions to '/css/icons.css'
+ * 2. Create a new icon function file in './icon/' directory
+ * 3. Import and export the icon function here
+ *
+ * Each icon function returns a class name string that can be used in components
+ * that accept an 'icon' prop. The returned class name will automatically handle
+ * light/dark theme variants.
+ */
+
 import { iconProgressClose as _iconProgressClose } from './icon/icon-progress-close.js'
 import { iconPencil as _iconPencil } from './icon/icon-pencil.js'
 import { iconCalendarCheckOutline as _iconCalendarCheckOutline } from './icon/icon-calendar-check-outline.js'
+import { iconCalendarMonthOutline as _iconCalendarMonthOutline } from './icon/icon-calendar-month-outline.js'
+import { iconCardAccountPhoneOutline as _iconCardAccountPhoneOutline } from './icon/icon-card-account-phone-outline.js'
+import { iconBriefcaseAccountOutline as _iconBriefcaseAccountOutline } from './icon/icon-briefcase-account-outline.js'
 
 export const iconProgressClose = _iconProgressClose()
 export const iconPencil = _iconPencil()
 export const iconCalendarCheckOutline = _iconCalendarCheckOutline()
+export const iconCalendarMonthOutline = _iconCalendarMonthOutline()
+export const iconCardAccountPhoneOutline = _iconCardAccountPhoneOutline()
+export const iconBriefcaseAccountOutline = _iconBriefcaseAccountOutline()

src/store/modules/taak.js

@@ -114,7 +114,7 @@ export const useTaakStore = defineStore('taken', {
 			return { response }
 		},
 		// Create or save a taak from store
-		async saveTaak(taakItem, options = {}) {
+		async saveTaak(taakItem, options = { redirect: true }) {
 			if (!taakItem) {
 				throw new Error('No taak item to save')
 			}
@@ -148,8 +148,10 @@ export const useTaakStore = defineStore('taken', {
 			if (!options.doNotRefresh) {
 				this.refreshTakenList()
 			}
-			// go to new item with this id
-			router.push({ name: 'dynamic-view', params: { view: 'taken', id: entity.id } })
+			if (options.redirect) {
+				// go to new item with this id
+				router.push({ name: 'dynamic-view', params: { view: 'taken', id: entity.id } })
+			}
 
 			return { response, data, entity }
 		},

src/views/widgets/PersonenWidget.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { klantStore, navigationStore } from '../../store/store.js'
+import { contactMomentStore, klantStore, navigationStore, taakStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
 	<div class="personenContainer">
 		<div class="itemContainer">
 			<NcDashboardWidget :items="personenItems"
 				:item-menu="itemMenu"
-				@show="onShow">
+				@show="onShow"
+				@startZaak="() => (zaakFormModalOpen = true)"
+				@startContactmoment="() => (contactmomentModalOpen = true)"
+				@startTaak="() => (taakModalOpen = true)">
 				<template #empty-content>
 					<div>
 						<NcEmptyContent v-if="loading" name="Persoon laden...">
@@ -36,28 +39,56 @@ import { klantStore, navigationStore } from '../../store/store.js'
 				Zoek
 			</NcButton>
 
-			<ViewKlant v-if="isModalOpen"
-				:dashboard-widget="true"
-				:klant-id="klantStore.widgetKlantId"
-				@close-modal="() => (isModalOpen = false)" />
-
 			<SearchKlantModal v-if="searchKlantModalOpen"
 				:dashboard-widget="true"
 				starting-type="persoon"
 				@selected-klant="createKlantItems($event)"
 				@close-modal="() => (searchKlantModalOpen = false)" />
+
+			<ViewKlant v-if="isModalOpen"
+				:dashboard-widget="true"
+				:klant-id="selectedKlantId"
+				@close-modal="() => (isModalOpen = false)" />
+
+			<ZaakForm v-if="zaakFormModalOpen"
+				:dashboard-widget="true"
+				:klant-id="selectedKlantId"
+				@close-modal="() => (zaakFormModalOpen = false)"
+				@save-success="fetchZaakItems" />
+
+			<ContactMomentenForm v-if="contactmomentModalOpen"
+				:dashboard-widget="true"
+				:klant-id="selectedKlantId"
+				@close-modal="() => (contactmomentModalOpen = false)"
+				@save-success="fetchContactMomentenItems" />
+
+			<EditTaak v-if="taakModalOpen"
+				:dashboard-widget="true"
+				client-type="klant"
+				:klant-id="selectedKlantId"
+				@close-modal="() => (taakModalOpen = false)"
+				@save-success="fetchTaakItems" />
 		</div>
 	</div>
 </template>
 
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+
 import { getTheme } from '../../services/getTheme.js'
+import { iconCalendarMonthOutline, iconCardAccountPhoneOutline, iconBriefcaseAccountOutline } from '../../services/icons/index.js'
+
+// icons
 import Search from 'vue-material-design-icons/Magnify.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+
+// Modals
 import ViewKlant from '../../modals/klanten/ViewKlant.vue'
 import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
+import ZaakForm from '../../modals/zaken/ZaakForm.vue'
+import ContactMomentenForm from '../../modals/contactMomenten/ContactMomentenForm.vue'
+import EditTaak from '../../modals/taken/EditTaak.vue'
 
 export default {
 	name: 'PersonenWidget',
@@ -81,17 +112,34 @@ export default {
 			searchPerson: '',
 			selectedKlantId: '',
 			searchKlantModalOpen: false,
+			zaakFormModalOpen: false,
+			contactmomentModalOpen: false,
+			taakModalOpen: false,
 			itemMenu: {
 				show: {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
+				startZaak: {
+					text: 'Start zaak',
+					icon: iconBriefcaseAccountOutline,
+				},
+				startContactmoment: {
+					text: 'Start contactmoment',
+					icon: iconCardAccountPhoneOutline,
+				},
+				startTaak: {
+					text: 'Start taak',
+					icon: iconCalendarMonthOutline,
+				},
 			},
 		}
 	},
 
 	methods: {
 		createKlantItems(klant) {
+			this.selectedKlantId = klant.id
+
 			this.personenItems = [{
 				id: klant.id,
 				mainText: `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}`,
@@ -120,7 +168,27 @@ export default {
 			klantStore.setWidgetKlantId(item.id)
 			this.isModalOpen = true
 			navigationStore.setModal('viewKlant')
-
+		},
+		fetchZaakItems() {
+			this.loading = true
+			zaakStore.refreshZakenList()
+				.then(() => {
+					this.loading = false
+				})
+		},
+		fetchContactMomentenItems() {
+			this.loading = true
+			contactMomentStore.refreshContactMomentenList()
+				.then(() => {
+					this.loading = false
+				})
+		},
+		fetchTaakItems() {
+			this.loading = true
+			taakStore.refreshTakenList()
+				.then(() => {
+					this.loading = false
+				})
 		},
 	},