Merge branch 'master' into hotfix-amountClaimLines

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;
 
@@ -43,8 +44,8 @@ async function onFetchClaim(data) {
     fetchMana();
 }
 
-const amount = ref(0);
-const amountClaimed = ref(0);
+const amount = ref();
+const amountClaimed = ref();
 async function onFetch(rows) {
     if (!rows || !rows.length) return;
     amount.value = rows.reduce(
@@ -152,8 +153,12 @@ function showImportDialog() {
         })
         .onOk(() => claimLinesForm.value.reload());
 }
+function isSubToolbarShown() {
+    return amount.value && amountClaimed;
+}
 </script>
 <template>
+    {{ subToolbarLoaded }}
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
         <QToolbar>
             <div class="row q-gutter-md">

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