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

@@ -1,27 +1,33 @@
 <template>
-  <v-tabs color="primary">
-    <v-tab>Item One</v-tab>
-    <v-tab>Item Two</v-tab>
-    <v-tab>CSS</v-tab>
-    <v-tabs-items>
-      <v-tab-item>
-        one
-      </v-tab-item>
-      <v-tab-item>
-        two
-      </v-tab-item>
-      <v-tab-item>
-        <MonacoEditor
-          class="editor"
-          v-model="report.style"
-          language="css"
-          :options="monacoOptions"
-          :style="editStyle()"
-          v-resize="onResize"
-        />
-      </v-tab-item>
-    </v-tabs-items>
-  </v-tabs>
+  <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>
+  </div>
 
   <!-- <gz-report-viewer
     :reportId="$route.params.recordid"
@@ -73,9 +79,9 @@ export default {
       replaceDialog: false,
       editingActiveTranslation: false,
       duplicating: false,
-      code: "const noop = () => {}",
       monacoOptions: { automaticLayout: true },
       editAreaHeight: 300,
+      tab: 0,
       obj: {
         id: 0,
         concurrency: 0,
@@ -84,8 +90,29 @@ export default {
         notes: null,
         roles: null,
         objectType: 0,
-        template: "",
-        style: "",
+        template: `/* Xeslint-disable */
+import "@fortawesome/fontawesome-free/css/all.css";
+import "typeface-roboto/index.css";
+import "github-markdown-css";
+import Vue from "vue";
+import Vuetify from "./plugins/vuetify";
+import App from "./App.vue";
+import router from "./router";
+`,
+        style: ` @page {
+            margin: 1cm;
+            }
+
+            @page :first {
+            margin: 2cm;
+            }
+            
+            .ay-red {
+            color:red;
+            }
+             .ay-blue {
+            color:blue;
+            }`,
         jsPrerender: "",
         jsHelpers: "",
         renderType: 0
@@ -101,17 +128,39 @@ export default {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Translation
+      ayaType: window.$gz.type.Report
     };
   },
   methods: {
+    //alternate method, one editor with tabs example
+    //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
     onResize() {
       // this.editAreaHeight = window.innerHeight / 2;
       this.editAreaHeight = window.innerHeight * 0.89;
+      this.resizeEditors();
+      //console.log(this.$refs.scriptEditor.$el.style);
     },
-    editStyle() {
-      return "width: 100%;height: " + this.editAreaHeight + "px;";
+    resizeEditors() {
+      let h = `${this.editAreaHeight}px`;
+      console.log("resizeEditors...");
+      let ed = this.$refs.scriptEditor;
+      if (ed != null) {
+        console.log("scriptEditor 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() {
+    //   return "width: 100%;height: " + this.editAreaHeight + "px;";
+    // }
   }
 };
 </script>