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] 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"