Added Contactmoment widget and form

docker-compose.yml

@@ -28,7 +28,7 @@ services:
   nextcloud:
     user: root
     container_name: nextcloud
-#    entrypoint: occ app:enable openconnector
+#    entrypoint: occ app:enable zaakafhandelapp
     image: nextcloud
     restart: always
     ports:

lib/AppInfo/Application.php

@@ -9,6 +9,7 @@
 use OCA\ZaakAfhandelApp\Dashboard\ZakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\TakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\OpenZakenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\ContactmomentenWidget;
 
 /**
  * Class Application
@@ -34,7 +35,7 @@ public function register(IRegistrationContext $context): void
 		$context->registerDashboardWidget(ZakenWidget::class);
 		$context->registerDashboardWidget(TakenWidget::class);
 		$context->registerDashboardWidget(OpenZakenWidget::class);
-
+		$context->registerDashboardWidget(ContactmomentenWidget::class);
 	}
 
 	public function boot(IBootContext $context): void

lib/Dashboard/ContactmomentenWidget.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 ContactmomentenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_contactmomenten_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Contact momenten');
+    }
+
+    /**
+     * @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 . '-contactmomentenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}

src/contactmomentenWidget.js

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

src/entities/bericht/bericht.mock.ts

@@ -4,6 +4,7 @@ import { TBericht } from './bericht.types'
 export const mockBerichtData = (): TBericht[] => [
 	{
 		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		title: 'Bericht 1',
 		batchID: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
 		aanmaakDatum: '2024-01-01',
 		berichtLeverancierID: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',

src/entities/bericht/bericht.ts

@@ -4,6 +4,7 @@ import { TBericht, BerichtID } from './bericht.types'
 export class Bericht implements TBericht {
 
 	public id: string
+	public title: string
 	public batchID: string
 	public aanmaakDatum: string
 	public berichtLeverancierID: string
@@ -22,6 +23,7 @@ export class Bericht implements TBericht {
 
 	constructor(source: TBericht) {
 		this.id = source.id || ''
+		this.title = source.title || ''
 		this.batchID = source.batchID || ''
 		this.aanmaakDatum = source.aanmaakDatum || ''
 		this.berichtLeverancierID = source.berichtLeverancierID || ''
@@ -42,6 +44,7 @@ export class Bericht implements TBericht {
 	public validate(): SafeParseReturnType<TBericht, unknown> {
 		const schema = z.object({
 			id: z.string(),
+			title: z.string(),
 			batchID: z.string(),
 			aanmaakDatum: z.string(),
 			berichtLeverancierID: z.string(),

src/entities/bericht/bericht.types.ts

@@ -2,6 +2,7 @@ export type BerichtID = string; // create an alias for string called BerichtID t
 
 export type TBericht = {
     id: string;
+    title: string;
     batchID: string;
     aanmaakDatum: string;
     berichtLeverancierID: string;

src/main.js

@@ -11,4 +11,4 @@ new Vue(
 		pinia,
 		render: h => h(App),
 	},
-).$mount('#content')
+).$mount('#content')

src/modals/berichten/EditBericht.vue

@@ -6,7 +6,7 @@ import { berichtStore, navigationStore, klantStore } from '../../store/store.js'
 	<NcDialog v-if="navigationStore.modal === 'editBericht'"
 		name="Bericht"
 		size="normal"
-		:can-close="false">
+		@closing="response = $event, closeModalFromButton()">
 		<NcNoteCard v-if="success" type="success">
 			<p>Bericht succesvol aangepast</p>
 		</NcNoteCard>
@@ -136,6 +136,12 @@ export default {
 		Plus,
 		Help,
 	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			required: false,
+		},
+	},
 	data() {
 		return {
 			success: false,
@@ -187,6 +193,12 @@ export default {
 		}
 	},
 	methods: {
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+
+		},
 		closeModal() {
 			navigationStore.setModal(false)
 			this.success = false
@@ -220,6 +232,10 @@ export default {
 				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/views/berichten/BerichtenList.vue

@@ -30,7 +30,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="berichtStore.berichtenList">
+			<div v-if="!!berichtStore.berichtenList?.length">
 				<NcListItem v-for="(bericht, i) in berichtStore.berichtenList"
 					:key="`${bericht}${i}`"
 					:name="bericht?.onderwerp"

src/views/klanten/KlantenList.vue

@@ -54,7 +54,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 							</template>
 							Bewerken
 						</NcActionButton>
-						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setDialog('deleteKlant')">
+						<NcActionButton @click="klantStore.setKlantItem(klant); deleteKlant()">
 							<template #icon>
 								<TrashCanOutline :size="20" />
 							</template>
@@ -126,6 +126,24 @@ export default {
 			}
 			return name
 		},
+		deleteKlant() {
+			fetch(
+				`/index.php/apps/zaakafhandelapp/api/klanten/${klantStore.klantItem.id}`,
+				{
+					method: 'DELETE',
+				},
+			)
+				.then((response) => {
+					response.json().then((data) => {
+						this.klantenList = data
+					})
+					this.loading = false
+				})
+				.catch((err) => {
+					console.error(err)
+					this.loading = false
+				})
+		},
 		fetchData(newPage) {
 			this.loading = true
 			fetch(

src/views/widgets/ContactMomentenWidget.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { berichtStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<div class="contactmomentenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent :title="t('Geen contact momenten')">
+						<template #icon>
+							<ChatOutline />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<NcButton type="primary" @click="openModal">
+			<template #icon>
+				<Plus :size="20" />
+			</template>
+			Contact moment starten
+		</NcButton>
+
+		<BerichtForm v-if="isModalOpen"
+			:dashboard-widget="true"
+			@save-success="fetchBerichtItems"
+			@close="closeModal" />
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
+import BerichtForm from '../../modals/berichten/EditBericht.vue'
+
+export default {
+	name: 'ContactMomentenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Plus,
+	},
+
+	data() {
+		return {
+			loading: false,
+			isModalOpen: false,
+			berichtItems: [],
+		}
+	},
+
+	computed: {
+		items() {
+			return this.berichtItems
+		},
+	},
+
+	mounted() {
+		this.fetchBerichtItems()
+	},
+
+	methods: {
+		fetchBerichtItems() {
+			this.loading = true
+			berichtStore.refreshBerichtenList()
+				.then(() => {
+					this.berichtItems = berichtStore.berichtenList.map(bericht => ({
+						id: bericht.id,
+						mainText: bericht.title,
+						subText: bericht.aanmaakDatum,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/chat-outline.svg',
+					}))
+
+					this.loading = false
+				})
+		},
+		openModal() {
+			this.isModalOpen = true
+			berichtStore.setBerichtItem(null)
+			navigationStore.setModal('editBericht')
+		},
+		closeModal() {
+			this.isModalOpen = false
+			navigationStore.setModal(null)
+		},
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style>
+.contactmomentenContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+}
+.itemContainer{
+	overflow: auto;
+ }
+</style>

src/views/zaken/ZakenList.vue

@@ -31,7 +31,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 				</NcActions>
 			</div>
 
-			<div v-if="!!zaakStore.zakenList?.length">
+			<div v-if="!!zaakStore.zakenList?.length && !loading">
 				<NcListItem v-for="(zaak, i) in zaakStore.zakenList"
 					:key="`${zaak}${i}`"
 					:name="zaak?.identificatie"

webpack.config.js

@@ -32,6 +32,10 @@ webpackConfig.entry = {
 		import: path.join(__dirname, 'src', 'openZakenWidget.js'),
 		filename: appId + '-openZakenWidget.js',
 	},
+	contactmomentenWidget: {
+		import: path.join(__dirname, 'src', 'contactmomentenWidget.js'),
+		filename: appId + '-contactmomentenWidget.js',
+	},
 }
 
 module.exports = webpackConfig