Merge pull request #83 from ConductionNL/feature/PC108-117/zaak-add-b…

…ericht

finished adding bericht to zaak

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: [],
 	},
 ]
 

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)

src/entities/zaak/zaak.types.ts

@@ -24,4 +24,5 @@ export type TZaak = {
     selectielijstklasse: string;
     hoofdzaak: string;
     klant: string;
+    berichten: string[];
 }

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'" />
@@ -15,7 +19,6 @@ import { navigationStore } from '../store/store.js'
 		<EditTaak v-if="navigationStore.modal === 'editTaak'" />
 		<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'" />
@@ -37,6 +40,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: {
@@ -54,6 +59,7 @@ export default {
 		ViewKlantRegister,
 		DeleteContactMoment,
 		EditMedewerker,
+		AddBerichtToZaak,
 	},
 }
 </script>

src/modals/zaken/AddBerichtToZaak.vue

@@ -0,0 +1,145 @@
+<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.fetchBerichtenData()
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+		},
+		fetchBerichtenData() {
+			this.berichtenLoading = true
+
+			berichtStore.refreshBerichtenList()
+				.then(({ data }) => {
+					this.berichten = {
+						options: data
+							.filter((bericht) => !zaakStore.zaakItem.berichten.includes(bericht.id))
+							.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(zaakStore.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>

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,

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
 				})
 		},

src/views/eigenschappen/ZaakEigenschappen.vue

@@ -67,7 +67,7 @@ export default {
 	data() {
 		return {
 			search: '',
-			loading: true,
+			loading: false,
 			zakenList: [],
 		}
 	},