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

@@ -31,44 +31,14 @@
           </v-btn>
         </v-btn-toggle>
       </v-col>
-      <v-col cols="12" v-show="activeTab != 'properties'">
-        <h6>Editor here</h6>
-        <div
-          id="editContainer"
-          style="width:100%;height:100%;border:1px solid #ccc;"
-        ></div>
-        <!-- <MonacoEditor
-          ref="editor"
-          v-model="obj.template"
-          language="javascript"
-          :options="monacoOptions"
-        /> -->
+      <v-col cols="12" v-show="showEditor">
+        <div id="editContainer"></div>
       </v-col>
       <v-col cols="12" v-show="activeTab == 'properties'">
         <h5>Properties</h5>
       </v-col>
     </v-row>
   </div>
-
-  <!-- <gz-report-viewer
-    :reportId="$route.params.recordid"
-    :ayaType="$route.params.ayatype"
-      [Required]
-        public string Name { get; set; }
-        public bool Active { get; set; }
-        public string Notes { get; set; }
-        public AuthorizationRoles Roles { get; set; }
-        [Required]
-        public AyaType ObjectType { get; set; }
-
-        
-        public string Template { get; set; }
-        public string Style { get; set; }
-        public string JsPrerender { get; set; }
-        public string JsHelpers { get; set; }
-        [Required]
-        public ReportRenderType RenderType { get; set; }
-  /> -->
 </template>
 
 <script>
@@ -76,25 +46,25 @@
 /*  Xeslint-disable    */
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-//https://github.com/egoist/vue-monaco
-// import MonacoEditor from "vue-monaco";
+
 import * as monaco from "monaco-editor";
 
 const FORM_KEY = "ay-report-edit";
 export default {
-  // components: {
-  //   MonacoEditor
-  // },
   mounted() {
+    let monacoOptions = {
+      value: 'console.log("Hello, world");',
+      theme: "vs",
+      language: "javascript"
+    };
     this.editor = monaco.editor.create(
       document.getElementById("editContainer"),
-      {
-        value: 'console.log("Hello, world");',
-        theme: "vs",
-        language: "javascript"
-      }
+      null
     );
-    console.log(this.editor);
+    this.showEditor = false;
+  },
+  beforeDestroy() {
+    this.editor && this.editor.dispose();
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
@@ -116,8 +86,9 @@ export default {
       monacoOptions: { automaticLayout: true },
       editor: null,
       editAreaHeight: 300,
-      activeTab: "template",
-      lastTab: "template",
+      activeTab: "properties",
+      lastTab: "properties",
+      showEditor: true,
       obj: {
         id: 0,
         concurrency: 0,
@@ -176,8 +147,12 @@ import router from "./router";
     onViewChange() {
       let vm = this;
       let editor = vm.$refs.editor ? vm.$refs.editor.getEditor() : null;
-      console.log(`Switching from ${vm.lastTab} to ${vm.activeTab}`);
-      console.log("editor", editor);
+      //    console.log(`Switching from ${vm.lastTab} to ${vm.activeTab}`);
+      //      console.log("editor", editor);
+
+      //todo: use function below for inspiration to save editor state and contents as necessary and switch views
+      //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
       switch (vm.lastTab) {
@@ -196,43 +171,58 @@ import router from "./router";
       //set new view stuff
       switch (vm.activeTab) {
         case "properties":
+          vm.showEditor = false;
           break;
         case "template":
+          vm.showEditor = true;
           break;
         case "style":
+          vm.showEditor = true;
           break;
         case "jsprerender":
+          vm.showEditor = true;
           break;
         case "jshelpers":
+          vm.showEditor = true;
           break;
       }
       vm.lastTab = vm.activeTab;
+
+      /*
+      function changeTab(selectedTabNode, desiredModelId) {
+		for (var i = 0; i < tabArea.childNodes.length; i++) {
+			var child = tabArea.childNodes[i];
+			if (/tab/.test(child.className)) {
+				child.className = 'tab';
+			}
+		}
+		selectedTabNode.className = 'tab active';
+
+		var currentState = editor.saveViewState();
+
+		var currentModel = editor.getModel();
+		if (currentModel === data.js.model) {
+			data.js.state = currentState;
+		} else if (currentModel === data.css.model) {
+			data.css.state = currentState;
+		} else if (currentModel === data.html.model) {
+			data.html.state = currentState;
+		}
+
+		editor.setModel(data[desiredModelId].model);
+		editor.restoreViewState(data[desiredModelId].state);
+		editor.focus();
+	}
+
+      */
     },
     onResize() {
-      // this.editAreaHeight = window.innerHeight / 2;
-      this.editAreaHeight = window.innerHeight * 0.89;
-      this.resizeEditors();
-      //console.log(this.$refs.scriptEditor.$el.style);
-    },
-    resizeEditors() {
-      let h = `${this.editAreaHeight}px`;
-      // console.log("resizeEditor...");
-      let ed = this.$refs.editor;
-      if (ed != null) {
-        // console.log("editor setting height", h);
-        ed.$el.style.height = h;
+      let el = document.getElementById("editContainer");
+      el.style = `width:100%;height:${window.innerHeight * 0.77}px`;
+      if (this.editor != null) {
+        this.editor.layout();
       }
-
-      // ed = this.$refs.cssEditor;
-      // if (ed != null) {
-      //   console.log("cssEditor setting height", h);
-      //   ed.$el.style.height = h;
-      // }
     }
-    // ,
-    // editStyle() {
-    //   return "width: 100%;height: " + this.editAreaHeight + "px;";
-    // }
   }
 };
 </script>