start help menu

src/ee/reporting/components/ReportTemplateForm.vue

@@ -14,6 +14,13 @@ For details, see: https://license.tacticalrmm.com/ee
     <q-card>
       <q-bar>
         New Report Template
+        <q-btn
+          icon="help"
+          round
+          flat
+          color="info"
+          @click="showHelp = !showHelp"
+        />
         <q-space />
         <q-btn v-close-popup dense flat icon="close">
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
@@ -174,6 +181,16 @@ For details, see: https://license.tacticalrmm.com/ee
             />
           </q-drawer>
 
+          <q-drawer
+            v-model="showHelp"
+            side="right"
+            :width="600"
+            overlay
+            bordered
+          >
+            <ReportingHelpMenu section="template" />
+          </q-drawer>
+
           <q-page-container>
             <q-splitter
               v-model="splitter"
@@ -278,6 +295,7 @@ import ReportTemplatePreview from "./ReportTemplatePreview.vue";
 import ReportDependencyPrompt from "./ReportDependencyPrompt.vue";
 import ReportHTMLTemplateForm from "./ReportHTMLTemplateForm.vue";
 import VariablesSelector from "./VariablesSelector.vue";
+import ReportingHelpMenu from "./ReportingHelpMenu.vue";
 
 // type imports
 import type {
@@ -321,6 +339,9 @@ const state: ReportTemplate = props.reportTemplate
       depends_on: props.cloneTemplate ? props.cloneTemplate?.depends_on : [],
     });
 
+// help menu
+const showHelp = ref(false);
+
 // variables drawer menu state
 const showVariablesDrawer = ref(true);
 const drawerMiniState = ref(true);

src/ee/reporting/components/ReportingHelpMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="q-px-sm">
+    <div class="text-h5">Report Template</div>
+
+    <div class="q-px-sm">
+      <div class="text-body1">Test</div>
+    </div>
+
+    <div class="text-h5">Base Template</div>
+
+    <div class="q-px-sm">
+      <div class="text-body1">Test</div>
+    </div>
+
+    <div class="text-h5">Data Query</div>
+
+    <div class="q-px-sm">
+      <div class="text-body1">
+        Data Queries are used to save common database queries use them in
+        templates. Behind the scenes, we are just creating a Django queryset.
+        The only difference is these querysets are restricted to only retrieve
+        data versus modifying data.
+      </div>
+      <div class="text-h6">Syntax</div>
+      <div class="q-px-sm">
+        <div class="text-body1">
+          When you create Data Queries in the Data Query Editor you use JSON.
+          You can also create Data Queries directly in the template variables
+          which uses yaml syntax.
+        </div>
+      </div>
+
+      <div class="text-body1"></div>
+
+      <div class="text-h6">Structure</div>
+      <div class="q-px-sm">
+        <div class="text-body1">
+          Ctrl+Space in the query editor to auto-complete values
+        </div>
+
+        <dl>
+          <dt>* model (*string)</dt>
+          <dd>
+            This is the only required field. This specifies the table to query.
+          </dd>
+          <dt>* filter (object)</dt>
+          <dd></dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  section: "template" | "baseTemplate" | "dataQuery";
+}>();
+</script>