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']);

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,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
+    <QToolbar class="bg-vn-dark justify-end sticky">
+        <slot name="st-data">
             <div id="st-data"></div>
+        </slot>
         <QSpace />
+        <slot name="st-actions">
             <div id="st-actions"></div>
+        </slot>
     </QToolbar>
 </template>
+<style lang="scss" scoped>
+.sticky {
+    position: sticky;
+    top: 61px;
+    z-index: 1;
+}
+@media (max-width: $breakpoint-sm) {
+    .sticky {
+        top: 90px;
+    }
+}
+</style>

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);
 }

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()">

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,7 +157,6 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar>
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
@@ -174,7 +172,6 @@ function showImportDialog() {
                 </QChip>
             </div>
         </div>
-        </QToolbar>
     </Teleport>
 
     <FetchData

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';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 
 const { t } = useI18n();
@@ -206,8 +207,8 @@ const refreshData = () => {
         </QScrollArea>
     </QDrawer>
 
-    <QToolbar class="bg-vn-dark">
+    <VnSubToolbar class="bg-vn-dark">
-        <div id="st-data" class="row">
+        <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
             <div class="flex items-center q-ml-lg">
                 <QBtn
@@ -217,8 +218,8 @@ const refreshData = () => {
                     @click.stop="viewAddObservation(selected)"
                 />
             </div>
-        </div>
+        </template>
-    </QToolbar>
+    </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable

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';
@@ -499,9 +500,8 @@ const selectSalesPersonId = (id) => {
             />
         </QScrollArea>
     </QDrawer>
-
+    <VnSubToolbar>
-    <QToolbar class="bg-vn-dark">
+        <template #st-actions>
-        <div id="st-data">
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="clientsDetail"
@@ -510,10 +510,8 @@ const selectSalesPersonId = (id) => {
                     visibleColumns = ['customerStatus', ...$event, 'actions']
                 "
             />
-        </div>
+        </template>
-        <QSpace />
+    </VnSubToolbar>
-        <div id="st-actions"></div>
-    </QToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable

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">
+                <VnSubToolbar class="bg-vn-dark justify-end">
-                    <div id="st-actions">
+                    <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>
+                    </template>
-                </QToolbar>
+                </VnSubToolbar>
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList

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">
+        <VnSubToolbar class="bg-vn-dark justify-end">
-            <div id="st-actions" class="q-pa-sm">
+            <template #st-actions>
                 <QBtn
                     icon="vn:clone"
                     color="primary"
@@ -249,8 +250,8 @@ function previewRoute(id) {
                 >
                     <QTooltip>{{ t('Mark as served') }}</QTooltip>
                 </QBtn>
-            </div>
+            </template>
-        </QToolbar>
+        </VnSubToolbar>
         <div class="route-list">
             <VnPaginate
                 :key="refreshKey"

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) => {
+const calculateTotal = (buysArray) =>
-    return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
+    buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
-};
 </script>
 
 <template>
@@ -104,8 +103,7 @@ const calculateTotal = (buysArray) => {
         :params="userParams"
         auto-load
     />
-    <QToolbar class="bg-vn-dark justify-end">
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <div id="st-data">
         <QBtn
             v-if="userParams.from && userParams.to"
             color="primary"
@@ -129,10 +127,7 @@ const calculateTotal = (buysArray) => {
                 {{ t('Send to email') }}
             </QTooltip>
         </QBtn>
-        </div>
+    </Teleport>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"

src/pages/Travel/ExtraCommunity.vue

@@ -17,6 +17,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();
@@ -259,10 +260,8 @@ onMounted(async () => {
             />
         </Teleport>
     </template>
-    <QToolbar class="bg-vn-dark justify-end">
+    <VnSubToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
+        <template #st-actions>
-        <QSpace />
-        <div id="st-actions">
             <QBtn
                 color="primary"
                 icon-right="picture_as_pdf"
@@ -273,8 +272,8 @@ onMounted(async () => {
                     {{ t('Open as PDF') }}
                 </QTooltip>
             </QBtn>
-        </div>
+        </template>
-    </QToolbar>
+    </VnSubToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <ExtraCommunityFilter data-key="ExtraCommunity" />