add debug mode for preview. import/export templates. More fixes and f…

…ormatting
amidaware · Jun 6, 2023 · ae72243 · ae72243
1 parent 74ed896
commit ae72243
Show file tree

Hide file tree

Showing 6 changed files with 327 additions and 17 deletions.
diff --git a/src/ee/reporting/api/reporting.ts b/src/ee/reporting/api/reporting.ts
@@ -19,6 +19,7 @@ import type {
 } from "../types/reporting";
 import type { QTreeFileNode } from "@/types/filebrowser";
 import { notifySuccess } from "@/utils/notify";
+import { exportFile } from "quasar";
 
 const baseUrl = "/reporting";
 
@@ -35,7 +36,9 @@ export interface useReportingTemplates {
   ) => void;
   deleteReportTemplate: (id: number) => void;
   renderedPreview: Ref<string>;
+  renderedVariables: Ref<string>;
   runReportPreview: (payload: RunReportPreviewRequest) => void;
+  runReportPreviewDebug: (payload: RunReportPreviewRequest) => void;
   reportData: Ref<string>;
   runReport: (id: number, payload: RunReportRequest) => void;
   openReport: (
@@ -44,6 +47,8 @@ export interface useReportingTemplates {
     dependsOn: string[],
     dependencies?: ReportDependencies
   ) => void;
+  exportReport: (id: number) => void;
+  importReport: (payload: string) => void;
 }
 
 // reporting endpoints
@@ -52,6 +57,7 @@ export function useReportTemplates(): useReportingTemplates {
   const isLoading = ref(false);
   const isError = ref(false);
   const renderedPreview = ref("");
+  const renderedVariables = ref("");
   const reportData = ref("");
 
   const getReportTemplates = (dependsOn?: string[]) => {
@@ -122,6 +128,21 @@ export function useReportTemplates(): useReportingTemplates {
       .finally(() => (isLoading.value = false));
   }
 
+  function runReportPreviewDebug(payload: RunReportPreviewRequest) {
+    isLoading.value = true;
+    isError.value = false;
+    renderedPreview.value = "";
+    renderedVariables.value = "";
+    axios
+      .post(`${baseUrl}/templates/preview/`, payload)
+      .then(({ data }) => {
+        renderedPreview.value = data.template;
+        renderedVariables.value = JSON.stringify(data.variables, undefined, 4);
+      })
+      .catch(() => (isError.value = true))
+      .finally(() => (isLoading.value = false));
+  }
+
   function runReportPreview(payload: RunReportPreviewRequest) {
     isLoading.value = true;
     isError.value = false;
@@ -170,6 +191,31 @@ export function useReportTemplates(): useReportingTemplates {
     window.open(url, "_blank");
   }
 
+  function exportReport(id: number) {
+    isLoading.value = true;
+    isError.value = false;
+    axios
+      .post(`${baseUrl}/templates/${id}/export/`)
+      .then(({ data }) => {
+        exportFile(`${data.template.name}-export.json`, JSON.stringify(data));
+      })
+      .catch(() => (isError.value = true))
+      .finally(() => (isLoading.value = false));
+  }
+
+  function importReport(payload: string) {
+    isLoading.value = true;
+    isError.value = false;
+    axios
+      .post(`${baseUrl}/templates/import/`, { template: payload })
+      .then(({ data }: { data: ReportTemplate }) => {
+        reportTemplates.value.push(data);
+        notifySuccess("Report Template was successfully imported.");
+      })
+      .catch(() => (isError.value = true))
+      .finally(() => (isLoading.value = false));
+  }
+
   return {
     reportTemplates,
     isLoading,
@@ -179,10 +225,14 @@ export function useReportTemplates(): useReportingTemplates {
     editReportTemplate,
     deleteReportTemplate,
     renderedPreview,
+    renderedVariables,
     runReportPreview,
+    runReportPreviewDebug,
     reportData,
     runReport,
     openReport,
+    exportReport,
+    importReport,
   };
 }
 

diff --git a/src/ee/reporting/components/ReportTemplateForm.vue b/src/ee/reporting/components/ReportTemplateForm.vue
@@ -69,6 +69,7 @@ For details, see: https://license.tacticalrmm.com/ee
           :options="formatOptions"
           dense
           color="primary"
+          :disable="debug"
         />
         <q-space />
 
@@ -95,7 +96,9 @@ For details, see: https://license.tacticalrmm.com/ee
         class="q-px-sm"
       >
         <EditorToolbar
-          v-if="(tab === 'markdown' || tab === 'html') && editor"
+          v-if="
+            (tab === 'markdown' || tab === 'html') && editor && variablesEditor
+          "
           :editor="editor"
           :variablesEditor="variablesEditor"
           :templateType="templateType"
@@ -113,6 +116,18 @@ For details, see: https://license.tacticalrmm.com/ee
                 splitter > 0 ? "Hide variables" : "Show variables"
               }}</q-tooltip>
             </q-btn>
+            <q-btn
+              flat
+              dense
+              :ripple="false"
+              label="base"
+              no-caps
+              @click="openBaseTemplateForm"
+            >
+              <q-tooltip :delay="500">Add Base Template</q-tooltip>
+            </q-btn>
+            <q-space />
+            <q-toggle v-model="debug" dense label="Debug" />
           </template>
         </EditorToolbar>
 
@@ -139,19 +154,23 @@ For details, see: https://license.tacticalrmm.com/ee
       </div>
 
       <!-- preview -->
-      <iframe
-        v-show="tab === 'preview'"
-        :srcdoc="previewFormat === 'html' ? renderedPreview : undefined"
-        :src="previewFormat === 'pdf' ? renderedPreview : undefined"
-        :style="{
-          'max-height': `${$q.screen.height - 132}px`,
-          'min-height': `${$q.screen.height - 132}px`,
-          'min-width': '100%',
-          'background-color': 'white',
-        }"
-      ></iframe>
-
-      <q-card-actions>
+      <ReportTemplatePreview
+        v-if="tab == 'preview' && !isLoading"
+        :previewFormat="previewFormat"
+        :source="renderedPreview"
+        :debug="debug"
+        :variables="renderedVariables"
+      />
+
+      <q-inner-loading
+        v-if="tab == 'preview'"
+        :showing="isLoading"
+        label="Generating Report..."
+        label-class="text-teal"
+        label-style="font-size: 1.1em"
+      />
+
+      <q-card-actions v-if="tab !== 'preview'">
         <q-toggle
           v-if="reportTemplate"
           v-model="autoSave"
@@ -210,7 +229,9 @@ import * as monaco from "monaco-editor";
 
 // ui imports
 import EditorToolbar from "./EditorToolbar.vue";
+import ReportTemplatePreview from "./ReportTemplatePreview.vue";
 import ReportDependencyPrompt from "./ReportDependencyPrompt.vue";
+import ReportHTMLTemplateForm from "./ReportHTMLTemplateForm.vue";
 
 // type imports
 import type {
@@ -316,9 +337,11 @@ const {
   isLoading,
   isError,
   renderedPreview,
+  renderedVariables,
   addReportTemplate,
   editReportTemplate,
   runReportPreview,
+  runReportPreviewDebug,
 } = useSharedReportTemplates;
 
 const { reportHTMLTemplates, getReportHTMLTemplates } =
@@ -335,6 +358,18 @@ const HTMLTemplateOptions = computed<QSelectOption<number>[]>(() =>
   }))
 );
 
+const debug = ref(false);
+
+watch(debug, (newValue) => {
+  if (newValue) previewFormat.value = "html";
+});
+
+function openBaseTemplateForm() {
+  $q.dialog({
+    component: ReportHTMLTemplateForm,
+  }).onOk(() => getReportHTMLTemplates);
+}
+
 function previewReport() {
   wrapDoubleQuotes();
   let needsPrompt: string[] = [];
@@ -355,16 +390,20 @@ function previewReport() {
           ...state,
           format: previewFormat.value,
           dependencies: dependencies.value,
+          debug: debug.value,
         };
-        runReportPreview(request);
+        debug.value
+          ? runReportPreviewDebug(request)
+          : runReportPreview(request);
       });
   } else {
     const request = {
       ...state,
       format: previewFormat.value,
       dependencies: dependencies.value,
+      debug: debug.value,
     };
-    runReportPreview(request);
+    debug.value ? runReportPreviewDebug(request) : runReportPreview(request);
   }
 }
 
@@ -499,7 +538,7 @@ function validate(): boolean {
   return true;
 }
 
-const autoSave = ref(true);
+const autoSave = ref(props.reportTemplate ? true : false);
 const showSaved = ref(false);
 
 const applyChanges = useDebounceFn(() => {

diff --git a/src/ee/reporting/components/ReportTemplateImport.vue b/src/ee/reporting/components/ReportTemplateImport.vue
@@ -0,0 +1,72 @@
+<!--
+Copyright (c) 2023-present Amidaware Inc.
+This file is subject to the EE License Agreement.
+For details, see: https://license.tacticalrmm.com/ee
+-->
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card>
+      <q-bar>
+        Import Report Template
+        <q-space />
+        <q-btn v-close-popup dense flat icon="close">
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-card-section>
+        <q-file
+          v-model="file"
+          dense
+          filled
+          label="Import File"
+          style="width: 250px"
+        />
+      </q-card-section>
+
+      <q-card-actions>
+        <q-space />
+        <q-btn v-close-popup dense flat label="Cancel" />
+        <q-btn
+          :loading="isLoading"
+          dense
+          flat
+          label="Import"
+          color="primary"
+          @click="submit"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { until } from "@vueuse/shared";
+import { useDialogPluginComponent } from "quasar";
+import { useSharedReportTemplates } from "../api/reporting";
+import { notifyError } from "@/utils/notify";
+
+// emits
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { isLoading, isError, importReport } = useSharedReportTemplates;
+
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+
+const file = ref<File | null>(null);
+
+async function submit() {
+  if (file.value) {
+    importReport(await file.value.text());
+
+    // stops the dialog from closing when there is an error
+    await until(isLoading).not.toBeTruthy();
+    if (isError.value) return;
+
+    onDialogOK();
+  } else {
+    notifyError("File is required");
+  }
+}
+</script>