Got some basic linked data stuff happening - can create context items and use them as values

views/index.ejs

@@ -12,36 +12,43 @@
 
   <!-- Vue app element -->
     <div id="app">
+      {{context}} {{changed}}
         <h1><a v-bind:href="'?path=' + files.up">.. </a>(Get me outa here!)</h1>
-        
-        <template v-for="(item, index) in context">
-          <h2>Context item</h2>
+        <template v-for="(item, id) in context">
           <table>
-            <tr v-for="(value, name) in item">
+            <tr><th>ID</th><th>{{ id }}</tr>
+            <tr v-for="(values, name) in item">
               <td>{{ name }} </td>
+              
               <td>
+                
                 <table>
-                <tr v-for="(i, i_index) in value">
-                  <td>
-                   <input v-model="context[index][name][i_index]" type="text" size="45"/>
-                  </td>
-                  <td>
-                      <form v-on:submit.prevent="linkProp(item)">
-                         
-                     
-                      <select  v-model="link_name" >
-                          <template v-for="item in context">
-                            <template v-for="name in item.name">    
-                              <option v-bind:value="item['@id']">{{ name }}</select>
-                            </template>
-                          </template>
-                        </select>
-                     
-                      <button type="submit">Link</button>
-                      </form>
-                  </td>
-                </tr>
+                    <tr v-for="(val, i_index) in values">
+                        <td>
+                        <template v-if="val.id">
+                          <b>{{ context[val.id].name[0].value }} ({{ val.id }})</b>
+                        </template>
+                        <template v-else>
+                         <input v-model="val.value" type="text" size="45"/>
+                        </template>
+                        </td>
+                        <td>
+                            <template v-if="!['name','type', 'description'].includes(name) " >
+                                <form v-on:submit.prevent="linkProp(val)">                     
+                                <select  v-model="link_to_id" >
+                                    <template v-for="(link_item, link_id) in context">
+                                      <template v-for="name in link_item.name">  
+                                        <option v-if="link_id != val.id" v-bind:value="link_id">{{ name.value  }}</select>
+                                      </template>
+                                    </template>
+                                  </select>
+                                 <button type="submit">Link</button>
+                                </form>
+                              </template>
+                        </td>
+                      </tr>
                 </table>
+             
               </td>
             </tr>
           </table>
@@ -49,7 +56,6 @@
 
           <form v-on:submit.prevent="addContextProp(item)">
               <select  v-model="prop_name" >
-                  <option value="name">Name</option>
                   <option value="url">URL</option>
                   <option value="affiliation">Affiliation</option>
                   <option value="identifier">Identifier</option>
@@ -141,7 +147,8 @@
           prop: {"name":"nom", "value": "val"},
           type: "Person",
           prop_name: "",
-          link_name: ""
+          link_to_id: "",
+          changed: 0
         },
         methods: {
             "save": function save() {
@@ -152,15 +159,22 @@
             "addContextProp": function addContextProp(item){
               var prop_name = this.prop_name;
                if (item[prop_name]) {
-                   item[prop_name].push("");
+                   item[prop_name].push({"value": "", "id": ""});
                } else {
-                  item[prop_name] = [""];
+                  item[prop_name] = [{"value": "", "id": ""}];
               }
-              context.push("");
-              context.pop();
+              this.changed += 1;            
+            
+            },
+            "linkProp": function linkProp(val) {
+               console.log("ID", this.link_to_id)
+               console.log("VAL", val.value)
+               val.value = context[this.link_to_id].name[0].value
+               val.id = this.link_to_id
+               this.changed += 1;  
+              
             },
             "addContext": function addContext(context){
-              console.log(context)
               var uuid4 = function uuidv4() {
                   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                     var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
@@ -168,7 +182,7 @@
                   });
               }
               var id =  "_b" + uuid4()
-              context.push({"@id": [id],  "@type": [this.type]});
+              context[id] = { "@type": [{"value": this.type}], "name": [{"value" : id}]};
             }
           }
       });