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

@@ -1,32 +1,48 @@
 <template>
   <div v-resize="onResize">
-    {{ tab }}
-    <v-tabs v-model="tab" color="primary" @change="resizeEditors">
-      <v-tab>Properties</v-tab>
-      <v-tab>Template</v-tab>
-      <v-tab>CSS</v-tab>
-      <v-tabs-items v-model="tab">
-        <v-tab-item transition="none" reverse-transition="none" class="mt-5">
-          PRoperties tab
-        </v-tab-item>
-        <v-tab-item transition="none" reverse-transition="none" class="mt-5">
-          <MonacoEditor
-            ref="scriptEditor"
-            v-model="obj.template"
-            language="javascript"
-            :options="monacoOptions"
-          />
-        </v-tab-item>
-        <v-tab-item transition="none" reverse-transition="none" class="mt-5">
-          <MonacoEditor
-            ref="cssEditor"
-            v-model="obj.style"
-            language="css"
-            :options="monacoOptions"
-          />
-        </v-tab-item>
-      </v-tabs-items>
-    </v-tabs>
+    <v-row>
+      <v-col cols="12" sm="6" class="py-2">
+        <v-btn-toggle
+          v-model="activeTab"
+          tile
+          color="deep-purple accent-3"
+          group
+          @change="onViewChange"
+          mandatory
+        >
+          <v-btn value="properties">
+            Properties
+          </v-btn>
+
+          <v-btn value="template">
+            Template
+          </v-btn>
+
+          <v-btn value="style">
+            Style
+          </v-btn>
+
+          <v-btn value="jsprerender">
+            JSPrerender
+          </v-btn>
+
+          <v-btn value="jshelpers">
+            JSHelpers
+          </v-btn>
+        </v-btn-toggle>
+      </v-col>
+      <v-col cols="12" v-show="activeTab != 'properties'">
+        <MonacoEditor
+          ref="editor"
+          v-model="obj.template"
+          language="javascript"
+          :options="monacoOptions"
+        />
+      </v-col>
+      <v-col cols="12" v-show="activeTab == 'properties'">
+        <h5>Properties</h5>
+      </v-col>
+    </v-row>
   </div>
 
   <!-- <gz-report-viewer
@@ -71,6 +87,7 @@ export default {
       helpUrl: "form-ay-report-edit"
     });
   },
+  created() {},
   data() {
     return {
       search: "",
@@ -81,7 +98,8 @@ export default {
       duplicating: false,
       monacoOptions: { automaticLayout: true },
       editAreaHeight: 300,
-      tab: 0,
+      activeTab: "properties",
+      lastTab: "properties",
       obj: {
         id: 0,
         concurrency: 0,
@@ -136,6 +154,41 @@ import router from "./router";
     //probably should do this way
     //https://github.com/Microsoft/monaco-editor/issues/604
     //https://github.com/Microsoft/monaco-editor/blob/bad3c34056624dca34ac8be5028ae3454172125c/website/playground/playground.js#L108
+    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);
+
+      //save last view stuff
+      switch (vm.lastTab) {
+        case "properties":
+          break;
+        case "template":
+          break;
+        case "style":
+          break;
+        case "jsprerender":
+          break;
+        case "jshelpers":
+          break;
+      }
+
+      //set new view stuff
+      switch (vm.activeTab) {
+        case "properties":
+          break;
+        case "template":
+          break;
+        case "style":
+          break;
+        case "jsprerender":
+          break;
+        case "jshelpers":
+          break;
+      }
+      vm.lastTab = vm.activeTab;
+    },
     onResize() {
       // this.editAreaHeight = window.innerHeight / 2;
       this.editAreaHeight = window.innerHeight * 0.89;
@@ -144,18 +197,18 @@ import router from "./router";
     },
     resizeEditors() {
       let h = `${this.editAreaHeight}px`;
-      console.log("resizeEditors...");
-      let ed = this.$refs.scriptEditor;
+      // console.log("resizeEditor...");
+      let ed = this.$refs.editor;
       if (ed != null) {
-        console.log("scriptEditor setting height", h);
+        // console.log("editor setting height", h);
         ed.$el.style.height = h;
       }
 
-      ed = this.$refs.cssEditor;
-      if (ed != null) {
-        console.log("cssEditor setting height", h);
-        ed.$el.style.height = h;
-      }
+      // ed = this.$refs.cssEditor;
+      // if (ed != null) {
+      //   console.log("cssEditor setting height", h);
+      //   ed.$el.style.height = h;
+      // }
     }
     // ,
     // editStyle() {