From d86ac6f31bbe2a91e34ea5b23911d626ba201cdc Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 26 Jan 2024 16:08:49 +0100
Subject: [PATCH 1/3] feat: refs #6654 sticky class

---
 src/components/ui/VnSubToolbar.vue            | 20 +++++++++++++++----
 .../Customer/Defaulter/CustomerDefaulter.vue  | 12 +++++------
 .../ExtendedList/CustomerExtendedList.vue     | 12 +++++------
 src/pages/InvoiceOut/InvoiceOutList.vue       |  9 +++++----
 src/pages/Travel/ExtraCommunity.vue           | 11 +++++-----
 5 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 81a1820f1..7f30c9921 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
+
 const stateStore = useStateStore();
 
 onMounted(() => {
@@ -13,9 +14,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
+    <QToolbar class="bg-vn-dark justify-end sticky">
+        <slot name="st-data">
+            <div id="st-data"></div>
+        </slot>
         <QSpace />
-        <div id="st-actions"></div>
+        <slot name="st-actions">
+            <div id="st-actions"></div>
+        </slot>
     </QToolbar>
 </template>
+<style scoped>
+.sticky {
+    position: sticky;
+    top: 60px;
+    z-index: 1;
+}
+</style>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index d54d5df35..3ab1cfa66 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -12,6 +12,7 @@ import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -188,14 +189,11 @@ const selectWorkerId = (id) => {
             <CustomerNotificationsFilter data-key="CustomerDefaulter" />
         </QScrollArea>
     </QDrawer>
-
-    <QToolbar class="bg-vn-dark">
-        <div id="st-data">
+    <VnSubToolbar>
+        <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+        </template>
+    </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index caee06d60..993b84022 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -9,6 +9,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -500,9 +501,8 @@ const selectSalesPersonId = (id) => {
             />
         </QScrollArea>
     </QDrawer>
-
-    <QToolbar class="bg-vn-dark">
-        <div id="st-data">
+    <VnSubToolbar>
+        <template #st-actions>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="clientsDetail"
@@ -511,10 +511,8 @@ const selectSalesPersonId = (id) => {
                     visibleColumns = ['customerStatus', ...$event, 'actions']
                 "
             />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+        </template>
+    </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 292fa2e0a..974847dff 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
@@ -129,8 +130,8 @@ const downloadCsv = () => {
             url="InvoiceOuts/filter"
         >
             <template #body="{ rows }">
-                <QToolbar class="bg-vn-dark justify-end">
-                    <div id="st-actions">
+                <VnSubToolbar class="bg-vn-dark justify-end">
+                    <template #st-actions>
                         <QBtn
                             @click="downloadCsv()"
                             class="q-mr-xl"
@@ -178,8 +179,8 @@ const downloadCsv = () => {
                             :model-value="selectedCards.size === rows.length"
                             class="q-mr-md"
                         />
-                    </div>
-                </QToolbar>
+                    </template>
+                </VnSubToolbar>
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 62292f115..99a97bb5d 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -16,6 +16,7 @@ import { useArrayData } from 'composables/useArrayData';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import travelService from 'src/services/travel.service';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const router = useRouter();
 const stateStore = useStateStore();
@@ -258,13 +259,11 @@ onMounted(async () => {
             />
         </Teleport>
     </template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions">
+    <VnSubToolbar>
+        <template #st-actions>
             <QBtn color="primary" icon-right="archive" no-caps @click="openReportPdf()" />
-        </div>
-    </QToolbar>
+        </template>
+    </VnSubToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <ExtraCommunityFilter data-key="ExtraCommunity" />

From 0edfe24a8588b982136c4c66c09b880b66c80270 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 29 Jan 2024 10:25:59 +0100
Subject: [PATCH 2/3] fix: refs #6654 fix css

---
 src/components/ui/VnSubToolbar.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 7f30c9921..ba5705122 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -24,10 +24,15 @@ onUnmounted(() => {
         </slot>
     </QToolbar>
 </template>
-<style scoped>
+<style lang="scss" scoped>
 .sticky {
     position: sticky;
-    top: 60px;
+    top: 62px;
     z-index: 1;
 }
+@media (max-width: $breakpoint-xs) {
+    .sticky {
+        top: 90px;
+    }
+}
 </style>

From 66e119adc3e49a8f8f4a7c7f450514290cbdda8b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 30 Jan 2024 10:30:07 +0100
Subject: [PATCH 3/3] fix: refs #6654 btn responsive & replace toolbars

---
 src/components/ui/CardDescriptor.vue          |  2 -
 src/components/ui/VnSubToolbar.vue            |  4 +-
 src/composables/tMobile.js                    |  2 +-
 src/pages/Claim/Card/ClaimCard.vue            | 14 ----
 src/pages/Claim/Card/ClaimLines.vue           | 35 ++++-----
 src/pages/Route/RouteList.vue                 |  9 ++-
 .../Supplier/Card/SupplierConsumption.vue     | 73 +++++++++----------
 7 files changed, 58 insertions(+), 81 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 9571c742e..f33b33717 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -49,7 +49,6 @@ onMounted(async () => {
         () => $props.url,
         async (newUrl, lastUrl) => {
             if (newUrl == lastUrl) return;
-            entity.value = null;
             await getData();
         }
     );
@@ -62,7 +61,6 @@ async function getData() {
         skip: 0,
     });
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    entity.value = data;
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index ba5705122..1a6549856 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -27,10 +27,10 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .sticky {
     position: sticky;
-    top: 62px;
+    top: 61px;
     z-index: 1;
 }
-@media (max-width: $breakpoint-xs) {
+@media (max-width: $breakpoint-sm) {
     .sticky {
         top: 90px;
     }
diff --git a/src/composables/tMobile.js b/src/composables/tMobile.js
index a6a000b81..61b8e87b4 100644
--- a/src/composables/tMobile.js
+++ b/src/composables/tMobile.js
@@ -4,5 +4,5 @@ import { useI18n } from 'vue-i18n';
 export function tMobile(...args) {
     const quasar = useQuasar();
     const { t } = useI18n();
-    if (!quasar.platform.is.mobile) return t(...args);
+    if (!quasar.screen.xs) return t(...args);
 }
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index b6c948c96..64cf736a9 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,27 +1,13 @@
 <script setup>
 import LeftMenu from 'components/LeftMenu.vue';
-import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const route = useRoute();
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index e7f67bcc2..5190c9932 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -4,12 +4,11 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-
-import { toDate, toCurrency, toPercentage } from 'filters/index';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 
@@ -158,23 +157,21 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar>
-            <div class="row q-gutter-md">
-                <div>
-                    {{ t('Amount') }}
-                    <QChip :dense="$q.screen.lt.sm">
-                        {{ toCurrency(amount) }}
-                    </QChip>
-                </div>
-                <QSeparator dark vertical />
-                <div>
-                    {{ t('Amount Claimed') }}
-                    <QChip color="positive" :dense="$q.screen.lt.sm">
-                        {{ toCurrency(amountClaimed) }}
-                    </QChip>
-                </div>
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Amount') }}
+                <QChip :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amount) }}
+                </QChip>
             </div>
-        </QToolbar>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Amount Claimed') }}
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountClaimed) }}
+                </QChip>
+            </div>
+        </div>
     </Teleport>
 
     <FetchData
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 591f723e9..2a72a8303 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -15,6 +15,7 @@ import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import { useQuasar } from 'quasar';
 import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -228,8 +229,8 @@ function previewRoute(id) {
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center">
-        <QToolbar class="bg-vn-dark justify-end">
-            <div id="st-actions" class="q-pa-sm">
+        <VnSubToolbar class="bg-vn-dark justify-end">
+            <template #st-actions>
                 <QBtn
                     icon="vn:clone"
                     color="primary"
@@ -249,8 +250,8 @@ function previewRoute(id) {
                 >
                     <QTooltip>{{ t('Mark as served') }}</QTooltip>
                 </QBtn>
-            </div>
-        </QToolbar>
+            </template>
+        </VnSubToolbar>
         <div class="route-list">
             <VnPaginate
                 :key="refreshKey"
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 714499f63..e31a0e5cc 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -3,19 +3,19 @@ import { useRoute } from 'vue-router';
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-
+import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+import { usePrintService } from 'composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
+import { toDate, toDateString } from 'src/filters';
+import { dashIfEmpty } from 'src/filters';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 
-import { toDate, toDateString } from 'src/filters';
-import { dashIfEmpty } from 'src/filters';
-import { usePrintService } from 'composables/usePrintService';
-import useNotify from 'src/composables/useNotify.js';
-import axios from 'axios';
-
 const { t } = useI18n();
 const route = useRoute();
+const stateStore = useStateStore();
 const { openReport, sendEmail } = usePrintService();
 const quasar = useQuasar();
 const { notify } = useNotify();
@@ -88,9 +88,8 @@ const sendCampaignMetricsEmail = ({ address }) => {
     });
 };
 
-const calculateTotal = (buysArray) => {
-    return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
-};
+const calculateTotal = (buysArray) =>
+    buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
 </script>
 
 <template>
@@ -104,35 +103,31 @@ const calculateTotal = (buysArray) => {
         :params="userParams"
         auto-load
     />
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data">
-            <QBtn
-                v-if="userParams.from && userParams.to"
-                color="primary"
-                icon-right="picture_as_pdf"
-                no-caps
-                class="q-mr-md"
-                @click="openReportPdf()"
-            >
-                <QTooltip>
-                    {{ t('Open as PDF') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                v-if="userParams.from && userParams.to"
-                color="primary"
-                icon-right="email"
-                no-caps
-                @click="openSendEmailDialog()"
-            >
-                <QTooltip>
-                    {{ t('Send to email') }}
-                </QTooltip>
-            </QBtn>
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <QBtn
+            v-if="userParams.from && userParams.to"
+            color="primary"
+            icon-right="picture_as_pdf"
+            no-caps
+            class="q-mr-md"
+            @click="openReportPdf()"
+        >
+            <QTooltip>
+                {{ t('Open as PDF') }}
+            </QTooltip>
+        </QBtn>
+        <QBtn
+            v-if="userParams.from && userParams.to"
+            color="primary"
+            icon-right="email"
+            no-caps
+            @click="openSendEmailDialog()"
+        >
+            <QTooltip>
+                {{ t('Send to email') }}
+            </QTooltip>
+        </QBtn>
+    </Teleport>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"