From e7c9e28403d3f429dabf1bcf51af7f51223a0b77 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Fri, 8 Nov 2024 16:33:33 +0100
Subject: [PATCH] added a valid or invalid text with an inline icon

---
 package-lock.json                             | 11 ++++++++
 package.json                                  |  1 +
 .../components/TestMappingResult.vue          | 28 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 342ddf17..32efce01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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",
@@ -3098,6 +3099,11 @@
         "unist-util-is": "^3.0.0"
       }
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
+    },
     "node_modules/@nextcloud/auth": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.4.0.tgz",
@@ -24332,6 +24338,11 @@
         }
       }
     },
+    "@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
+    },
     "@nextcloud/auth": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.4.0.tgz",
diff --git a/package.json b/package.json
index 0dd10397..8c004797 100644
--- a/package.json
+++ b/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",
diff --git a/src/modals/MappingTest/components/TestMappingResult.vue b/src/modals/MappingTest/components/TestMappingResult.vue
index 1aaa6985..d4808003 100644
--- a/src/modals/MappingTest/components/TestMappingResult.vue
+++ b/src/modals/MappingTest/components/TestMappingResult.vue
@@ -15,9 +15,18 @@
 
 			<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>
 	</div>
 </template>
@@ -25,12 +34,16 @@
 <script>
 import {
 	NcNoteCard,
+	NcIconSvgWrapper,
 } from '@nextcloud/vue'
 
+import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js'
+
 export default {
 	name: 'TestMappingResult',
 	components: {
 		NcNoteCard,
+		NcIconSvgWrapper,
 	},
 	props: {
 		mappingTest: {
@@ -38,6 +51,12 @@ export default {
 			required: true,
 		},
 	},
+	setup() {
+		return {
+			mdiCheckCircle,
+			mdiCloseCircle,
+		}
+	},
 	data() {
 		return {
 			// data here
@@ -63,4 +82,11 @@ export default {
 .result pre {
 	white-space: break-spaces;
 }
+
+.valid {
+	color: var(--color-success);
+}
+.invalid {
+	color: var(--color-error);
+}
 </style>