finished edit modal

css/dashboardWidgets.css

@@ -1,9 +1,11 @@
+/* import icons css file */
+@import "../src/services/icons/icons.css";
+
 .icon-zaken-widget {
-    background-image: url("../img/app-dark.svg");
-    filter: var(--background-invert-if-dark);
-  }
-
-  body.theme--dark .icon-zaken-widget {
-    background-image: url("../img/app.svg");
-  }
-
+  background-image: url("../img/app-dark.svg");
+  filter: var(--background-invert-if-dark);
+}
+
+body.theme--dark .icon-zaken-widget {
+  background-image: url("../img/app.svg");
+}

src/modals/contactMomenten/ContactMomentenForm.vue

@@ -3,8 +3,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 </script>
 
 <template>
-	<NcDialog
-		name="Contactmoment"
+	<NcDialog name="Contactmoment"
 		size="large"
 		label-id="contactMomentenForm"
 		dialog-classes="ContactMomentenForm"
@@ -67,7 +66,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 					</div>
 				</div>
 
-				<div v-if="klant && !contactMomentId" class="buttonsContainer">
+				<div v-if="klant && !isView" class="buttonsContainer">
 					<div>
 						<NcButton
 							:disabled="loading"
@@ -187,7 +186,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				</template>
 				Annuleer
 			</NcButton>
-			<NcActions v-if="!contactMomentId"
+			<NcActions v-if="!isView"
 				:disabled="loading || success || fetchLoading"
 				:primary="true"
 				menu-name="Acties">
@@ -208,18 +207,19 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
 				</NcActionButton>
 			</NcActions>
 			<NcButton
-				v-if="!contactMomentId"
+				v-if="!isView"
 				type="primary"
 				:disabled="!klant || loading || success || fetchLoading"
 				:loading="loading"
 				@click="addContactMoment()">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
+					<ContentSaveOutline v-else :size="20" />
 				</template>
-				Opslaan
+				{{ isEdit ? 'Opslaan' : 'Aanmaken' }}
 			</NcButton>
 		</template>
+
 		<TakenForm v-if="taakFormOpen"
 			:dashboard-widget="true"
 			@close-modal="closeTaakForm"
@@ -271,9 +271,20 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * If true, the form is in view mode and no actions are shown
+		 */
+		isView: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			/**
+			 * determines if this modal is an edit modal or a create modal. Is unrelated to the isView property.
+			 */
+			isEdit: !!this.contactMomentId,
 			fetchLoading: false, // used as the loading state when editing
 			success: false,
 			loading: false,
@@ -343,14 +354,18 @@ export default {
 		addContactMoment() {
 			this.loading = true
 
+			const endpoint = this.contactMomentId ? `contactmomenten/${this.contactMomentId}` : 'contactmomenten'
+			const method = this.contactMomentId ? 'PUT' : 'POST'
+
 			fetch(
-				'/index.php/apps/zaakafhandelapp/api/contactmomenten',
+				`/index.php/apps/zaakafhandelapp/api/${endpoint}`,
 				{
-					method: 'POST',
+					method,
 					headers: {
 						'Content-Type': 'application/json',
 					},
 					body: JSON.stringify({
+						...this.contactMoment,
 						notitie: this.contactMoment.notitie,
 						klant: this.klant?.id ?? '',
 						zaak: this.selectedZaak ?? '',

src/services/icons/icon/icon-pencil.js

@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'pencil' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconPencil() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-pencil-dark' : 'icon-pencil-light'
+}

src/services/icons/icon/icon-progress-close.js

@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'progress close' icon based on the theme as a class name.
+ *
+ * this class name can be put into a component that accepts an 'icon' prop
+ * @return {string}
+ */
+export function iconProgressClose() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
+}

src/services/icons/index.js

@@ -0,0 +1,5 @@
+import { iconProgressClose as _iconProgressClose } from './icon/icon-progress-close.js'
+import { iconPencil as _iconPencil } from './icon/icon-pencil.js'
+
+export const iconProgressClose = _iconProgressClose()
+export const iconPencil = _iconPencil()

src/views/widgets/ContactMomentenWidget.vue

@@ -5,10 +5,11 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 <template>
 	<div class="contactmomentenContainer">
 		<div class="itemContainer">
-			<NcDashboardWidget :items="items"
+			<NcDashboardWidget :items="contactMomentItems"
 				:loading="loading"
 				:item-menu="itemMenu"
 				@show="onShow"
+				@edit="onEdit"
 				@sluiten="onSluiten">
 				<template #empty-content>
 					<NcEmptyContent name="Geen contact momenten gevonden">
@@ -27,9 +28,10 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 			Contact moment starten
 		</NcButton>
 
-		<ContactMomentenForm v-if="isModalOpen"
+		<ContactMomentenForm v-if="isContactMomentFormOpen"
 			:dashboard-widget="true"
 			:contact-moment-id="contactMomentId"
+			:is-view="isView"
 			@save-success="fetchContactMomentItems"
 			@close-modal="closeModal" />
 	</div>
@@ -44,6 +46,7 @@ import { getTheme } from '../../services/getTheme.js'
 import { ContactMoment } from '../../entities/index.js'
 
 // Icons
+import { iconPencil, iconProgressClose } from '../../services/icons/index.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
 
@@ -64,33 +67,34 @@ export default {
 	data() {
 		return {
 			loading: false,
-			isModalOpen: false,
-			searchKlantModalOpen: false,
+			/**
+			 * determines if the contact moment form modal is open
+			 */
+			isContactMomentFormOpen: false,
 			contactMomentItems: [],
+			// contact moment form props
 			contactMomentId: null,
+			isView: false,
+			// widget options
 			itemMenu: {
 				show: {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
+				edit: {
+					text: 'Bewerk',
+					icon: iconPencil,
+				},
 				sluiten: {
 					text: 'Sluit',
-					icon: this.getSluitenIcon(),
+					icon: iconProgressClose,
 				},
 			},
 		}
 	},
-
-	computed: {
-		items() {
-			return this.contactMomentItems
-		},
-	},
-
 	mounted() {
 		this.fetchContactMomentItems()
 	},
-
 	methods: {
 		fetchContactMomentItems() {
 			this.loading = true
@@ -102,7 +106,7 @@ export default {
 				.then(([contactMomentResponse, klantResponse]) => {
 					this.contactMomentItems = contactMomentResponse.entities.map(contactMoment => ({
 						id: contactMoment.id,
-						mainText: (() => { // this is a self calling function to get the klant name
+						mainText: (() => { // this is a self calling function to get the klant name, which is why you don't see it being called anywhere
 							const klant = klantResponse.entities.find(klant => klant.id === contactMoment.klant)
 							if (klant) {
 								const tussenvoegsel = klant.tussenvoegsel ? klant.tussenvoegsel + ' ' : ''
@@ -118,6 +122,7 @@ export default {
 					this.loading = false
 				})
 		},
+		// === ICONS ===
 		getItemIcon() {
 			const theme = getTheme()
 
@@ -129,30 +134,47 @@ export default {
 
 			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/chat-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/chat-outline.svg`
 		},
-		getSluitenIcon() {
-			const theme = getTheme()
-
-			return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
-		},
+		// === MODAL CONTROL ===
+		/**
+		 * Opens the contact moment form modal in create/add mode
+		 */
 		openModal() {
-			this.isModalOpen = true
+			this.isContactMomentFormOpen = true
 			this.contactMomentId = null
 			contactMomentStore.setContactMomentItem(null)
-			navigationStore.setModal('contactMomentenForm')
 		},
+		/**
+		 * runs when the contact form modal closes
+		 */
 		closeModal() {
-			this.isModalOpen = false
+			this.isContactMomentFormOpen = false
+			this.isView = false
 			navigationStore.setModal(null)
 		},
-
+		// === EVENTS ===
+		/**
+		 * runs when the user clicks on the show button, and opens the contact moment form modal in view mode
+		 * @param {{id: number}} event - the contact moment item received from the widget
+		 */
 		onShow(event) {
 			this.contactMomentId = event.id
-			this.isModalOpen = true
-			navigationStore.setModal('contactMomentenForm')
+			this.isContactMomentFormOpen = true
+			this.isView = true
 		},
-
+		/**
+		 * runs when the user clicks on the edit button, and opens the contact moment form modal in edit mode
+		 * @param {{id: number}} event - the contact moment item received from the widget
+		 */
+		onEdit(event) {
+			this.contactMomentId = event.id
+			this.isContactMomentFormOpen = true
+			this.isView = false
+		},
+		/**
+		 * runs when the user clicks on the "sluiten" button, and changes the status of the contact moment to 'gesloten'
+		 * @param {{id: number}} event - the contact moment item received from the widget
+		 */
 		async onSluiten(event) {
-			// change status to 'gesloten'
 			const { data } = await contactMomentStore.getContactMoment(event.id)
 
 			if (data?.status === 'gesloten') {
@@ -176,16 +198,6 @@ export default {
 
 }
 </script>
-<style>
-.icon-progress-close-dark {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLW9wYWNpdHk6LjU7ZmlsbC1ydWxlOm5vbnplcm8iIGZpbGw9IiMwMDAwMDAiIC8+DQo8L3N2Zz4=);
-}
-
-.icon-progress-close-light {
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogICAgPHBhdGgNCiAgICAgICAgZD0iTTEzIDIuMDNWNC4wNUMxNy4zOSA0LjU5IDIwLjUgOC41OCAxOS45NiAxMi45N0MxOS41IDE2LjYxIDE2LjY0IDE5LjUgMTMgMTkuOTNWMjEuOTNDMTguNSAyMS4zOCAyMi41IDE2LjUgMjEuOTUgMTFDMjEuNSA2LjI1IDE3LjczIDIuNSAxMyAyLjAzTTExIDIuMDZDOS4wNSAyLjI1IDcuMTkgMyA1LjY3IDQuMjZMNy4xIDUuNzRDOC4yMiA0Ljg0IDkuNTcgNC4yNiAxMSA0LjA2VjIuMDZNNC4yNiA1LjY3QzMgNy4xOSAyLjI1IDkuMDQgMi4wNSAxMUg0LjA1QzQuMjQgOS41OCA0LjggOC4yMyA1LjY5IDcuMUw0LjI2IDUuNjdNMi4wNiAxM0MyLjI2IDE0Ljk2IDMuMDMgMTYuODEgNC4yNyAxOC4zM0w1LjY5IDE2LjlDNC44MSAxNS43NyA0LjI0IDE0LjQyIDQuMDYgMTNIMi4wNk03LjEgMTguMzdMNS42NyAxOS43NEM3LjE4IDIxIDkuMDQgMjEuNzkgMTEgMjJWMjBDOS41OCAxOS44MiA4LjIzIDE5LjI1IDcuMSAxOC4zN00xNC41OSA4TDEyIDEwLjU5TDkuNDEgOEw4IDkuNDFMMTAuNTkgMTJMOCAxNC41OUw5LjQxIDE2TDEyIDEzLjQxTDE0LjU5IDE2TDE2IDE0LjU5TDEzLjQxIDEyTDE2IDkuNDFMMTQuNTkgOFoiDQogICAgICAgIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgZmlsbD0iI2ZmZmZmZiIgLz4NCjwvc3ZnPg==);
-}
-
-</style>
 <style scoped>
 .contactmomentenContainer{
     display: flex;