Fix shacl-form

Form is working now
Add "data-values-subject" as an missing argument

src/helpers/queries.js

@@ -13,6 +13,7 @@ function getShapeQuery4Target (targetClassIri) {
   PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
   CONSTRUCT {
     ?node_s ?node_p ?node_o ;
+      sh:targetClass <${targetClassIri}> ;
       a sh:NodeShape .
     ?prop_s ?prop_p ?prop_o .
     ?prop_s sh:in ?list .
@@ -52,6 +53,7 @@ function getShapeQuery4Instance (instanceIri) {
   PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
   CONSTRUCT {
     ?node_s ?node_p ?node_o ;
+      sh:targetClass ?class ;
       a sh:NodeShape .
     ?prop_s ?prop_p ?prop_o .
     #?node_s ?p ?o .
@@ -81,6 +83,15 @@ function getShapeQuery4Instance (instanceIri) {
   }`
 }
 
+function getResourceQuery (resourceIri) {
+  return `
+  CONSTRUCT {
+    <${resourceIri}> ?p ?o .
+  } WHERE {
+    <${resourceIri}> ?p ?o .
+  }`
+}
+
 function injectDefaultGraph(query, defaultGraph) {
   console.log(query)
   let altQuery = "select distinct ?instance from <http://default.com/> { ?instance a <http://example.org/Resource> } order by ?instance"
@@ -102,4 +113,4 @@ function injectDefaultGraph(query, defaultGraph) {
   return query
 }
 
-export { getShapeQuery4Target, getShapeQuery4Instance, injectDefaultGraph }
+export { getShapeQuery4Target, getShapeQuery4Instance, getResourceQuery, injectDefaultGraph }

src/views/FormDemo.vue

@@ -14,7 +14,7 @@
           SHACL shapes can be defined on the attribute 'data-shapes'
           or can be loaded by setting attribute 'data-shapes-url'
         -->
-        <shacl-form @change="getFormTurtle" ref="myform" data-submit-button data-generate-node-shape-reference data-show-node-ids v-bind:data-values="dataTurtle" v-bind:data-shapes="shapeTurtle"></shacl-form>
+        <shacl-form @change="getFormTurtle" ref="myform" data-submit-button data-generate-node-shape-reference data-show-node-ids v-bind:data-values="dataTurtle" v-bind:data-shapes="shapeTurtle" v-bind:data-values-subject="dataSubject"></shacl-form>
       </div>
     </pane>
     <pane size="30">
@@ -31,7 +31,7 @@ import { useRdfStore } from '../stores/rdf'
 import { useSelectionStore } from '../stores/selection'
 import { Store, StreamParser, Parser, Writer } from 'n3'
 import { registerPlugin } from '@ulb-darmstadt/shacl-form'
-import { getShapeQuery4Target, getShapeQuery4Instance } from '../helpers/queries'
+import { getShapeQuery4Target, getShapeQuery4Instance, getResourceQuery } from '../helpers/queries'
 import { defaultShape, defaultData } from '../helpers/rdf-data'
 import { quadStreamToString } from '../helpers/rdf-parse'
 import { streamToStore } from 'rdf-dereference-store';
@@ -69,6 +69,7 @@ export default {
     return {
       dataModel: {},
       dataTurtle: defaultData,
+      dataSubject: "",
       shapeTurtle: defaultShape,
       subject: rdf.namedNode(''),
     }
@@ -96,25 +97,36 @@ export default {
     async getResource () {
       this.subject = rdf.namedNode(this.resource_iri)
       const resourceData = await this.store.getResource(this.resource_iri)
-      const originalData = (await streamToStore(resourceData)).store
+      const originalData = (await quadStreamToStore(resourceData)).store
       return await quadStreamToString(originalData.match(), { format: 'application/n-triples', prefixes: this.prefixes_flat })
     },
+    async getInstance () {
+      var result = await this.store.sendQuery({query: await getResourceQuery(this.resource_iri)})
+      if (result.resultType === 'quads') {
+        const quadStream = await result.execute()
+        var instanceData = await quadStream.toArray()
+      }
+      var instance_string = await this.serialize(instanceData, { format: 'application/n-triples', prefixes: this.prefixes })
+      return instance_string.replaceAll("\"", "'")
+    },
     async getFormData () {
       console.log('Form: Get form data')
       let shapeData = []
       let result = ""
+      let dataSubject = ""
 
       if (this.is_class) {
         result = await this.store.sendQuery({query: await getShapeQuery4Target(this.resource_iri)})
       } else {
         result = await this.store.sendQuery({query: await getShapeQuery4Instance(this.resource_iri)})
+        dataSubject = this.resource_iri
       }
 
       if (result.resultType === 'quads') {
         const quadStream = await result.execute()
         shapeData = await quadStream.toArray()
       }
-      let shapeTurtle = ""
+      let shapeTurtle = "" 
       let dataTurtle = ""
 
       if (shapeData.length < 1) {
@@ -125,7 +137,7 @@ export default {
         let data_string = ""
 
         if (this.is_class == false) {
-          let instance_data = await this.getResource()
+          let instance_data = await this.getInstance()
           dataTurtle = instance_data.replaceAll("\"", "'")
         }
 
@@ -137,7 +149,10 @@ export default {
       console.log(shapeTurtle)
       console.log('Form: Instance as n-triples')
       console.log(dataTurtle)
+      console.log('Form: dataSubject')
+      console.log(dataSubject)
       this.shapeTurtle = shapeTurtle
+      this.dataSubject = dataSubject
       this.dataTurtle = dataTurtle
     },
     selectResource (resourceIri) {
@@ -160,4 +175,4 @@ export default {
   }
 }
 
-</script>
+</script>