add autosave and some bug fixes

amidaware · Jun 4, 2023 · 74ed896 · 74ed896
1 parent d31b5f2
commit 74ed896
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 30 deletions.
diff --git a/src/ee/reporting/api/reporting.ts b/src/ee/reporting/api/reporting.ts
@@ -28,7 +28,11 @@ export interface useReportingTemplates {
   isError: Ref<boolean>;
   getReportTemplates: (dependsOn?: string[]) => void;
   addReportTemplate: (payload: ReportTemplate) => void;
-  editReportTemplate: (id: number, payload: ReportTemplate) => void;
+  editReportTemplate: (
+    id: number,
+    payload: ReportTemplate,
+    options?: { dontNotify?: boolean }
+  ) => void;
   deleteReportTemplate: (id: number) => void;
   renderedPreview: Ref<string>;
   runReportPreview: (payload: RunReportPreviewRequest) => void;
@@ -97,7 +101,11 @@ export function useReportTemplates(): useReportingTemplates {
       .finally(() => (isLoading.value = false));
   }
 
-  function editReportTemplate(id: number, payload: ReportTemplate) {
+  function editReportTemplate(
+    id: number,
+    payload: ReportTemplate,
+    options?: { dontNotify?: boolean }
+  ) {
     isLoading.value = true;
     isError.value = false;
     axios
@@ -107,7 +115,8 @@ export function useReportTemplates(): useReportingTemplates {
           (template) => template.id === id
         );
         reportTemplates.value[index] = data;
-        notifySuccess("The report template was edited successfully");
+        options?.dontNotify ||
+          notifySuccess("The report template was edited successfully");
       })
       .catch(() => (isError.value = true))
       .finally(() => (isLoading.value = false));
@@ -290,6 +299,7 @@ export function useReportingHTMLTemplates(): useReportingHTMLTemplates {
           (template) => template.id === id
         );
         reportHTMLTemplates.value[index] = data;
+
         notifySuccess("HTML Template was edited successfully");
       })
       .catch(() => (isError.value = true))

diff --git a/src/ee/reporting/components/EditorToolbar.vue b/src/ee/reporting/components/EditorToolbar.vue
@@ -526,7 +526,10 @@ function insert(text: string, moveToNewLine = false) {
     });
   }
 
-  model.pushEditOperations(selections, operations, null);
+  model.pushEditOperations(selections, operations, (operations) => {
+    console.log(operations);
+    return selections;
+  });
 }
 
 // inserts a prefix before selected text
@@ -557,8 +560,8 @@ function insertPrefix(prefix: string, prefixCount = 1) {
       let text = model?.getLineContent(i).trimStart();
 
       // prefix and prefix character amount match so should toggle off prefix in editor
-      const re_toggle = new RegExp(`^${prefix}{${prefixCount}}\\s`);
-      const re_replace = new RegExp(`^${prefix}+\\s`);
+      const re_toggle = new RegExp(`^\\${prefix}{${prefixCount}}\\s`);
+      const re_replace = new RegExp(`^\\${prefix}+\\s`);
 
       if (text.match(re_toggle)) {
         // remove prefix since it is present already (toggled off)
@@ -580,11 +583,10 @@ function insertPrefix(prefix: string, prefixCount = 1) {
     });
   }
 
-  model.pushEditOperations(
-    selections,
-    operations,
-    (/* operations */) => newSelections
-  );
+  model.pushEditOperations(selections, operations, (operations) => {
+    console.log(operations);
+    return newSelections;
+  });
 }
 
 // wraps selected text beginning with a prefix and ending with a suffix
@@ -618,6 +620,7 @@ function insertWrap(prefix: string, suffix: string, includeWholeLine = false) {
   }
 
   model.pushEditOperations(selections, operations, (operations) => {
+    console.log(operations);
     return operations.map((operation) =>
       monaco.Selection.fromRange(operation.range, monaco.SelectionDirection.LTR)
     );

diff --git a/src/ee/reporting/components/ReportDataQueryForm.vue b/src/ee/reporting/components/ReportDataQueryForm.vue
@@ -5,7 +5,7 @@ For details, see: https://license.tacticalrmm.com/ee
 -->
 
 <template>
-  <q-dialog ref="dialogRef" maximized @hide="unloadEditor" @show="loadEditor">
+  <q-dialog ref="dialogRef" maximized @hide="onDialogHide" @show="loadEditor">
     <q-card>
       <q-bar>
         New Data Query
@@ -47,7 +47,7 @@ For details, see: https://license.tacticalrmm.com/ee
 
 <script setup lang="ts">
 // composition imports
-import { reactive, ref } from "vue";
+import { reactive, ref, onUnmounted } from "vue";
 import { useDialogPluginComponent, extend } from "quasar";
 import { useSharedReportDataQueries } from "../api/reporting";
 import { until } from "@vueuse/shared";
@@ -123,9 +123,8 @@ function loadEditor() {
   });
 }
 
-function unloadEditor() {
+onUnmounted(() => {
   editor.getModel()?.dispose();
   editor.dispose();
-  onDialogHide();
-}
+});
 </script>
diff --git a/src/ee/reporting/components/ReportTableMaker.vue b/src/ee/reporting/components/ReportTableMaker.vue
diff --git a/src/ee/reporting/components/ReportTemplateForm.vue b/src/ee/reporting/components/ReportTemplateForm.vue
@@ -8,7 +8,7 @@ For details, see: https://license.tacticalrmm.com/ee
   <q-dialog
     ref="dialogRef"
     maximized
-    @hide="unloadEditor"
+    @hide="onDialogHide"
     @show="initializeEditor"
   >
     <q-card>
@@ -151,9 +151,18 @@ For details, see: https://license.tacticalrmm.com/ee
         }"
       ></iframe>
 
-      <q-card-actions align="right">
+      <q-card-actions>
+        <q-toggle
+          v-if="reportTemplate"
+          v-model="autoSave"
+          label="Auto-save"
+          dense
+        />
+        <span class="q-pl-sm" v-if="showSaved">Template Saved!</span>
+        <q-space />
         <q-btn v-close-popup dense flat label="Cancel" />
         <q-btn
+          v-if="reportTemplate"
           :loading="isLoading"
           dense
           flat
@@ -176,8 +185,16 @@ For details, see: https://license.tacticalrmm.com/ee
 
 <script setup lang="ts">
 // composition imports
-import { ref, reactive, computed, watch, onBeforeMount, shallowRef } from "vue";
-import { until } from "@vueuse/shared";
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  onBeforeMount,
+  shallowRef,
+  onUnmounted,
+} from "vue";
+import { until, useDebounceFn, useTimeoutFn } from "@vueuse/shared";
 import {
   useQuasar,
   useDialogPluginComponent,
@@ -388,14 +405,13 @@ const variablesEditor = shallowRef<monaco.editor.IStandaloneCodeEditor>();
 let variablesModel: monaco.editor.ITextModel;
 const variablesUri = monaco.Uri.parse("editor://variables");
 
-function unloadEditor() {
+onUnmounted(() => {
   editor.value?.dispose();
   variablesEditor.value?.dispose();
   templateModel?.dispose();
   cssModel?.dispose();
   variablesModel?.dispose();
-  onDialogHide();
-}
+});
 
 function initializeEditor() {
   templateModel = monaco.editor.createModel(
@@ -411,6 +427,7 @@ function initializeEditor() {
     model: templateModel,
     theme: "vs-dark",
     minimap: { enabled: false },
+    quickSuggestions: false,
   });
 
   editor.value?.onDidChangeModelContent(() => {
@@ -422,6 +439,7 @@ function initializeEditor() {
       } else {
         state.template_md = currentModel.getValue();
       }
+      autoSave.value && applyChanges();
     }
   });
 
@@ -443,6 +461,7 @@ function initializeEditor() {
 
     if (currentModel) {
       state.template_variables = currentModel.getValue();
+      autoSave.value && applyChanges();
     }
   });
 }
@@ -456,8 +475,11 @@ function wrapDoubleQuotes() {
     const newText = variablesEditor.value
       ?.getValue()
       .replace(matchJsonCharacters, putDoubleQuotes);
-    variablesEditor.value?.setValue(newText);
-    state.template_variables = newText;
+
+    if (newText) {
+      variablesEditor.value?.setValue(newText);
+      state.template_variables = newText;
+    }
   }
 }
 
@@ -477,14 +499,19 @@ function validate(): boolean {
   return true;
 }
 
-function applyChanges() {
+const autoSave = ref(true);
+const showSaved = ref(false);
+
+const applyChanges = useDebounceFn(() => {
+  isLoading.value = true;
   if (validate()) {
     wrapDoubleQuotes();
-    props.reportTemplate
-      ? editReportTemplate(state.id, state)
-      : addReportTemplate(state);
+    editReportTemplate(state.id, state, { dontNotify: true });
+
+    showSaved.value = true;
+    useTimeoutFn(() => (showSaved.value = false), 5000);
   }
-}
+}, 2000);
 
 async function submit() {
   if (validate()) {