From f45db393965b48cdb9e5c491c3ef672c03a1035d Mon Sep 17 00:00:00 2001 From: Norman Radtke Date: Mon, 19 Aug 2024 16:21:18 +0200 Subject: [PATCH] Update Form demo to handle instances and classes Use new varibale of selectionStore to distinguish between instances and classes. --- src/views/FormDemo.vue | 72 +++++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 29 deletions(-) diff --git a/src/views/FormDemo.vue b/src/views/FormDemo.vue index 191904c..40fa948 100644 --- a/src/views/FormDemo.vue +++ b/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' --> - + @@ -32,7 +32,7 @@ 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 { quadStreamToStore } from '../helpers/rdf-parse' +import { quadStreamToStore, quadStreamToString } from '../helpers/rdf-parse' import { Splitpanes, Pane } from 'splitpanes' // import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js' // import * as jsonld from 'jsonld' @@ -53,26 +53,31 @@ export default { Pane }, mounted () { - this.getResource(); + this.getFormData(); }, watch: { resource_iri (value) { this.getResource() }, resource_iri (value) { - this.getShape() + this.getFormData() } }, data () { return { dataModel: {}, + dataTurtle: `@prefix rdf: . +@prefix rdfs: . + + rdf:type rdf:Class ; + 'Example resource'. `, shapeTurtle: `@prefix sh: . @prefix rdf: . @prefix rdfs: . @prefix ex: . ex:DefaultShape - a sh:NodeShape, rdfs:Class ; + a sh:NodeShape, rdf:Class ; sh:property [ sh:name 'class' ; sh:path rdf:type ; @@ -88,7 +93,7 @@ ex:DefaultShape } }, computed: { - ...mapState(useSelectionStore, ['graph_iri', 'resource_iri']), + ...mapState(useSelectionStore, ['graph_iri', 'resource_iri', 'is_class']), res_type () { if (this.dataModel.getQuads !== undefined) { const res_type = this.dataModel.getQuads(rdf.namedNode(this.resource_iri), rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'), null)[0] @@ -102,35 +107,31 @@ ex:DefaultShape methods: { async getResource () { this.subject = rdf.namedNode(this.resource_iri) - console.log('Form: get resource: ' + this.resource_iri) const resourceData = await this.store.getResource(this.resource_iri) - this.dataModel = (await quadStreamToStore(resourceData)).store + const originalData = (await quadStreamToStore(resourceData)).store + return await quadStreamToString(originalData.match(), { format: 'application/n-triples', prefixes: this.prefixes_flat }) }, - async getShape () { - console.log('Form: Get shape for target class') + async getFormData () { + console.log('Form: Get form data') let shapeData = [] - console.log(getShapeQuery4Target(this.resource_iri)) - const result = await this.store.sendQuery({query: getShapeQuery4Target(this.resource_iri)}) // if class - console.log('Form: result:' + result) + let result = "" + + 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)}) + } + if (result.resultType === 'quads') { const quadStream = await result.execute() shapeData = await quadStream.toArray() } - - if (shapeData.length < 1) { - console.log('Form: Get shape for class of current resource') - const result = await this.store.sendQuery({query: getShapeQuery4Instance(this.resource_iri)}) // if class - if (result.resultType === 'quads') { - const quadStream = await result.execute() - console.log('Form: QuadStream') - console.log(quadStream) - shapeData = await quadStream.toArray() - } - } - + let shapeTurtle = "" + let dataTurtle = "" + if (shapeData.length < 1) { console.log('Form: Use default shape') - this.shapeTurtle = `@prefix sh: . + shapeTurtle = `@prefix sh: . @prefix rdf: . @prefix rdfs: . @prefix ex: . @@ -150,9 +151,23 @@ ex:DefaultShape ] .` } else { console.log('Form: Use found shape') - var ttl_string = await this.serialize(shapeData, { format: 'text/turtle', prefixes: this.prefixes }) - this.shapeTurtle = ttl_string.replaceAll("\"", "'") + let data_string = "" + + if (this.is_class == false) { + let instance_data = await this.getResource() + dataTurtle = instance_data.replaceAll("\"", "'") + } + + let shape_string = await this.serialize(shapeData, { format: 'application/n-triples', prefixes: this.prefixes }) + shapeTurtle = shape_string.replaceAll("\"", "'") } + // debug output TODO: remove when working + console.log('Form: Shape as turtle') + console.log(shapeTurtle) + console.log('Form: Instance as n-triples') + console.log(dataTurtle) + this.shapeTurtle = shapeTurtle + this.dataTurtle = dataTurtle }, selectResource (resourceIri) { this.selection.changeResourceIri(resourceIri) @@ -161,7 +176,6 @@ ex:DefaultShape return new Promise((resolve, reject) => { const rdfWriter = new Writer(serializerConfig) data.forEach((quad) => { - console.log(quad) rdfWriter.addQuad(quad) }) rdfWriter.end((error, result) => {