From a87ac6bbe69589d7bc00ed0acde42d6b14457c89 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 19 Feb 2024 14:12:54 +0100
Subject: [PATCH] refs #6416 feat: VnTeleport

---
 src/components/CrudModel.vue                  | 79 ++++++++++---------
 src/components/ui/VnTeleport.vue              | 14 ++++
 src/pages/Claim/Card/ClaimAction.vue          |  4 +-
 src/pages/Claim/Card/ClaimLines.vue           | 39 ++++-----
 src/pages/Entry/Card/EntryBuys.vue            | 34 ++++----
 src/pages/Entry/Card/EntryBuysImport.vue      | 49 ++++++------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 14 +++-
 .../Supplier/Card/SupplierConsumption.vue     | 57 ++++++-------
 .../Travel/Card/TravelThermographsForm.vue    | 48 +++++------
 9 files changed, 189 insertions(+), 149 deletions(-)
 create mode 100644 src/components/ui/VnTeleport.vue

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 9bb05d439..5b6f43912 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -4,14 +4,15 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 const quasar = useQuasar();
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
 
@@ -275,42 +276,44 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="tMobile('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="remove(selected)"
-                :disable="!selected?.length"
-                :title="t('globals.remove')"
-                v-if="$props.defaultRemove"
-            />
-            <QBtn
-                :label="tMobile('globals.reset')"
-                color="primary"
-                icon="restart_alt"
-                flat
-                @click="reset"
-                :disable="!hasChanges"
-                :title="t('globals.reset')"
-                v-if="$props.defaultReset"
-            />
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                @click="onSubmit"
-                :disable="!hasChanges"
-                :title="t('globals.save')"
-                v-if="$props.defaultSave"
-            />
-            <slot name="moreAfterActions" />
-        </QBtnGroup>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="tMobile('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="remove(selected)"
+                    :disable="!selected?.length"
+                    :title="t('globals.remove')"
+                    v-if="$props.defaultRemove"
+                />
+                <QBtn
+                    :label="tMobile('globals.reset')"
+                    color="primary"
+                    icon="restart_alt"
+                    flat
+                    @click="reset"
+                    :disable="!hasChanges"
+                    :title="t('globals.reset')"
+                    v-if="$props.defaultReset"
+                />
+                <QBtn
+                    :label="tMobile('globals.save')"
+                    ref="saveButtonRef"
+                    color="primary"
+                    icon="save"
+                    @click="onSubmit"
+                    :disable="!hasChanges"
+                    :title="t('globals.save')"
+                    v-if="$props.defaultSave"
+                />
+                <slot name="moreAfterActions" />
+            </QBtnGroup>
+        </template>
+    </VnTeleport>
     <QInnerLoading
         :showing="isLoading"
         :label="t && t('globals.pleaseWait')"
diff --git a/src/components/ui/VnTeleport.vue b/src/components/ui/VnTeleport.vue
new file mode 100644
index 000000000..5db020632
--- /dev/null
+++ b/src/components/ui/VnTeleport.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <slot name="st-data"></slot>
+    </Teleport>
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <slot name="st-actions"></slot>
+    </Teleport>
+</template>
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index ef45bf3dc..18a620419 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -13,6 +13,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -267,7 +268,8 @@ async function importToNewRefundTicket() {
             />
         </QCard>
     </QDrawer>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+    <VnTeleport></VnTeleport>
+    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 90dd31199..ac62dc8f8 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -4,11 +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 { 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 VnTeleport from 'components/ui/VnTeleport.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -17,7 +18,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -157,23 +158,25 @@ function showImportDialog() {
 }
 </script>
 <template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <div class="row q-gutter-md">
-            <div>
-                {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amount) }}
-                </QChip>
+    <VnTeleport>
+        <template #st-data>
+            <div class="row q-gutter-md">
+                <div>
+                    {{ t('Amount') }}
+                    <QChip :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amount) }}
+                    </QChip>
+                </div>
+                <QSeparator dark vertical />
+                <div>
+                    {{ t('Amount Claimed') }}
+                    <QChip color="positive" :dense="$q.screen.lt.sm">
+                        {{ toCurrency(amountClaimed) }}
+                    </QChip>
+                </div>
             </div>
-            <QSeparator dark vertical />
-            <div>
-                {{ t('Amount Claimed') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountClaimed) }}
-                </QChip>
-            </div>
-        </div>
-    </Teleport>
+        </template>
+    </VnTeleport>
 
     <FetchData
         :url="`Claims/${route.params.id}`"
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 679afff1b..ac7cd48e9 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -11,9 +11,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -22,7 +23,7 @@ const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { notify } = useNotify();
 
 const rowsSelected = ref([]);
@@ -293,20 +294,21 @@ const showLockIcon = (groupingMode, mode) => {
         auto-load
         @on-fetch="(data) => (packagingsOptions = data)"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="t('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="openRemoveDialog()"
-                :disable="!rowsSelected?.length"
-                :title="t('globals.remove')"
-            />
-        </QBtnGroup>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="t('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="openRemoveDialog()"
+                    :disable="!rowsSelected?.length"
+                    :title="t('globals.remove')"
+                /> </QBtnGroup
+        ></template>
+    </VnTeleport>
     <VnPaginate
         ref="entryBuysPaginateRef"
         data-key="EntryBuys"
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index 21f0beada..3c9d109af 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -9,13 +9,14 @@ import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterItemForm from 'src/components/FilterItemForm.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { toCurrency } from 'filters/index';
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
@@ -175,27 +176,29 @@ const redirectToBuysView = () => {
         auto-load
     />
     <QForm>
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-            <div>
-                <QBtnGroup push class="q-gutter-x-sm">
-                    <QBtn
-                        :label="t('globals.cancel')"
-                        color="primary"
-                        icon="restart_alt"
-                        flat
-                        @click="redirectToBuysView()"
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        icon="save"
-                        type="submit"
-                        :disable="!importData.file"
-                        @click="onSubmit()"
-                    />
-                </QBtnGroup>
-            </div>
-        </Teleport>
+        <VnTeleport>
+            <template #st-actions>
+                <div>
+                    <QBtnGroup push class="q-gutter-x-sm">
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            color="primary"
+                            icon="restart_alt"
+                            flat
+                            @click="redirectToBuysView()"
+                        />
+                        <QBtn
+                            :label="t('globals.save')"
+                            color="primary"
+                            icon="save"
+                            type="submit"
+                            :disable="!importData.file"
+                            @click="onSubmit()"
+                        />
+                    </QBtnGroup>
+                </div>
+            </template>
+        </VnTeleport>
         <QCard class="q-pa-lg">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index aaae15111..7bf5eb795 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -6,6 +6,7 @@ import { QCheckbox, QBtn } from 'quasar';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
@@ -217,9 +218,16 @@ const selectWorkerId = (id) => {
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-            <QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" />
-        </Teleport>
+        <VnTeleport>
+            <template #st-actions>
+                <QBtn
+                    color="primary"
+                    icon-right="archive"
+                    no-caps
+                    @click="downloadCSV()"
+                />
+            </template>
+        </VnTeleport>
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 59dd2281c..2b1eaf7dd 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -8,16 +8,17 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTeleport from 'components/ui/VnTeleport.vue';
 
 import { toDate } from 'src/filters';
 import { dashIfEmpty } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const { openReport, sendEmail } = usePrintService();
@@ -115,31 +116,33 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
-        <QBtn
-            :disabled="!dateRanges.from && !dateRanges.to"
-            color="primary"
-            icon-right="picture_as_pdf"
-            no-caps
-            class="q-mr-md"
-            @click="openReportPdf()"
-        >
-            <QTooltip>
-                {{ t('Open as PDF') }}
-            </QTooltip>
-        </QBtn>
-        <QBtn
-            :disabled="!dateRanges.from && !dateRanges.to"
-            color="primary"
-            icon-right="email"
-            no-caps
-            @click="openSendEmailDialog()"
-        >
-            <QTooltip>
-                {{ t('Send to email') }}
-            </QTooltip>
-        </QBtn>
-    </Teleport>
+    <VnTeleport>
+        <template #st-actions>
+            <QBtn
+                :disabled="!dateRanges.from && !dateRanges.to"
+                color="primary"
+                icon-right="picture_as_pdf"
+                no-caps
+                class="q-mr-md"
+                @click="openReportPdf()"
+            >
+                <QTooltip>
+                    {{ t('Open as PDF') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                :disabled="!dateRanges.from && !dateRanges.to"
+                color="primary"
+                icon-right="email"
+                no-caps
+                @click="openSendEmailDialog()"
+            >
+                <QTooltip>
+                    {{ t('Send to email') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+    </VnTeleport>
 
     <QPage class="column items-center q-pa-md">
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index 6758cb6ff..82a0d14da 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-
+import VnTeleport from 'components/ui/VnTeleport.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
@@ -11,7 +11,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
+// import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -22,7 +22,7 @@ const props = defineProps({
     },
 });
 
-const stateStore = useStateStore();
+// const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
@@ -214,26 +214,28 @@ const onThermographCreated = async (data) => {
             class="full-width"
             style="max-width: 800px"
         >
-            <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-                <div>
-                    <QBtnGroup push class="q-gutter-x-sm">
-                        <slot name="moreActions" />
-                        <QBtn
-                            color="primary"
-                            icon="restart_alt"
-                            flat
-                            @click="reset()"
-                            :label="t('globals.reset')"
-                        />
-                        <QBtn
-                            color="primary"
-                            icon="save"
-                            @click="onSubmit()"
-                            :label="t('globals.save')"
-                        />
-                    </QBtnGroup>
-                </div>
-            </Teleport>
+            <VnTeleport>
+                <template #st-actions>
+                    <div>
+                        <QBtnGroup push class="q-gutter-x-sm">
+                            <slot name="moreActions" />
+                            <QBtn
+                                color="primary"
+                                icon="restart_alt"
+                                flat
+                                @click="reset()"
+                                :label="t('globals.reset')"
+                            />
+                            <QBtn
+                                color="primary"
+                                icon="save"
+                                @click="onSubmit()"
+                                :label="t('globals.save')"
+                            />
+                        </QBtnGroup>
+                    </div>
+                </template>
+            </VnTeleport>
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">