From 4dff5a2eec020ca99ca3d37aef2dc38cccd542a0 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 17 Dec 2024 09:03:09 +0100
Subject: [PATCH] refactor: use teleport to avoid qdrawer overlapping

---
 src/pages/Order/Card/OrderCatalog.vue         | 20 +++++++++----------
 src/pages/Order/Card/OrderLines.vue           |  4 ++--
 .../Supplier/Card/SupplierConsumption.vue     |  8 +++-----
 src/pages/Ticket/Card/TicketBoxing.vue        |  7 ++++---
 src/pages/Ticket/Card/TicketComponents.vue    |  4 ++--
 src/pages/Ticket/Card/TicketSale.vue          |  6 +++---
 src/pages/Ticket/Card/TicketVolume.vue        | 11 ++++------
 src/pages/Zone/Card/ZoneEvents.vue            | 18 ++++++++---------
 8 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/src/pages/Order/Card/OrderCatalog.vue b/src/pages/Order/Card/OrderCatalog.vue
index b7af615bb..4ad009133 100644
--- a/src/pages/Order/Card/OrderCatalog.vue
+++ b/src/pages/Order/Card/OrderCatalog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, ref, computed, watch, provide } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -87,16 +87,14 @@ watch(
         :label="t('Search items')"
         :info="t('You can search items by name or id')"
     />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <OrderCatalogFilter
-                :data-key="dataKey"
-                :tag-value="tagValue"
-                :tags="tags"
-                :initial-catalog-params="catalogParams"
-            />
-        </QScrollArea>
-    </QDrawer>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+        <OrderCatalogFilter
+            :data-key="dataKey"
+            :tag-value="tagValue"
+            :tags="tags"
+            :initial-catalog-params="catalogParams"
+        />
+    </Teleport>
     <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
         <div class="full-width">
             <VnPaginate
diff --git a/src/pages/Order/Card/OrderLines.vue b/src/pages/Order/Card/OrderLines.vue
index cb6649155..e5b683534 100644
--- a/src/pages/Order/Card/OrderLines.vue
+++ b/src/pages/Order/Card/OrderLines.vue
@@ -251,7 +251,7 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QCard
             class="order-lines-summary q-pa-lg"
             v-if="orderSummary.vat && orderSummary.total"
@@ -266,7 +266,7 @@ watch(
             <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
             <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
         </QCard>
-    </QDrawer>
+    </Teleport>
 
     <VnTable
         ref="tableLinesRef"
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index fe1cec260..e89507290 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -171,11 +171,9 @@ onMounted(async () => {
         </div>
     </Teleport>
     <QPage class="column items-center q-pa-md">
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-            <QScrollArea class="fit text-grey-8">
-                <SupplierConsumptionFilter data-key="SupplierConsumption" />
-            </QScrollArea>
-        </QDrawer>
+        <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+            <SupplierConsumptionFilter data-key="SupplierConsumption" />
+        </Teleport>
         <QTable
             :rows="rows"
             row-key="id"
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 1a7287396..7c127efda 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
+import { useStateStore } from 'src/stores/useStateStore';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -8,7 +9,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
-
+const stateStore = useStateStore();
 onMounted(async () => {
     await fetch();
 });
@@ -84,7 +85,7 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <QDrawer show-if-above side="right">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QScrollArea class="fit">
             <QList bordered separator style="max-width: 318px">
                 <QItem v-if="lastExpedition && videoList.length">
@@ -150,7 +151,7 @@ async function getVideoList(expeditionId, timed) {
                 </QItem>
             </QList>
         </QScrollArea>
-    </QDrawer>
+    </Teleport>
 
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">
diff --git a/src/pages/Ticket/Card/TicketComponents.vue b/src/pages/Ticket/Card/TicketComponents.vue
index 8fab1968b..64815752a 100644
--- a/src/pages/Ticket/Card/TicketComponents.vue
+++ b/src/pages/Ticket/Card/TicketComponents.vue
@@ -178,7 +178,7 @@ onMounted(() => {
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
             <QCardSection horizontal>
                 <span class="text-weight-bold text-subtitle1 text-center full-width">
@@ -264,7 +264,7 @@ onMounted(() => {
                 <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
             </QCardSection>
         </QCard>
-    </QDrawer>
+    </Teleport>
     <VnTable
         ref="tableRef"
         data-key="TicketComponents"
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index a7e0f6171..703a00a0e 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -617,7 +617,7 @@ watch(
             </QBtnGroup>
         </template>
     </VnSubToolbar>
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <div
             class="q-pa-md q-mb-md q-ma-md color-vn-text"
             style="border: 2px solid black"
@@ -638,8 +638,8 @@ watch(
                 <span class="q-mr-xs color-vn-label"> {{ t('basicData.total') }}: </span>
                 <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
             </QCardSection>
-        </div></QDrawer
-    >
+        </div>
+    </Teleport>
     <VnTable
         ref="tableRef"
         data-key="TicketSales"
diff --git a/src/pages/Ticket/Card/TicketVolume.vue b/src/pages/Ticket/Card/TicketVolume.vue
index 20eced98e..3c9f579d4 100644
--- a/src/pages/Ticket/Card/TicketVolume.vue
+++ b/src/pages/Ticket/Card/TicketVolume.vue
@@ -100,11 +100,9 @@ onMounted(() => (stateStore.rightDrawer = true));
         @on-fetch="(data) => applyVolumes(data)"
         auto-load
     />
-    <QDrawer
-        v-if="packingTypeVolume.length"
-        side="right"
-        :width="265"
-        v-model="stateStore.rightDrawer"
+    <Teleport
+        to="#right-panel"
+        v-if="stateStore.isHeaderMounted() && packingTypeVolume.length"
     >
         <QCard
             v-for="(packingType, index) in packingTypeVolume"
@@ -124,8 +122,7 @@ onMounted(() => (stateStore.rightDrawer = true));
                 <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
             </QCardSection>
         </QCard>
-    </QDrawer>
-
+    </Teleport>
     <VnTable
         ref="tableRef"
         data-key="TicketVolume"
diff --git a/src/pages/Zone/Card/ZoneEvents.vue b/src/pages/Zone/Card/ZoneEvents.vue
index 0685c264f..a5806bab9 100644
--- a/src/pages/Zone/Card/ZoneEvents.vue
+++ b/src/pages/Zone/Card/ZoneEvents.vue
@@ -43,16 +43,14 @@ const onZoneEventFormClose = () => {
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <ZoneEventsPanel
-                :first-day="firstDay"
-                :last-day="lastDay"
-                :events="events"
-                v-model:formModeName="formModeName"
-            />
-        </QScrollArea>
-    </QDrawer>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+        <ZoneEventsPanel
+            :first-day="firstDay"
+            :last-day="lastDay"
+            :events="events"
+            v-model:formModeName="formModeName"
+        />
+    </Teleport>
     <QPage class="q-pa-md flex justify-center">
         <ZoneCalendarGrid
             v-model:events="events"