Fix: Use TargetClass if exists (coscine/issues#1826)

src/FormGenerator.vue

@@ -110,9 +110,6 @@ export default LinkedDataHandler.extend({
     this.handleApplicationProfiles();
   },
   watch: {
-    SHACLDefinition() {
-      this.handleApplicationProfiles();
-    },
     formData() {
       this.input();
       this.createValidations();
@@ -123,6 +120,12 @@ export default LinkedDataHandler.extend({
         this.applicationProfileId
       );
     },
+    languageLocale() {
+      i18n.locale = this.languageLocale;
+    },
+    SHACLDefinition() {
+      this.handleApplicationProfiles();
+    },
   },
   methods: {
     createValidations() {

src/base/LinkedDataHandler.ts

@@ -26,7 +26,19 @@ export default Vue.extend({
     > {
       // RDF/JSON => JSON-LD since the loadDataset function doesn't support RDF/JSON
       const combinedDataObject = [];
-      const dataObject = this.processDataObject(formData, applicationProfileId);
+      let targetClass: string | undefined = undefined;
+      const targetClassDefs = quads.filter(
+        (quad) =>
+          quad.subject.value === applicationProfileId &&
+          quad.predicate.value === 'http://www.w3.org/ns/shacl#targetClass'
+      );
+      if (targetClassDefs.length > 0) {
+        targetClass = targetClassDefs[0].object.value;
+      }
+      const dataObject = this.processDataObject(
+        formData,
+        targetClass ? targetClass : applicationProfileId
+      );
       combinedDataObject.push(dataObject);
 
       // rdfs:subClassOf definitions have to be included for the validation to work with inheritance
@@ -191,9 +203,9 @@ export default Vue.extend({
     getPropertySubjects(properties: Array<Quad>) {
       return [...new Set(properties.map((property) => property.subject.value))];
     },
-    processDataObject(formData: any, applicationProfileId: string) {
+    processDataObject(formData: any, typeIdentifier: string) {
       const dataObject = {} as any;
-      dataObject['@type'] = applicationProfileId;
+      dataObject['@type'] = typeIdentifier;
       for (const nodeName of Object.keys(formData)) {
         if (
           formData[nodeName].some((element: any) => element['value'] !== '')

src/components/WrapperInput.vue

@@ -156,13 +156,6 @@ export default Vue.extend({
     i18n.locale = this.languageLocale;
 
     this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
-    this.label = FieldReader.getLocalizedField(
-      this.formFieldInformation,
-      this.languageLocale
-    );
-    if (this.label === '') {
-      this.label = this.nodeName;
-    }
 
     if (
       this.checkField(
@@ -277,6 +270,16 @@ export default Vue.extend({
         return uuid_v4();
       });
     },
+    label(): string {
+      let label = FieldReader.getLocalizedField(
+        this.formFieldInformation,
+        this.languageLocale
+      );
+      if (label === '') {
+        label = this.nodeName;
+      }
+      return label;
+    },
     state(): boolean | null {
       if (
         this.v.formData[this.nodeName] &&
@@ -291,7 +294,6 @@ export default Vue.extend({
     return {
       type: 'literal',
       datatype: '',
-      label: 'Label:',
       nodeName: '',
       minCount: 1,
       maxCount: 1,