Merge pull request #54 from ConductionNL/feature/CONNECTOR-121/mappin…

…g-test-result-looks

feature/CONNECTOR-121/mapping-test-result-looks

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@mdi/js": "^7.4.47",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/dialogs": "^3.2.0",
     "@nextcloud/initial-state": "^2.2.0",

src/modals/MappingTest/components/TestMappingResult.vue

@@ -15,29 +15,71 @@
 
 			<div class="result">
 				<pre><!-- do NOT remove this comment
-					-->{{ JSON.stringify(mappingTest.result, null, 2) }}
+					-->{{ JSON.stringify(mappingTest.result?.resultObject, null, 2) }}
 				</pre>
 			</div>
+
+			<div v-if="mappingTest.result?.isValid !== undefined">
+				<p v-if="mappingTest.result.isValid" class="valid">
+					<NcIconSvgWrapper inline :path="mdiCheckCircle" /> input object is valid
+				</p>
+				<p v-if="!mappingTest.result.isValid" class="invalid">
+					<NcIconSvgWrapper inline :path="mdiCloseCircle" /> input object is invalid
+				</p>
+			</div>
+
+			<div v-if="Object.keys(mappingTest.result?.validationErrors || {}).length" class="validation-errors">
+				<table>
+					<thead>
+						<tr>
+							<th>Field</th>
+							<th>Errors</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="(errors, field) in mappingTest.result.validationErrors" :key="field">
+							<td>{{ field }}</td>
+							<td>
+								<ul>
+									<li v-for="error in errors" :key="error">
+										{{ error }}
+									</li>
+								</ul>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import {
 	NcNoteCard,
+	NcIconSvgWrapper,
 } from '@nextcloud/vue'
 
+import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js'
+
 export default {
 	name: 'TestMappingResult',
 	components: {
 		NcNoteCard,
+		NcIconSvgWrapper,
 	},
 	props: {
 		mappingTest: {
 			type: Object,
 			required: true,
 		},
 	},
+	setup() {
+		return {
+			mdiCheckCircle,
+			mdiCloseCircle,
+		}
+	},
 	data() {
 		return {
 			// data here
@@ -63,4 +105,24 @@ export default {
 .result pre {
 	white-space: break-spaces;
 }
+
+.valid {
+	color: var(--color-success);
+}
+.invalid {
+	color: var(--color-error);
+}
+.validation-errors {
+    margin-block-start: 0.5rem;
+    overflow-x: auto;
+    width: 100%;
+}
+.validation-errors table {
+    border: 1px solid grey;
+    border-collapse: collapse;
+}
+.validation-errors th, .validation-errors td {
+    border: 1px solid grey;
+    padding: 8px;
+}
 </style>

src/store/modules/mapping.js

@@ -147,6 +147,7 @@ export const useMappingStore = defineStore('mapping', {
 				inputObject: mappingTestObject.inputObject,
 				mapping: mappingTestObject.mapping,
 				schema: mappingTestObject?.schema || null,
+				validation: !!mappingTestObject?.schema,
 			}
 
 			// assert that the data is an object