.vscode/settings.json

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

package.json

 {
   "name": "@coscine/form-generator",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.common.js",
   "browser": "dist/index.umd.min.js",
@@ -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",
@@ -69,5 +70,6 @@
     "type": "git",
     "url": "https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator.git"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "yarn@3.1.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++) {
@@ -247,7 +253,7 @@ export default LinkedDataHandler.extend({
     },
     fieldDefinition(formElement: any) {
       if (this.checkField(formElement, 'http://www.w3.org/ns/shacl#datatype')) {
-        let datatype = FieldReader.getObject(
+        const datatype = FieldReader.getObject(
           formElement,
           'http://www.w3.org/ns/shacl#datatype'
         );
@@ -275,6 +281,7 @@ export default LinkedDataHandler.extend({
         ) {
           return 'InputBooleanCombobox';
         }
+        return 'InputTextField';
       } else {
         if (this.checkField(formElement, 'http://www.w3.org/ns/shacl#class')) {
           return 'InputCombobox';

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

@@ -21,12 +21,17 @@ export default Vue.extend({
     // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
     this.replacePlaceholder();
 
+    const datatype = FieldReader.getObject(
+      this.formFieldInformation,
+      'http://www.w3.org/ns/shacl#datatype'
+    );
+
     // set the datatype
     this.$set(this.formData[this.nodeName][this.entryKey], 'type', 'literal');
     this.$set(
       this.formData[this.nodeName][this.entryKey],
       'datatype',
-      'http://www.w3.org/2001/XMLSchema#string'
+      datatype['value']
     );
 
     if (this.fixedValueMode) {
@@ -94,6 +99,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
@@ -142,11 +143,15 @@ export default Vue.extend({
   },
   beforeMount() {
     i18n.locale = this.languageLocale;
+    
+    this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
     this.label = FieldReader.getLocalizedField(
       this.formFieldInformation,
       this.languageLocale
     );
-    this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
+    if (this.label === '') {
+      this.label = this.nodeName;
+    }
 
     if (
       this.checkField(
@@ -497,6 +502,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';