From 6b23c988b384bde3dba1f5090d541208270345fc Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 3 Jan 2024 11:06:03 +0100
Subject: [PATCH] refs #6618 component vnSubToolBar

---
 src/components/ui/vnSubToolBar.vue  | 32 +++++++++++++++++++++++++++++
 src/pages/Claim/Card/ClaimLines.vue | 22 ++++++++++++++++++--
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/vnSubToolBar.vue

diff --git a/src/components/ui/vnSubToolBar.vue b/src/components/ui/vnSubToolBar.vue
new file mode 100644
index 000000000..31c67cf63
--- /dev/null
+++ b/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>
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index d1022b731..a47e18fdf 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/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}`"