ayanova/src/views/ay-report-edit.vue

@@ -29,6 +29,10 @@
           <v-btn value="jsHelpers">
             Helpers
           </v-btn>
+
+          <v-btn value="rawData">
+            Data
+          </v-btn>
         </v-btn-toggle>
       </v-col>
       <v-col cols="12" v-show="showEditor">
@@ -86,6 +90,7 @@
               ></v-textarea>
             </v-col>
           </v-row>
+          {{ reportData }}
         </v-form>
       </v-col>
     </v-row>
@@ -150,6 +155,42 @@ export default {
           loading: false
         });
       }
+
+      //---------------
+      //setup the editor and models
+
+      //Created editor models for each type of report element that can be edited
+      vm.editData.template.model = monaco.editor.createModel(
+        vm.obj.template,
+        "javascript"
+      );
+
+      vm.editData.style.model = monaco.editor.createModel(vm.obj.style, "css");
+      vm.editData.jsPrerender.model = monaco.editor.createModel(
+        vm.obj.jsPrerender,
+        "javascript"
+      );
+
+      vm.editData.rawData.model = monaco.editor.createModel(
+        JSON.stringify(vm.reportData, null, "\t"),
+        "json"
+      );
+
+      vm.editData.jsHelpers.model = monaco.editor.createModel(
+        vm.obj.jsHelpers,
+        "javascript"
+      );
+
+      //Create the editor itself
+      editor = monaco.editor.create(document.getElementById("editContainer"), {
+        model: vm.editData.template.model
+      });
+      //save the initial state because we're going to move away from it immediately
+      vm.editData.template.state = editor.saveViewState();
+      vm.showEditor = false;
+
+      //---------------
+
       window.$gz.form.setFormState({
         vm: vm,
         dirty: false,
@@ -163,40 +204,15 @@ export default {
       vm.formState.ready = true;
     }
   },
-  mounted() {
-    let vm = this;
 
-    //Created editor models for each type of report element that can be edited
-    vm.editData.template.model = monaco.editor.createModel(
-      vm.obj.template,
-      "javascript"
-    );
-
-    vm.editData.style.model = monaco.editor.createModel(vm.obj.style, "css");
-    vm.editData.jsPrerender.model = monaco.editor.createModel(
-      vm.obj.jsPrerender,
-      "javascript"
-    );
-    vm.editData.jsHelpers.model = monaco.editor.createModel(
-      vm.obj.jsHelpers,
-      "javascript"
-    );
-    //Create the editor itself
-    editor = monaco.editor.create(document.getElementById("editContainer"), {
-      model: vm.editData.template.model
-    });
-    //save the initial state because we're going to move away from it immediately
-    vm.editData.template.state = editor.saveViewState();
-    vm.showEditor = false;
-  },
   beforeDestroy() {
-    //dispose all models and editor
+    //TODO: dispose all models and editor
     editor && editor.dispose();
   },
 
   data() {
     return {
-      reportData: [],
+      reportData: null,
       editAreaHeight: 300,
       activeTab: "properties",
       lastTab: "properties",
@@ -217,6 +233,10 @@ export default {
         jsHelpers: {
           model: null,
           state: null
+        },
+        rawData: {
+          model: null,
+          state: null
         }
       },
       obj: {
@@ -287,6 +307,9 @@ Handlebars.registerHelper('loud', function (aString) {
         case "jsHelpers":
           vm.editData.jsHelpers.state = currentState;
           break;
+        case "rawData":
+          vm.editData.rawData.state = currentState;
+          break;
       }
 
       //set new view stuff
@@ -297,24 +320,35 @@ Handlebars.registerHelper('loud', function (aString) {
         case "template":
           editor.setModel(vm.editData.template.model);
           editor.restoreViewState(vm.editData.template.state);
+          editor.updateOptions({ readOnly: false });
           vm.showEditor = true;
           editor.focus();
           break;
         case "style":
           editor.setModel(vm.editData.style.model);
           editor.restoreViewState(vm.editData.style.state);
+          editor.updateOptions({ readOnly: false });
           vm.showEditor = true;
           editor.focus();
           break;
         case "jsPrerender":
           editor.setModel(vm.editData.jsPrerender.model);
           editor.restoreViewState(vm.editData.jsPrerender.state);
+          editor.updateOptions({ readOnly: false });
           vm.showEditor = true;
           editor.focus();
           break;
         case "jsHelpers":
           editor.setModel(vm.editData.jsHelpers.model);
           editor.restoreViewState(vm.editData.jsHelpers.state);
+          editor.updateOptions({ readOnly: false });
+          vm.showEditor = true;
+          editor.focus();
+          break;
+        case "rawData":
+          editor.setModel(vm.editData.rawData.model);
+          editor.restoreViewState(vm.editData.rawData.state);
+          editor.updateOptions({ readOnly: true });
           vm.showEditor = true;
           editor.focus();
           break;