From a63766a83618486127e1e0d952c4e0162179e32f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Oct 2024 11:05:32 +0200
Subject: [PATCH] perf: refs #8110 #8110 use QPagintaion as QFooter

---
 src/components/NavBar.vue                   |  2 +-
 src/components/common/VnCard.vue            | 17 ++--
 src/components/ui/VnSubToolbar.vue          | 13 +--
 src/layouts/MainLayout.vue                  |  2 +-
 src/pages/Customer/Card/CustomerBalance.vue | 12 +--
 src/pages/Item/Card/ItemDiary.vue           | 89 +++++++++++----------
 6 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 00faaebc2..506d61387 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -22,7 +22,7 @@ const pinnedModulesRef = ref();
 </script>
 
 <template>
-    <QHeader color="white" elevated>
+    <QHeader color="white" elevated reveal>
         <QToolbar class="q-py-sm q-px-md">
             <QBtn
                 @click="stateStore.toggleLeftDrawer()"
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 0d80f43ce..a5e023b0c 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -57,6 +57,10 @@ if (props.baseUrl) {
         }
     });
 }
+const headerHeight = ref(0);
+onMounted(() => {
+    headerHeight.value = document.querySelector('.q-toolbar')?.offsetHeight + 'px';
+});
 </script>
 <template>
     <QDrawer
@@ -80,11 +84,12 @@ if (props.baseUrl) {
         </template>
     </RightMenu>
     <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
+        <QPage padding :style="{ 'padding-top': headerHeight }">
             <div :class="[useCardSize(), $attrs.class]">
-                <RouterView :key="route.path" />
-            </div>
-        </QPage>
+                <RouterView :key="route.path" /></div
+        ></QPage>
+        <QPageSticky expand position="top">
+            <VnSubToolbar />
+        </QPageSticky>
     </QPageContainer>
 </template>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 5ded4be00..9c11acc1e 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
 const actions = ref(null);
 const data = ref(null);
@@ -24,16 +23,18 @@ onMounted(() => {
     if (actions.value) observer.observe(actions.value, opts);
     if (data.value) observer.observe(data.value, opts);
 });
-
 onBeforeUnmount(() => stateStore.toggleSubToolbar());
 </script>
 
 <template>
     <QToolbar
         id="subToolbar"
-        class="justify-end sticky"
+        class="justify-end shadow-10"
         v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
     >
+        <!-- <slot name="title">
+                <QToolbarTitle>Title</QToolbarTitle>
+            </slot> -->
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
@@ -43,9 +44,3 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss" scoped>
-.sticky {
-    position: sticky;
-    z-index: 1;
-}
-</style>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 51cd20071..44ff3b685 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -5,7 +5,7 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <QLayout view="hHh LpR fFf" v-shortcut>
+    <QLayout view="hHh lpR lFr" v-shortcut class="shadow-2">
         <Navbar />
         <RouterView></RouterView>
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index f148194f8..795a68ca7 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -185,8 +185,8 @@ const showBalancePdf = ({ id }) => {
         @on-fetch="getCurrentBalance"
     ></FetchData>
 
-    <VnSubToolbar class="q-mb-md">
-        <template #st-data>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
             <div class="column justify-center q-px-md q-py-sm">
                 <span class="text-bold">{{ t('Total by company') }}</span>
                 <div class="row justify-center">
@@ -194,8 +194,8 @@ const showBalancePdf = ({ id }) => {
                     {{ toCurrency(currentBalance[companyId]?.amount) }}
                 </div>
             </div>
-        </template>
-        <template #st-actions>
+        </Teleport>
+        <Teleport to="#st-actions">
             <div>
                 <VnSelect
                     :label="t('Company')"
@@ -207,8 +207,8 @@ const showBalancePdf = ({ id }) => {
                     option-value="id"
                 ></VnSelect>
             </div>
-        </template>
-    </VnSubToolbar>
+        </Teleport>
+    </template>
     <VnTable
         ref="tableRef"
         data-key="CustomerBalance"
diff --git a/src/pages/Item/Card/ItemDiary.vue b/src/pages/Item/Card/ItemDiary.vue
index b249660e8..e060c932f 100644
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@@ -38,12 +38,12 @@ const _showWhatsBeforeInventory = ref(false);
 const inventoriedDate = ref(null);
 const loading = ref(true);
 const pagination = ref({
-    rowsPerPage: 5,
+    rowsPerPage: 20,
     sortBy: 'desc',
     descending: false,
     page: 1,
 });
-
+const filterWarehouses = "{ fields: ['id', 'name'], order: 'name ASC' }";
 const columns = computed(() => [
     {
         name: 'claim',
@@ -200,55 +200,46 @@ const pagesNumber = computed(() =>
     />
     <FetchData
         url="Warehouses"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        :filter="filterWarehouses"
         auto-load
         @on-fetch="(data) => (warehousesOptions = data)"
     />
-    <QToolbar class="justify-end">
-        <div id="st-data" class="row">
-            <VnSelect
-                :label="t('itemDiary.warehouse')"
-                :options="warehousesOptions"
-                hide-selected
-                option-label="name"
-                option-value="id"
-                dense
-                v-model="itemsBalanceFilter.where.warehouseFk"
-                @update:model-value="fetchItemBalances"
-                class="q-mr-lg"
-            />
-            <QCheckbox
-                :label="t('itemDiary.showBefore')"
-                v-model="showWhatsBeforeInventory"
-                @update:model-value="fetchItemBalances"
-                class="q-mr-lg"
-            />
-            <VnInputDate
-                v-if="showWhatsBeforeInventory"
-                :label="t('itemDiary.since')"
-                dense
-                v-model="itemsBalanceFilter.where.date"
-                @update:model-value="fetchItemBalances"
-            />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-    <QPage class="column items-center q-pa-md">
-        <div class="row justify-center">
-            <QPagination
-                v-model="pagination.page"
-                :max="pagesNumber"
-                size="sm"
-                input
-                ref="paginationRef"
-            />
-        </div>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
+            <div class="row">
+                <VnSelect
+                    :label="t('itemDiary.warehouse')"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    dense
+                    v-model="itemsBalanceFilter.where.warehouseFk"
+                    @update:model-value="fetchItemBalances"
+                    class="q-mr-lg"
+                />
+                <QCheckbox
+                    :label="t('itemDiary.showBefore')"
+                    v-model="showWhatsBeforeInventory"
+                    @update:model-value="fetchItemBalances"
+                    class="q-mr-lg"
+                />
+                <VnInputDate
+                    v-if="showWhatsBeforeInventory"
+                    :label="t('itemDiary.since')"
+                    dense
+                    v-model="itemsBalanceFilter.where.date"
+                    @update:model-value="fetchItemBalances"
+                />
+            </div>
+        </Teleport>
+    </template>
+    <QPage>
         <QTable
             :loading="loading"
             :rows="itemBalances"
             :columns="columns"
-            class="full-width q-mt-md"
+            class="full-width"
             v-model:pagination="pagination"
         >
             <template #body-cell-claim="{ row }">
@@ -355,6 +346,16 @@ const pagesNumber = computed(() =>
                 </QTd>
             </template>
         </QTable>
+        <QFooter elevated style="background-color: var(--vn-section-color)">
+            <QPagination
+                v-model="pagination.page"
+                :max="pagesNumber"
+                style="justify-content: center"
+                size="sm"
+                input
+                ref="paginationRef"
+            />
+        </QFooter>
     </QPage>
 </template>