Merge pull request #80 from ConductionNL/feature/PC108-103/taken-afro…

…nden

added handle task button

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'
+}

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()

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, {

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">
+				@statusClose="onCloseStatus"
+				@statusHandled="onHandledStatus">
 				<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'
@@ -77,9 +81,13 @@ export default {
 					text: 'Bekijk',
 					icon: 'icon-toggle',
 				},
-				sluiten: {
+				statusClose: {
 					text: 'Sluiten',
-					icon: this.getSluitenIcon(),
+					icon: iconProgressClose,
+				},
+				statusHandled: {
+					text: 'Taak Afhandelen',
+					icon: iconCalendarCheckOutline,
 				},
 			},
 		}
@@ -138,13 +146,7 @@ export default {
 			this.isModalOpen = true
 		},
 
-		getSluitenIcon() {
-			const theme = getTheme()
-
-			return theme === 'light' ? 'icon-progress-close-dark' : 'icon-progress-close-light'
-		},
-
-		async onSluiten(event) {
+		async onCloseStatus(event) {
 			// change status to 'gesloten'
 			const { data } = await taakStore.getTaak(event.id)
 
@@ -158,6 +160,27 @@ export default {
 				status: 'gesloten',
 			})
 
+			taakStore.saveTaak(newTaak)
+				.then(({ response }) => {
+					if (response.ok) {
+						this.fetchTaakItems(null, true)
+					}
+				})
+		},
+		async onHandledStatus(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) {