vn qtoolbar

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

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>

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

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