From d0fbe5df248dd7c3f2f8bd0d0f42e302c54117b5 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 14 Nov 2024 16:20:23 +0100
Subject: [PATCH] finished source config and target config key-value pairs

---
 .../synchronization/synchronization.ts        |   8 +-
 .../synchronization/synchronization.types.ts  |   4 +-
 src/modals/Modals.vue                         |  12 ++
 .../DeleteSynchronizationSourceConfig.vue     | 127 +++++++++++++++
 .../EditSynchronizationSourceConfig.vue       | 152 ++++++++++++++++++
 .../DeleteSynchronizationTargetConfig.vue     | 127 +++++++++++++++
 .../EditSynchronizationTargetConfig.vue       | 152 ++++++++++++++++++
 src/store/modules/synchronization.js          |  50 +++---
 .../SynchronizationDetails.vue                |  91 ++++++++++-
 9 files changed, 692 insertions(+), 31 deletions(-)
 create mode 100644 src/modals/SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue
 create mode 100644 src/modals/SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue
 create mode 100644 src/modals/SynchronizationTargetConfig/DeleteSynchronizationTargetConfig.vue
 create mode 100644 src/modals/SynchronizationTargetConfig/EditSynchronizationTargetConfig.vue

diff --git a/src/entities/synchronization/synchronization.ts b/src/entities/synchronization/synchronization.ts
index 700367e5..c9bac364 100644
--- a/src/entities/synchronization/synchronization.ts
+++ b/src/entities/synchronization/synchronization.ts
@@ -12,7 +12,7 @@ export class Synchronization extends ReadonlyBaseClass implements TSynchronizati
 	public sourceType: string
 	public sourceHash: string
 	public sourceTargetMapping: string
-	public sourceConfig: object
+	public sourceConfig: Record<string, string>
 	public sourceLastChanged: string
 	public sourceLastChecked: string
 	public sourceLastSynced: string
@@ -20,7 +20,7 @@ export class Synchronization extends ReadonlyBaseClass implements TSynchronizati
 	public targetType: string
 	public targetHash: string
 	public targetSourceMapping: string
-	public targetConfig: object
+	public targetConfig: Record<string, string>
 	public targetLastChanged: string
 	public targetLastChecked: string
 	public targetLastSynced: string
@@ -64,7 +64,7 @@ export class Synchronization extends ReadonlyBaseClass implements TSynchronizati
 			sourceType: z.string(),
 			sourceHash: z.string(),
 			sourceTargetMapping: z.string(),
-			sourceConfig: z.object({}),
+			sourceConfig: z.record(z.string(), z.string()),
 			sourceLastChanged: z.string(),
 			sourceLastChecked: z.string(),
 			sourceLastSynced: z.string(),
@@ -72,7 +72,7 @@ export class Synchronization extends ReadonlyBaseClass implements TSynchronizati
 			targetType: z.string(),
 			targetHash: z.string(),
 			targetSourceMapping: z.string(),
-			targetConfig: z.object({}),
+			targetConfig: z.record(z.string(), z.string()),
 			targetLastChanged: z.string(),
 			targetLastChecked: z.string(),
 			targetLastSynced: z.string(),
diff --git a/src/entities/synchronization/synchronization.types.ts b/src/entities/synchronization/synchronization.types.ts
index e2e59bfd..7dcf47a1 100644
--- a/src/entities/synchronization/synchronization.types.ts
+++ b/src/entities/synchronization/synchronization.types.ts
@@ -6,7 +6,7 @@ export type TSynchronization = {
     sourceType: string
     sourceHash: string
     sourceTargetMapping: string
-    sourceConfig: object
+    sourceConfig: Record<string, string>
     sourceLastChanged: string
     sourceLastChecked: string
     sourceLastSynced: string
@@ -14,7 +14,7 @@ export type TSynchronization = {
     targetType: string
     targetHash: string
     targetSourceMapping: string
-    targetConfig: object
+    targetConfig: Record<string, string>
     targetLastChanged: string
     targetLastChecked: string
     targetLastSynced: string
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 8b6165f6..337b4675 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -34,6 +34,10 @@ import { navigationStore } from '../store/store.js'
 		<ViewJobLog />
 		<ViewSynchronizationLog />
 		<ViewSynchronizationContract />
+		<EditSynchronizationSourceConfig v-if="navigationStore.modal === 'editSynchronizationSourceConfig'" />
+		<DeleteSynchronizationSourceConfig v-if="navigationStore.modal === 'deleteSynchronizationSourceConfig'" />
+		<EditSynchronizationTargetConfig v-if="navigationStore.modal === 'editSynchronizationTargetConfig'" />
+		<DeleteSynchronizationTargetConfig v-if="navigationStore.modal === 'deleteSynchronizationTargetConfig'" />
 	</div>
 </template>
 
@@ -68,6 +72,10 @@ import DeleteMappingCast from './mappingCast/DeleteMappingCast.vue'
 import ViewJobLog from './Log/ViewJobLog.vue'
 import ViewSynchronizationLog from './Log/ViewSynchronizationLog.vue'
 import ViewSynchronizationContract from './Log/ViewSynchronizationContract.vue'
+import EditSynchronizationSourceConfig from './SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue'
+import DeleteSynchronizationSourceConfig from './SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue'
+import EditSynchronizationTargetConfig from './SynchronizationTargetConfig/EditSynchronizationTargetConfig.vue'
+import DeleteSynchronizationTargetConfig from './SynchronizationTargetConfig/DeleteSynchronizationTargetConfig.vue'
 
 export default {
 	name: 'Modals',
@@ -102,6 +110,10 @@ export default {
 		ViewJobLog,
 		ViewSynchronizationLog,
 		ViewSynchronizationContract,
+		EditSynchronizationSourceConfig,
+		DeleteSynchronizationSourceConfig,
+		EditSynchronizationTargetConfig,
+		DeleteSynchronizationTargetConfig,
 	},
 	setup() {
 		return {
diff --git a/src/modals/SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue b/src/modals/SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue
new file mode 100644
index 00000000..fb95139d
--- /dev/null
+++ b/src/modals/SynchronizationSourceConfig/DeleteSynchronizationSourceConfig.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { navigationStore, synchronizationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Source Config"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted source config</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the source config</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ synchronizationStore.synchronizationSourceConfigKey }}</b>?
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteSourceConfig()">
+				<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: 'DeleteSynchronizationSourceConfig',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			synchronizationStore.setSynchronizationSourceConfigKey(null)
+		},
+		deleteSourceConfig() {
+			this.loading = true
+
+			const sourceConfigClone = { ...synchronizationStore.synchronizationItem.sourceConfig }
+
+			if (synchronizationStore.synchronizationSourceConfigKey in sourceConfigClone) {
+				delete sourceConfigClone[synchronizationStore.synchronizationSourceConfigKey]
+			} else {
+				this.error = 'Source config not found'
+				this.loading = false
+				return
+			}
+
+			const synchronizationItem = {
+				...synchronizationStore.synchronizationItem,
+				sourceConfig: sourceConfigClone,
+			}
+
+			synchronizationStore.saveSynchronization(synchronizationItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+				})
+				.finally(() => {
+					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/SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue b/src/modals/SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue
new file mode 100644
index 00000000..ea113058
--- /dev/null
+++ b/src/modals/SynchronizationSourceConfig/EditSynchronizationSourceConfig.vue
@@ -0,0 +1,152 @@
+<script setup>
+import { synchronizationStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editSourceConfig"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ synchronizationStore.synchronizationSourceConfigKey ? 'Edit' : 'Add' }} Source Config</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Source Config 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="sourceConfigKey"
+						label="Source Config Key*"
+						required
+						:error="isTaken(sourceConfig.key)"
+						:helper-text="isTaken(sourceConfig.key) ? 'This source config key is already in use. Please choose a different key name.' : ''"
+						:value.sync="sourceConfig.key" />
+					<NcTextField
+						id="sourceConfigValue"
+						label="Source Config Value*"
+						required
+						:value.sync="sourceConfig.value" />
+				</div>
+			</form>
+
+			<NcButton v-if="!success"
+				:disabled="loading
+					|| !sourceConfig.key
+					|| !sourceConfig.value
+					/// checks if the key is unique, ignores if the key is not changed
+					|| isTaken(sourceConfig.key)
+					/// checks if the value is the same as the one in the source config, only works if the key is not changed
+					|| synchronizationStore.synchronizationItem.sourceConfig[sourceConfig.key] === sourceConfig.value"
+				type="primary"
+				@click="editSourceConfig()">
+				<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: 'EditSynchronizationSourceConfig',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			sourceConfig: {
+				key: '',
+				value: '',
+			},
+			success: null,
+			loading: false,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	mounted() {
+		this.initializeSourceConfig()
+	},
+	methods: {
+		initializeSourceConfig() {
+			if (synchronizationStore.synchronizationSourceConfigKey) {
+				this.sourceConfig.key = synchronizationStore.synchronizationSourceConfigKey
+				this.sourceConfig.value = synchronizationStore.synchronizationItem.sourceConfig[synchronizationStore.synchronizationSourceConfigKey]
+			}
+		},
+		isTaken(key) {
+			if (!synchronizationStore.synchronizationItem?.sourceConfig) return false
+
+			// if the key is the same as the one we are editing, don't check for duplicates.
+			// this is safe since you are not allowed to save the same key anyway (only for edit modal).
+			if (synchronizationStore.synchronizationSourceConfigKey === key) return false
+
+			const allKeys = Object.keys(synchronizationStore.synchronizationItem.sourceConfig)
+			if (allKeys.includes(key)) return true
+
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			synchronizationStore.setSynchronizationSourceConfigKey(null)
+		},
+		editSourceConfig() {
+			this.loading = true
+
+			const isSourceConfigKeyPresent = !!synchronizationStore.synchronizationSourceConfigKey
+			const keyChanged = synchronizationStore.synchronizationSourceConfigKey !== this.sourceConfig.key
+
+			// copy the source config object
+			const newSourceConfig = { ...synchronizationStore.synchronizationItem.sourceConfig }
+
+			// if synchronizationSourceConfigKey is set remove that from the object
+			if (isSourceConfigKeyPresent && keyChanged) {
+				delete newSourceConfig[synchronizationStore.synchronizationSourceConfigKey]
+			}
+
+			// add the new key
+			newSourceConfig[this.sourceConfig.key] = this.sourceConfig.value
+
+			const newSynchronizationItem = {
+				...synchronizationStore.synchronizationItem,
+				sourceConfig: newSourceConfig,
+			}
+
+			synchronizationStore.saveSynchronization(newSynchronizationItem)
+				.then(({ response }) => {
+					this.success = response.ok
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((error) => {
+					this.error = error.message || 'An error occurred while saving the source config'
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
diff --git a/src/modals/SynchronizationTargetConfig/DeleteSynchronizationTargetConfig.vue b/src/modals/SynchronizationTargetConfig/DeleteSynchronizationTargetConfig.vue
new file mode 100644
index 00000000..1541c217
--- /dev/null
+++ b/src/modals/SynchronizationTargetConfig/DeleteSynchronizationTargetConfig.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { navigationStore, synchronizationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Target Config"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted target config</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the target config</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Do you want to delete <b>{{ synchronizationStore.synchronizationTargetConfigKey }}</b>?
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" @click="closeModal">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Close' : 'Cancel' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="deleteTargetConfig()">
+				<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: 'DeleteSynchronizationTargetConfig',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	methods: {
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			synchronizationStore.setSynchronizationTargetConfigKey(null)
+		},
+		deleteTargetConfig() {
+			this.loading = true
+
+			const targetConfigClone = { ...synchronizationStore.synchronizationItem.targetConfig }
+
+			if (synchronizationStore.synchronizationTargetConfigKey in targetConfigClone) {
+				delete targetConfigClone[synchronizationStore.synchronizationTargetConfigKey]
+			} else {
+				this.error = 'Target config not found'
+				this.loading = false
+				return
+			}
+
+			const synchronizationItem = {
+				...synchronizationStore.synchronizationItem,
+				targetConfig: targetConfigClone,
+			}
+
+			synchronizationStore.saveSynchronization(synchronizationItem)
+				.then(({ response }) => {
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+				})
+				.finally(() => {
+					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/SynchronizationTargetConfig/EditSynchronizationTargetConfig.vue b/src/modals/SynchronizationTargetConfig/EditSynchronizationTargetConfig.vue
new file mode 100644
index 00000000..621638e2
--- /dev/null
+++ b/src/modals/SynchronizationTargetConfig/EditSynchronizationTargetConfig.vue
@@ -0,0 +1,152 @@
+<script setup>
+import { synchronizationStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editTargetConfig"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ synchronizationStore.synchronizationTargetConfigKey ? 'Edit' : 'Add' }} Target Config</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Target Config 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="targetConfigKey"
+						label="Target Config Key*"
+						required
+						:error="isTaken(targetConfig.key)"
+						:helper-text="isTaken(targetConfig.key) ? 'This target config key is already in use. Please choose a different key name.' : ''"
+						:value.sync="targetConfig.key" />
+					<NcTextField
+						id="targetConfigValue"
+						label="Target Config Value*"
+						required
+						:value.sync="targetConfig.value" />
+				</div>
+			</form>
+
+			<NcButton v-if="!success"
+				:disabled="loading
+					|| !targetConfig.key
+					|| !targetConfig.value
+					/// checks if the key is unique, ignores if the key is not changed
+					|| isTaken(targetConfig.key)
+					/// checks if the value is the same as the one in the target config, only works if the key is not changed
+					|| synchronizationStore.synchronizationItem.targetConfig[targetConfig.key] === targetConfig.value"
+				type="primary"
+				@click="editTargetConfig()">
+				<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: 'EditSynchronizationTargetConfig',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			targetConfig: {
+				key: '',
+				value: '',
+			},
+			success: null,
+			loading: false,
+			error: false,
+			closeTimeoutFunc: null,
+		}
+	},
+	mounted() {
+		this.initializeTargetConfig()
+	},
+	methods: {
+		initializeTargetConfig() {
+			if (synchronizationStore.synchronizationTargetConfigKey) {
+				this.targetConfig.key = synchronizationStore.synchronizationTargetConfigKey
+				this.targetConfig.value = synchronizationStore.synchronizationItem.targetConfig[synchronizationStore.synchronizationTargetConfigKey]
+			}
+		},
+		isTaken(key) {
+			if (!synchronizationStore.synchronizationItem?.targetConfig) return false
+
+			// if the key is the same as the one we are editing, don't check for duplicates.
+			// this is safe since you are not allowed to save the same key anyway (only for edit modal).
+			if (synchronizationStore.synchronizationTargetConfigKey === key) return false
+
+			const allKeys = Object.keys(synchronizationStore.synchronizationItem.targetConfig)
+			if (allKeys.includes(key)) return true
+
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			synchronizationStore.setSynchronizationTargetConfigKey(null)
+		},
+		editTargetConfig() {
+			this.loading = true
+
+			const isTargetConfigKeyPresent = !!synchronizationStore.synchronizationTargetConfigKey
+			const keyChanged = synchronizationStore.synchronizationTargetConfigKey !== this.targetConfig.key
+
+			// copy the target config object
+			const newTargetConfig = { ...synchronizationStore.synchronizationItem.targetConfig }
+
+			// if synchronizationTargetConfigKey is set remove that from the object
+			if (isTargetConfigKeyPresent && keyChanged) {
+				delete newTargetConfig[synchronizationStore.synchronizationTargetConfigKey]
+			}
+
+			// add the new key
+			newTargetConfig[this.targetConfig.key] = this.targetConfig.value
+
+			const newSynchronizationItem = {
+				...synchronizationStore.synchronizationItem,
+				targetConfig: newTargetConfig,
+			}
+
+			synchronizationStore.saveSynchronization(newSynchronizationItem)
+				.then(({ response }) => {
+					this.success = response.ok
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch((error) => {
+					this.error = error.message || 'An error occurred while saving the target config'
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
diff --git a/src/store/modules/synchronization.js b/src/store/modules/synchronization.js
index 75c966e5..797e7258 100644
--- a/src/store/modules/synchronization.js
+++ b/src/store/modules/synchronization.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { Synchronization } from '../../entities/index.js'
 
@@ -9,26 +8,36 @@ export const useSynchronizationStore = defineStore('synchronization', {
 		synchronizationContracts: [],
 		synchronizationTest: null,
 		synchronizationLogs: [],
+		synchronizationSourceConfigKey: null,
+		synchronizationTargetConfigKey: null,
 	}),
 	actions: {
 		setSynchronizationItem(synchronizationItem) {
 			this.synchronizationItem = synchronizationItem && new Synchronization(synchronizationItem)
-			console.log('Active synchronization item set to ' + synchronizationItem)
+			console.info('Active synchronization item set to ' + synchronizationItem)
 		},
 		setSynchronizationList(synchronizationList) {
 			this.synchronizationList = synchronizationList.map(
 				(synchronizationItem) => new Synchronization(synchronizationItem),
 			)
-			console.log('Synchronization list set to ' + synchronizationList.length + ' items')
+			console.info('Synchronization list set to ' + synchronizationList.length + ' items')
 		},
 		setSynchronizationContracts(synchronizationContracts) {
 			this.synchronizationContracts = synchronizationContracts
-			console.log('Synchronization contracts set to ' + synchronizationContracts?.length + ' items')
+			console.info('Synchronization contracts set to ' + synchronizationContracts?.length + ' items')
 		},
 		setSynchronizationLogs(synchronizationLogs) {
 			this.synchronizationLogs = synchronizationLogs
 
-			console.log('Synchronization logs set to ' + synchronizationLogs?.length + ' items')
+			console.info('Synchronization logs set to ' + synchronizationLogs?.length + ' items')
+		},
+		setSynchronizationSourceConfigKey(key) {
+			this.synchronizationSourceConfigKey = key
+			console.info('Synchronization source config key set to ' + key)
+		},
+		setSynchronizationTargetConfigKey(key) {
+			this.synchronizationTargetConfigKey = key
+			console.info('Synchronization target config key set to ' + key)
 		},
 
 		/* istanbul ignore next */ // ignore this for Jest until moved into a service
@@ -127,7 +136,7 @@ export const useSynchronizationStore = defineStore('synchronization', {
 				throw new Error('No synchronization item to delete')
 			}
 
-			console.log('Deleting synchronization...')
+			console.info('Deleting synchronization...')
 
 			const endpoint = `/index.php/apps/openconnector/api/synchronizations/${this.synchronizationItem.id}`
 
@@ -143,12 +152,12 @@ export const useSynchronizationStore = defineStore('synchronization', {
 				})
 		},
 		// Create or save a synchronization from store
-		saveSynchronization(synchronizationItem) {
+		async saveSynchronization(synchronizationItem) {
 			if (!synchronizationItem) {
 				throw new Error('No synchronization item to save')
 			}
 
-			console.log('Saving synchronization...')
+			console.info('Saving synchronization...')
 
 			const isNewSynchronization = !synchronizationItem?.id
 			const endpoint = isNewSynchronization
@@ -156,7 +165,7 @@ export const useSynchronizationStore = defineStore('synchronization', {
 				: `/index.php/apps/openconnector/api/synchronizations/${synchronizationItem.id}`
 			const method = isNewSynchronization ? 'POST' : 'PUT'
 
-			return fetch(
+			const response = await fetch(
 				endpoint,
 				{
 					method,
@@ -166,17 +175,16 @@ export const useSynchronizationStore = defineStore('synchronization', {
 					body: JSON.stringify(synchronizationItem),
 				},
 			)
-				.then((response) => response.json())
-				.then((data) => {
-					this.setSynchronizationItem(data)
-					console.log('Synchronization saved')
 
-					this.refreshSynchronizationList()
-				})
-				.catch((err) => {
-					console.error('Error saving synchronization:', err)
-					throw err
-				})
+			console.info('Synchronization saved')
+
+			const data = await response.json()
+			const entity = new Synchronization(data)
+
+			this.setSynchronizationItem(entity)
+			this.refreshSynchronizationList()
+
+			return { response, data, entity }
 		},
 		// Test a synchronization
 		async testSynchronization() {
@@ -184,7 +192,7 @@ export const useSynchronizationStore = defineStore('synchronization', {
 				throw new Error('No synchronization item to test')
 			}
 
-			console.log('Testing synchronization...')
+			console.info('Testing synchronization...')
 
 			const endpoint = `/index.php/apps/openconnector/api/synchronizations-test/${this.synchronizationItem.id}`
 
@@ -198,7 +206,7 @@ export const useSynchronizationStore = defineStore('synchronization', {
 			const data = await response.json()
 			this.synchronizationTest = data
 
-			console.log('Synchronization tested')
+			console.info('Synchronization tested')
 			this.refreshSynchronizationLogs()
 
 			return { response, data }
diff --git a/src/views/Synchronization/SynchronizationDetails.vue b/src/views/Synchronization/SynchronizationDetails.vue
index c2920f2c..34af78bd 100644
--- a/src/views/Synchronization/SynchronizationDetails.vue
+++ b/src/views/Synchronization/SynchronizationDetails.vue
@@ -21,6 +21,18 @@ import { synchronizationStore, navigationStore, logStore } from '../../store/sto
 							</template>
 							Edit
 						</NcActionButton>
+						<NcActionButton @click="synchronizationStore.setSynchronizationSourceConfigKey(null); navigationStore.setModal('editSynchronizationSourceConfig')">
+							<template #icon>
+								<DatabaseSettingsOutline :size="20" />
+							</template>
+							Add Source Config
+						</NcActionButton>
+						<NcActionButton @click="synchronizationStore.setSynchronizationTargetConfigKey(null); navigationStore.setModal('editSynchronizationTargetConfig')">
+							<template #icon>
+								<CardBulletedSettingsOutline :size="20" />
+							</template>
+							Add Target Config
+						</NcActionButton>
 						<NcActionButton @click="navigationStore.setModal('testSynchronization')">
 							<template #icon>
 								<Sync :size="20" />
@@ -72,10 +84,6 @@ import { synchronizationStore, navigationStore, logStore } from '../../store/sto
 						<b>Source Type:</b>
 						<p>{{ synchronizationStore.synchronizationItem.sourceType || 'N/A' }}</p>
 					</div>
-					<div class="gridContent gridFullWidth">
-						<b>Source Config:</b>
-						<p>{{ synchronizationStore.synchronizationItem.sourceConfig || 'N/A' }}</p>
-					</div>
 					<div class="gridContent gridFullWidth">
 						<b>Source Hash:</b>
 						<p>{{ synchronizationStore.synchronizationItem.sourceHash || 'N/A' }}</p>
@@ -159,6 +167,78 @@ import { synchronizationStore, navigationStore, logStore } from '../../store/sto
 								No contracts found
 							</div>
 						</BTab>
+						<BTab title="Source config">
+							<div v-if="Object.keys(synchronizationStore.synchronizationItem.sourceConfig).length">
+								<NcListItem v-for="(value, key, i) in synchronizationStore.synchronizationItem.sourceConfig"
+									:key="`${key}${i}`"
+									:name="key"
+									:bold="false"
+									:force-display-actions="true"
+									:active="false">
+									<template #icon>
+										<DatabaseSettingsOutline
+											disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ value }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="synchronizationStore.setSynchronizationSourceConfigKey(key); navigationStore.setModal('editSynchronizationSourceConfig')">
+											<template #icon>
+												<Pencil :size="20" />
+											</template>
+											Edit
+										</NcActionButton>
+										<NcActionButton @click="synchronizationStore.setSynchronizationSourceConfigKey(key); navigationStore.setModal('deleteSynchronizationSourceConfig')">
+											<template #icon>
+												<Delete :size="20" />
+											</template>
+											Delete
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<div v-if="!Object.keys(synchronizationStore.synchronizationItem.sourceConfig).length" class="tabPanel">
+								No source configs found
+							</div>
+						</BTab>
+						<BTab title="Target config">
+							<div v-if="Object.keys(synchronizationStore.synchronizationItem.targetConfig).length">
+								<NcListItem v-for="(value, key, i) in synchronizationStore.synchronizationItem.targetConfig"
+									:key="`${key}${i}`"
+									:name="key"
+									:bold="false"
+									:force-display-actions="true"
+									:active="false">
+									<template #icon>
+										<CardBulletedSettingsOutline
+											disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ value }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="synchronizationStore.setSynchronizationTargetConfigKey(key); navigationStore.setModal('editSynchronizationTargetConfig')">
+											<template #icon>
+												<Pencil :size="20" />
+											</template>
+											Edit
+										</NcActionButton>
+										<NcActionButton @click="synchronizationStore.setSynchronizationTargetConfigKey(key); navigationStore.setModal('deleteSynchronizationTargetConfig')">
+											<template #icon>
+												<Delete :size="20" />
+											</template>
+											Delete
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<div v-if="!Object.keys(synchronizationStore.synchronizationItem.targetConfig).length" class="tabPanel">
+								No target configs found
+							</div>
+						</BTab>
 						<BTab title="Logs">
 							<div v-if="synchronizationStore.synchronizationLogs?.length">
 								<NcListItem v-for="(log, i) in synchronizationStore.synchronizationLogs"
@@ -199,11 +279,14 @@ import { NcActions, NcActionButton, NcListItem } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import FileCertificateOutline from 'vue-material-design-icons/FileCertificateOutline.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
 import Sync from 'vue-material-design-icons/Sync.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
+import DatabaseSettingsOutline from 'vue-material-design-icons/DatabaseSettingsOutline.vue'
+import CardBulletedSettingsOutline from 'vue-material-design-icons/CardBulletedSettingsOutline.vue'
 
 export default {
 	name: 'SynchronizationDetails',