finished frontend resultaten

src/entities/index.js

@@ -7,3 +7,4 @@ export * from './bericht/index.js'
 export * from './rol/index.js'
 export * from './medewerkers/index.js'
 export * from './contactmoment/index.js'
+export * from './resultaat/index.js'

src/entities/resultaat/index.js

@@ -0,0 +1,3 @@
+export * from './resultaat.ts'
+export * from './resultaat.types.ts'
+export * from './resultaat.mock.ts'

src/entities/resultaat/resultaat.mock.ts

@@ -0,0 +1,14 @@
+import { Resultaat } from './resultaat'
+import { TResultaat } from './resultaat.types'
+
+export const mockResultaatData = (): TResultaat[] => [
+	{
+		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		url: 'https://api.example.com/resultaten/15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		zaak: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		resultaattype: 'Audit',
+		toelichting: 'Deze taak omvat het uitvoeren van een gedetailleerde interne audit van de bedrijfsprocessen om te controleren of alle afdelingen voldoen aan de vastgestelde kwaliteitsnormen. De bevindingen worden gedocumenteerd en er worden aanbevelingen gedaan voor verbeteringen.',
+	},
+]
+
+export const mockResultaat = (data: TResultaat[] = mockResultaatData()): TResultaat[] => data.map(item => new Resultaat(item))

src/entities/resultaat/resultaat.spec.ts

@@ -0,0 +1,12 @@
+import { Resultaat } from './resultaat'
+import { mockResultaatData } from './resultaat.mock'
+
+describe('Resultaat Entity', () => {
+	it('should create a Resultaat entity with full data', () => {
+		const resultaat = new Resultaat(mockResultaatData()[0])
+
+		expect(resultaat).toBeInstanceOf(Resultaat)
+		expect(resultaat).toEqual(mockResultaatData()[0])
+		expect(resultaat.validate().success).toBe(true)
+	})
+})

src/entities/resultaat/resultaat.ts

@@ -0,0 +1,32 @@
+import { SafeParseReturnType, z } from 'zod'
+import { TResultaat } from './resultaat.types'
+
+export class Resultaat implements TResultaat {
+
+	public id: string
+	public url: string
+	public zaak: string
+	public resultaattype: string
+	public toelichting: string
+
+	constructor(source: TResultaat) {
+		this.id = source.id || ''
+		this.url = source.url || ''
+		this.zaak = source.zaak || ''
+		this.resultaattype = source.resultaattype || ''
+		this.toelichting = source.toelichting || ''
+	}
+
+	public validate(): SafeParseReturnType<TResultaat, unknown> {
+		const schema = z.object({
+			id: z.string(),
+			url: z.string(),
+			zaak: z.string(),
+			resultaattype: z.string(),
+			toelichting: z.string(),
+		})
+
+		return schema.safeParse(this)
+	}
+
+}

src/entities/resultaat/resultaat.types.ts

@@ -0,0 +1,7 @@
+export type TResultaat = {
+    id: string;
+    url: string;
+    zaak: string;
+    resultaattype: string;
+    toelichting: string;
+}

src/modals/Modals.vue

@@ -33,6 +33,9 @@ import { navigationStore } from '../store/store.js'
 		<!-- klant register -->
 		<ViewKlantRegister v-if="navigationStore.modal === 'viewKlantRegister'" />
 		<EditMedewerker v-if="navigationStore.modal === 'editMedewerker'" />
+		<!-- resultaat -->
+		<ResultaatForm v-if="navigationStore.modal === 'resultaatForm'" />
+		<DeleteResultaat v-if="navigationStore.modal === 'deleteResultaat'" />
 	</div>
 </template>
 
@@ -56,6 +59,8 @@ import AddBerichtToZaak from './zaken/AddBerichtToZaak.vue'
 import AddTaakToZaak from './zaken/AddTaakToZaak.vue'
 import ContactMomentenForm from './contactMomenten/ContactMomentenForm.vue'
 import AddRolToZaak from './zaken/AddRolToZaak.vue'
+import ResultaatForm from './resultaten/ResultaatForm.vue'
+import DeleteResultaat from './resultaten/DeleteResultaat.vue'
 import ViewContactMoment from './contactMomenten/ViewContactMoment.vue'
 
 export default {
@@ -80,6 +85,8 @@ export default {
 		AddTaakToZaak,
 		ContactMomentenForm,
 		AddRolToZaak,
+		ResultaatForm,
+		DeleteResultaat,
 		ViewContactMoment,
 	},
 }

src/modals/resultaten/DeleteResultaat.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { resultaatStore, navigationStore, zaakStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Resultaat verwijderen"
+		size="normal"
+		:can-close="false">
+		<!-- if zaken list is not populated yet, show a quick loading icon (this should under normal conditions not happen) -->
+		<div v-if="!zaakStore.zakenList?.length">
+			<NcLoadingIcon :size="40" />
+		</div>
+		<div v-else>
+			<p v-if="success === null">
+				Weet u zeker dat u
+				<b>{{ zaakStore.zakenList.find((zaak) => zaak.id === resultaatStore.resultaatItem?.zaak)?.identificatie }} > {{ resultaatStore.resultaatItem?.toelichting }}</b>
+				permanent wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+			</p>
+
+			<div v-if="success !== null">
+				<NcNoteCard v-if="success" type="success">
+					<p>Resultaat succesvol verwijderd</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="!success && !error" type="error">
+					<p>Er is een fout opgetreden bij het verwijderen van het resultaat</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+		</div>
+
+		<template #actions>
+			<NcButton @click="closeDialog">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success === null ? 'Annuleren' : 'Sluiten' }}
+			</NcButton>
+			<NcButton v-if="success === null"
+				:disabled="loading"
+				type="error"
+				@click="deleteResultaat()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcDialog,
+	NcLoadingIcon,
+	NcNoteCard,
+} from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+export default {
+	name: 'DeleteResultaat',
+	components: {
+		NcDialog,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		TrashCanOutline,
+		Cancel,
+	},
+	data() {
+		return {
+			success: null,
+			loading: false,
+			error: null,
+			closeModalTimeout: null,
+		}
+	},
+	mounted() {
+		zaakStore.refreshZakenList()
+	},
+	methods: {
+		closeDialog() {
+			navigationStore.setModal(null)
+			clearTimeout(this.closeModalTimeout)
+		},
+		async deleteResultaat() {
+			this.loading = true
+
+			resultaatStore.deleteResultaat({
+				...resultaatStore.resultaatItem,
+			}).then(({ response }) => {
+				this.success = response.ok
+				response.ok && (this.closeModalTimeout = setTimeout(this.closeDialog, 2000))
+			}).catch((error) => {
+				this.success = false
+				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van het resultaat'
+			}).finally(() => {
+				this.loading = false
+			})
+		},
+	},
+}
+</script>