#6480: POC Claims

src/components/common/VnCardContainer.vue

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,16 @@
+<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, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -10,14 +10,12 @@ 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 VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnRightMenu from 'src/components/common/VnRightMenu.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();
@@ -193,23 +191,7 @@ async function importToNewRefundTicket() {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <template v-if="stateStore.isHeaderMounted()">
+    <VnRightMenu />
-        <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"
@@ -267,7 +249,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,8 +4,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCardContainer from 'src/components/common/VnCardContainer.vue';
-import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,14 +25,7 @@ const { t } = useI18n();
             <LeftMenu source="card" />
         </QScrollArea>
     </QDrawer>
-    <QPageContainer>
+    <VnCardContainer />
-        <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,7 +17,6 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
-const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -157,7 +156,8 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+    <VnTeleport to="#st-data">
+        <template #body>
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}
@@ -173,8 +173,8 @@ function showImportDialog() {
                     </QChip>
                 </div>
             </div>
-    </Teleport>
+        </template>
-
+    </VnTeleport>
     <FetchData
         :url="`Claims/${route.params.id}`"
         :filter="claimFilter"

src/pages/Claim/ClaimMain.vue

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

src/stores/useStateStore.js

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