fixed rdf input

Author: timea-solid

src/components/rdf-form/RDFForm.ts

@@ -11,6 +11,7 @@ import '@/components/rdf-input'
 export default class RDFForm extends WebComponent {
     @state()
     private accessor _parsedUrl: URL | null = null
+
     @state()
     private accessor _parsedUrl2: URL | null = null
 
@@ -36,17 +37,6 @@ export default class RDFForm extends WebComponent {
       return this._parsedUrl ? this._parsedUrl.href : ''
     }
 
-    private defaultContexts = `
-      @prefix foaf:  <http://xmlns.com/foaf/0.1/>.
-      @prefix sched: <http://www.w3.org/ns/pim/schedule#>.
-      @prefix cal:   <http://www.w3.org/2002/12/cal/ical#>.
-      @prefix dc:    <http://purl.org/dc/elements/1.1/>.
-      @prefix rdfs:  <http://www.w3.org/2000/01/rdf-schema#>.
-      @prefix ui:    <http://www.w3.org/ns/ui#>.
-      @prefix trip:  <http://www.w3.org/ns/pim/trip#>.
-      @prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
-      @prefix xsd:   <http://www.w3.org/2001/XMLSchema#>.
-    `
     @property({ type: String })
     accessor whichSubject = 'me'
 
@@ -71,12 +61,11 @@ export default class RDFForm extends WebComponent {
 
     render () {
       // TODO: detect format
-      loadDocument(store, this.rdfTurtleFormatSource + this.defaultContexts, this.rdfName, this.rdfURI) // load form
-      loadDocument(store, this.subjectTurtleFormatSource + this.defaultContexts, this.subjectName, this.subjectURI) // load data
+      loadDocument(store, this.rdfTurtleFormatSource, this.rdfName, this.rdfURI) // load form
+      loadDocument(store, this.subjectTurtleFormatSource, this.subjectName, this.subjectURI) // load data
       const document = sym(this.rdfURI)                         // rdflib NamedNode for the document
       const exactForm = this.whichForm                          // If there are more 'a ui:Form' elements in a form file
       const formThis = Namespace(this.rdfURI + '#')(exactForm)  // NamedNode for #this in the form
-      console.log('formThis:', formThis.value)
 
       const parts = store.each(formThis, ns.ui('parts'), null, document)
       const partsBySequence = sortBySequence(store, parts)
@@ -91,18 +80,16 @@ export default class RDFForm extends WebComponent {
         const typeNode = types[0]
         const value = typeNode ? ((typeNode as any).value || String(typeNode)) : ((item as any).value || String(item))
         const hashIndex = value.lastIndexOf('#')
-        return hashIndex >= 0 ? value.slice(hashIndex + 1) : value
+        return {
+          value: item,
+          fieldValue: hashIndex >= 0 ? value.slice(hashIndex + 1) : value
+        }
       })
-      console.log('parts:', parts)
-      console.log('partsBySequence:', partsBySequence)
-      console.log('partItems:', partItems)
-      console.log('document:', document)
-      console.log('exactForm:', exactForm)
-      console.log('uiFields:', uiFields)
+      const me = Namespace(this.subjectURI + '#')(this.whichSubject)
 
       return html`
       ${uiFields.map(part => {
-        switch (part) {
+        switch (part.fieldValue) {
             case 'PhoneField':
             case 'EmailField':
             case 'ColorField':
@@ -115,8 +102,12 @@ export default class RDFForm extends WebComponent {
             case 'FloatField':
             case 'TextField':
             case 'SingleLineTextField':
-            case 'NamedNodeURIField':
-                return html` <solid-ui-rdf-input .store=${store} formSubject=${part} .inputSubject=${this.subjectURI}></solid-ui-rdf-input> `
+            case 'NamedNodeURIField': {
+              const formSubject = typeof part.value === 'string'
+                ? store.sym(part.value)
+                : part.value
+              return html` <solid-ui-rdf-input .store=${store} .formSubject=${formSubject} .inputSubject=${me}></solid-ui-rdf-input> `
+            }
             case 'MultiLineTextField':
                 return html`<input rdf=${part}></input>`
             case 'BooleanField':

src/components/rdf-form/RDForm.stories.ts

@@ -75,6 +75,7 @@ const meta = {
     whichSubject: 'me',
     subjectTurtleFormatSource: `
       @prefix : <https://solidos.solidcommunity.net/public/2021/alice.ttl#>.
+      @prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
 
       :me a vcard:Individual ;
       vcard:fn "Alice" ;

src/components/rdf-input/RDFInput.ts

@@ -20,33 +20,44 @@ export default class RDFInput extends WebComponent {
   accessor store
 
   // form here is the subject :nameField
-  @property({ type: String })
+  @property({ type: NamedNode })
   accessor formSubject
 
-  @property({ type: String })
+  @property({ type: NamedNode })
   accessor inputSubject
 
   render () {
+    const formSubject = typeof this.formSubject === 'string'
+      ? this.store.sym(this.formSubject)
+      : this.formSubject
+    const inputSubject = typeof this.inputSubject === 'string'
+      ? this.store.sym(this.inputSubject)
+      : this.inputSubject
+
+    const formGraph = formSubject.doc ? formSubject.doc() : undefined
+
     // HTML input part
-    const uiPropertyTerm = this.store.any(this.formSubject, ns.ui('property')) as NamedNode | undefined
+    const uiPropertyTerm = this.store.any(formSubject, ns.ui('property'), null, formGraph) as NamedNode | undefined
     const uiProperty = uiPropertyTerm ? label(uiPropertyTerm, true) : ''
-    const uiLabel = this.store.any(this.formSubject, ns.ui('label'))
+    const uiLabel = this.store.any(formSubject, ns.ui('label'), null, formGraph)
     const inputLabel = uiLabel ? uiLabel.value : uiProperty
-    // readonly
+
     let readonly = false
     // TODO: I am not finding suppressEmptyUneditable in ui ontology
-    const suppressEmptyUneditable = this.store.anyJS(this.formSubject, ns.ui('suppressEmptyUneditable'))
+    const suppressEmptyUneditable = this.store.anyJS(formSubject, ns.ui('suppressEmptyUneditable'), null, formGraph)
     if (suppressEmptyUneditable) {
       readonly = true
     }
 
-    const uri = mostSpecificClassURI(this.store, this.formSubject)
+    const uri = mostSpecificClassURI(this.store, formSubject)
     const params = fieldParams[uri] ?? {}
     const inputType: InputType = params.type ?? 'text'
 
     // input values
-    const defaultInputValueFromStore = this.store.any(this.formSubject, ns.ui('default'))
-    const inputValueFromStore = this.store.any(this.inputSubject, ns.ui('property'))
+    const defaultInputValueFromStore = this.store.any(formSubject, ns.ui('default'))
+    const inputValueFromStore = uiPropertyTerm
+      ? this.store.any(inputSubject, uiPropertyTerm)
+      : undefined
 
     let inputTerm: string | undefined
 

src/lib/forms/rdfFormsHelper.ts

@@ -13,11 +13,16 @@ export function loadDocument (
   const finalDocumentUri = documentURI || baseUri + documentName   // Full URI to the file
   const document = sym(finalDocumentUri)      // rdflib NamedNode for the document
 
-  if (!store.holds(undefined, undefined, undefined, document)) {
-    // we are using the social media form because it contains the information we need
-    // the form can be used for both use cases: create UI  for edit and render UI for display
-    parse(documentSource, store, finalDocumentUri, 'text/turtle', () => null) // Load doc directly
+  if (store.holds(undefined, undefined, undefined, document)) {
+    store.removeStatements(store.statementsMatching(undefined, undefined, undefined, document))
   }
+  // we are using the social media form because it contains the information we need
+  // the form can be used for both use cases: create UI  for edit and render UI for display
+  parse(documentSource, store, finalDocumentUri, 'text/turtle', (err) => {
+    if (err) {
+      console.error('loadDocument parse error for', finalDocumentUri, err)
+    }
+  })
 }
 
 export function sortBySequence (