Various fixes to make vue behave (all vars reactive)

psychoinformatics-de · Nov 6, 2018 · 62f3042 · 62f3042
1 parent 8ad6591
commit 62f3042
Showing 1 changed file with 37 additions and 38 deletions.
diff --git a/datalad_hirni/resources/webapp/specedit.html b/datalad_hirni/resources/webapp/specedit.html
@@ -46,15 +46,6 @@
     }
   </style>
 
-<script>
-var field_purpose = {
-    comment: "Comments or notes for this record",
-    converter: "Command to call for converting data associated with this record to BIDS format, may use template syntax and placeholders",
-    converter_path: "Location of a program/script to use as converter command for this record, value can be used in converter command via {_hs[converter_path]} placeholder",
-    description: "Record description, originally extracted from the source file(s)"
-}
-</script>
-
 <body>
 <main>
 <div id="app">
@@ -95,32 +86,32 @@
       </div>
       <ul class="card-body">
           <li v-for="(sval, skey) in spec" v-if="sval === Object(sval) && !(skey in {subject: null, anon_subject: null})">
-          <div class="form-group row" v-bind:title="field_purpose[skey] || ''">
-            <!-- this is some editable property -->
-            <label form="specform" class="col-sm-2 col-form-label">
-                <span v-if="skey !== skey.replace('bids_', '')">
-                    <span class="badge badge-primary">BIDS</span> {{ skey.replace('bids_', '') }}
-                </span>
-                <span v-else>
-                  {{ skey }}
-                </span>
-            </label>
-            <div class="col-sm-10">
-              <div class="input-group">
-                <input v-model="sval.value" type="text" :disabled="sval.approved" class="form-control">
-                <div class="input-group-append">
-                  <div class="input-group-text">
-                    <input v-model="sval.approved" type="checkbox" :id="skey" title="Toggle approval of record">
-                  </div>
-                  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tooltip="Perform actions on this record value">Actions</button>
-                  <div class="dropdown-menu">
-                    <span @click="removeElement(spec, skey);" class="oi oi-trash">Delete</span>
+            <div class="form-group row" v-bind:title="field_purpose[skey] || ''">
+              <!-- this is some editable property -->
+              <label form="specform" class="col-sm-2 col-form-label">
+                  <span v-if="skey !== skey.replace('bids_', '')">
+                      <span class="badge badge-primary">BIDS</span> {{ skey.replace('bids_', '') }}
+                  </span>
+                  <span v-else>
+                    {{ skey }}
+                  </span>
+              </label>
+              <div class="col-sm-10">
+                <div class="input-group">
+                  <input v-model="sval.value" type="text" :disabled="sval.approved" class="form-control">
+                  <div class="input-group-append">
+                    <div class="input-group-text">
+                      <input v-model="sval.approved" type="checkbox" :id="skey" title="Toggle approval of record">
+                    </div>
+                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tooltip="Perform actions on this record value">Actions</button>
+                    <div class="dropdown-menu">
+                      <span @click="removeElement(spec, skey);" class="oi oi-trash">Delete</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </li>
+          </li>
 
         <li data-toggle="tooltip" data-placement="right" title="Add a new field to this record, prefix field name with 'bids_' to add a BIDS property">
           <div class="input-group add-field">
@@ -150,17 +141,22 @@
   return params;
 };
 
-var studyspecfile = getUrlParams(window.location.href)['studyspecfile'];
-
 var app = new Vue({
     el: '#app',
     data: {
       specs: [],
-      specfiles: []
+      specfiles: [],
+      studyspecfile: null,
+      field_purpose: {
+          comment: "Comments or notes for this record",
+          converter: "Command to call for converting data associated with this record to BIDS format, may use template syntax and placeholders",
+          converter_path: "Location of a program/script to use as converter command for this record, value can be used in converter command via {_hs[converter_path]} placeholder",
+          description: "Record description, originally extracted from the source file(s)"
+      }
     },
     methods: {
         checkForm: function() {
-            axios.put("/api/v1/file/" + studyspecfile, {
+            axios.put("/api/v1/file/" + app.$data.studyspecfile, {
                 content: JSON.stringify(this.$data.specs),
                 json: 'stream',
                 togit: true
@@ -220,9 +216,12 @@
     }
 });
 
-app.load_specfile_list();
-if (studyspecfile) {
-    app.load_specs(studyspecfile);
+app.$data.studyspecfile = getUrlParams(window.location.href)['studyspecfile'];
+
+if (app.$data.studyspecfile) {
+    app.load_specs(app.$data.studyspecfile);
+} else {
+    app.load_specfile_list();
 }
 </script>
 </body>