From 95070c9d78b59695e77f63d0bd88fe6b1b2cb241 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 3 Dec 2024 18:42:34 +0100
Subject: [PATCH 1/2] added handle task button

---
 .../icons/icon/icon-calendar-check-outline.js | 13 +++++++
 src/services/icons/icons.css                  |  8 ++++
 src/services/icons/index.js                   |  2 +
 src/store/modules/taak.js                     | 16 ++++----
 src/views/widgets/TakenWidget.vue             | 39 +++++++++++++++----
 5 files changed, 62 insertions(+), 16 deletions(-)
 create mode 100644 src/services/icons/icon/icon-calendar-check-outline.js

diff --git a/src/services/icons/icon/icon-calendar-check-outline.js b/src/services/icons/icon/icon-calendar-check-outline.js
new file mode 100644
index 0000000..1124ab5
--- /dev/null
+++ b/src/services/icons/icon/icon-calendar-check-outline.js
@@ -0,0 +1,13 @@
+import { getTheme } from '../../getTheme.js'
+
+/**
+ * Returns the correct 'calendar-check-outline' 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 iconCalendarCheckOutline() {
+	const theme = getTheme()
+
+	return theme === 'light' ? 'icon-calendar-check-outline-dark' : 'icon-calendar-check-outline-light'
+}
diff --git a/src/services/icons/icons.css b/src/services/icons/icons.css
index aeaba9f..5b381ca 100644
--- a/src/services/icons/icons.css
+++ b/src/services/icons/icons.css
@@ -12,4 +12,12 @@
 }
 .icon-pencil-light {
 	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjcxLDcuMDRDMjEuMSw2LjY1IDIxLjEsNiAyMC43MSw1LjYzTDE4LjM3LDMuMjlDMTgsMi45IDE3LjM1LDIuOSAxNi45NiwzLjI5TDE1LjEyLDUuMTJMMTguODcsOC44N00zLDE3LjI1VjIxSDYuNzVMMTcuODEsOS45M0wxNC4wNiw2LjE4TDMsMTcuMjVaIiBmaWxsPSIjZmZmZmZmIiAvPjwvc3ZnPg==);
+}
+
+/* CalendarCheckOutline */
+.icon-calendar-check-outline-dark {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIC8+PC9zdmc+);
+}
+.icon-calendar-check-outline-light {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5IDNIMThWMUgxNlYzSDhWMUg2VjNINUMzLjkgMyAzIDMuOSAzIDVWMTlDMyAyMC4xMSAzLjkgMjEgNSAyMUgxOUMyMC4xMSAyMSAyMSAyMC4xMSAyMSAxOVY1QzIxIDMuOSAyMC4xMSAzIDE5IDNNMTkgMTlINVY5SDE5VjE5TTUgN1Y1SDE5VjdINU0xMC41NiAxNy40NkwxNi41IDExLjUzTDE1LjQzIDEwLjQ3TDEwLjU2IDE1LjM0TDguNDUgMTMuMjNMNy4zOSAxNC4yOUwxMC41NiAxNy40NloiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+);
 }
\ No newline at end of file
diff --git a/src/services/icons/index.js b/src/services/icons/index.js
index dd72a16..f2e0c7d 100644
--- a/src/services/icons/index.js
+++ b/src/services/icons/index.js
@@ -1,5 +1,7 @@
 import { iconProgressClose as _iconProgressClose } from './icon/icon-progress-close.js'
 import { iconPencil as _iconPencil } from './icon/icon-pencil.js'
+import { iconCalendarCheckOutline as _iconCalendarCheckOutline } from './icon/icon-calendar-check-outline.js'
 
 export const iconProgressClose = _iconProgressClose()
 export const iconPencil = _iconPencil()
+export const iconCalendarCheckOutline = _iconCalendarCheckOutline()
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 118c8ad..4a12abc 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -38,16 +38,16 @@ export const useTaakStore = defineStore('taken', {
 		async refreshTakenList(search = null, notClosed = false) {
 			let endpoint = apiEndpoint
 
-			if (search !== null && search !== '') {
-				endpoint = endpoint + '?_search=' + search
+			const params = new URLSearchParams()
+			if (search) {
+				params.append('_search', search)
 			}
-
 			if (notClosed) {
-				if (search !== null && search !== '') {
-					endpoint = endpoint + '&status=open'
-				} else {
-					endpoint = endpoint + '?status=open'
-				}
+				params.append('status', 'open')
+			}
+
+			if (params.toString()) {
+				endpoint += `?${params.toString()}`
 			}
 
 			const response = await fetch(endpoint, {
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index a47889e..b26ee0b 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -9,7 +9,8 @@ import { taakStore, navigationStore } from '../../store/store.js'
 				:loading="loading"
 				:item-menu="itemMenu"
 				@show="onShow"
-				@sluiten="onSluiten">
+				@sluiten="onSluiten"
+				@afhandelen="onAfhandelen">
 				<template #empty-content>
 					<NcEmptyContent name="Geen open taken">
 						<template #icon>
@@ -51,6 +52,9 @@ import { getTheme } from '../../services/getTheme.js'
 // Entities
 import { Taak } from '../../entities/index.js'
 
+// Icons
+import { iconProgressClose, iconCalendarCheckOutline } from '../../services/icons/index.js'
+
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
@@ -78,7 +82,11 @@ export default {
 				},
 				sluiten: {
 					text: 'Sluiten',
-					icon: this.getSluitenIcon(),
+					icon: iconProgressClose,
+				},
+				afhandelen: {
+					text: 'Taak Afhandelen',
+					icon: iconCalendarCheckOutline,
 				},
 			},
 		}
@@ -139,12 +147,6 @@ export default {
 			navigationStore.setModal('widgetTaakForm')
 		},
 
-		getSluitenIcon() {
-			const theme = getTheme()
-
-			return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
-		},
-
 		async onSluiten(event) {
 			// change status to 'gesloten'
 			const { data } = await taakStore.getTaak(event.id)
@@ -159,6 +161,27 @@ export default {
 				status: 'gesloten',
 			})
 
+			taakStore.saveTaak(newTaak)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.fetchTaakItems(null, true)
+					}
+				})
+		},
+		async onAfhandelen(event) {
+			// change status to 'afgerond'
+			const { data } = await taakStore.getTaak(event.id)
+
+			if (data?.status === 'afgerond') {
+				console.info('Taak is already handled')
+				return
+			}
+
+			const newTaak = new Taak({
+				...data,
+				status: 'afgerond',
+			})
+
 			taakStore.saveTaak(newTaak)
 				.then(({ response }) => {
 					if (response.ok) {

From e4d29e5f3d6a6f28697c69ab94b35931e5dbca73 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Fri, 6 Dec 2024 13:58:49 +0100
Subject: [PATCH 2/2] changed variable names

---
 src/views/widgets/TakenWidget.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index b26ee0b..7a7990d 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -9,8 +9,8 @@ import { taakStore, navigationStore } from '../../store/store.js'
 				:loading="loading"
 				:item-menu="itemMenu"
 				@show="onShow"
-				@sluiten="onSluiten"
-				@afhandelen="onAfhandelen">
+				@statusClose="onCloseStatus"
+				@statusHandled="onHandledStatus">
 				<template #empty-content>
 					<NcEmptyContent name="Geen open taken">
 						<template #icon>
@@ -80,11 +80,11 @@ export default {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
-				sluiten: {
+				statusClose: {
 					text: 'Sluiten',
 					icon: iconProgressClose,
 				},
-				afhandelen: {
+				statusHandled: {
 					text: 'Taak Afhandelen',
 					icon: iconCalendarCheckOutline,
 				},
@@ -147,7 +147,7 @@ export default {
 			navigationStore.setModal('widgetTaakForm')
 		},
 
-		async onSluiten(event) {
+		async onCloseStatus(event) {
 			// change status to 'gesloten'
 			const { data } = await taakStore.getTaak(event.id)
 
@@ -168,7 +168,7 @@ export default {
 					}
 				})
 		},
-		async onAfhandelen(event) {
+		async onHandledStatus(event) {
 			// change status to 'afgerond'
 			const { data } = await taakStore.getTaak(event.id)