From 8e12d0a2581374712929bc22427ce57a776af7be Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 5 Dec 2024 16:11:28 +0100
Subject: [PATCH 1/4] finished adding bericht to zaak

---
 package-lock.json                     |   3 +-
 src/entities/zaak/zaak.mock.ts        |   1 +
 src/entities/zaak/zaak.ts             |   3 +
 src/entities/zaak/zaak.types.ts       |   1 +
 src/modals/Modals.vue                 |   8 +-
 src/modals/zaken/AddBerichtToZaak.vue | 144 ++++++++++++++++++++++++++
 src/store/modules/zaken.ts            |   6 +-
 src/views/berichten/ZaakBerichten.vue |  62 +++++------
 src/views/zaken/ZaakDetails.vue       |  23 ++--
 9 files changed, 201 insertions(+), 50 deletions(-)
 create mode 100644 src/modals/zaken/AddBerichtToZaak.vue

diff --git a/package-lock.json b/package-lock.json
index 91c1b3d..7ac9a80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15265,8 +15265,7 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "license": "MIT"
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
diff --git a/src/entities/zaak/zaak.mock.ts b/src/entities/zaak/zaak.mock.ts
index 8e5197d..9f21229 100644
--- a/src/entities/zaak/zaak.mock.ts
+++ b/src/entities/zaak/zaak.mock.ts
@@ -26,6 +26,7 @@ export const mockZaakData = (): TZaak[] => [
 		selectielijstklasse: 'http://example.com',
 		hoofdzaak: 'http://example.com',
 		klant: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		berichten: [],
 	},
 ]
 
diff --git a/src/entities/zaak/zaak.ts b/src/entities/zaak/zaak.ts
index 57a1515..9bb02e5 100644
--- a/src/entities/zaak/zaak.ts
+++ b/src/entities/zaak/zaak.ts
@@ -26,6 +26,7 @@ export class Zaak implements TZaak {
 	public selectielijstklasse: string
 	public hoofdzaak: string
 	public klant: string
+	public berichten: string[]
 
 	constructor(source: TZaak) {
 		this.id = source.id || ''
@@ -51,6 +52,7 @@ export class Zaak implements TZaak {
 		this.selectielijstklasse = source.selectielijstklasse || ''
 		this.hoofdzaak = source.hoofdzaak || ''
 		this.klant = source.klant || ''
+		this.berichten = source.berichten || []
 	}
 
 	public validate(): SafeParseReturnType<TZaak, unknown> {
@@ -78,6 +80,7 @@ export class Zaak implements TZaak {
 			selectielijstklasse: z.string(),
 			hoofdzaak: z.string(),
 			klant: z.string(),
+			berichten: z.array(z.string()),
 		})
 
 		return schema.safeParse(this)
diff --git a/src/entities/zaak/zaak.types.ts b/src/entities/zaak/zaak.types.ts
index 791fd4a..98e27f3 100644
--- a/src/entities/zaak/zaak.types.ts
+++ b/src/entities/zaak/zaak.types.ts
@@ -24,4 +24,5 @@ export type TZaak = {
     selectielijstklasse: string;
     hoofdzaak: string;
     klant: string;
+    berichten: string[];
 }
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 7cbe23d..d9a2f78 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -5,8 +5,12 @@ import { navigationStore } from '../store/store.js'
 <template>
 	<!-- Placeholder -->
 	<div>
+		<!-- zaak -->
 		<ZaakForm v-if="navigationStore.modal === 'zaakForm'" />
+		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 		<WidgetZaakForm v-if="navigationStore.modal === 'widgetZaakForm'" />
+		<AddBerichtToZaak v-if="navigationStore.modal === 'addBerichtToZaak'" />
+		<!-- ==== -->
 		<EditZaakType />
 		<EditKlant />
 		<ViewKlantAuditTrail v-if="navigationStore.modal === 'viewKlantAuditTrail'" />
@@ -16,7 +20,6 @@ import { navigationStore } from '../store/store.js'
 		<WidgetTaakForm v-if="navigationStore.modal === 'widgetTaakForm'" />
 		<ViewTaakAuditTrail v-if="navigationStore.modal === 'viewTaakAuditTrail'" />
 		<EditRol />
-		<ViewZaakAuditTrail v-if="navigationStore.modal === 'viewZaakAuditTrail'" />
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
 		<DeleteContactMoment v-if="navigationStore.modal === 'deleteContactMoment'" />
 		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
@@ -39,6 +42,8 @@ import ViewZaakAuditTrail from './zaken/ViewZaakAuditTrail.vue'
 import ViewKlantRegister from './klantRegister/ViewKlantRegister.vue'
 import DeleteContactMoment from './contactMomenten/DeleteContactMoment.vue'
 import EditMedewerker from './medewerkers/EditMedewerker.vue'
+import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
+
 export default {
 	name: 'Modals',
 	components: {
@@ -57,6 +62,7 @@ export default {
 		ViewKlantRegister,
 		DeleteContactMoment,
 		EditMedewerker,
+		AddBerichtToZaak,
 	},
 }
 </script>
diff --git a/src/modals/zaken/AddBerichtToZaak.vue b/src/modals/zaken/AddBerichtToZaak.vue
new file mode 100644
index 0000000..d9e7f85
--- /dev/null
+++ b/src/modals/zaken/AddBerichtToZaak.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { zaakStore, navigationStore, berichtStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="addBerichtToZaak"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>Bericht toevoegen aan {{ zaakStore.zaakItem.title }}</h2>
+
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Bericht succesvol toegevoegd aan zaak</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+
+			<div v-if="success === null" class="form-group">
+				<NcSelect v-bind="berichten"
+					v-model="berichten.value"
+					input-label="Bericht"
+					:loading="berichtenLoading"
+					:disabled="loading"
+					required />
+			</div>
+
+			<NcButton v-if="success === null"
+				:disabled="!berichten?.value || loading"
+				type="primary"
+				@click="addBerichtToZaak">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcButton, NcModal, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { Zaak } from '../../entities/index.js'
+
+import _ from 'lodash'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'AddBerichtToZaak',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcSelect,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			berichtenLoading: false,
+			berichten: [],
+			loading: false,
+			success: null,
+			error: false,
+			errorCode: '',
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.zaakItem = zaakStore.zaakItem
+		this.fetchBerichtenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchBerichtenData() {
+			this.berichtenLoading = true
+
+			berichtStore.refreshBerichtenList()
+				.then(({ data }) => {
+					this.berichten = {
+						options: data.map((bericht) => ({
+							id: bericht.id,
+							label: bericht.title,
+						})),
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+				.finally(() => {
+					this.berichtenLoading = false
+				})
+		},
+		addBerichtToZaak() {
+			this.loading = true
+			this.error = false
+
+			const zaakItemCopy = _.cloneDeep(this.zaakItem)
+
+			if (zaakItemCopy.berichten) {
+				zaakItemCopy.berichten.push(this.berichten.value.id)
+			} else {
+				zaakItemCopy.berichten = [this.berichten.value.id]
+			}
+
+			const newZaakItem = new Zaak(zaakItemCopy)
+
+			zaakStore.saveZaak(newZaakItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						self.closeModal()
+					}, 2000)
+
+					this.hasUpdated = false
+				})
+				.catch((err) => {
+					this.error = err
+					this.hasUpdated = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modalContent {
+    margin: var(--zaa-margin-50, 12px);
+    text-align: center;
+}
+</style>
diff --git a/src/store/modules/zaken.ts b/src/store/modules/zaken.ts
index d9937f6..427d434 100644
--- a/src/store/modules/zaken.ts
+++ b/src/store/modules/zaken.ts
@@ -144,13 +144,13 @@ export const useZaakStore = defineStore('zaken', {
 				throw new Error('No zaak item to save')
 			}
 
-			const isNewZaak = !zaakItem.uuid
+			const isNewZaak = !zaakItem.id
 			const endpoint = isNewZaak
 				? `${apiEndpoint}`
-				: `${apiEndpoint}/${zaakItem.uuid}`
+				: `${apiEndpoint}/${zaakItem.id}`
 			const method = isNewZaak ? 'POST' : 'PUT'
 
-			console.info('Saving zaak item with id: ' + zaakItem.uuid)
+			console.info('Saving zaak item with id: ' + zaakItem.id)
 
 			const response = await fetch(
 				endpoint,
diff --git a/src/views/berichten/ZaakBerichten.vue b/src/views/berichten/ZaakBerichten.vue
index d01a2a3..20d1fa5 100644
--- a/src/views/berichten/ZaakBerichten.vue
+++ b/src/views/berichten/ZaakBerichten.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { navigationStore, berichtStore } from '../../store/store.js'
+import { navigationStore, berichtStore, zaakStore } from '../../store/store.js'
 </script>
 
 <template>
 	<div>
-		<div v-if="!loading">
-			<NcListItem v-for="(bericht, i) in berichtenList"
+		<div v-if="!loading && !!filteredBerichten?.length">
+			<NcListItem v-for="(bericht, i) in filteredBerichten"
 				:key="`${bericht}${i}`"
 				:name="bericht?.onderwerp"
 				:active="berichtStore.berichtItem?.id === bericht.id"
@@ -22,17 +22,29 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					{{ bericht?.berichttekst }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="editBericht(bericht)">
-						Bewerken
+					<NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setSelected('berichten')">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						Bekijken
 					</NcActionButton>
+					<!-- <NcActionButton @click="berichtStore.setBerichtItem(bericht); navigationStore.setModal('editBericht')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Bewerken
+					</NcActionButton> -->
 					<NcActionButton>
-						Verwijderen
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						Verwijderen van zaak
 					</NcActionButton>
 				</template>
 			</NcListItem>
 		</div>
 
-		<div v-if="!berichtenList?.length && !loading">
+		<div v-if="!filteredBerichten?.length && !loading">
 			Geen berichten gevonden.
 		</div>
 
@@ -49,6 +61,9 @@ import { NcListItem, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 
 // Icons
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 
 export default {
 	name: 'ZaakBerichten',
@@ -68,38 +83,27 @@ export default {
 		return {
 			search: '',
 			loading: true,
-			berichtenList: [],
 		}
 	},
+	computed: {
+		filteredBerichten() {
+			return berichtStore.berichtenList.filter(bericht => zaakStore.zaakItem.berichten.includes(bericht.id))
+		},
+	},
 	watch: {
 		zaakId(newVal) {
-			this.fetchData(newVal)
+			this.fetchData()
 		},
 	},
 	mounted() {
-		this.fetchData(this.zaakId)
+		this.fetchData()
 	},
 	methods: {
-		editBericht(bericht) {
-			berichtStore.setBerichtItem(bericht)
-			navigationStore.setModal('editBericht')
-		},
-		fetchData(zaakId) {
+		fetchData() {
 			this.loading = true
-			fetch(
-				'/index.php/apps/zaakafhandelapp/api/berichten',
-				{
-					method: 'GET',
-				},
-			)
-				.then((response) => {
-					response.json().then((data) => {
-						this.berichtenList = data.results || []
-					})
-					this.loading = false
-				})
-				.catch((err) => {
-					console.error(err)
+
+			berichtStore.refreshBerichtenList()
+				.finally(() => {
 					this.loading = false
 				})
 		},
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 53d42ca..deb3278 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -40,19 +40,19 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 							</template>
 							Taak toevoegen
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('addBericht')">
+						<NcActionButton @click="navigationStore.setModal('addBerichtToZaak')">
 							<template #icon>
 								<MessagePlus :size="20" />
 							</template>
 							Bericht toevoegen
 						</NcActionButton>
-						<NcActionButton @click="store.setModal('addBesluit')">
+						<NcActionButton @click="navigationStore.setModal('addBesluit')">
 							<template #icon>
 								<MessagePlus :size="20" />
 							</template>
 							Besluit toevoegen
 						</NcActionButton>
-						<NcActionButton @click="store.setModal('updateZaakStatus')">
+						<NcActionButton @click="navigationStore.setModal('updateZaakStatus')">
 							<template #icon>
 								<VectorPolylineEdit :size="20" />
 							</template>
@@ -229,18 +229,17 @@ export default {
 	},
 	data() {
 		return {
+			// state
+			loading: true,
 			currentActiveZaak: null,
+			// data
 			auditTrails: [],
 			zaak: [],
-			loading: true,
 		}
 	},
 	mounted() {
-		if (zaakStore.zaakItem?.id) {
-			this.currentActiveZaak = zaakStore.zaakItem
-			this.fetchAuditTrails(zaakStore.zaakItem.id)
-		}
-		this.fetchData()
+		this.currentActiveZaak = zaakStore.zaakItem
+		this.fetchAuditTrails(zaakStore.zaakItem.id)
 	},
 	updated() {
 		if (zaakStore.zaakItem?.id && JSON.stringify(this.currentActiveZaak) !== JSON.stringify(zaakStore.zaakItem)) {
@@ -251,12 +250,6 @@ export default {
 	methods: {
 		fetchData() {
 			this.loading = true
-
-			// get current zaak once
-			zaakStore.getZaak(zaakStore.zaakItem.id, { setItem: true })
-				.then(() => {
-					this.loading = false
-				})
 		},
 		fetchAuditTrails(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/zaken/${id}/audit_trail`)

From cb131a8f672705c8798ad72fbdd31f40703ddccf Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 5 Dec 2024 16:27:28 +0100
Subject: [PATCH 2/4] added quick fix to avoid duplicate submissions

---
 src/modals/zaken/AddBerichtToZaak.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/modals/zaken/AddBerichtToZaak.vue b/src/modals/zaken/AddBerichtToZaak.vue
index d9e7f85..3d27abf 100644
--- a/src/modals/zaken/AddBerichtToZaak.vue
+++ b/src/modals/zaken/AddBerichtToZaak.vue
@@ -71,7 +71,6 @@ export default {
 		}
 	},
 	mounted() {
-		this.zaakItem = zaakStore.zaakItem
 		this.fetchBerichtenData()
 	},
 	methods: {
@@ -84,10 +83,12 @@ export default {
 			berichtStore.refreshBerichtenList()
 				.then(({ data }) => {
 					this.berichten = {
-						options: data.map((bericht) => ({
-							id: bericht.id,
-							label: bericht.title,
-						})),
+						options: data
+							.filter((bericht) => !zaakStore.zaakItem.berichten.includes(bericht.id))
+							.map((bericht) => ({
+								id: bericht.id,
+								label: bericht.title,
+							})),
 					}
 				})
 				.catch((err) => {

From 87586d88838e6bc5f5bfa78a77cffd0e254e0a72 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Fri, 6 Dec 2024 15:01:47 +0100
Subject: [PATCH 3/4] cleanup

---
 src/views/eigenschappen/ZaakEigenschappen.vue |  2 +-
 src/views/zaken/ZaakDetails.vue               | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/views/eigenschappen/ZaakEigenschappen.vue b/src/views/eigenschappen/ZaakEigenschappen.vue
index 6c6d7af..0cc5b12 100644
--- a/src/views/eigenschappen/ZaakEigenschappen.vue
+++ b/src/views/eigenschappen/ZaakEigenschappen.vue
@@ -67,7 +67,7 @@ export default {
 	data() {
 		return {
 			search: '',
-			loading: true,
+			loading: false,
 			zakenList: [],
 		}
 	},
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index deb3278..8a3862f 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -170,17 +170,13 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 				</div>
 			</div>
 		</div>
-		<NcLoadingIcon v-if="loading"
-			:size="100"
-			appearance="dark"
-			name="Zaak details aan het laden" />
 	</div>
 </template>
 
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcLoadingIcon, NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -206,7 +202,6 @@ export default {
 	name: 'ZaakDetails',
 	components: {
 		// Components
-		NcLoadingIcon,
 		NcActions,
 		NcActionButton,
 		BTabs,
@@ -230,7 +225,6 @@ export default {
 	data() {
 		return {
 			// state
-			loading: true,
 			currentActiveZaak: null,
 			// data
 			auditTrails: [],
@@ -248,10 +242,8 @@ export default {
 		}
 	},
 	methods: {
-		fetchData() {
-			this.loading = true
-		},
 		fetchAuditTrails(id) {
+
 			fetch(`/index.php/apps/zaakafhandelapp/api/zaken/${id}/audit_trail`)
 				.then(response => response.json())
 				.then(data => {
@@ -259,6 +251,8 @@ export default {
 						this.auditTrails = data
 					}
 				})
+				.finally(() => {
+				})
 		},
 	},
 }

From cf29be61f86bc27a3cd4f176038f29738250efec Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Fri, 6 Dec 2024 15:13:55 +0100
Subject: [PATCH 4/4] cleanup

---
 src/modals/zaken/AddBerichtToZaak.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modals/zaken/AddBerichtToZaak.vue b/src/modals/zaken/AddBerichtToZaak.vue
index 3d27abf..2caa0ca 100644
--- a/src/modals/zaken/AddBerichtToZaak.vue
+++ b/src/modals/zaken/AddBerichtToZaak.vue
@@ -102,7 +102,7 @@ export default {
 			this.loading = true
 			this.error = false
 
-			const zaakItemCopy = _.cloneDeep(this.zaakItem)
+			const zaakItemCopy = _.cloneDeep(zaakStore.zaakItem)
 
 			if (zaakItemCopy.berichten) {
 				zaakItemCopy.berichten.push(this.berichten.value.id)