Fix: Correct Validation triggering (coscine/issues#1765)

.vscode/settings.json

+{
+    "search.exclude": {
+      "**/.yarn": true,
+      "**/.pnp.*": true
+    },
+    "typescript.tsdk": "../../.yarn/sdks/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+}

package.json

@@ -46,6 +46,7 @@
     "@types/jquery": "^3.5.2",
     "@types/node": "^14.14.20",
     "@types/rdf-js": "^4.0.0",
+    "@types/rdf-validate-shacl": "^0.2.4",
     "@types/uuid": "^8.3.1",
     "@types/vuelidate": "^0.7.13",
     "@typescript-eslint/eslint-plugin": "^4.18.0",

src/FormGenerator.vue

@@ -15,6 +15,9 @@
         :v="$v"
         :errorMessages="errorMessages"
         @input="input"
+        @triggerValidation="
+          validateMetadata(formData, quads, applicationProfileId)
+        "
       />
     </div>
   </div>
@@ -126,8 +129,13 @@ export default LinkedDataHandler.extend({
     },
     formData() {
       this.input();
-      this.$v.$reset();
       this.createValidations();
+      this.$v.$reset();
+      this.validateMetadata(
+        this.formData,
+        this.quads,
+        this.applicationProfileId
+      );
     },
   },
   methods: {
@@ -137,12 +145,12 @@ export default LinkedDataHandler.extend({
         validator[nodename] = {
           $each: {
             value: {
-              shaclValidated: async (value: any) => {
+              shaclValidated: async () => {
                 this.input();
                 // A debounce has been implemented based on the nodename
                 if (this.timeouts[nodename])
                   clearTimeout(this.timeouts[nodename]);
-                return new Promise((resolve, reject) => {
+                return await new Promise((resolve) => {
                   this.timeouts[nodename] = setTimeout(async () => {
                     // Validate the whole data and check if for the current nodename an error is logged
                     const report = await this.validateMetadata(
@@ -151,14 +159,11 @@ export default LinkedDataHandler.extend({
                       this.applicationProfileId
                     );
                     let resolveValue = true;
-                    if (
-                      report.results.some(
-                        (entry: any) => entry.path.value === nodename
-                      )
-                    ) {
-                      const result = report.results.find(
-                        (entry: any) => entry.path.value === nodename
-                      );
+                    const result = report.results.find(
+                      (entry) =>
+                        entry.path !== null && entry.path.value === nodename
+                    );
+                    if (result !== undefined) {
                       this.errorMessages[nodename] = result.message;
                       resolveValue = false;
                     }
@@ -224,7 +229,8 @@ export default LinkedDataHandler.extend({
         if (!FieldReader.isDataValueAssigned(this.formData, nodeName)) {
           this.$set(this.formData, nodeName, []);
           for (let index = 0; index < minCount; index++) {
-            this.formData[nodeName].push({ value: '' });
+            this.formData[nodeName].push({});
+            this.$set(this.formData[nodeName][index], 'value', '');
           }
         } else {
           for (let index = 0; index < minCount; index++) {

src/base/LinkedDataHandler.ts

@@ -57,9 +57,9 @@ export default Vue.extend({
         'application/ld+json',
         null
       );
-      const validator = new SHACLValidator(quads);
+      const validator = new SHACLValidator(quads as any);
       const report = validator.validate(data);
-      this.$emit('isValid', report.conforms);
+      this.$emit('isValid', report);
       return report;
     },
     async getQuads(

src/components/InputBooleanCombobox.vue

@@ -96,6 +96,7 @@ export default Vue.extend({
           return obj.value === (field as any).value;
         });
       }
+      this.$emit('triggerValidation');
     },
   },
   props: {

src/components/InputCombobox.vue

@@ -138,6 +138,7 @@ export default Vue.extend({
           this.selectedOptions.push(selectedElement[0]);
         }
       }
+      this.$emit('triggerValidation');
     },
   },
   props: {

src/components/InputDatePicker.vue

@@ -77,10 +77,7 @@ export default Vue.extend({
           const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
           const yyyy = today.getFullYear();
           this.selectedDate = yyyy + '-' + mm + '-' + dd;
-        } else if (
-          this.formData[this.nodeName][this.entryKey]['value'] === ''
-        ) {
-          this.selectedDate = '';
+          this.$emit('triggerValidation');
         } else {
           this.selectedDate =
             this.formData[this.nodeName][this.entryKey]['value'];

src/components/InputTextArea.vue

@@ -94,6 +94,7 @@ export default Vue.extend({
                 this.textValue =
                   this.formData[this.nodeName][this.entryKey]['value'];
                 this.$forceUpdate();
+                this.$emit('triggerValidation');
               });
             }
           }

src/components/InputTextField.vue

@@ -94,6 +94,7 @@ export default Vue.extend({
                 this.textValue =
                   this.formData[this.nodeName][this.entryKey]['value'];
                 this.$forceUpdate();
+                this.$emit('triggerValidation');
               });
             }
           }

src/components/WrapperInput.vue

@@ -41,6 +41,7 @@
           :v="v"
           :entryKey="entryIndex"
           :state="state"
+          @triggerValidation="triggerValidation"
         />
         <b-button-group class="wrapper-input-button">
           <b-button
@@ -497,6 +498,9 @@ export default Vue.extend({
       }
       this.removeEmptyEntry(entryKey);
     },
+    triggerValidation() {
+      this.$emit('triggerValidation');
+    },
     updateFixedValues(entryKey: number) {
       if (this.fixedValueMode) {
         if (

src/shims-vue.d.ts

@@ -3,7 +3,6 @@ declare module '*.vue' {
   export default Vue;
 }
 
-declare module 'rdf-validate-shacl';
 declare module 'rdf-ext';
 declare module 'rdf-parse';
 declare module 'uuid';