From f131104b7facb55bfd17092fd7a269f3df1eb25a Mon Sep 17 00:00:00 2001
From: Thijn <Thijn@conduction.nl>
Date: Mon, 18 Nov 2024 16:06:22 +0100
Subject: [PATCH 01/12] finished synchro modal improvements

---
 src/modals/Modals.vue                         |   2 +-
 .../Synchronization/EditSynchronization.vue   | 501 +++++++++++++++---
 src/store/modules/mapping.js                  |  24 +-
 src/store/modules/source.js                   |  31 +-
 src/store/modules/synchronization.js          |  23 +-
 5 files changed, 460 insertions(+), 121 deletions(-)

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 2e4ebf2..375a5aa 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -26,7 +26,7 @@ import { navigationStore } from '../store/store.js'
 		<EditMappingUnset v-if="navigationStore.modal === 'editMappingUnset'" />
 		<DeleteMappingUnset v-if="navigationStore.modal === 'deleteMappingUnset'" />
 		<DeleteSynchronization />
-		<EditSynchronization />
+		<EditSynchronization v-if="navigationStore.modal === 'editSynchronization'" />
 		<TestSynchronization />
 		<EditJobArgument />
 		<DeleteJobArgument />
diff --git a/src/modals/Synchronization/EditSynchronization.vue b/src/modals/Synchronization/EditSynchronization.vue
index 3c28da6..f4aa178 100644
--- a/src/modals/Synchronization/EditSynchronization.vue
+++ b/src/modals/Synchronization/EditSynchronization.vue
@@ -1,22 +1,78 @@
 <script setup>
-import { synchronizationStore, navigationStore } from '../../store/store.js'
+import { synchronizationStore, navigationStore, sourceStore, mappingStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal v-if="navigationStore.modal === 'editSynchronization'"
-		ref="modalRef"
+	<NcModal ref="modalRef"
 		label-id="editSynchronization"
 		@close="closeModal">
 		<div class="modalContent">
 			<h2>{{ synchronizationItem.id ? 'Edit' : 'Add' }} Synchronization</h2>
 
-			<NcNoteCard v-if="success" type="success">
-				<p>Synchronization successfully added</p>
-			</NcNoteCard>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
+			<!-- ====================== -->
+			<!-- Open Register notecard -->
+			<!-- ====================== -->
+			<div v-if="!openRegisterInstalled && !openRegisterCloseAlert" class="openregister-notecard">
+				<NcNoteCard
+					:type="openRegisterIsAvailable ? 'info' : 'error'"
+					:heading="openRegisterIsAvailable ? 'Open Register is not installed' : 'Failed to install Open Register'">
+					<p>
+						{{ openRegisterIsAvailable
+							? 'Some features require Open Register to be installed'
+							: 'This either means that Open Register is not available on this server or you need to confirm your password' }}
+					</p>
 
+					<div class="install-buttons">
+						<NcButton v-if="openRegisterIsAvailable"
+							aria-label="Install OpenRegister"
+							size="small"
+							type="primary"
+							:loading="openRegisterLoading"
+							@click="installOpenRegister">
+							<template #icon>
+								<CloudDownload :size="20" />
+							</template>
+							Install OpenRegister
+						</NcButton>
+						<NcButton
+							aria-label="Install OpenRegister Manually"
+							size="small"
+							type="secondary"
+							@click="openLink('/index.php/settings/apps/organization/openregister', '_blank')">
+							<template #icon>
+								<OpenInNew :size="20" />
+							</template>
+							Install OpenRegister Manually
+						</NcButton>
+					</div>
+					<div class="close-button">
+						<NcActions>
+							<NcActionButton @click="openRegisterCloseAlert = true">
+								<template #icon>
+									<Close :size="20" />
+								</template>
+								Close
+							</NcActionButton>
+						</NcActions>
+					</div>
+				</NcNoteCard>
+			</div>
+
+			<!-- ====================== -->
+			<!-- Success/Error notecard -->
+			<!-- ====================== -->
+			<div v-if="success || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Synchronization successfully added</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error || 'An error occurred' }}</p>
+				</NcNoteCard>
+			</div>
+
+			<!-- ====================== -->
+			<!--          Form          -->
+			<!-- ====================== -->
 			<form v-if="!success" @submit.prevent="handleSubmit">
 				<NcTextField :value.sync="synchronizationItem.name"
 					label="Name"
@@ -25,11 +81,19 @@ import { synchronizationStore, navigationStore } from '../../store/store.js'
 				<NcTextArea :value.sync="synchronizationItem.description"
 					label="Description" />
 
-				<NcTextField :value.sync="synchronizationItem.sourceId"
-					label="sourceId" />
+				<NcSelect v-bind="typeOptions"
+					v-model="typeOptions.value"
+					input-label="Source Type" />
+
+				<NcSelect v-bind="sourceOptions"
+					v-model="sourceOptions.sourceValue"
+					:loading="sourcesLoading"
+					input-label="Source ID" />
 
-				<NcTextField :value.sync="synchronizationItem.sourceType"
-					label="sourceType" />
+				<NcSelect v-bind="sourceTargetMappingOptions"
+					v-model="sourceTargetMappingOptions.sourceValue"
+					:loading="sourceTargetMappingLoading"
+					input-label="sourceTargetMapping" />
 
 				<NcTextField :value.sync="synchronizationItem.sourceConfig.idPosition"
 					label="(optional) Position of id in source object" />
@@ -40,22 +104,45 @@ import { synchronizationStore, navigationStore } from '../../store/store.js'
 				<NcTextField :value.sync="synchronizationItem.sourceConfig.endpoint"
 					label="(optional) Endpoint on which to fetch data" />
 
-				<NcTextField :value.sync="synchronizationItem.sourceTargetMapping"
-					label="sourceTargetMapping" />
+				<NcSelect v-bind="targetTypeOptions"
+					v-model="targetTypeOptions.value"
+					:selectable="(option) => {
+						return option.id === 'register/schema' ? openRegisterInstalled : true
+					}"
+					input-label="Target Type" />
 
-				<NcTextField :value.sync="synchronizationItem.targetId"
-					label="targetId" />
+				<div>
+					<NcSelect v-if="targetTypeOptions.value?.id === 'api'"
+						v-bind="sourceOptions"
+						v-model="sourceOptions.targetValue"
+						:loading="sourcesLoading"
+						input-label="Target ID" />
 
-				<NcTextField :value.sync="synchronizationItem.targetType"
-					label="targetType" />
+					<div v-if="targetTypeOptions.value?.id === 'register/schema'">
+						<p>Target ID</p>
+						<NcSelect v-bind="registerOptions"
+							v-model="registerOptions.value"
+							:disabled="!openRegisterInstalled"
+							input-label="Register" />
+						/
+						<NcSelect v-bind="schemaOptions"
+							v-model="schemaOptions.value"
+							:disabled="!openRegisterInstalled"
+							input-label="Schema" />
+					</div>
+				</div>
 
-				<NcTextField :value.sync="synchronizationItem.targetSourceMapping"
-					label="targetSourceMapping" />
+				<NcSelect v-bind="sourceTargetMappingOptions"
+					v-model="sourceTargetMappingOptions.targetValue"
+					:loading="sourceTargetMappingLoading"
+					input-label="targetSourceMapping" />
 			</form>
 
-			<NcButton
-				v-if="!success"
-				:disabled="loading || !synchronizationItem.name"
+			<NcButton v-if="!success"
+				:disabled="loading
+					|| !synchronizationItem.name
+					// both register and schema need to be selected for register/schema target type
+					|| (targetTypeOptions.value?.id === 'register/schema' && (!registerOptions.value?.id || !schemaOptions.value?.id))"
 				type="primary"
 				@click="editSynchronization()">
 				<template #icon>
@@ -74,10 +161,17 @@ import {
 	NcModal,
 	NcTextField,
 	NcTextArea,
+	NcSelect,
 	NcLoadingIcon,
 	NcNoteCard,
+	NcActions,
+	NcActionButton,
 } from '@nextcloud/vue'
+
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import CloudDownload from 'vue-material-design-icons/CloudDownload.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import Close from 'vue-material-design-icons/Close.vue'
 
 export default {
 	name: 'EditSynchronization',
@@ -86,24 +180,23 @@ export default {
 		NcButton,
 		NcTextField,
 		NcTextArea,
+		NcSelect,
 		NcLoadingIcon,
 		NcNoteCard,
-		// Icons
-		ContentSaveOutline,
+		NcActions,
+		NcActionButton,
 	},
 	data() {
 		return {
-			success: false,
-			loading: false,
+			success: null, // Indicates if saving the synchronization was successful
+			loading: false, // Indicates if saving the synchronization is in progress
 			error: false,
-			sourceOptions: [], // This should be populated with available sources
-			source: {},
-			targetOptions: [], // This should be populated with available targets
-			synchronizationItem: {
+			// synchronization item
+			synchronizationItem: { // Initialize with empty fields
 				name: '',
 				description: '',
 				sourceId: '',
-				sourceType: 'api',
+				sourceType: '',
 				sourceConfig: {
 					idPosition: '',
 					resultsPosition: '',
@@ -116,60 +209,314 @@ export default {
 				targetType: 'register/schema',
 				targetConfig: {},
 				targetSourceMapping: '',
-			}, // Initialize with empty fields
-			hasUpdated: false, // Flag to prevent constant looping
-			sourceLoading: false,
-			closeTimeoutFunc: null,
+			},
+			// ============================= //
+			// source options
+			// ============================= //
+			typeOptions: {
+				options: [
+					{ label: 'Database', id: 'database' },
+					{ label: 'API', id: 'api' },
+					{ label: 'File', id: 'file' },
+				],
+				value: { label: 'API', id: 'api' }, // Default source type
+			},
+			sourcesLoading: false, // Indicates if the sources are loading
+			sourceOptions: { // This should be populated with available sources
+				options: [],
+				sourceValue: null,
+				targetValue: null,
+			},
+			sourceTargetMappingLoading: false, // Indicates if the mappings are loading
+			sourceTargetMappingOptions: { // A list of mappings
+				options: [],
+				sourceValue: null,
+				targetValue: null,
+			},
+			// ============================= //
+			// target options
+			// ============================= //
+			targetTypeOptions: {
+				options: [
+					{ label: 'Register/Schema', id: 'register/schema' },
+					{ label: 'API', id: 'api' },
+					// { label: 'Database', id: 'database' },
+				],
+				value: { label: 'API', id: 'api' }, // Default target type
+			},
+			// registerOptions
+			registerLoading: false, // Indicates if the registers are loading
+			registerOptions: {
+				options: [],
+				value: null,
+			},
+			// schemaOptions
+			schemaLoading: false, // Indicates if the schemas are loading
+			schemaOptions: {
+				options: [],
+				value: null,
+			},
+			// ============================= //
+			// OpenRegister
+			// ============================= //
+			openRegisterInstalled: true, // Indicates if OpenRegister is installed
+			openRegisterLoading: true, // Indicates if installing OpenRegister is in progress
+			openRegisterIsAvailable: true, // Indicates if OpenRegister is available
+			openRegisterCloseAlert: false, // Indicates if the OpenRegister alert should be closed
+			// ============================= //
+			closeTimeoutFunc: null, // Function to close the modal after a timeout
 		}
 	},
-	updated() {
-		if (navigationStore.modal === 'editSynchronization' && !this.hasUpdated) {
-			synchronizationStore.synchronizationItem && (this.synchronizationItem = { ...synchronizationStore.synchronizationItem })
-			this.hasUpdated = true
-		}
+	mounted() {
+		// If there is a synchronization item in the store, use it
+		synchronizationStore.synchronizationItem && (this.synchronizationItem = { ...synchronizationStore.synchronizationItem })
+
+		// Fetch sources, mappings, register, and schema
+		this.getSources()
+		this.getSourceTargetMappings()
+		this.getRegister()
+		this.getSchema()
 	},
 	methods: {
-		closeModal() {
-			this.success = false
-			this.loading = false
-			this.error = false
-			this.hasUpdated = false
-			clearTimeout(this.closeTimeoutFunc)
-			navigationStore.setModal(false)
-			this.synchronizationItem = {
-				name: '',
-				description: '',
-				sourceId: '',
-				sourceType: 'api',
-				sourceConfig: {
-					idPosition: '',
-					resultsPosition: '',
-					endpoint: '',
-					headers: {},
-					query: {},
+		/**
+		 * Fetches the list of available sources from the source store and updates the source options.
+		 * Sets the loading state to true while fetching and updates the source options with the fetched data.
+		 * If a source is already selected, it sets it as the active source.
+		 */
+		getSources() {
+			this.sourcesLoading = true
+
+			sourceStore.refreshSourceList()
+				.then(({ entities }) => {
+					const activeSource = entities.find(source => source.id === this.synchronizationItem.sourceId)
+
+					this.sourceOptions = {
+						options: entities.map(source => ({
+							label: source.name,
+							id: source.id,
+						})),
+						value: activeSource
+							? {
+								label: activeSource.name,
+								id: activeSource.id,
+							}
+							: null,
+					}
+				})
+				.finally(() => {
+					this.sourcesLoading = false
+				})
+		},
+		/**
+		 * Fetches the list of source-target mappings from the mapping store and updates the mapping options.
+		 * Sets the loading state to true while fetching and updates the mapping options with the fetched data.
+		 * If a mapping is already selected, it sets it as the active mapping.
+		 */
+		getSourceTargetMappings() {
+			this.sourceTargetMappingLoading = true
+
+			mappingStore.refreshMappingList()
+				.then(({ entities }) => {
+					const activeMapping = entities.find(mapping => mapping.id === this.synchronizationItem.sourceTargetMapping)
+
+					this.sourceTargetMappingOptions = {
+						options: entities.map(mapping => ({
+							label: mapping.name,
+							id: mapping.id,
+						})),
+						value: activeMapping
+							? {
+								label: activeMapping.name,
+								id: activeMapping.id,
+							}
+							: null,
+					}
+				})
+				.finally(() => {
+					this.sourceTargetMappingLoading = false
+				})
+		},
+		/**
+		 * Fetches the list of registers from the mapping store and updates the register options.
+		 * Checks if OpenRegister is installed and updates the state accordingly.
+		 * Sets the loading state to true while fetching and updates the register options with the fetched data.
+		 * If a register is already selected, it sets it as the active register.
+		 */
+		getRegister() {
+			this.registerLoading = true
+
+			mappingStore.getMappingObjects()
+				.then(({ data }) => {
+					if (!data.openRegisters) {
+						this.registerLoading = false
+						this.openRegisterInstalled = false
+						return
+					}
+
+					const registers = data.availableRegisters
+
+					let registerId = null
+					if (this.synchronizationItem.targetType === 'register/schema') {
+						registerId = parseInt(this.synchronizationItem.targetId.split('/')[0])
+					}
+					const activeRegister = registers.find(object => object.id === registerId)
+
+					this.registerOptions = {
+						options: registers.map(object => ({
+							label: object.title || object.name,
+							id: object.id,
+						})),
+						value: activeRegister
+							? {
+								label: activeRegister.title || activeRegister.name,
+								id: activeRegister.id,
+							}
+							: null,
+					}
+				})
+				.finally(() => {
+					this.registerLoading = false
+				})
+		},
+		/**
+		 * Fetches the list of schemas from OpenRegister and updates the schema options.
+		 * Sets the loading state to true while fetching and updates the schema options with the fetched data.
+		 * If OpenRegister is not installed, it updates the state accordingly.
+		 */
+		async getSchema() {
+			this.schemaLoading = true
+
+			console.info('Fetching schemas from Open Register')
+			const response = await fetch('/index.php/apps/openregister/api/schemas', {
+				headers: {
+					accept: '*/*',
+					'accept-language': 'en-US,en;q=0.9,nl;q=0.8',
+					'cache-control': 'no-cache',
+					pragma: 'no-cache',
+					'x-requested-with': 'XMLHttpRequest',
 				},
-				sourceTargetMapping: '',
-				targetId: '',
-				targetType: 'register/schema',
-				targetConfig: {},
-				targetSourceMapping: '',
+				referrerPolicy: 'no-referrer',
+				body: null,
+				method: 'GET',
+				mode: 'cors',
+				credentials: 'include',
+			})
+
+			if (!response.ok) {
+				console.info('Open Register is not installed')
+				this.schemaLoading = false
+				this.openRegisterInstalled = false
+				return
 			}
+
+			const responseData = (await response.json()).results
+
+			this.schemaOptions = {
+				options: responseData.map((schema) => ({
+					id: schema.id,
+					label: schema.title || schema.name,
+				})),
+				value: null,
+			}
+
+			this.schemaLoading = false
 		},
-		async editSynchronization() {
+		/**
+		 * Installs OpenRegister by sending a request to the server.
+		 * Sets the loading state to true while the installation is in progress.
+		 * Updates the state based on the success or failure of the installation.
+		 */
+		async installOpenRegister() {
+			this.openRegisterLoading = true
+
+			console.info('Installing Open Register')
+			const token = document.querySelector('head[data-requesttoken]').getAttribute('data-requesttoken')
+
+			const response = await fetch('/index.php/settings/apps/enable', {
+				headers: {
+					accept: '*/*',
+					'accept-language': 'en-US,en;q=0.9,nl;q=0.8',
+					'cache-control': 'no-cache',
+					'content-type': 'application/json',
+					pragma: 'no-cache',
+					requesttoken: token,
+					'x-requested-with': 'XMLHttpRequest, XMLHttpRequest',
+				},
+				referrerPolicy: 'no-referrer',
+				body: '{"appIds":["openregister"],"groups":[]}',
+				method: 'POST',
+				mode: 'cors',
+				credentials: 'include',
+			})
+
+			if (!response.ok) {
+				console.info('Failed to install Open Register')
+				this.openRegisterIsAvailable = false
+			} else {
+				console.info('Open Register installed')
+				this.openRegisterInstalled = true
+				this.getRegister()
+				this.getSchema()
+			}
+
+			this.openRegisterLoading = false
+		},
+		/**
+		 * Closes the modal and clears the timeout function.
+		 */
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+		},
+		/**
+		 * Edits the synchronization by saving the synchronization item to the store.
+		 */
+		editSynchronization() {
 			this.loading = true
-			try {
-				await synchronizationStore.saveSynchronization({
-					...this.synchronizationItem,
-				})
-				this.success = true
-				this.loading = false
-				this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
-			} catch (error) {
-				this.loading = false
-				this.success = false
-				this.error = error.message || 'Er is een fout opgetreden bij het opslaan van de synchronisatie'
+
+			let targetId = null
+			if (this.targetTypeOptions.value?.id === 'register/schema') {
+				targetId = `${this.registerOptions.value?.id}/${this.schemaOptions.value?.id}`
+			} else if (this.targetTypeOptions.value?.id === 'api') {
+				targetId = this.sourceOptions.targetValue?.id
 			}
+
+			synchronizationStore.saveSynchronization({
+				...this.synchronizationItem,
+				sourceId: this.sourceOptions.sourceValue?.id || null,
+				sourceType: this.typeOptions.value?.id || null,
+				sourceTargetMapping: this.sourceTargetMappingOptions.sourceValue?.id || null,
+				targetType: this.targetTypeOptions.value?.id || null,
+				targetId: targetId || null,
+				targetSourceMapping: this.sourceTargetMappingOptions.targetValue?.id || null,
+			})
+				.then(({ response }) => {
+					this.success = response.ok
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+				})
+				.catch(error => {
+					this.success = false
+					this.error = error.message || 'Er is een fout opgetreden bij het opslaan van de synchronisatie'
+				})
+				.finally(() => {
+					this.loading = false
+				})
 		},
 	},
 }
 </script>
+
+<style scoped>
+/* Open Register notecard */
+.openregister-notecard .notecard {
+    position: relative;
+}
+.close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+.close-button .button-vue--vue-tertiary:hover:not(:disabled) {
+    background-color: rgba(var(--color-info-rgb), 0.1);
+}
+</style>
diff --git a/src/store/modules/mapping.js b/src/store/modules/mapping.js
index ab211d4..17b92b8 100644
--- a/src/store/modules/mapping.js
+++ b/src/store/modules/mapping.js
@@ -40,23 +40,17 @@ export const useMappingStore = defineStore('mapping', {
 			if (search !== null && search !== '') {
 				endpoint = endpoint + '?_search=' + search
 			}
-			return fetch(endpoint, {
+
+			const response = await fetch(endpoint, {
 				method: 'GET',
 			})
-				.then(
-					(response) => {
-						response.json().then(
-							(data) => {
-								this.setMappingList(data.results)
-							},
-						)
-					},
-				)
-				.catch(
-					(err) => {
-						console.error(err)
-					},
-				)
+
+			const data = (await response.json()).results
+			const entities = data.map(mapping => new Mapping(mapping))
+
+			this.setMappingList(entities)
+
+			return { response, entities }
 		},
 		// New function to get a single mapping
 		async getMapping(id) {
diff --git a/src/store/modules/source.js b/src/store/modules/source.js
index 9c2fa6a..7167d64 100644
--- a/src/store/modules/source.js
+++ b/src/store/modules/source.js
@@ -41,30 +41,29 @@ export const useSourceStore = defineStore(
 				this.sourceConfigurationKey = sourceConfigurationKey
 				console.log('Source configuration key set to ' + sourceConfigurationKey)
 			},
-			/* istanbul ignore next */ // ignore this for Jest until moved into a service
+			/**
+			 * Refreshes the source list by fetching data from the API.
+			 *
+			 * @param { string | null } search - The search query to filter sources.
+			 * @return { Promise<{ response: Response, data: Array<JSON>, entities: Array<Source> }> } The response, data, and entities.
+			 */
 			async refreshSourceList(search = null) {
 				// @todo this might belong in a service?
 				let endpoint = '/index.php/apps/openconnector/api/sources'
 				if (search !== null && search !== '') {
 					endpoint = endpoint + '?_search=' + search
 				}
-				return fetch(endpoint, {
+
+				const response = await fetch(endpoint, {
 					method: 'GET',
 				})
-					.then(
-						(response) => {
-							response.json().then(
-								(data) => {
-									this.setSourceList(data.results)
-								},
-							)
-						},
-					)
-					.catch(
-						(err) => {
-							console.error(err)
-						},
-					)
+
+				const data = (await response.json()).results
+				const entities = data.map(item => new Source(item))
+
+				this.setSourceList(entities)
+
+				return { response, data, entities }
 			},
 			// New function to get a single source
 			async getSource(id) {
diff --git a/src/store/modules/synchronization.js b/src/store/modules/synchronization.js
index 75c966e..898a2eb 100644
--- a/src/store/modules/synchronization.js
+++ b/src/store/modules/synchronization.js
@@ -143,7 +143,7 @@ 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')
 			}
@@ -156,7 +156,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 +166,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.log('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() {

From 50e9406ab64a676f1c43a02b85a7045f409215c7 Mon Sep 17 00:00:00 2001
From: Thijn <Thijn@conduction.nl>
Date: Tue, 19 Nov 2024 14:23:15 +0100
Subject: [PATCH 02/12] added authentication as its own data point

---
 src/modals/Modals.vue                         |   6 +
 ...eleteSourceConfigurationAuthentication.vue | 118 ++++++++++++++
 .../EditSourceConfigurationAuthentication.vue | 145 ++++++++++++++++++
 src/views/Source/SourceDetails.vue            |  72 ++++++++-
 4 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue
 create mode 100644 src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 2e4ebf2..f944cfe 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -32,6 +32,8 @@ import { navigationStore } from '../store/store.js'
 		<DeleteJobArgument />
 		<EditSourceConfiguration />
 		<DeleteSourceConfiguration />
+		<EditSourceConfigurationAuthentication v-if="navigationStore.modal === 'editSourceConfigurationAuthentication'" />
+		<DeleteSourceConfigurationAuthentication v-if="navigationStore.modal === 'deleteSourceConfigurationAuthentication'" />
 		<ViewSourceLog />
 		<ViewJobLog />
 		<ViewSynchronizationLog />
@@ -62,6 +64,8 @@ import EditJobArgument from './JobArgument/EditJobArgument.vue'
 import DeleteJobArgument from './JobArgument/DeleteJobArgument.vue'
 import EditSourceConfiguration from './SourceConfiguration/EditSourceConfiguration.vue'
 import DeleteSourceConfiguration from './SourceConfiguration/DeleteSourceConfiguration.vue'
+import EditSourceConfigurationAuthentication from './SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue'
+import DeleteSourceConfigurationAuthentication from './SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue'
 import ViewSourceLog from './Log/ViewSourceLog.vue'
 import EditMappingMapping from './mappingMapping/EditMappingMapping.vue'
 import DeleteMappingMapping from './mappingMapping/DeleteMappingMapping.vue'
@@ -98,6 +102,8 @@ export default {
 		DeleteJobArgument,
 		EditSourceConfiguration,
 		DeleteSourceConfiguration,
+		EditSourceConfigurationAuthentication,
+		DeleteSourceConfigurationAuthentication,
 		ViewSourceLog,
 		EditMappingMapping,
 		DeleteMappingMapping,
diff --git a/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue b/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue
new file mode 100644
index 0000000..f319319
--- /dev/null
+++ b/src/modals/SourceConfigurationAuthentication/DeleteSourceConfigurationAuthentication.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { navigationStore, sourceStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Delete Source Authentication"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Successfully deleted source authentication</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Something went wrong deleting the source authentication</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.replace(/^authentication\./g, '') }}</b> from Source Authentication?
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @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="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: 'DeleteSourceConfigurationAuthentication',
+	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)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		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
+					this.closeTimeoutFunc = setTimeout(this.closeModal, 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/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue b/src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue
new file mode 100644
index 0000000..b12a1e1
--- /dev/null
+++ b/src/modals/SourceConfigurationAuthentication/EditSourceConfigurationAuthentication.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { sourceStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal ref="modalRef"
+		label-id="editSourceConfigurationAuthentication"
+		@close="closeModal">
+		<div class="modalContent">
+			<h2>{{ isEdit ? 'Edit' : 'Add' }} Authentication</h2>
+			<NcNoteCard v-if="success" type="success">
+				<p>Authentication 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: 'EditSourceConfigurationAuthentication',
+	components: {
+		NcModal,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			configurationItem: {
+				key: '',
+				value: '',
+			},
+			success: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			closeTimeoutFunc: null,
+			oldKey: '',
+			isEdit: false,
+		}
+	},
+	mounted() {
+		this.initializeSourceConfiguration()
+	},
+	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].replace(/^authentication\./g, '') || '',
+					value: configurationItem[1] || '',
+				}
+				this.oldKey = configurationItem[0]
+				this.isEdit = true
+			}
+		},
+		checkIfKeyIsUnique(key) {
+			if (!sourceStore.sourceItem.configuration) return false
+			const fullKey = `authentication.${key}`
+			const keys = Object.keys(sourceStore.sourceItem.configuration)
+			if (this.oldKey === fullKey) return false
+			if (keys.includes(fullKey)) return true
+			return false
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			clearTimeout(this.closeTimeoutFunc)
+			sourceStore.setSourceConfigurationKey(null)
+		},
+		async editSourceConfiguration() {
+			this.loading = true
+
+			const newSourceItem = {
+				...sourceStore.sourceItem,
+				configuration: {
+					...sourceStore.sourceItem.configuration,
+					[`authentication.${this.configurationItem.key}`]: this.configurationItem.value,
+				},
+			}
+
+			if (this.oldKey !== '' && this.oldKey !== `authentication.${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
+				this.closeTimeoutFunc = setTimeout(this.closeModal, 2000)
+			} catch (error) {
+				this.loading = false
+				this.success = false
+				this.error = error.message || 'An error occurred while saving the authentication configuration'
+			}
+		},
+	},
+}
+</script>
diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index f5eb3b5..2089b95 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -33,6 +33,12 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 							</template>
 							Add Configuration
 						</NcActionButton>
+						<NcActionButton @click="sourceStore.setSourceConfigurationKey(null); navigationStore.setModal('editSourceConfigurationAuthentication')">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Add Authentication
+						</NcActionButton>
 						<NcActionButton @click="navigationStore.setDialog('deleteSource')">
 							<template #icon>
 								<TrashCanOutline :size="20" />
@@ -56,8 +62,8 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 				<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"
+							<div v-if="Object.keys(configuration)?.length">
+								<NcListItem v-for="(value, key, i) in configuration"
 									:key="`${key}${i}`"
 									:name="key"
 									:bold="false"
@@ -89,7 +95,44 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 									</template>
 								</NcListItem>
 							</div>
-							<div v-if="sourceStore.sourceItem?.configuration === null || Object.keys(sourceStore.sourceItem?.configuration).length === 0" class="tabPanel">
+							<div v-if="!Object.keys(configuration)?.length" class="tabPanel">
+								No configurations found
+							</div>
+						</BTab>
+						<BTab title="Authentication">
+							<div v-if="Object.keys(configurationAuthentication)?.length">
+								<NcListItem v-for="(value, key, i) in configurationAuthentication"
+									:key="`${key}${i}`"
+									:name="key.replace(/^authentication\./g, '') /* use regex as its a much safer method of getting rid of the authentication prefix */"
+									:bold="false"
+									:force-display-actions="true"
+									:active="sourceStore.sourceConfigurationKey === key">
+									<template #icon>
+										<FileCogOutline
+											:class="sourceStore.sourceConfigurationKey === key && 'selectedZaakIcon'"
+											disable-menu
+											:size="44" />
+									</template>
+									<template #subname>
+										{{ value }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="sourceStore.setSourceConfigurationKey(key); navigationStore.setModal('editSourceConfigurationAuthentication')">
+											<template #icon>
+												<Pencil :size="20" />
+											</template>
+											Edit
+										</NcActionButton>
+										<NcActionButton @click="sourceStore.setSourceConfigurationKey(key); navigationStore.setModal('deleteSourceConfigurationAuthentication')">
+											<template #icon>
+												<Delete :size="20" />
+											</template>
+											Delete
+										</NcActionButton>
+									</template>
+								</NcListItem>
+							</div>
+							<div v-if="!Object.keys(configurationAuthentication)?.length" class="tabPanel">
 								No configurations found
 							</div>
 						</BTab>
@@ -168,6 +211,28 @@ export default {
 		TrashCanOutline,
 		Sync,
 	},
+	computed: {
+		/**
+		 * Returns the configuration without the authentication configuration
+		 */
+		configuration() {
+			const filteredObj = Object.fromEntries(
+				Object.entries(sourceStore.sourceItem?.configuration)
+					.filter(([key]) => !key.startsWith('authentication.')),
+			)
+			return filteredObj
+		},
+		/**
+		 * Returns the authentication configuration
+		 */
+		configurationAuthentication() {
+			const filteredObj = Object.fromEntries(
+				Object.entries(sourceStore.sourceItem?.configuration)
+					.filter(([key]) => key.startsWith('authentication.')),
+			)
+			return filteredObj
+		},
+	},
 	mounted() {
 		this.refreshSourceLogs()
 	},
@@ -202,7 +267,6 @@ export default {
 		},
 		refreshSourceLogs() {
 			sourceStore.refreshSourceLogs()
-
 		},
 		checkIfStatusIsOk(statusCode) {
 			if (statusCode > 199 && statusCode < 300) {

From 539dfbd682f65d35d99ef5d1728e80ff3e64195a Mon Sep 17 00:00:00 2001
From: Thijn <Thijn@conduction.nl>
Date: Tue, 19 Nov 2024 14:35:42 +0100
Subject: [PATCH 03/12] show full key name as requested

---
 src/views/Source/SourceDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index 2089b95..b4494c3 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -103,7 +103,7 @@ import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 							<div v-if="Object.keys(configurationAuthentication)?.length">
 								<NcListItem v-for="(value, key, i) in configurationAuthentication"
 									:key="`${key}${i}`"
-									:name="key.replace(/^authentication\./g, '') /* use regex as its a much safer method of getting rid of the authentication prefix */"
+									:name="key"
 									:bold="false"
 									:force-display-actions="true"
 									:active="sourceStore.sourceConfigurationKey === key">

From 53706e5dd8ea69c0235b116773f1f7d9a7895f73 Mon Sep 17 00:00:00 2001
From: Thijn <Thijn@conduction.nl>
Date: Tue, 19 Nov 2024 15:56:58 +0100
Subject: [PATCH 04/12] fixed edit modal not properly populating fields

---
 .../Synchronization/EditSynchronization.vue   | 71 ++++++++++++++-----
 1 file changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/modals/Synchronization/EditSynchronization.vue b/src/modals/Synchronization/EditSynchronization.vue
index f4aa178..262413d 100644
--- a/src/modals/Synchronization/EditSynchronization.vue
+++ b/src/modals/Synchronization/EditSynchronization.vue
@@ -268,8 +268,13 @@ export default {
 		}
 	},
 	mounted() {
-		// If there is a synchronization item in the store, use it
-		synchronizationStore.synchronizationItem && (this.synchronizationItem = { ...synchronizationStore.synchronizationItem })
+		if (synchronizationStore.synchronizationItem) {
+			// If there is a synchronization item in the store, use it
+			this.synchronizationItem = { ...synchronizationStore.synchronizationItem }
+
+			// update targetTypeOptions with the synchronization item target type
+			this.targetTypeOptions.value = this.targetTypeOptions.options.find(option => option.id === this.synchronizationItem.targetType)
+		}
 
 		// Fetch sources, mappings, register, and schema
 		this.getSources()
@@ -282,23 +287,35 @@ export default {
 		 * Fetches the list of available sources from the source store and updates the source options.
 		 * Sets the loading state to true while fetching and updates the source options with the fetched data.
 		 * If a source is already selected, it sets it as the active source.
+		 * If the target type is 'api', it sets the active target source.
 		 */
 		getSources() {
 			this.sourcesLoading = true
 
 			sourceStore.refreshSourceList()
 				.then(({ entities }) => {
-					const activeSource = entities.find(source => source.id === this.synchronizationItem.sourceId)
+					const activeSourceSource = entities.find(source => source.id.toString() === this.synchronizationItem.sourceId.toString())
+
+					let activeSourceTarget = null
+					if (this.synchronizationItem.targetType === 'api') {
+						activeSourceTarget = entities.find(source => source.id.toString() === this.synchronizationItem.targetId.toString())
+					}
 
 					this.sourceOptions = {
 						options: entities.map(source => ({
 							label: source.name,
 							id: source.id,
 						})),
-						value: activeSource
+						sourceValue: activeSourceSource
 							? {
-								label: activeSource.name,
-								id: activeSource.id,
+								label: activeSourceSource.name,
+								id: activeSourceSource.id,
+							}
+							: null,
+						targetValue: activeSourceTarget
+							? {
+								label: activeSourceTarget.name,
+								id: activeSourceTarget.id,
 							}
 							: null,
 					}
@@ -310,24 +327,31 @@ export default {
 		/**
 		 * Fetches the list of source-target mappings from the mapping store and updates the mapping options.
 		 * Sets the loading state to true while fetching and updates the mapping options with the fetched data.
-		 * If a mapping is already selected, it sets it as the active mapping.
+		 * If a mapping is already selected, it sets it as the active source and target mapping.
 		 */
 		getSourceTargetMappings() {
 			this.sourceTargetMappingLoading = true
 
 			mappingStore.refreshMappingList()
 				.then(({ entities }) => {
-					const activeMapping = entities.find(mapping => mapping.id === this.synchronizationItem.sourceTargetMapping)
+					const activeSourceMapping = entities.find(mapping => mapping.id.toString() === this.synchronizationItem.sourceTargetMapping.toString())
+					const activeTargetMapping = entities.find(mapping => mapping.id.toString() === this.synchronizationItem.targetSourceMapping.toString())
 
 					this.sourceTargetMappingOptions = {
 						options: entities.map(mapping => ({
 							label: mapping.name,
 							id: mapping.id,
 						})),
-						value: activeMapping
+						sourceValue: activeSourceMapping
 							? {
-								label: activeMapping.name,
-								id: activeMapping.id,
+								label: activeSourceMapping.name,
+								id: activeSourceMapping.id,
+							}
+							: null,
+						targetValue: activeTargetMapping
+							? {
+								label: activeTargetMapping.name,
+								id: activeTargetMapping.id,
 							}
 							: null,
 					}
@@ -338,9 +362,9 @@ export default {
 		},
 		/**
 		 * Fetches the list of registers from the mapping store and updates the register options.
-		 * Checks if OpenRegister is installed and updates the state accordingly.
 		 * Sets the loading state to true while fetching and updates the register options with the fetched data.
 		 * If a register is already selected, it sets it as the active register.
+		 * If OpenRegister is not installed, it updates the state accordingly.
 		 */
 		getRegister() {
 			this.registerLoading = true
@@ -355,11 +379,11 @@ export default {
 
 					const registers = data.availableRegisters
 
-					let registerId = null
+					let activeRegister = null
 					if (this.synchronizationItem.targetType === 'register/schema') {
-						registerId = parseInt(this.synchronizationItem.targetId.split('/')[0])
+						const registerId = this.synchronizationItem.targetId.split('/')[0]
+						activeRegister = registers.find(object => object.id.toString() === registerId.toString())
 					}
-					const activeRegister = registers.find(object => object.id === registerId)
 
 					this.registerOptions = {
 						options: registers.map(object => ({
@@ -382,6 +406,7 @@ export default {
 		 * Fetches the list of schemas from OpenRegister and updates the schema options.
 		 * Sets the loading state to true while fetching and updates the schema options with the fetched data.
 		 * If OpenRegister is not installed, it updates the state accordingly.
+		 * If a schema is already selected, it sets it as the active schema.
 		 */
 		async getSchema() {
 			this.schemaLoading = true
@@ -411,12 +436,23 @@ export default {
 
 			const responseData = (await response.json()).results
 
+			let activeSchema = null
+			if (this.synchronizationItem.targetType === 'register/schema') {
+				const schemaId = this.synchronizationItem.targetId.split('/')[1]
+				activeSchema = responseData.find(schema => schema.id.toString() === schemaId.toString())
+			}
+
 			this.schemaOptions = {
 				options: responseData.map((schema) => ({
 					id: schema.id,
 					label: schema.title || schema.name,
 				})),
-				value: null,
+				value: activeSchema
+					? {
+						id: activeSchema.id,
+						label: activeSchema.title || activeSchema.name,
+					}
+					: null,
 			}
 
 			this.schemaLoading = false
@@ -425,6 +461,7 @@ export default {
 		 * Installs OpenRegister by sending a request to the server.
 		 * Sets the loading state to true while the installation is in progress.
 		 * Updates the state based on the success or failure of the installation.
+		 * If the installation is successful, it fetches the register and schema options.
 		 */
 		async installOpenRegister() {
 			this.openRegisterLoading = true
@@ -470,6 +507,8 @@ export default {
 		},
 		/**
 		 * Edits the synchronization by saving the synchronization item to the store.
+		 * Sets the loading state to true while saving and updates the state based on the success or failure of the save operation.
+		 * If the save operation is successful, it closes the modal after a timeout.
 		 */
 		editSynchronization() {
 			this.loading = true

From b14dd14b3d16a07d1ef56891bab7e2840ce16b62 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 10:40:25 +0100
Subject: [PATCH 05/12] Added lint workflow

---
 .../workflows/pull-request-lint-check.yaml    | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 .github/workflows/pull-request-lint-check.yaml

diff --git a/.github/workflows/pull-request-lint-check.yaml b/.github/workflows/pull-request-lint-check.yaml
new file mode 100644
index 0000000..6720569
--- /dev/null
+++ b/.github/workflows/pull-request-lint-check.yaml
@@ -0,0 +1,24 @@
+name: Lint Check
+
+on:
+  push:
+    branches:
+      - lint-workflow-check
+  pull_request:
+    branches:
+      - development
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Lint
+        run: npm run lint
\ No newline at end of file

From a5a64387c44b4c71a83f7a38b2e695a0700ef1c6 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 10:41:41 +0100
Subject: [PATCH 06/12] Updated workflow

---
 .github/workflows/pull-request-lint-check.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pull-request-lint-check.yaml b/.github/workflows/pull-request-lint-check.yaml
index 6720569..b4cdabc 100644
--- a/.github/workflows/pull-request-lint-check.yaml
+++ b/.github/workflows/pull-request-lint-check.yaml
@@ -10,7 +10,7 @@ on:
       - main
 
 jobs:
-  build:
+  Lint-Check:
     runs-on: ubuntu-latest
 
     steps:

From c24860ecefa22b9bac0f3fb0cae9154f83e70756 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 10:43:27 +0100
Subject: [PATCH 07/12] Added lint error for testing

---
 .github/workflows/pull-request-lint-check.yaml | 6 +++---
 src/views/Webhook/WebhooksIndex.vue            | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/pull-request-lint-check.yaml b/.github/workflows/pull-request-lint-check.yaml
index b4cdabc..38d82c2 100644
--- a/.github/workflows/pull-request-lint-check.yaml
+++ b/.github/workflows/pull-request-lint-check.yaml
@@ -10,7 +10,7 @@ on:
       - main
 
 jobs:
-  Lint-Check:
+  lint-check:
     runs-on: ubuntu-latest
 
     steps:
@@ -20,5 +20,5 @@ jobs:
       - name: Install dependencies
         run: npm i
 
-      - name: Lint
-        run: npm run lint
\ No newline at end of file
+      - name: Linting
+        run: npm run lint
diff --git a/src/views/Webhook/WebhooksIndex.vue b/src/views/Webhook/WebhooksIndex.vue
index c845b06..0b89c57 100644
--- a/src/views/Webhook/WebhooksIndex.vue
+++ b/src/views/Webhook/WebhooksIndex.vue
@@ -33,7 +33,7 @@ import WebhookDetails from './WebhookDetails.vue'
 import Webhook from 'vue-material-design-icons/Webhook.vue'
 
 export default {
-	name: 'WebhooksIndex',
+	name: 'WebhooksIndexx',
 	components: {
 		NcAppContent,
 		NcEmptyContent,

From eb9af4000be5c7fe5120cb92f132e7612fec3f69 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 10:45:59 +0100
Subject: [PATCH 08/12] Fixed linting error and updated workflow to be ready
 for use

---
 .github/workflows/pull-request-lint-check.yaml | 3 ---
 src/views/Webhook/WebhooksIndex.vue            | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/workflows/pull-request-lint-check.yaml b/.github/workflows/pull-request-lint-check.yaml
index 38d82c2..4a8c874 100644
--- a/.github/workflows/pull-request-lint-check.yaml
+++ b/.github/workflows/pull-request-lint-check.yaml
@@ -1,9 +1,6 @@
 name: Lint Check
 
 on:
-  push:
-    branches:
-      - lint-workflow-check
   pull_request:
     branches:
       - development
diff --git a/src/views/Webhook/WebhooksIndex.vue b/src/views/Webhook/WebhooksIndex.vue
index 0b89c57..c845b06 100644
--- a/src/views/Webhook/WebhooksIndex.vue
+++ b/src/views/Webhook/WebhooksIndex.vue
@@ -33,7 +33,7 @@ import WebhookDetails from './WebhookDetails.vue'
 import Webhook from 'vue-material-design-icons/Webhook.vue'
 
 export default {
-	name: 'WebhooksIndexx',
+	name: 'WebhooksIndex',
 	components: {
 		NcAppContent,
 		NcEmptyContent,

From fc1d9e780a61e1a7727456003fa7854a40fb2b86 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 11:21:21 +0100
Subject: [PATCH 09/12] Added specific branch pr to main

---
 .../pull-request-from-branch-check.yaml        | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 .github/workflows/pull-request-from-branch-check.yaml

diff --git a/.github/workflows/pull-request-from-branch-check.yaml b/.github/workflows/pull-request-from-branch-check.yaml
new file mode 100644
index 0000000..a5476c9
--- /dev/null
+++ b/.github/workflows/pull-request-from-branch-check.yaml
@@ -0,0 +1,18 @@
+name: Main Branch Protection
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check branch
+        run: |
+          if [[ ${GITHUB_HEAD_REF} != development ]] && [[ ${GITHUB_HEAD_REF} != documentation ]] && ! [[ ${GITHUB_HEAD_REF} =~ ^hotfix/ ]]; 
+          then
+            echo "Error: Pull request must come from 'development', 'documentation' or 'hotfix/' branch"
+            exit 1
+          fi
\ No newline at end of file

From ea60ad249412b6bb5c8dd82f97234fd5f0500421 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 20 Nov 2024 11:35:51 +0100
Subject: [PATCH 10/12] cleanup

---
 .github/workflows/pull-request-from-branch-check.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pull-request-from-branch-check.yaml b/.github/workflows/pull-request-from-branch-check.yaml
index a5476c9..77d1970 100644
--- a/.github/workflows/pull-request-from-branch-check.yaml
+++ b/.github/workflows/pull-request-from-branch-check.yaml
@@ -15,4 +15,4 @@ jobs:
           then
             echo "Error: Pull request must come from 'development', 'documentation' or 'hotfix/' branch"
             exit 1
-          fi
\ No newline at end of file
+          fi

From 7ed1da9eb55f5ac46c3fb9f03865cde2a0895564 Mon Sep 17 00:00:00 2001
From: Thijn <Thijn@conduction.nl>
Date: Wed, 20 Nov 2024 14:36:05 +0100
Subject: [PATCH 11/12] fixed an issue in the create synchro modal

---
 src/modals/Synchronization/EditSynchronization.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/modals/Synchronization/EditSynchronization.vue b/src/modals/Synchronization/EditSynchronization.vue
index 262413d..1a76f1b 100644
--- a/src/modals/Synchronization/EditSynchronization.vue
+++ b/src/modals/Synchronization/EditSynchronization.vue
@@ -188,6 +188,10 @@ export default {
 	},
 	data() {
 		return {
+			/**
+			 * Indicates if this is an edit modal or a create modal.
+			 */
+			IS_EDIT: !!synchronizationStore.synchronizationItem?.id,
 			success: null, // Indicates if saving the synchronization was successful
 			loading: false, // Indicates if saving the synchronization is in progress
 			error: false,
@@ -268,7 +272,7 @@ export default {
 		}
 	},
 	mounted() {
-		if (synchronizationStore.synchronizationItem) {
+		if (this.IS_EDIT) {
 			// If there is a synchronization item in the store, use it
 			this.synchronizationItem = { ...synchronizationStore.synchronizationItem }
 
@@ -297,7 +301,7 @@ export default {
 					const activeSourceSource = entities.find(source => source.id.toString() === this.synchronizationItem.sourceId.toString())
 
 					let activeSourceTarget = null
-					if (this.synchronizationItem.targetType === 'api') {
+					if (this.IS_EDIT && this.synchronizationItem.targetType === 'api') {
 						activeSourceTarget = entities.find(source => source.id.toString() === this.synchronizationItem.targetId.toString())
 					}
 
@@ -380,7 +384,7 @@ export default {
 					const registers = data.availableRegisters
 
 					let activeRegister = null
-					if (this.synchronizationItem.targetType === 'register/schema') {
+					if (this.IS_EDIT && this.synchronizationItem.targetType === 'register/schema') {
 						const registerId = this.synchronizationItem.targetId.split('/')[0]
 						activeRegister = registers.find(object => object.id.toString() === registerId.toString())
 					}
@@ -437,7 +441,7 @@ export default {
 			const responseData = (await response.json()).results
 
 			let activeSchema = null
-			if (this.synchronizationItem.targetType === 'register/schema') {
+			if (this.IS_EDIT && this.synchronizationItem.targetType === 'register/schema') {
 				const schemaId = this.synchronizationItem.targetId.split('/')[1]
 				activeSchema = responseData.find(schema => schema.id.toString() === schemaId.toString())
 			}

From 1eef1ade8c46f062b7a0a5affded1d6a6e43f74f Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Thu, 21 Nov 2024 09:10:54 +0100
Subject: [PATCH 12/12] removed unit from zero

---
 src/views/Source/SourceDetails.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Source/SourceDetails.vue b/src/views/Source/SourceDetails.vue
index b4494c3..cbaebb5 100644
--- a/src/views/Source/SourceDetails.vue
+++ b/src/views/Source/SourceDetails.vue
@@ -284,8 +284,8 @@ export default {
 	font-size: 2em !important;
 	margin-block-start: 0.67em !important;
 	margin-block-end: 0.67em !important;
-	margin-inline-start: 0px !important;
-	margin-inline-end: 0px !important;
+	margin-inline-start: 0 !important;
+	margin-inline-end: 0 !important;
 	font-weight: bold !important;
 	unicode-bidi: isolate !important;
 }