feature/PC388-68-and-69/Dashboard-widgets

lib/AppInfo/Application.php

@@ -10,6 +10,8 @@
 use OCA\ZaakAfhandelApp\Dashboard\TakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\OpenZakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\ContactmomentenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\PersonenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\OrganisatiesWidget;
 
 /**
  * Class Application
@@ -36,6 +38,8 @@ public function register(IRegistrationContext $context): void
 		$context->registerDashboardWidget(TakenWidget::class);
 		$context->registerDashboardWidget(OpenZakenWidget::class);
 		$context->registerDashboardWidget(ContactmomentenWidget::class);
+		$context->registerDashboardWidget(PersonenWidget::class);
+		$context->registerDashboardWidget(OrganisatiesWidget::class);
 	}
 
 	public function boot(IBootContext $context): void

lib/Dashboard/OrganisatiesWidget.php

@@ -0,0 +1,69 @@
+<?php
+
+
+namespace OCA\ZaakAfhandelApp\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Util;
+
+use OCA\ZaakAfhandelApp\AppInfo\Application;
+
+class OrganisatiesWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_organisaties_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Organisaties zoeken');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getOrder(): int
+    {
+        return 10;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getIconClass(): string
+    {
+        return 'icon-zaken-widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getUrl(): ?string
+    {
+        return null;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function load(): void
+    {
+        Util::addScript(Application::APP_ID, Application::APP_ID . '-organisatiesWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}

lib/Dashboard/PersonenWidget.php

@@ -0,0 +1,69 @@
+<?php
+
+
+namespace OCA\ZaakAfhandelApp\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Util;
+
+use OCA\ZaakAfhandelApp\AppInfo\Application;
+
+class PersonenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_personen_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Personen zoeken');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getOrder(): int
+    {
+        return 10;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getIconClass(): string
+    {
+        return 'icon-zaken-widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getUrl(): ?string
+    {
+        return null;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function load(): void
+    {
+        Util::addScript(Application::APP_ID, Application::APP_ID . '-personenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}

package.json

@@ -25,6 +25,7 @@
         "@nextcloud/router": "^2.0.1",
         "@nextcloud/vue": "^8.12.0",
         "bootstrap-vue": "^2.23.1",
+        "lodash": "^4.17.21",
         "pinia": "^2.2.4",
         "vue": "^2.7.14",
         "vue-loading-overlay": "^3.4.3",
@@ -53,4 +54,4 @@
         "typescript": "^5.5.4",
         "vue-jest": "^3.0.7"
     }
-}
+}

src/dialogs/Dialogs.vue

@@ -1,8 +1,6 @@
 <template>
 	<!-- Placeholder div -->
-	<div>
-
-	</div>
+	<div />
 </template>
 
 <script>

src/entities/klanten/klanten.mock.ts

@@ -4,6 +4,7 @@ import { TKlant } from './klanten.types'
 export const mockKlantData = (): TKlant[] => [
 	{
 		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		type: 'persoon',
 		voornaam: 'John',
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',

src/entities/klanten/klanten.ts

@@ -1,9 +1,10 @@
 import { SafeParseReturnType, z } from 'zod'
-import { TKlant } from './klanten.types'
+import { TKlant, TKlantType } from './klanten.types'
 
 export class Klant implements TKlant {
 
 	public id: string
+	public type: TKlantType
 	public voornaam: string
 	public tussenvoegsel: string
 	public achternaam: string
@@ -22,6 +23,7 @@ export class Klant implements TKlant {
 
 	constructor(source: TKlant) {
 		this.id = source.id || ''
+		this.type = source.type || 'persoon'
 		this.voornaam = source.voornaam || ''
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''

src/entities/klanten/klanten.types.ts

@@ -1,5 +1,8 @@
+export type TKlantType = 'persoon' | 'organisatie'
+
 export type TKlant = {
     id: string;
+    type: TKlantType;
     voornaam: string;
     tussenvoegsel: string;
     achternaam: string;

src/modals/klanten/EditKlant.vue

@@ -15,6 +15,13 @@ import { klantStore, navigationStore } from '../../store/store.js'
 		</NcNoteCard>
 
 		<div v-if="!success" class="form-group">
+			<NcSelect
+				v-bind="typeOptions"
+				v-model="klantItem.type"
+				:disabled="loading"
+				input-label="Type klant"
+				required />
+
 			<NcTextField :disabled="loading"
 				label="Voornaam"
 				maxlength="255"
@@ -105,7 +112,7 @@ import { klantStore, navigationStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading"
+				:disabled="loading || !klantItem.type"
 				type="primary"
 				@click="editKlant()">
 				<template #icon>
@@ -126,6 +133,7 @@ import {
 	NcTextField,
 	NcLoadingIcon,
 	NcNoteCard,
+	NcSelect,
 } from '@nextcloud/vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
@@ -140,6 +148,7 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
+		NcSelect,
 		// Icons
 		ContentSaveOutline,
 		Cancel,
@@ -154,6 +163,7 @@ export default {
 			hasUpdated: false,
 			klantItem: {
 				voornaam: '',
+				type: 'persoon',
 				tussenvoegsel: '',
 				achternaam: '',
 				telefoonnummer: '',
@@ -169,14 +179,24 @@ export default {
 				subjectIdentificatie: '',
 				subjectType: '',
 			},
+			typeOptions: {
+				options: [
+					{ value: 'persoon', label: 'Persoon' },
+					{ value: 'organisatie', label: 'Organisatie' },
+				],
+			},
 		}
 	},
 	updated() {
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
+
+			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem?.type)
+
 			if (klantStore.klantItem?.id) {
 				this.klantItem = {
 					...klantStore.klantItem,
 					voornaam: klantStore.klantItem.voornaam || '',
+					type: klantType || { value: 'persoon', label: 'Persoon' },
 					tussenvoegsel: klantStore.klantItem.tussenvoegsel || '',
 					achternaam: klantStore.klantItem.achternaam || '',
 					telefoonnummer: klantStore.klantItem.telefoonnummer || '',
@@ -205,6 +225,7 @@ export default {
 			this.hasUpdated = false
 			this.klantItem = {
 				voornaam: '',
+				type: { value: 'persoon', label: 'Persoon' },
 				tussenvoegsel: '',
 				achternaam: '',
 				telefoonnummer: '',
@@ -226,6 +247,7 @@ export default {
 			try {
 				await klantStore.saveKlant({
 					...this.klantItem,
+					type: this.klantItem.type.value,
 				})
 				this.success = true
 				this.loading = false

src/navigation/Configuration.vue

@@ -40,7 +40,7 @@
 					<NcCheckboxRadioSwitch :checked.sync="configuration.external" type="switch">
 						{{ t('forms', 'Enable sharing') }}
 					</NcCheckboxRadioSwitch>
-					
+
 					<b>Mongo DB</b>
 					<NcTextField :value.sync="configuration.mongodbLocation"
 						label="The location (url)"

src/organisatiesWidget.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import OrganisatiesWidget from './views/widgets/OrganisatiesWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_organisaties_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(OrganisatiesWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})

src/personenWidget.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import PersonenWidget from './views/widgets/PersonenWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_personen_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(PersonenWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})