From 0b2c404ab336d4e0b663b4cdc41b3fb0b772b7a8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 29 Oct 2024 02:15:21 +0100
Subject: [PATCH] perf: minor bugs detected

---
 src/components/VnTable/VnTable.vue |  4 ++++
 src/components/common/VnTitle.vue  |  2 +-
 src/components/ui/CardSummary.vue  | 20 +++-----------------
 src/composables/useArrayData.js    |  7 ++++---
 src/filters/index.js               |  2 ++
 src/filters/isDialogOpened.js      |  3 +++
 6 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 src/filters/isDialogOpened.js

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index c1680bf13..cdf450966 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -73,6 +73,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    appendParams: {
+        type: Boolean,
+        default: true,
+    },
     hasSubToolbar: {
         type: Boolean,
         default: null,
diff --git a/src/components/common/VnTitle.vue b/src/components/common/VnTitle.vue
index 1fbd43972..89dd8cd0c 100644
--- a/src/components/common/VnTitle.vue
+++ b/src/components/common/VnTitle.vue
@@ -8,7 +8,7 @@ defineProps({
 <template>
     <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
         <div class="header-link" :style="{ cursor: url ? 'pointer' : 'default' }">
-            <a :href="url" :class="url ? 'link' : 'color-vn-text'">
+            <a :href="url" :class="url ? 'link' : 'color-vn-text'" v-bind="$attrs">
                 {{ text }}
                 <QIcon v-if="url" :name="icon" />
             </a>
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 11dcbee3b..f469aa799 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import { isDialogOpened } from 'src/filters';
 
 const props = defineProps({
     url: {
@@ -58,22 +59,6 @@ async function fetch() {
     emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
-
-const showRedirectToSummaryIcon = computed(() => {
-    const exist = existSummary(route.matched);
-    return !isSummary.value && route.meta.moduleName && exist;
-});
-
-function existSummary(routes) {
-    const hasSummary = routes.some((r) => r.name === `${route.meta.moduleName}Summary`);
-    if (hasSummary) return hasSummary;
-    for (const current of routes) {
-        if (current.path != '/' && current.children) {
-            const exist = existSummary(current.children);
-            if (exist) return exist;
-        }
-    }
-}
 </script>
 
 <template>
@@ -84,7 +69,7 @@ function existSummary(routes) {
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <router-link
-                            v-if="showRedirectToSummaryIcon"
+                            v-if="isDialogOpened()"
                             class="header link"
                             :to="{
                                 name: `${moduleName ?? route.meta.moduleName}Summary`,
@@ -118,6 +103,7 @@ function existSummary(routes) {
 
 .cardSummary {
     width: 100%;
+    max-height: 70vh;
     .summaryHeader {
         text-align: center;
         font-size: 20px;
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index a2eaa649a..0a060e4c6 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -3,6 +3,7 @@ import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
+import { isDialogOpened } from 'src/filters';
 
 const arrayDataStore = useArrayDataStore();
 
@@ -114,8 +115,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            if (!document.querySelectorAll('[role="dialog"][aria-modal="true"]').length)
-                updateRouter && updateStateParams();
+            if (!isDialogOpened()) updateRouter && updateStateParams();
         }
 
         store.isLoading = false;
@@ -249,7 +249,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     function updateStateParams() {
         if (!route) return;
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
-        newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
+        if (store.appendParams)
+            newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
 
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
diff --git a/src/filters/index.js b/src/filters/index.js
index 5f08f19c7..ce5c44706 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -12,8 +12,10 @@ import dateRange from './dateRange';
 import toHour from './toHour';
 import dashOrCurrency from './dashOrCurrency';
 import getParamWhere from './getParamWhere';
+import isDialogOpened from './isDialogOpened';
 
 export {
+    isDialogOpened,
     toLowerCase,
     toLowerCamel,
     toDate,
diff --git a/src/filters/isDialogOpened.js b/src/filters/isDialogOpened.js
new file mode 100644
index 000000000..9d6f3895e
--- /dev/null
+++ b/src/filters/isDialogOpened.js
@@ -0,0 +1,3 @@
+export default function isDialogOpened(query = '[role="dialog"]') {
+    return document.querySelectorAll(query).length > 0;
+}