From dd77093df620e850b4b50df261bccce47b015a5d Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Thu, 28 Jul 2022 12:11:30 -0400
Subject: [PATCH] reporting feature wip

---
 src/api/reporting.js                          |  41 ++
 src/components/FileBar.vue                    |  10 +
 src/components/reporting/MarkdownToolbar.vue  | 394 ++++++++++++++++++
 .../reporting/ReportTemplateForm.vue          | 208 +++++++++
 src/components/reporting/ReportsManager.vue   | 222 ++++++++++
 5 files changed, 875 insertions(+)
 create mode 100644 src/api/reporting.js
 create mode 100644 src/components/reporting/MarkdownToolbar.vue
 create mode 100644 src/components/reporting/ReportTemplateForm.vue
 create mode 100644 src/components/reporting/ReportsManager.vue

diff --git a/src/api/reporting.js b/src/api/reporting.js
new file mode 100644
index 00000000..02872946
--- /dev/null
+++ b/src/api/reporting.js
@@ -0,0 +1,41 @@
+import axios from "axios";
+
+const baseUrl = "/reporting";
+
+// client endpoints
+export async function fetchReportTemplates() {
+  const { data } = await axios.get(`${baseUrl}/templates/`);
+  return data;
+}
+
+export async function fetchReportTemplate(id) {
+  const { data } = await axios.get(`${baseUrl}/templates/${id}/`);
+  return data;
+}
+
+export async function saveReportTemplate(payload) {
+  const { data } = await axios.post(`${baseUrl}/templates/`, payload);
+  return data;
+}
+
+export async function editReportTemplate(id, payload) {
+  const { data } = await axios.put(`${baseUrl}/templates/${id}/`, payload);
+  return data;
+}
+
+export async function removeReportTemplate(id, params = {}) {
+  const { data } = await axios.delete(`${baseUrl}/templates/${id}/`, {
+    params: params,
+  });
+  return data;
+}
+
+export async function runReport(id, payload) {
+  const { data } = await axios.post(`${baseUrl}/templates/${id}/run/`, payload);
+  return data;
+}
+
+export async function runReportPreview(payload) {
+  const { data } = await axios.post(`${baseUrl}/templates/preview/`, payload);
+  return data;
+}
diff --git a/src/components/FileBar.vue b/src/components/FileBar.vue
index 5a21fe85..5e7a25ad 100644
--- a/src/components/FileBar.vue
+++ b/src/components/FileBar.vue
@@ -86,6 +86,10 @@
               <q-item clickable v-close-popup @click="showPermissionsManager">
                 <q-item-section>Permissions Manager</q-item-section>
               </q-item>
+              <!-- reports manager -->
+              <q-item clickable v-close-popup @click="showReportsManager">
+                <q-item-section>Reports Manager</q-item-section>
+              </q-item>
               <!-- admin manager -->
               <q-item clickable v-close-popup @click="showAdminManager = true">
                 <q-item-section>User Administration</q-item-section>
@@ -233,6 +237,7 @@ import DeploymentTable from "@/components/clients/DeploymentTable.vue";
 import ServerMaintenance from "@/components/modals/core/ServerMaintenance.vue";
 import CodeSign from "@/components/modals/coresettings/CodeSign.vue";
 import PermissionsManager from "@/components/accounts/PermissionsManager.vue";
+import ReportsManager from "@/components/reporting/ReportsManager";
 
 export default {
   name: "FileBar",
@@ -396,6 +401,11 @@ export default {
         component: DeploymentTable,
       });
     },
+    showReportsManager() {
+      this.$q.dialog({
+        component: ReportsManager,
+      });
+    },
   },
 };
 </script>
diff --git a/src/components/reporting/MarkdownToolbar.vue b/src/components/reporting/MarkdownToolbar.vue
new file mode 100644
index 00000000..449e1df2
--- /dev/null
+++ b/src/components/reporting/MarkdownToolbar.vue
@@ -0,0 +1,394 @@
+<template>
+  <q-bar>
+    <q-btn-dropdown
+      :disable="isMultiLineSelection"
+      label="Formatting"
+      flat
+      dense
+      auto-close
+      :ripple="false"
+    >
+      <q-list dense>
+        <q-item clickable @click="insertHeader('#')">
+          <q-item-section>
+            <q-item-label>Heading 1</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable @click="insertHeader('##')">
+          <q-item-section>
+            <q-item-label>Heading 2</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable @click="insertHeader('###')">
+          <q-item-section>
+            <q-item-label>Heading 3</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable @click="insertHeader('####')">
+          <q-item-section>
+            <q-item-label>Heading 4</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable @click="insertHeader('#####')">
+          <q-item-section>
+            <q-item-label>Heading 5</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable @click="insertHeader('#######')">
+          <q-item-section>
+            <q-item-label>Heading 6</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="format_bold"
+      @click="insertBold"
+    >
+      <q-tooltip :delay="800">Bold</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="format_italic"
+      @click="insertItalic"
+    >
+      <q-tooltip :delay="800">Italic</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-btn
+      flat
+      dense
+      :ripple="false"
+      icon="format_list_numbered"
+      @click="insertNumberedList"
+    >
+      <q-tooltip :delay="800">Numbered List</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :ripple="false"
+      icon="format_list_bulleted"
+      @click="insertBulletList"
+    >
+      <q-tooltip :delay="800">Bullet List</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-btn
+      flat
+      dense
+      :ripple="false"
+      icon="format_quote"
+      @click="insertBlockQuote"
+    >
+      <q-tooltip :delay="800">Block Quote</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-btn flat dense :ripple="false" icon="undo" @click="undo">
+      <q-tooltip :delay="800">Undo</q-tooltip>
+    </q-btn>
+    <q-btn flat dense :ripple="false" icon="redo" @click="redo">
+      <q-tooltip :delay="800">Redo</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-btn flat dense :ripple="false" icon="code" @click="insertCodeBlock">
+      <q-tooltip :delay="800">Code Block</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="link"
+    >
+      <q-tooltip :delay="800">Link</q-tooltip>
+      <q-menu>
+        <div class="no-wrap q-pa-md">
+          <div class="text-subtitle1">Create Link</div>
+          <q-input label="Text" type="text" v-model="linkText" />
+
+          <q-input label="Url" type="text" v-model="linkUrl" />
+
+          <q-btn
+            color="primary"
+            label="Insert Link"
+            class="full-width q-mt-sm"
+            flat
+            dense
+            v-close-popup
+            @click="insertLink"
+          />
+        </div>
+      </q-menu>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="image"
+    >
+      <q-tooltip :delay="800">Image</q-tooltip>
+      <q-menu>
+        <div class="no-wrap q-pa-md">
+          <div class="text-subtitle1">Insert Image</div>
+          <q-input label="Text" type="text" v-model="linkText" />
+
+          <q-input label="Url" type="text" v-model="linkUrl" />
+
+          <q-btn
+            color="primary"
+            label="Insert Link"
+            class="full-width q-mt-sm"
+            flat
+            dense
+            v-close-popup
+            @click="insertImage"
+          />
+        </div>
+      </q-menu>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="horizontal_rule"
+      @click="insertHr"
+    >
+      <q-tooltip :delay="800">Horizontal Rule</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="table_rows"
+      @click="insertTable"
+    >
+      <q-tooltip :delay="800">Table</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      dense
+      :disable="isMultiLineSelection"
+      :ripple="false"
+      icon="add_chart"
+    >
+      <q-tooltip :delay="800">Chart</q-tooltip>
+    </q-btn>
+  </q-bar>
+</template>
+
+<script>
+import { ref, toRef, onMounted } from "vue";
+export default {
+  name: "MarkdownToolbar",
+  props: {
+    editor: !Object,
+  },
+  setup(props) {
+    const aceEditor = toRef(props, "editor");
+    const isMultiLineSelection = ref(false);
+
+    // link insert refs
+    const linkUrl = ref("");
+    const linkText = ref("");
+
+    onMounted(() => {
+      // disable certain toolbar options if a multiline text selection is made
+      aceEditor.value.session.selection.on("changeSelection", function () {
+        isMultiLineSelection.value = aceEditor.value.selection.isMultiLine();
+      });
+    });
+
+    // toolbar actions
+    function insertHeader(header) {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      const selectedText = aceEditor.value.getSelectedText();
+      if (selectedText) {
+        aceEditor.value.insert(
+          `${pre}${header} ${aceEditor.value.getSelectedText()} \n`
+        );
+        aceEditor.value.navigateUp(1);
+        aceEditor.value.navigateLineEnd();
+      } else {
+        aceEditor.value.insert(`${pre}${header} `);
+      }
+      aceEditor.value.focus();
+    }
+
+    function insertBold() {
+      const selectedText = aceEditor.value.getSelectedText();
+      aceEditor.value.insert(`**${selectedText}**`);
+
+      if (!selectedText) aceEditor.value.navigateLeft(2);
+
+      aceEditor.value.focus();
+    }
+
+    function insertItalic() {
+      // wrap * around selected text if it exists
+      const selectedText = aceEditor.value.getSelectedText();
+      aceEditor.value.insert(`*${selectedText}*`);
+
+      // if no selected text, move cursor back 1 to be inbetween *
+      if (!selectedText) aceEditor.value.navigateLeft(1);
+      aceEditor.value.focus();
+    }
+
+    function insertNumberedList() {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      let formatted = _formatMultiLineSelection(
+        aceEditor.value.getSelectedText(),
+        "numbered"
+      );
+
+      aceEditor.value.insert(pre + formatted);
+      aceEditor.value.focus();
+    }
+
+    function insertBulletList() {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      let formatted = _formatMultiLineSelection(
+        aceEditor.value.getSelectedText(),
+        "* "
+      );
+      aceEditor.value.insert(pre + formatted);
+      aceEditor.value.focus();
+    }
+
+    function insertBlockQuote() {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      let formatted = _formatMultiLineSelection(
+        aceEditor.value.getSelectedText(),
+        "> "
+      );
+      aceEditor.value.insert(pre + formatted);
+      aceEditor.value.focus();
+    }
+
+    function insertCodeBlock() {
+      const selectedText = aceEditor.value.getSelectedText();
+      if (selectedText && !isMultiLineSelection.value) {
+        aceEditor.value.insert(`\`${selectedText}\``);
+      } else {
+        aceEditor.value.insert(`\`\`\`\n${selectedText}\n\`\`\``);
+        aceEditor.value.navigateUp(1);
+      }
+      aceEditor.value.focus();
+    }
+
+    function insertLink() {
+      aceEditor.value.insert(`[${linkUrl.value}](${linkText.value})`);
+      aceEditor.value.focus();
+    }
+
+    function insertImage() {
+      aceEditor.value.insert(`![${linkUrl.value}](${linkText.value})`);
+      aceEditor.value.focus();
+    }
+
+    function redo() {
+      aceEditor.value.redo();
+      aceEditor.value.focus();
+    }
+
+    function undo() {
+      aceEditor.value.undo();
+      aceEditor.value.focus();
+    }
+
+    function insertHr() {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      aceEditor.value.insert(pre + "---\n");
+      aceEditor.value.focus();
+    }
+
+    function insertTable() {
+      let pre = "";
+      if (aceEditor.value.getCursorPosition().column !== 0) {
+        pre = "\n\n";
+      }
+
+      aceEditor.value.insert(pre + "\\table(Agent.objects.all())\n");
+      aceEditor.value.focus();
+    }
+
+    function _formatMultiLineSelection(text, insert) {
+      let temp = "";
+      if (text.includes("\n")) {
+        const lines = text.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+          if (insert === "numbered") {
+            temp = temp + `${i + 1}. ` + lines[i] + "\n";
+          } else {
+            temp = temp + insert + lines[i] + "\n";
+          }
+        }
+      } else {
+        if (insert === "numbered") temp = "1. " + text;
+        else temp = insert + text;
+      }
+
+      return temp;
+    }
+
+    return {
+      // reactive data
+      linkUrl,
+      linkText,
+      isMultiLineSelection,
+
+      //methods
+      insertHeader,
+      insertBold,
+      insertItalic,
+      insertNumberedList,
+      insertBulletList,
+      insertBlockQuote,
+      insertCodeBlock,
+      insertLink,
+      insertImage,
+      insertHr,
+      insertTable,
+      redo,
+      undo,
+    };
+  },
+};
+</script>
diff --git a/src/components/reporting/ReportTemplateForm.vue b/src/components/reporting/ReportTemplateForm.vue
new file mode 100644
index 00000000..29d343fa
--- /dev/null
+++ b/src/components/reporting/ReportTemplateForm.vue
@@ -0,0 +1,208 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" maximized>
+    <q-card>
+      <q-bar>
+        New Report Template
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-toolbar>
+        <q-input
+          label="Report Name"
+          v-model="state.name"
+          filled
+          dense
+          style="width: 400px"
+        />
+        <q-space />
+
+        <q-tabs dense v-model="tab" shrink>
+          <q-tab name="markdown" label="Markdown" :ripple="false" />
+          <q-tab name="css" label="CSS" :ripple="false" />
+          <q-tab name="preview" label="Preview" :ripple="false" />
+        </q-tabs>
+      </q-toolbar>
+
+      <div v-if="tab === 'markdown' || tab === 'css'" class="q-px-sm">
+        <MarkdownToolbar
+          v-if="tab === 'markdown' && markdownEditor"
+          :editor="markdownEditor"
+        />
+
+        <v-ace-editor
+          v-if="tab === 'markdown'"
+          v-model:value="state.template_md"
+          lang="markdown"
+          :theme="$q.dark.isActive ? 'tomorrow_night_eighties' : 'chrome'"
+          :style="{ height: `${$q.screen.height - 164}px` }"
+          :options="{ fontSize: '14px', wrap: 120 }"
+          @init="initializeMarkdownEditor"
+          :printMargin="120"
+        />
+        <v-ace-editor
+          v-if="tab === 'css'"
+          v-model:value="state.template_css"
+          lang="css"
+          :theme="$q.dark.isActive ? 'tomorrow_night_eighties' : 'chrome'"
+          :style="{ height: `${$q.screen.height - 164}px` }"
+          :options="{ fontSize: '14px', wrap: 120 }"
+          :printMargin="120"
+        />
+      </div>
+      <iframe
+        v-if="tab === 'preview'"
+        :srcdoc="preview"
+        :style="{
+          'max-height': `${$q.screen.height - 132}px`,
+          'min-height': `${$q.screen.height - 132}px`,
+          'min-width': '100%',
+          'background-color': 'white',
+        }"
+      />
+      <q-card-actions align="right">
+        <q-btn dense flat label="Cancel" v-close-popup />
+        <q-btn
+          :loading="loading"
+          dense
+          flat
+          label="Save"
+          color="primary"
+          @click="submit"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+// composition import
+import { ref, watch } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import {
+  runReportPreview,
+  saveReportTemplate,
+  editReportTemplate,
+} from "@/api/reporting";
+import { notifySuccess } from "@/utils/notify";
+
+// ui imports
+import { VAceEditor } from "vue3-ace-editor";
+import MarkdownToolbar from "@/components/reporting/MarkdownToolbar";
+
+// imports for ace editor
+import "ace-builds/src-noconflict/mode-markdown";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/theme-tomorrow_night_eighties";
+import "ace-builds/src-noconflict/theme-chrome";
+
+export default {
+  name: "ReportTemplateForm",
+  components: { VAceEditor, MarkdownToolbar },
+  emits: [...useDialogPluginComponent.emits],
+  props: {
+    reportTemplate: Object,
+  },
+  setup(props) {
+    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+
+    // new report logic
+    const state = props.reportTemplate
+      ? ref(Object.assign({}, props.reportTemplate))
+      : ref({
+          name: "",
+          template_md: "",
+          template_css: "",
+        });
+
+    const preview = ref(null);
+    const tab = ref("markdown");
+    const loading = ref(false);
+    const markdownEditor = ref(null);
+
+    // render report on server side and display
+    async function reportPreview() {
+      loading.value = true;
+      try {
+        preview.value = await runReportPreview(state.value);
+      } catch (e) {}
+      loading.value = false;
+    }
+
+    watch(tab, (newValue) => {
+      if (newValue === "preview") {
+        reportPreview();
+      }
+    });
+
+    // save a reference to actual ace editor object
+    function initializeMarkdownEditor(editor) {
+      markdownEditor.value = editor;
+
+      markdownEditor.value.on("paste", function (e) {
+        console.log(e);
+      });
+
+      document.querySelector(".ace_editor").addEventListener(
+        "paste",
+        function (e) {
+          if (tab.value !== "markdown") return;
+
+          const { items } = e.clipboardData;
+          for (let item of items) {
+            if (item.kind === "file") {
+              const blob = item.getAsFile();
+              markdownEditor.value.insert("![Uploading image.png…]()");
+
+              const reader = new FileReader();
+              reader.onload = (event) => {
+                console.log({ img: event.target.result });
+              };
+              reader.readAsDataURL(blob);
+            }
+          }
+        },
+        true
+      );
+
+      // focus editor on page load
+      markdownEditor.value.focus();
+    }
+
+    async function submit() {
+      loading.value = true;
+
+      try {
+        const result = props.reportTemplate
+          ? await editReportTemplate(state.value.id, state.value)
+          : await saveReportTemplate(state.value);
+
+        notifySuccess(result);
+        onDialogOK();
+      } catch (e) {
+        console.error(e);
+      }
+
+      loading.value = false;
+    }
+
+    return {
+      // reactive data
+      markdownEditor,
+      tab,
+      state,
+      loading,
+      preview,
+
+      //methods
+      initializeMarkdownEditor,
+      submit,
+
+      // quasar dialog
+      dialogRef,
+      onDialogHide,
+    };
+  },
+};
+</script>
diff --git a/src/components/reporting/ReportsManager.vue b/src/components/reporting/ReportsManager.vue
new file mode 100644
index 00000000..0412a9eb
--- /dev/null
+++ b/src/components/reporting/ReportsManager.vue
@@ -0,0 +1,222 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" maximized>
+    <q-card>
+      <q-bar>
+        <q-btn
+          class="q-mr-sm"
+          dense
+          flat
+          push
+          icon="refresh"
+          @click="getReportTemplates"
+        />Reports Manager
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-table
+        dense
+        :table-class="{
+          'table-bgcolor': !$q.dark.isActive,
+          'table-bgcolor-dark': $q.dark.isActive,
+        }"
+        :style="{ 'max-height': `${$q.screen.height - 24}px` }"
+        class="tbl-sticky"
+        :rows="reportTemplates"
+        :columns="columns"
+        :loading="loading"
+        :pagination="{ rowsPerPage: 0, sortBy: 'favorite', descending: true }"
+        :filter="search"
+        row-key="id"
+        binary-state-sort
+        virtual-scroll
+        :rows-per-page-options="[0]"
+      >
+        <template v-slot:top>
+          <q-btn
+            icon="add"
+            label="New"
+            no-caps
+            dense
+            flat
+            @click="openNewReportTemplateForm"
+          />
+          <q-btn label="Document Templates" no-caps dense flat />
+          <q-btn label="Report Assets" no-caps dense flat />
+          <q-space />
+          <q-input
+            v-model="search"
+            style="width: 300px"
+            label="Search"
+            dense
+            outlined
+            clearable
+            class="q-pr-md q-pb-xs"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" color="primary" />
+            </template>
+          </q-input>
+        </template>
+
+        <template v-slot:body="props">
+          <q-tr
+            :props="props"
+            @dblclick="openEditReportTemplateForm(props.row)"
+            class="cursor-pointer"
+          >
+            <!-- Context Menu -->
+            <q-menu context-menu>
+              <q-list dense style="min-width: 200px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="cloneTemplate(props.row)"
+                >
+                  <q-item-section side>
+                    <q-icon name="content_copy" />
+                  </q-item-section>
+                  <q-item-section>Clone</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="openEditReportTemplateForm(props.row)"
+                >
+                  <q-item-section side>
+                    <q-icon name="edit" />
+                  </q-item-section>
+                  <q-item-section>Edit</q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="deleteTemplate(props.row)"
+                >
+                  <q-item-section side>
+                    <q-icon name="delete" />
+                  </q-item-section>
+                  <q-item-section>Delete</q-item-section>
+                </q-item>
+
+                <q-separator></q-separator>
+
+                <q-item clickable v-close-popup>
+                  <q-item-section>Close</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+
+            <!-- rows -->
+            <td>{{ props.row.name }}</td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+// composition imports
+import { ref, onMounted } from "vue";
+import { useQuasar, useDialogPluginComponent } from "quasar";
+import { fetchReportTemplates, removeReportTemplate } from "@/api/reporting";
+import { notifySuccess } from "@/utils/notify";
+
+// ui imports
+import ReportTemplateForm from "./ReportTemplateForm.vue";
+
+const columns = [
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    sortable: true,
+  },
+];
+
+export default {
+  name: "ReportsManager",
+  emits: [...useDialogPluginComponent.emits],
+  setup() {
+    const { dialogRef, onDialogHide } = useDialogPluginComponent();
+    const $q = useQuasar();
+
+    // reports manager logic
+    const reportTemplates = ref([]);
+    const search = ref("");
+    const loading = ref(false);
+
+    function openNewReportTemplateForm() {
+      $q.dialog({
+        component: ReportTemplateForm,
+      }).onOk(getReportTemplates);
+    }
+
+    function openEditReportTemplateForm(template) {
+      $q.dialog({
+        component: ReportTemplateForm,
+        componentProps: {
+          reportTemplate: template,
+        },
+      }).onOk(getReportTemplates);
+    }
+
+    function deleteTemplate(template) {
+      $q.dialog({
+        title: `Delete template: ${template.name}?`,
+        cancel: true,
+        ok: { label: "Delete", color: "negative" },
+      }).onOk(async () => {
+        loading.value = true;
+        try {
+          const data = await removeReportTemplate(template.id);
+          notifySuccess(data);
+          getReportTemplates();
+        } catch (e) {
+          console.error(e);
+        }
+        loading.value = false;
+      });
+    }
+
+    async function getReportTemplates() {
+      loading.value = true;
+      reportTemplates.value = await fetchReportTemplates();
+      loading.value = false;
+    }
+
+    async function cloneTemplate(template) {
+      // TODO: fill out function
+      console.log(template);
+    }
+
+    onMounted(getReportTemplates);
+
+    return {
+      // reactive data
+      reportTemplates,
+      search,
+      loading,
+
+      // non-reactive data
+      columns,
+
+      // methods
+      getReportTemplates,
+      deleteTemplate,
+      cloneTemplate,
+      openNewReportTemplateForm,
+      openEditReportTemplateForm,
+
+      // quasar dialog
+      dialogRef,
+      onDialogHide,
+    };
+  },
+};
+</script>