From 3acc4b0d58d73c1e421a4f648d1b3d946d3f504e Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 3 Jan 2024 09:59:27 +0100
Subject: [PATCH] vn qtoolbar

---
 src/pages/Claim/Card/ClaimCard.vue       | 14 +++++++++++++-
 src/pages/Claim/Card/ClaimLines.vue      |  4 +++-
 src/pages/Customer/Card/CustomerCard.vue |  7 +++++++
 src/stores/useStateStore.js              | 11 +++++++----
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index a8c832967..41e4a46cb 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -8,7 +8,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -22,6 +22,18 @@ const $props = defineProps({
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+
+onMounted(() => {
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+    stateStore.toggleSubToolbar();
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+});
+
+onUnmounted(() => {
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+    stateStore.toggleSubToolbar();
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+});
 </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 4eaef2958..d1022b731 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -18,6 +18,7 @@ const route = useRoute();
 const { t } = useI18n();
 
 const stateStore = useStateStore();
+const subToolbarLoaded = computed(() => stateStore.isSubToolbarShown());
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -157,7 +158,8 @@ function isSubToolbarShown() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="isSubToolbarShown()">
+    {{ subToolbarLoaded }}
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
         <QToolbar>
             <div class="row q-gutter-md">
                 <div>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index c833d0cf9..26b8202a2 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,10 +5,17 @@ import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { onMounted } from 'vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
+
+onMounted(() => {
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+    stateStore.toggleSubToolbar();
+    console.log('MOUNTED', stateStore.isSubToolbarShown());
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 74b65e71f..328df9978 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -5,6 +5,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const isMounted = ref(false);
     const leftDrawer = ref(false);
     const rightDrawer = ref(false);
+    const subToolbar = ref(false);
 
     function toggleLeftDrawer() {
         leftDrawer.value = !leftDrawer.value;
@@ -14,6 +15,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function toggleSubToolbar() {
+        subToolbar.value = !subToolbar.value;
+    }
+
     function setMounted() {
         isMounted.value = true;
     }
@@ -31,10 +36,7 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     function isSubToolbarShown() {
-        return (
-            !!document.querySelector('#st-data') &&
-            !!document.querySelector('#st-actions')
-        );
+        return subToolbar.value;
     }
 
     return {
@@ -47,5 +49,6 @@ export const useStateStore = defineStore('stateStore', () => {
         isLeftDrawerShown,
         isRightDrawerShown,
         isSubToolbarShown,
+        toggleSubToolbar,
     };
 });