refs #6618 component vnSubToolBar

src/components/ui/vnSubToolBar.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { defineStore } from 'pinia';
+
+const useStateStore = defineStore('stateStore', () => {
+    const subToolbar = ref(false);
+
+    function toggleSubToolbar() {
+        subToolbar.value = !subToolbar.value;
+    }
+
+    return {
+        toggleSubToolbar,
+    };
+});
+
+onMounted(() => {
+    useStateStore();
+});
+
+onUnmounted(() => {
+    useStateStore();
+});
+</script>
+
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+</template>

src/pages/Claim/Card/ClaimLines.vue

@@ -12,6 +12,7 @@ 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';
+import VnSubToolBar from 'src/components/ui/vnSubToolBar.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -159,7 +160,24 @@ function isSubToolbarShown() {
 </script>
 <template>
     {{ subToolbarLoaded }}
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+    <VnSubToolBar>
+        <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>
+    </VnSubToolBar>
+    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
         <QToolbar>
             <div class="row q-gutter-md">
                 <div>
@@ -177,7 +195,7 @@ function isSubToolbarShown() {
                 </div>
             </div>
         </QToolbar>
-    </Teleport>
+    </Teleport> -->
 
     <FetchData
         :url="`Claims/${route.params.id}`"