From edf75c8cdde2b61f18d70c5384ee204eedc9d5be Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 11 Apr 2024 09:22:15 +0200
Subject: [PATCH] feat: refs #6480 check if hasContent or slots

---
 src/components/CrudModel.vue            | 75 ++++++++++++------------
 src/components/common/VnCard.vue        |  2 +-
 src/components/ui/VnSubToolbar.vue      | 23 +++++++-
 src/pages/InvoiceIn/InvoiceInFilter.vue | 77 ++++++++++++-------------
 4 files changed, 93 insertions(+), 84 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index cb4011c4f..c8fa5809c 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -9,7 +9,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
-import VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const quasar = useQuasar();
 const stateStore = useStateStore();
@@ -259,44 +258,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <VnSubToolbar class="q-mb-md">
-        <template #st-actions>
-            <QBtnGroup push style="column-gap: 10px">
-                <slot name="moreBeforeActions" />
-                <QBtn
-                    :label="tMobile('globals.remove')"
-                    color="primary"
-                    icon="delete"
-                    flat
-                    @click="remove(selected)"
-                    :disable="!selected?.length"
-                    :title="t('globals.remove')"
-                    v-if="$props.defaultRemove"
-                />
-                <QBtn
-                    :label="tMobile('globals.reset')"
-                    color="primary"
-                    icon="restart_alt"
-                    flat
-                    @click="reset"
-                    :disable="!hasChanges"
-                    :title="t('globals.reset')"
-                    v-if="$props.defaultReset"
-                />
-                <QBtn
-                    :label="tMobile('globals.save')"
-                    ref="saveButtonRef"
-                    color="primary"
-                    icon="save"
-                    @click="onSubmit"
-                    :disable="!hasChanges"
-                    :title="t('globals.save')"
-                    v-if="$props.defaultSave"
-                />
-                <slot name="moreAfterActions" />
-            </QBtnGroup>
-        </template>
-    </VnSubToolbar>
     <VnPaginate
         :url="url"
         v-bind="$attrs"
@@ -314,6 +275,42 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <QBtnGroup push style="column-gap: 10px">
+            <slot name="moreBeforeActions" />
+            <QBtn
+                :label="tMobile('globals.remove')"
+                color="primary"
+                icon="delete"
+                flat
+                @click="remove(selected)"
+                :disable="!selected?.length"
+                :title="t('globals.remove')"
+                v-if="$props.defaultRemove"
+            />
+            <QBtn
+                :label="tMobile('globals.reset')"
+                color="primary"
+                icon="restart_alt"
+                flat
+                @click="reset"
+                :disable="!hasChanges"
+                :title="t('globals.reset')"
+                v-if="$props.defaultReset"
+            />
+            <QBtn
+                :label="tMobile('globals.save')"
+                ref="saveButtonRef"
+                color="primary"
+                icon="save"
+                @click="onSubmit"
+                :disable="!hasChanges"
+                :title="t('globals.save')"
+                v-if="$props.defaultSave"
+            />
+            <slot name="moreAfterActions" />
+        </QBtnGroup>
+    </Teleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index e583bec20..05757322d 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -3,9 +3,9 @@ import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 </script>
 <template>
+    <VnSubToolbar />
     <QPageContainer>
         <QPage>
-            <VnSubToolbar />
             <div :class="useCardSize()">
                 <RouterView />
             </div>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 617c3a9d6..f980bbd65 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,11 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    observer.observe(actions.value, opts);
+    observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +28,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 0e53fbed7..9b7c77f9d 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -70,19 +69,15 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -114,33 +109,33 @@ const suppliersRef = ref();
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput