feature/CONNECTOR-35/editSources

css/main.css

@@ -27,6 +27,12 @@
   align-items: center;
 }
 
+.emptyListHeader {
+  margin-block-start: var(--OC-margin-10);
+  margin-inline-start: var(--OC-margin-10);
+  margin-inline-end: var(--OC-margin-10);
+}
+
 .searchField {
   padding-inline-start: 65px;
   padding-inline-end: 20px;

src/modals/Job/TestJob.vue

@@ -12,7 +12,7 @@ import { jobStore, navigationStore } from '../../store/store.js'
 
 			<form @submit.prevent="handleSubmit">
 				<div class="form-group">
-					<div class="detailGrid">
+					<div class="testJobDetailGrid">
 						<NcTextField
 							id="jobId"
 							label="Job ID"
@@ -106,7 +106,7 @@ export default {
 }
 </script>
 <style>
-.detailGrid {
+.testJobDetailGrid {
 	display: grid;
 	grid-template-columns: 1fr;
 	gap: 5px;

src/modals/Source/DeleteSource.vue

@@ -4,15 +4,15 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 
 <template>
 	<NcDialog v-if="navigationStore.dialog === 'deleteSource'"
-		name="Bron verwijderen"
+		name="Delete source"
 		size="normal"
 		:can-close="false">
 		<p v-if="!success">
-			Wil je <b>{{ sourceStore.sourceItem.name }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+			Do you want to delete <b>{{ sourceStore.sourceItem.name }}</b>? This action cannot be undone.
 		</p>
 
 		<NcNoteCard v-if="success" type="success">
-			<p>Bron succesvol verwijderd</p>
+			<p>Successfully deleted source</p>
 		</NcNoteCard>
 		<NcNoteCard v-if="error" type="error">
 			<p>{{ error }}</p>
@@ -24,7 +24,7 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 				<template #icon>
 					<Cancel :size="20" />
 				</template>
-				{{ success ? 'Sluiten' : 'Annuleer' }}
+				{{ success ? 'Close' : 'Cancel' }}
 			</NcButton>
 			<NcButton
 				v-if="!success"
@@ -35,7 +35,7 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 					<NcLoadingIcon v-if="loading" :size="20" />
 					<TrashCanOutline v-if="!loading" :size="20" />
 				</template>
-				Verwijderen
+				Delete
 			</NcButton>
 		</template>
 	</NcDialog>
@@ -79,14 +79,15 @@ export default {
 				this.success = true
 				this.loading = false
 				this.error = false
+				sourceStore.setSourceItem(null)
 				setTimeout(() => {
 					this.success = false
 					navigationStore.setDialog(false)
 				}, 2000)
 			} catch (error) {
 				this.loading = false
 				this.success = false
-				this.error = error.message || 'Er is een fout opgetreden bij het verwijderen van de bron'
+				this.error = error.message || 'An error occurred while deleting the source'
 			}
 		},
 	},

src/modals/Source/EditSource.vue

@@ -49,7 +49,7 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 					<NcLoadingIcon v-if="loading" :size="20" />
 					<ContentSaveOutline v-if="!loading" :size="20" />
 				</template>
-				Opslaan
+				Save
 			</NcButton>
 		</div>
 	</NcModal>
@@ -83,7 +83,6 @@ export default {
 			sourceItem: {
 				name: '',
 				description: '',
-				type: '',
 				location: '',
 			},
 			success: false,
@@ -98,20 +97,65 @@ export default {
 				],
 
 			},
+			hasUpdated: false,
+		}
+	},
+	mounted() {
+		this.initializeSourceItem()
+	},
+	updated() {
+		if (navigationStore.modal === 'editSource' && !this.hasUpdated) {
+			this.initializeSourceItem()
+			this.hasUpdated = true
 		}
 	},
 	methods: {
+		initializeSourceItem() {
+			if (sourceStore.sourceItem?.id) {
+				this.sourceItem = {
+					...sourceStore.sourceItem,
+					name: sourceStore.sourceItem.name || '',
+					description: sourceStore.sourceItem.description || '',
+					location: sourceStore.sourceItem.location || '',
+				}
+
+				const selectedType = this.typeOptions.options.find((option) => option.id === sourceStore.sourceItem.type)
+
+				this.typeOptions = {
+					inputLabel: 'Type*',
+					options: [
+						{ label: 'Database', id: 'database' },
+						{ label: 'API', id: 'api' },
+						{ label: 'File', id: 'file' },
+					],
+					value: [{
+						label: selectedType.label,
+						id: selectedType.id,
+					}],
+
+				}
+			}
+		},
 		closeModal() {
 			navigationStore.setModal(false)
 			this.success = false
 			this.loading = false
 			this.error = false
+			this.hasUpdated = false
 			this.sourceItem = {
 				name: '',
 				description: '',
-				type: '',
 				location: '',
 			}
+			this.typeOptions = {
+				inputLabel: 'Type*',
+				options: [
+					{ label: 'Database', id: 'database' },
+					{ label: 'API', id: 'api' },
+					{ label: 'File', id: 'file' },
+				],
+
+			}
 		},
 		async editSource() {
 			this.loading = true

src/store/modules/endpoints.js

@@ -97,7 +97,7 @@ export const useEndpointStore = defineStore(
 				// Create a copy of the endpoint item and remove empty properties
 				const endpointToSave = { ...this.endpointItem }
 				Object.keys(endpointToSave).forEach(key => {
-					if (endpointToSave[key] === '' || (Array.isArray(endpointToSave[key]) && endpointToSave[key].length === 0)) {
+					if (endpointToSave[key] === '' || (Array.isArray(endpointToSave[key]) && !endpointToSave[key].length)) {
 						delete endpointToSave[key]
 					}
 				})

src/store/modules/job.js

@@ -162,7 +162,7 @@ export const useJobStore = defineStore(
 				// Create a copy of the job item and remove empty properties
 				const jobToSave = { ...jobItem }
 				Object.keys(jobToSave).forEach(key => {
-					if (jobToSave[key] === '' || (Array.isArray(jobToSave[key]) && jobToSave[key].length === 0) || key === 'created' || key === 'updated') {
+					if (jobToSave[key] === '' || (Array.isArray(jobToSave[key]) && !jobToSave[key].length) || key === 'created' || key === 'updated') {
 						delete jobToSave[key]
 					}
 				})

src/store/modules/log.js

@@ -97,7 +97,7 @@ export const useLogStore = defineStore(
 				// Create a copy of the log item and remove empty properties
 				const logToSave = { ...this.logItem }
 				Object.keys(logToSave).forEach(key => {
-					if (logToSave[key] === '' || (Array.isArray(logToSave[key]) && logToSave[key].length === 0)) {
+					if (logToSave[key] === '' || (Array.isArray(logToSave[key]) && !logToSave[key].length)) {
 						delete logToSave[key]
 					}
 				})

src/store/modules/mapping.js

@@ -97,7 +97,7 @@ export const useMappingStore = defineStore(
 				// Create a copy of the mapping item and remove empty properties
 				const mappingToSave = { ...this.mappingItem }
 				Object.keys(mappingToSave).forEach(key => {
-					if (mappingToSave[key] === '' || (Array.isArray(mappingToSave[key]) && mappingToSave[key].length === 0)) {
+					if (mappingToSave[key] === '' || (Array.isArray(mappingToSave[key]) && !mappingToSave[key].length)) {
 						delete mappingToSave[key]
 					}
 				})

src/store/modules/source.js

@@ -135,10 +135,11 @@ export const useSourceStore = defineStore(
 						this.setSourceTest(data)
 						console.log('Source tested')
 						// Refresh the source list
-						return this.refreshSourceList()
+						this.refreshSourceLogs()
 					})
 					.catch((err) => {
 						console.error('Error saving source:', err)
+						this.refreshSourceLogs()
 						throw err
 					})
 			},
@@ -159,7 +160,7 @@ export const useSourceStore = defineStore(
 				// Create a copy of the source item and remove empty properties
 				const sourceToSave = { ...sourceItem }
 				Object.keys(sourceToSave).forEach(key => {
-					if (sourceToSave[key] === '' || (Array.isArray(sourceToSave[key]) && sourceToSave[key].length === 0)) {
+					if (sourceToSave[key] === '' || (Array.isArray(sourceToSave[key]) && !sourceToSave[key].length)) {
 						delete sourceToSave[key]
 					}
 				})

src/store/modules/webhooks.js

@@ -97,7 +97,7 @@ export const useWebhookStore = defineStore(
 				// Create a copy of the webhook item and remove empty properties
 				const webhookToSave = { ...this.webhookItem }
 				Object.keys(webhookToSave).forEach(key => {
-					if (webhookToSave[key] === '' || (Array.isArray(webhookToSave[key]) && webhookToSave[key].length === 0)) {
+					if (webhookToSave[key] === '' || (Array.isArray(webhookToSave[key]) && !webhookToSave[key].length)) {
 						delete webhookToSave[key]
 					}
 				})

src/views/Endpoint/EndpointsList.vue

@@ -69,7 +69,7 @@ import { endpointStore, navigationStore, searchStore } from '../../store/store.j
 			appearance="dark"
 			name="Endpoints aan het laden" />
 
-		<div v-if="endpointStore.endpointList.length === 0">
+		<div v-if="!endpointStore.endpointList.length" class="emptyListHeader">
 			Er zijn nog geen endpoints gedefinieerd.
 		</div>
 	</NcAppContentList>

src/views/Job/JobDetails.vue

@@ -51,10 +51,38 @@ import { jobStore, navigationStore } from '../../store/store.js'
 				<span>{{ jobStore.jobItem.description }}</span>
 
 				<div class="detailGrid">
-					<div class="gridContent gridFullWidth">
+					<div class="gridContent">
 						<b>Status:</b>
 						<p>{{ jobStore.jobItem.status }}</p>
 					</div>
+					<div class="gridContent">
+						<b>Enabled:</b>
+						<p>{{ jobStore.jobItem.isEnabled }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Job Class:</b>
+						<p>{{ jobStore.jobItem.jobClass }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Interval:</b>
+						<p>{{ jobStore.jobItem.interval }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Execution Time:</b>
+						<p>{{ jobStore.jobItem.executionTime }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Time Sensitive:</b>
+						<p>{{ jobStore.jobItem.timeSensitive }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Allow Parallel Runs:</b>
+						<p>{{ jobStore.jobItem.allowParallelRuns }}</p>
+					</div>
+					<div class="gridContent">
+						<b>Single Run:</b>
+						<p>{{ jobStore.jobItem.singleRun }}</p>
+					</div>
 				</div>
 
 				<div class="tabContainer">
@@ -93,7 +121,7 @@ import { jobStore, navigationStore } from '../../store/store.js'
 									</template>
 								</NcListItem>
 							</div>
-							<div v-if="jobStore.jobItem?.arguments === null || Object.keys(jobStore.jobItem?.arguments).length === 0" class="tabPanel">
+							<div v-if="jobStore.jobItem?.arguments === null || !Object.keys(jobStore.jobItem?.arguments).length" class="tabPanel">
 								No arguments found
 							</div>
 						</BTab>

src/views/Job/JobsList.vue

@@ -69,7 +69,7 @@ import { jobStore, navigationStore, searchStore } from '../../store/store.js'
 			appearance="dark"
 			name="Taken aan het laden" />
 
-		<div v-if="jobStore.jobList.length === 0">
+		<div v-if="!jobStore.jobList.length" class="emptyListHeader">
 			No jobs defined.
 		</div>
 	</NcAppContentList>

src/views/Log/LogsList.vue

@@ -57,7 +57,7 @@ import { logStore, navigationStore, searchStore } from '../../store/store.js'
 			appearance="dark"
 			name="Logs aan het laden" />
 
-		<div v-if="logStore.logList.length === 0">
+		<div v-if="!logStore.logList.length">
 			Er zijn nog geen logs gedefinieerd.
 		</div>
 	</NcAppContentList>

src/views/Mapping/MappingsList.vue

@@ -69,7 +69,7 @@ import { mappingStore, navigationStore, searchStore } from '../../store/store.js
 			appearance="dark"
 			name="Mappings aan het laden" />
 
-		<div v-if="mappingStore.mappingList.length === 0">
+		<div v-if="!mappingStore.mappingList.length" class="emptyListHeader">
 			Er zijn nog geen mappings gedefinieerd.
 		</div>
 	</NcAppContentList>

src/views/Source/SourceDetails.vue

@@ -89,15 +89,21 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 							<div v-if="sourceStore.sourceLogs?.length">
 								<NcListItem v-for="(log, i) in sourceStore.sourceLogs"
 									:key="log.id + i"
-									:name="log.createdAt"
+									:class="log.status === 'error' ? 'errorStatus' : 'okStatus'"
+									:name="log.response.body"
 									:bold="false"
+									:counter-number="log.statusCode"
 									:force-display-actions="true">
+									<template #counter-number>
+										<BriefcaseAccountOutline disable-menu
+											:size="44" />
+									</template>
 									<template #icon>
 										<BriefcaseAccountOutline disable-menu
 											:size="44" />
 									</template>
 									<template #subname>
-										{{ log.createdAt }}
+										{{ new Date(log.createdAt.date) }}
 									</template>
 								</NcListItem>
 							</div>
@@ -122,7 +128,7 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 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'
 export default {
 	name: 'SourceDetails',
 	components: {
@@ -138,7 +144,13 @@ export default {
 		Sync,
 	},
 	mounted() {
-		sourceStore.refreshSourceLogs()
+		this.refreshSourceLogs()
+	},
+	methods: {
+		refreshSourceLogs() {
+			sourceStore.refreshSourceLogs()
+
+		},
 	},
 }
 </script>
@@ -154,4 +166,14 @@ export default {
 	font-weight: bold !important;
 	unicode-bidi: isolate !important;
   }
+
+  .okStatus * .counter-bubble__counter {
+	background-color: green;
+	color: white
+  }
+
+  .errorStatus * .counter-bubble__counter {
+	background-color: red;
+	color: white
+  }
 </style>

src/views/Source/SourcesList.vue

@@ -69,7 +69,7 @@ import { sourceStore, navigationStore, searchStore } from '../../store/store.js'
 			appearance="dark"
 			name="Bronnen aan het laden" />
 
-		<div v-if="sourceStore.sourceList.length === 0">
+		<div v-if="!sourceStore.sourceList.length" class="emptyListHeader">
 			No sources defined.
 		</div>
 	</NcAppContentList>