src/components/common/VnCardContainer.vue

@@ -1,14 +0,0 @@
-<script setup>
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-</script>
-<template>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
-</template>

src/components/common/VnRightMenu.vue

@@ -1,26 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-
-const stateStore = useStateStore();
-</script>
-<template>
-    <template v-if="stateStore.$state.isMounted">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-</template>

src/components/common/VnTeleport.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-defineProps({
-    to: {
-        type: String,
-        required: true,
-    },
-});
-const stateStore = useStateStore();
-</script>
-<template>
-    <template v-if="stateStore.$state.isMounted">
-        <Teleport :to="to">
-            <slot name="body"></slot>
-        </Teleport>
-    </template>
-</template>

src/layouts/ViewLayout.vue

@@ -1,16 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>

src/pages/Claim/Card/ClaimAction.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -10,12 +10,14 @@ import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnRightMenu from 'src/components/common/VnRightMenu.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -191,7 +193,23 @@ async function importToNewRefundTicket() {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <VnRightMenu />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
     <QDrawer
         v-model="stateStore.rightDrawer"
         side="right"
@@ -249,7 +267,7 @@ async function importToNewRefundTicket() {
             />
         </QCard>
     </QDrawer>
-    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"

src/pages/Claim/Card/ClaimCard.vue

@@ -4,7 +4,8 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnCardContainer from 'src/components/common/VnCardContainer.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -25,7 +26,14 @@ const { t } = useI18n();
             <LeftMenu source="card" />
         </QScrollArea>
     </QDrawer>
-    <VnCardContainer />
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
 </template>
 
 <i18n>

src/pages/Claim/Card/ClaimLines.vue

@@ -4,12 +4,12 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
-import VnTeleport from 'components/common/VnTeleport.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
@@ -17,6 +17,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
+const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -156,8 +157,7 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <VnTeleport to="#st-data">
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <template #body>
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
@@ -173,8 +173,8 @@ function showImportDialog() {
                 </QChip>
             </div>
         </div>
-        </template>
+    </Teleport>
-    </VnTeleport>
+
     <FetchData
         :url="`Claims/${route.params.id}`"
         :filter="claimFilter"

src/pages/Claim/ClaimMain.vue

@@ -1,7 +1,17 @@
 <script setup>
-import ViewLayout from 'src/layouts/ViewLayout.vue';
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <ViewLayout></ViewLayout>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>

src/stores/useStateStore.js

@@ -40,7 +40,6 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     return {
-        isMounted,
         leftDrawer,
         rightDrawer,
         setMounted,