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

@@ -22,11 +22,11 @@
             Style
           </v-btn>
 
-          <v-btn value="jsprerender">
+          <v-btn value="jsPrerender">
             JSPrerender
           </v-btn>
 
-          <v-btn value="jshelpers">
+          <v-btn value="jsHelpers">
             JSHelpers
           </v-btn>
         </v-btn-toggle>
@@ -123,22 +123,28 @@ export default {
     //   language: "javascript"
     // };
     let vm = this;
+
+    //Created editor models for each type of report element that can be edited
     vm.editData.template.model = monaco.editor.createModel(
-      vm.template,
+      vm.obj.template,
       "javascript"
     );
-    vm.editData.style.model = monaco.editor.createModel(vm.style, "css");
+
+    vm.editData.style.model = monaco.editor.createModel(vm.obj.style, "css");
     vm.editData.jsPrerender.model = monaco.editor.createModel(
-      vm.jsPrerender,
+      vm.obj.jsPrerender,
       "javascript"
     );
     vm.editData.jsHelpers.model = monaco.editor.createModel(
-      vm.jsHelpers,
+      vm.obj.jsHelpers,
       "javascript"
     );
+    //Create the editor itself
     vm.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 = vm.editor.saveViewState();
     vm.showEditor = false;
   },
   beforeDestroy() {
@@ -158,6 +164,7 @@ export default {
       editAreaHeight: 300,
       activeTab: "properties",
       lastTab: "properties",
+      lastEditTab: "template",
       showEditor: true,
       editData: {
         template: {
@@ -186,9 +193,15 @@ export default {
         roles: null,
         objectType: 0,
         template: `console.log('hello world');`,
-        style: "",
+        style: `.example {
-        jsPrerender: "",
+  color: blue;
-        jsHelpers: "",
+}`,
+        jsPrerender: `function pre(reportdata){
+    return reportData;
+}`,
+        jsHelpers: `Handlebars.registerHelper('loud', function (aString) {
+    return aString.toUpperCase()
+})`,
         renderType: 0
       },
       formState: {
@@ -214,7 +227,7 @@ export default {
     //
     onViewChange() {
       let vm = this;
-      let editor = vm.$refs.editor ? vm.$refs.editor.getEditor() : null;
+      //let editor = vm.$refs.editor ? vm.$refs.editor.getEditor() : null;
       //    console.log(`Switching from ${vm.lastTab} to ${vm.activeTab}`);
       //      console.log("editor", editor);
 
@@ -222,17 +235,25 @@ export default {
       //Note that properties tab doesn't mean need to dump editor as user could be switching back and forth
       //so really the lasttab needs to be the last edited tab because we don't need to save when going to properties from script and back again
 
-      //save last view stuff
+      let currentState = vm.editor.saveViewState();
+      let currentModel = vm.editor.getModel();
+      // debugger;
+      //save edit state before switching
       switch (vm.lastTab) {
         case "properties":
+          //no state to save here
           break;
         case "template":
+          vm.editData.template.state = currentState;
           break;
         case "style":
+          vm.editData.style.state = currentState;
           break;
-        case "jsprerender":
+        case "jsPrerender":
+          vm.editData.jsPrerender.state = currentState;
           break;
-        case "jshelpers":
+        case "jsHelpers":
+          vm.editData.jsHelpers.state = currentState;
           break;
       }
 
@@ -242,16 +263,28 @@ export default {
           vm.showEditor = false;
           break;
         case "template":
+          vm.editor.setModel(vm.editData.template.model);
+          vm.editor.restoreViewState(vm.editData.template.state);
           vm.showEditor = true;
+          vm.editor.focus();
           break;
         case "style":
+          vm.editor.setModel(vm.editData.style.model);
+          vm.editor.restoreViewState(vm.editData.style.state);
           vm.showEditor = true;
+          vm.editor.focus();
           break;
-        case "jsprerender":
+        case "jsPrerender":
+          vm.editor.setModel(vm.editData.jsPrerender.model);
+          vm.editor.restoreViewState(vm.editData.jsPrerender.state);
           vm.showEditor = true;
+          vm.editor.focus();
           break;
-        case "jshelpers":
+        case "jsHelpers":
+          vm.editor.setModel(vm.editData.jsHelpers.model);
+          vm.editor.restoreViewState(vm.editData.jsHelpers.state);
           vm.showEditor = true;
+          vm.editor.focus();
           break;
       }
       vm.lastTab = vm.activeTab;