From f85665b271e1c01a665a1369052446a67f916ba0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 6 May 2024 08:37:41 +0200
Subject: [PATCH] fix: replace QToolbar by Teleport

---
 src/pages/Item/Card/ItemShelving.vue | 76 +++++++++++++++-------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/pages/Item/Card/ItemShelving.vue b/src/pages/Item/Card/ItemShelving.vue
index 573c4be0c..830628f3b 100644
--- a/src/pages/Item/Card/ItemShelving.vue
+++ b/src/pages/Item/Card/ItemShelving.vue
@@ -14,6 +14,9 @@ import { useArrayData } from 'src/composables/useArrayData';
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
 
 const route = useRoute();
 const { t } = useI18n();
@@ -197,43 +200,46 @@ onMounted(async () => {
         auto-load
         @on-fetch="(data) => (shelvingsOptions = data)"
     />
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data" class="q-py-sm flex items-center">
-            <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('shelvings.total') }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <div>
-                        <span class="details-label"
-                            >{{ t('shelvings.totalLabels') }}
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#st-data">
+            <div class="q-py-sm flex items-center">
+                <div class="q-pa-md q-mr-lg" style="border: 2px solid #222">
+                    <QCardSection horizontal>
+                        <span
+                            class="text-weight-bold text-subtitle1 text-center full-width"
+                        >
+                            {{ t('shelvings.total') }}
                         </span>
-                        <span>: {{ totalLabels }}</span>
-                    </div>
-                </QCardSection>
+                    </QCardSection>
+                    <QCardSection class="column items-center" horizontal>
+                        <div>
+                            <span class="details-label"
+                                >{{ t('shelvings.totalLabels') }}
+                            </span>
+                            <span>: {{ totalLabels }}</span>
+                        </div></QCardSection
+                    >
+                </div>
+                <QBtn
+                    color="primary"
+                    icon="delete"
+                    :disabled="!rowsSelected.length"
+                    @click="
+                        openConfirmationModal(
+                            t('shelvings.removeConfirmTitle'),
+                            t('shelvings.removeConfirmSubtitle'),
+                            removeLines
+                        )
+                    "
+                >
+                    <QTooltip>
+                        {{ t('shelvings.removeLines') }}
+                    </QTooltip>
+                </QBtn>
             </div>
-            <QBtn
-                color="primary"
-                icon="delete"
-                :disabled="!rowsSelected.length"
-                @click="
-                    openConfirmationModal(
-                        t('shelvings.removeConfirmTitle'),
-                        t('shelvings.removeConfirmSubtitle'),
-                        removeLines
-                    )
-                "
-            >
-                <QTooltip>
-                    {{ t('shelvings.removeLines') }}
-                </QTooltip>
-            </QBtn>
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+        </Teleport>
+    </template>
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"