From ca9b899c629a77b825c8c9b192a0d7ecddda7f0d Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 2 Oct 2024 13:13:28 +0200
Subject: [PATCH 1/2] Added configurations to source

---
 src/modals/JobArgument/EditJobArgument.vue    |  18 +-
 src/modals/Modals.vue                         |   6 +
 .../DeleteSourceConfiguration.vue             | 118 +++++++++++++
 .../EditSourceConfiguration.vue               | 159 ++++++++++++++++++
 src/store/modules/source.js                   |   5 +
 src/views/Source/SourceDetails.vue            |  61 +++++++
 6 files changed, 363 insertions(+), 4 deletions(-)
 create mode 100644 src/modals/SourceConfiguration/DeleteSourceConfiguration.vue
 create mode 100644 src/modals/SourceConfiguration/EditSourceConfiguration.vue

diff --git a/src/modals/JobArgument/EditJobArgument.vue b/src/modals/JobArgument/EditJobArgument.vue
index 3712b9b11..64eb65d1c 100644
--- a/src/modals/JobArgument/EditJobArgument.vue
+++ b/src/modals/JobArgument/EditJobArgument.vue
@@ -20,7 +20,10 @@ import { jobStore, navigationStore } from '../../store/store.js'
 				<div class="form-group">
 					<NcTextField
 						id="key"
-						label="Key"
+						label="Key*"
+						required
+						:error="checkIfKeyIsUnique(argumentItem.key)"
+						:helper-text="checkIfKeyIsUnique(argumentItem.key) ? 'This key is already in use. Please choose a different key name.' : ''"
 						:value.sync="argumentItem.key" />
 					<NcTextField
 						id="value"
@@ -31,7 +34,7 @@ import { jobStore, navigationStore } from '../../store/store.js'
 
 			<NcButton
 				v-if="!success"
-				:disabled="loading"
+				:disabled="loading || !argumentItem.key || checkIfKeyIsUnique(argumentItem.key)"
 				type="primary"
 				@click="editJobArgument()">
 				<template #icon>
@@ -103,6 +106,12 @@ export default {
 				this.isEdit = true
 			}
 		},
+		checkIfKeyIsUnique(key) {
+			const keys = Object.keys(jobStore.jobItem.arguments)
+			if (this.oldKey === key) return false
+			if (keys.includes(key)) return true
+			return false
+		},
 		closeModal() {
 			navigationStore.setModal(false)
 			this.success = false
@@ -110,6 +119,7 @@ export default {
 			this.error = false
 			this.hasUpdated = false
 			this.isEdit = false
+			this.oldKey = ''
 			this.argumentItem = {
 				key: '',
 				value: '',
@@ -129,7 +139,7 @@ export default {
 				},
 			}
 
-			if (this.oldKey !== this.argumentItem.key) {
+			if (this.oldKey !== '' && this.oldKey !== this.argumentItem.key) {
 				delete newJobItem.arguments[this.oldKey]
 			}
 
@@ -144,7 +154,7 @@ export default {
 			} catch (error) {
 				this.loading = false
 				this.success = false
-				this.error = error.message || 'An error occurred while saving the mapping'
+				this.error = error.message || 'An error occurred while saving the job argument'
 			}
 		},
 	},
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 2d0f5eca4..6b3c1826d 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -14,6 +14,8 @@
 		<EditSynchronization />
 		<EditJobArgument />
 		<DeleteJobArgument />
+		<EditSourceConfiguration />
+		<DeleteSourceConfiguration />
 	</div>
 </template>
 
@@ -33,6 +35,8 @@ import EditSynchronization from './Synchronization/EditSynchronization.vue'
 import DeleteSynchronization from './Synchronization/DeleteSynchronization.vue'
 import EditJobArgument from './JobArgument/EditJobArgument.vue'
 import DeleteJobArgument from './JobArgument/DeleteJobArgument.vue'
+import EditSourceConfiguration from './SourceConfiguration/EditSourceConfiguration.vue'
+import DeleteSourceConfiguration from './SourceConfiguration/DeleteSourceConfiguration.vue'
 
 export default {
 	name: 'Modals',
@@ -51,6 +55,8 @@ export default {
 	  EditSynchronization,
 	  EditJobArgument,
 	  DeleteJobArgument,
+	  EditSourceConfiguration,
+	  DeleteSourceConfiguration,
 	},
 	setup() {
 	  return {
diff --git a/src/modals/SourceConfiguration/DeleteSourceConfiguration.vue b/src/modals/SourceConfiguration/DeleteSourceConfiguration.vue
new file mode 100644
index 000000000..1ff825d7c
--- /dev/null
+++ b/src/modals/SourceConfiguration/DeleteSourceConfiguration.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { navigationStore, sourceStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog
+		v-if="navigationStore.modal === 'deleteSourceConfiguration'"
+		name="Delete Source Configuration"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted source configuration</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the source configuration</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ sourceStore.sourceConfigurationKey }}</b>? This action cannot be undone.
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @click="navigationStore.setModal(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Delete v-if="!loading" :size="20" />
+				</template>
+				Delete
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'DeleteSourceConfiguration',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+		}
+	},
+	methods: {
+		deleteSourceConfiguration() {
+			this.loading = true
+
+			const sourceItemClone = { ...sourceStore.sourceItem }
+			delete sourceItemClone?.configuration[sourceStore.sourceConfigurationKey]
+
+			const sourceItem = {
+				...sourceStore.sourceItem,
+			}
+
+			sourceStore.saveSource(sourceItem)
+				.then(() => {
+					this.loading = false
+					this.success = true
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						navigationStore.setModal(false)
+					}, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+    margin: var(--OC-margin-50);
+    text-align: center;
+}
+
+.zaakDetailsContainer {
+    margin-block-start: var(--OC-margin-20);
+    margin-inline-start: var(--OC-margin-20);
+    margin-inline-end: var(--OC-margin-20);
+}
+
+.success {
+    color: green;
+}
+</style>
diff --git a/src/modals/SourceConfiguration/EditSourceConfiguration.vue b/src/modals/SourceConfiguration/EditSourceConfiguration.vue
new file mode 100644
index 000000000..58d2f8911
--- /dev/null
+++ b/src/modals/SourceConfiguration/EditSourceConfiguration.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { sourceStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal v-if="navigationStore.modal === 'editSourceConfiguration'"
+		ref="modalRef"
+		label-id="editSourceConfiguration"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ isEdit ? 'Edit' : 'Add' }} Configuration</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Configuration successfully added</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+
+			<form v-if="!success" @submit.prevent="handleSubmit">
+				<div class="form-group">
+					<NcTextField
+						id="key"
+						label="Key*"
+						required
+						:error="checkIfKeyIsUnique(configurationItem.key)"
+						:helper-text="checkIfKeyIsUnique(configurationItem.key) ? 'This key is already in use. Please choose a different key name.' : ''"
+						:value.sync="configurationItem.key" />
+					<NcTextField
+						id="value"
+						label="Value"
+						:value.sync="configurationItem.value" />
+				</div>
+			</form>
+
+			<NcButton
+				v-if="!success"
+				:disabled="loading || !configurationItem.key || checkIfKeyIsUnique(configurationItem.key)"
+				type="primary"
+				@click="editSourceConfiguration()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Save
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcModal,
+	NcLoadingIcon,
+	NcNoteCard,
+	NcTextField,
+} from '@nextcloud/vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+export default {
+	name: 'EditSourceConfiguration',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			configurationItem: {
+				key: '',
+				value: '',
+			},
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			oldKey: '',
+			isEdit: false,
+		}
+	},
+	mounted() {
+		this.initializeSourceConfiguration()
+	},
+	updated() {
+		if (navigationStore.modal === 'editSourceConfiguration' && !this.hasUpdated) {
+			this.initializeSourceConfiguration()
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		initializeSourceConfiguration() {
+			if (!sourceStore.sourceConfigurationKey) {
+				return
+			}
+			const configurationItem = Object.entries(sourceStore.sourceItem.configuration).find(([key]) => key === sourceStore.sourceConfigurationKey)
+			if (configurationItem) {
+				this.configurationItem = {
+					key: configurationItem[0] || '',
+					value: configurationItem[1] || '',
+				}
+				this.oldKey = configurationItem[0]
+				this.isEdit = true
+			}
+		},
+		checkIfKeyIsUnique(key) {
+			const keys = Object.keys(sourceStore.sourceItem.configuration)
+			if (this.oldKey === key) return false
+			if (keys.includes(key)) return true
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			this.success = false
+			this.loading = false
+			this.error = false
+			this.hasUpdated = false
+			this.isEdit = false
+			this.oldKey = ''
+			this.configurationItem = {
+				key: '',
+				value: '',
+			}
+		},
+		async editSourceConfiguration() {
+			this.loading = true
+
+			const newSourceItem = {
+				...sourceStore.sourceItem,
+				configuration: {
+					...sourceStore.sourceItem.configuration,
+					[this.configurationItem.key]: this.configurationItem.value,
+				},
+			}
+
+			if (this.oldKey !== '' && this.oldKey !== this.configurationItem.key) {
+				delete newSourceItem.configuration[this.oldKey]
+			}
+
+			try {
+				await sourceStore.saveSource(newSourceItem)
+				// Close modal or show success message
+				this.success = true
+				this.loading = false
+				setTimeout(() => {
+					this.closeModal()
+				}, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the source configuration'
+			}
+		},
+	},
+}
+</script>
diff --git a/src/store/modules/source.js b/src/store/modules/source.js
index 2998b5d45..115baa2a9 100644
--- a/src/store/modules/source.js
+++ b/src/store/modules/source.js
@@ -10,6 +10,7 @@ export const useSourceStore = defineStore(
 			sourceList: [],
 			sourceLog: false,
 			sourceLogs: [],
+			sourceConfigurationKey: null,
 		}),
 		actions: {
 			setSourceItem(sourceItem) {
@@ -34,6 +35,10 @@ export const useSourceStore = defineStore(
 				this.sourceLogs = sourceLogs
 				console.log('Source logs set to ' + sourceLogs.length + ' items')
 			},
+			setSourceConfigurationKey(sourceConfigurationKey) {
+				this.sourceConfigurationKey = sourceConfigurationKey
+				console.log('Source configuration key set to ' + sourceConfigurationKey)
+			},
 			/* istanbul ignore next */ // ignore this for Jest until moved into a service
 			async refreshSourceList(search = null) {
 				// @todo this might belong in a service?
diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index 975346542..455a2f6bd 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -27,6 +27,12 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 							</template>
 							Test
 						</NcActionButton>
+						<NcActionButton @click="navigationStore.setModal('editSourceConfiguration')">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Add Configuration
+						</NcActionButton>
 						<NcActionButton @click="navigationStore.setDialog('deleteSource')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
@@ -45,6 +51,44 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 				</div>
 				<div class="tabContainer">
 					<BTabs content-class="mt-3" justified>
+						<BTab title="Configurations">
+							<div v-if="sourceStore.sourceItem?.configuration !== null && Object.keys(sourceStore.sourceItem?.configuration).length > 0">
+								<NcListItem v-for="(value, key, i) in sourceStore.sourceItem?.configuration"
+									:key="`${key}${i}`"
+									:name="key"
+									:bold="false"
+									:force-display-actions="true"
+									:active="sourceStore.sourceConfigurationKey === key"
+									@click="setActiveSourceConfigurationKey(key)">
+									<template #icon>
+										<SitemapOutline
+											:class="sourceStore.sourceConfigurationKey === key && 'selectedZaakIcon'"
+											disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ value }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="editSourceConfiguration(key)">
+											<template #icon>
+												<Pencil :size="20" />
+											</template>
+											Edit
+										</NcActionButton>
+										<NcActionButton @click="deleteSourceConfiguration(key)">
+											<template #icon>
+												<Delete :size="20" />
+											</template>
+											Delete
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<div v-if="sourceStore.sourceItem?.configuration === null || Object.keys(sourceStore.sourceItem?.configuration).length === 0" class="tabPanel">
+								No configurations found
+							</div>
+						</BTab>
 						<BTab title="Mappings">
 							<div v-if="sourceStore?.sourceItem?.mappings?.length">
 								<NcListItem v-for="(character, i) in filterCharacters"
@@ -129,6 +173,10 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Sync from 'vue-material-design-icons/Sync.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import SitemapOutline from 'vue-material-design-icons/SitemapOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
 export default {
 	name: 'SourceDetails',
 	components: {
@@ -147,6 +195,19 @@ export default {
 		this.refreshSourceLogs()
 	},
 	methods: {
+		deleteSourceConfiguration(key) {
+			sourceStore.setSourceConfigurationKey(key)
+			navigationStore.setModal('deleteSourceConfiguration')
+		},
+		editSourceConfiguration(key) {
+			sourceStore.setSourceConfigurationKey(key)
+			navigationStore.setModal('editSourceConfiguration')
+		},
+		setActiveSourceConfigurationKey(sourceConfigurationKey) {
+			if (sourceStore.sourceConfigurationKey === sourceConfigurationKey) {
+				sourceStore.setSourceConfigurationKey(false)
+			} else { sourceStore.setSourceConfigurationKey(sourceConfigurationKey) }
+		},
 		refreshSourceLogs() {
 			sourceStore.refreshSourceLogs()
 

From 8cf92cd3d68f408fdf7b0af2cea023dfb14496f1 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 2 Oct 2024 16:58:07 +0200
Subject: [PATCH 2/2] Fixed console error

---
 .../SourceConfiguration/EditSourceConfiguration.vue    |  1 +
 src/views/Source/SourceDetails.vue                     | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/modals/SourceConfiguration/EditSourceConfiguration.vue b/src/modals/SourceConfiguration/EditSourceConfiguration.vue
index 58d2f8911..9a84683bc 100644
--- a/src/modals/SourceConfiguration/EditSourceConfiguration.vue
+++ b/src/modals/SourceConfiguration/EditSourceConfiguration.vue
@@ -107,6 +107,7 @@ export default {
 			}
 		},
 		checkIfKeyIsUnique(key) {
+			if (!sourceStore.sourceItem.configuration) return false
 			const keys = Object.keys(sourceStore.sourceItem.configuration)
 			if (this.oldKey === key) return false
 			if (keys.includes(key)) return true
diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index 455a2f6bd..e653fdda7 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -27,7 +27,7 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 							</template>
 							Test
 						</NcActionButton>
-						<NcActionButton @click="navigationStore.setModal('editSourceConfiguration')">
+						<NcActionButton @click="addSourceConfiguration">
 							<template #icon>
 								<Plus :size="20" />
 							</template>
@@ -61,7 +61,7 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 									:active="sourceStore.sourceConfigurationKey === key"
 									@click="setActiveSourceConfigurationKey(key)">
 									<template #icon>
-										<SitemapOutline
+										<FileCogOutline
 											:class="sourceStore.sourceConfigurationKey === key && 'selectedZaakIcon'"
 											disable-menu
 											:size="44" />
@@ -174,7 +174,7 @@ import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Sync from 'vue-material-design-icons/Sync.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import SitemapOutline from 'vue-material-design-icons/SitemapOutline.vue'
+import FileCogOutline from 'vue-material-design-icons/FileCogOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
 export default {
@@ -203,6 +203,10 @@ export default {
 			sourceStore.setSourceConfigurationKey(key)
 			navigationStore.setModal('editSourceConfiguration')
 		},
+		addSourceConfiguration() {
+			sourceStore.setSourceConfigurationKey(null)
+			navigationStore.setModal('editSourceConfiguration')
+		},
 		setActiveSourceConfigurationKey(sourceConfigurationKey) {
 			if (sourceStore.sourceConfigurationKey === sourceConfigurationKey) {
 				sourceStore.setSourceConfigurationKey(false)