fix dependencies validation bug when running reports and also replace…

… the report url with dependencies

src/boot/monaco.ts

@@ -7,7 +7,7 @@ import { boot } from "quasar/wrappers";
 
 export default boot(() => {
   self.MonacoEnvironment = {
-    getWorker(_: any, label: string) {
+    getWorker(_: unknown, label: string) {
       if (label === "json") {
         return new jsonWorker();
       }
@@ -18,6 +18,6 @@ export default boot(() => {
         return new htmlWorker();
       }
       return new editorWorker();
-    }
+    },
   };
-})
+});

src/components/FileBar.vue

@@ -182,7 +182,7 @@
                 v-close-popup
                 @click="
                   notifyWarning(
-                    'This feature requires a valid code signing token.'
+                    'This feature requires a valid code signing token.',
                   )
                 "
               >
@@ -276,6 +276,7 @@ import ServerMaintenance from "@/components/modals/core/ServerMaintenance.vue";
 import CodeSign from "@/components/modals/coresettings/CodeSign.vue";
 import PermissionsManager from "@/components/accounts/PermissionsManager.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { notifyWarning } from "@/utils/notify";
 
 export default {

src/ee/reporting/api/reporting.ts

@@ -33,7 +33,7 @@ export interface useReportingTemplates {
   editReportTemplate: (
     id: number,
     payload: ReportTemplate,
-    options?: { dontNotify?: boolean }
+    options?: { dontNotify?: boolean },
   ) => void;
   deleteReportTemplate: (id: number) => void;
   renderedPreview: Ref<string>;
@@ -46,7 +46,8 @@ export interface useReportingTemplates {
     id: number,
     format: ReportFormat,
     dependsOn: string[],
-    dependencies?: ReportDependencies
+    dependencies?: ReportDependencies,
+    newWindow?: boolean,
   ) => void;
   exportReport: (id: number) => void;
   importReport: (payload: string) => void;
@@ -93,7 +94,7 @@ export function useReportTemplates(): useReportingTemplates {
       .delete(`${baseUrl}/templates/${id}/`)
       .then(() => {
         reportTemplates.value = reportTemplates.value.filter(
-          (template) => template.id != id
+          (template) => template.id != id,
         );
         notifySuccess("The report template was successfully removed");
       })
@@ -117,15 +118,15 @@ export function useReportTemplates(): useReportingTemplates {
   function editReportTemplate(
     id: number,
     payload: ReportTemplate,
-    options?: { dontNotify?: boolean }
+    options?: { dontNotify?: boolean },
   ) {
     isLoading.value = true;
     isError.value = false;
     axios
       .put(`${baseUrl}/templates/${id}/`, payload)
       .then(({ data }: { data: ReportTemplate }) => {
         const index = reportTemplates.value.findIndex(
-          (template) => template.id === id
+          (template) => template.id === id,
         );
         reportTemplates.value[index] = data;
         options?.dontNotify ||
@@ -188,14 +189,24 @@ export function useReportTemplates(): useReportingTemplates {
     id: number,
     format: ReportFormat,
     dependsOn: string[],
-    dependencies?: ReportDependencies
+    dependencies?: ReportDependencies,
+    newWindow?: boolean,
   ) {
-    const dependencyString = JSON.stringify(dependencies);
-    const dependsOnString = JSON.stringify(dependsOn);
-    const url = router.resolve(
-      `/reports/${id}?format=${format}&dependsOn=${dependsOnString}&dependencies=${dependencyString}`
-    ).href;
-    window.open(url, "_blank");
+    const dependencyString = JSON.stringify(dependencies) || "{}";
+    const dependsOnString =
+      dependsOn.length > 0 ? JSON.stringify(dependsOn) : null;
+
+    const params = dependsOnString
+      ? `format=${format}&dependsOn=${dependsOnString}&dependencies=${dependencyString}`
+      : `format=${format}`;
+
+    const url = router.resolve(`/reports/${id}?${params}`).href;
+
+    if (newWindow === undefined || newWindow) {
+      window.open(url, "_blank");
+    } else {
+      router.push(url);
+    }
   }
 
   function exportReport(id: number) {
@@ -265,7 +276,7 @@ export const useSharedReportTemplates = useReportTemplates();
 // reporting asset endpoints
 export async function fetchReportAssets(
   path?: string,
-  folderOnly?: boolean
+  folderOnly?: boolean,
 ): Promise<QTreeFileNode[]> {
   const params = {} as { path?: string; folders?: boolean };
   if (path) params.path = path;
@@ -276,7 +287,7 @@ export async function fetchReportAssets(
 }
 
 export async function fetchAllReportAssets(
-  foldersOnly?: boolean
+  foldersOnly?: boolean,
 ): Promise<QTreeFileNode[]> {
   const params = {} as { onlyFolders?: boolean };
   if (foldersOnly) params.onlyFolders = true;
@@ -289,7 +300,7 @@ export async function fetchAllReportAssets(
 
 export async function renameReportAsset(
   path: string,
-  newName: string
+  newName: string,
 ): Promise<string> {
   const payload = { path, newName };
   const { data } = await axios.put(`${baseUrl}/assets/rename/`, payload);
@@ -319,7 +330,7 @@ export async function downloadAsset(path: string): Promise<Blob> {
 
 export async function uploadAssets(
   form: FormData,
-  path = ""
+  path = "",
 ): Promise<UploadAssetsResponse> {
   form.append("parentPath", path);
   const { data } = await axios.post(`${baseUrl}/assets/upload/`, form);
@@ -370,7 +381,7 @@ export function useReportingHTMLTemplates(): useReportingHTMLTemplates {
       .put(`${baseUrl}/htmltemplates/${id}/`, payload)
       .then(({ data }: { data: ReportHTMLTemplate }) => {
         const index = reportHTMLTemplates.value.findIndex(
-          (template) => template.id === id
+          (template) => template.id === id,
         );
         reportHTMLTemplates.value[index] = data;
 
@@ -386,7 +397,7 @@ export function useReportingHTMLTemplates(): useReportingHTMLTemplates {
       .delete(`${baseUrl}/htmltemplates/${id}/`)
       .then(() => {
         reportHTMLTemplates.value = reportHTMLTemplates.value.filter(
-          (template) => template.id != id
+          (template) => template.id != id,
         );
         notifySuccess("The HTML template was successfully removed");
       })
@@ -453,7 +464,7 @@ export function useReportingDataQueries(): useReportingDataQueries {
       .then(({ data }: { data: ReportDataQuery }) => {
         isLoading.value = true;
         const index = reportDataQueries.value.findIndex(
-          (template) => template.id === id
+          (template) => template.id === id,
         );
         reportDataQueries.value[index] = data;
         notifySuccess("Data Query was edited successfully");
@@ -467,7 +478,7 @@ export function useReportingDataQueries(): useReportingDataQueries {
       .delete(`${baseUrl}/dataqueries/${id}/`)
       .then(() => {
         reportDataQueries.value = reportDataQueries.value.filter(
-          (template) => template.id != id
+          (template) => template.id != id,
         );
         notifySuccess("The Data Query was successfully removed");
       })

src/ee/reporting/components/ReportAssetSelect.vue

@@ -123,11 +123,11 @@ watch(imageType, () => {
   output.value = "";
   linkText.value = "";
   linkUrl.value = "";
+  selected.value = "";
 });
 
 async function getAssets() {
   tree.value = await fetchAllReportAssets();
-  console.log(tree.value);
 }
 
 onMounted(getAssets);

src/ee/reporting/components/ReportDependencyPrompt.vue

@@ -15,7 +15,7 @@ For details, see: https://license.tacticalrmm.com/ee
         </q-btn>
       </q-bar>
 
-      <q-card-section v-for="(value, label) in dependencies" :key="label">
+      <q-card-section v-for="(_, label) in dependencies" :key="label">
         <tactical-dropdown
           v-if="label === 'client'"
           v-model="dependencies[label]"
@@ -68,7 +68,7 @@ For details, see: https://license.tacticalrmm.com/ee
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount } from "vue";
+import { ref, reactive, onBeforeMount } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { notifyError } from "@/utils/notify";
 import { capitalize } from "@/utils/format";
@@ -95,22 +95,22 @@ const { clientOptions, getClientOptions } = useClientDropdown();
 const { siteOptions, getSiteOptions } = useSiteDropdown();
 
 // logic
-const dependencies = ref<{ [x: string]: string | number | null }>({});
-props.dependsOn.forEach((dep) => {
-  if (dep === "client" || dep === "site") dependencies.value[dep] = null;
-  else dependencies.value[dep] = "";
-});
+const dependencies = reactive<{ [x: string]: string | number | null }>({});
+props.dependsOn.forEach((dep) => (dependencies[dep] = null));
 
 const loading = ref(false);
 
 function validate() {
-  for (let dep in dependencies.value) {
-    return dependencies.value[dep];
-  }
+  let valid = true;
+  props.dependsOn.forEach((dep) => {
+    if (!dependencies[dep]) valid = false;
+  });
+
+  return valid;
 }
 
 function submit() {
-  if (validate()) onDialogOK(dependencies.value);
+  if (validate()) onDialogOK(dependencies);
   else notifyError("All fields must have a value");
 }
 

src/ee/reporting/components/ReportingHelpMenu.vue

@@ -3,7 +3,7 @@
     <div class="text-h5">Report Template</div>
 
     <div class="q-px-sm">
-      <div class="text-body1">Test</div>
+      <div class="text-body1">Report Templates</div>
     </div>
 
     <div class="text-h5">Base Template</div>
@@ -16,7 +16,7 @@
 
     <div class="q-px-sm">
       <div class="text-body1">
-        Data Queries are used to save common database queries use them in
+        Data Queries are used to save common database queries to 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.
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   section: "template" | "baseTemplate" | "dataQuery";
 }>();
 </script>

src/ee/reporting/views/ReportView.vue

@@ -52,21 +52,26 @@ const $route = useRoute();
 const $q = useQuasar();
 
 // logic
-const { reportData, isLoading, runReport } = useReportTemplates();
+const { reportData, isLoading, runReport, openReport } = useReportTemplates();
 const needsPrompt = props.dependsOn.filter((dep) => !props.dependencies[dep]);
 
-const dialogOpen = ref(false);
-
 const dependencies = ref(Object.assign({}, props.dependencies));
 
 if (needsPrompt.length > 0) {
-  dialogOpen.value = true;
   $q.dialog({
     component: ReportDependencyPrompt,
     componentProps: { dependsOn: needsPrompt },
   })
     .onOk((deps) => (dependencies.value = { ...dependencies.value, ...deps }))
     .onDismiss(() => {
+      openReport(
+        props.id,
+        props.format,
+        props.dependsOn,
+        dependencies.value,
+        false,
+      );
+
       runReport(props.id, {
         format: props.format,
         dependencies: dependencies.value,