feat: refs #6654 sticky class

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">
+    <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 scoped>
+.sticky {
+    position: sticky;
+    top: 60px;
+    z-index: 1;
+}
+</style>

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

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

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

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