From 36ff4e93128baef8cb1157b632048b0c9fadaf87 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 3 Jun 2024 12:58:26 +0200
Subject: [PATCH] refactor: refs #6891 searchbar teleport

---
 src/components/common/VnCard.vue  | 45 ++++++++++++-----------
 src/components/ui/VnSearchbar.vue | 61 ++++++++++++++++---------------
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 9c48d60e4..ec00b95a3 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -56,28 +56,29 @@ watchEffect(() => {
 });
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar" v-if="props.searchDataKey">
-            <slot name="searchbar">
-                <VnSearchbar
-                    :data-key="props.searchDataKey"
-                    :url="props.searchUrl"
-                    :label="props.searchbarLabel"
-                    :info="props.searchbarInfo"
-                    :custom-route-redirect-name="searchCustomRouteRedirect"
-                    :redirect="searchRedirect"
-                />
-            </slot>
-        </Teleport>
-        <slot v-else name="searchbar" />
-        <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-            <QScrollArea class="fit">
-                <component :is="descriptor" />
-                <QSeparator />
-                <LeftMenu source="card" />
-            </QScrollArea>
-        </QDrawer>
-    </template>
+    <QDrawer
+        v-model="stateStore.leftDrawer"
+        show-if-above
+        :width="256"
+        v-if="stateStore.isHeaderMounted()"
+    >
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <slot name="searchbar" v-if="props.searchDataKey">
+        <VnSearchbar
+            :data-key="props.searchDataKey"
+            :url="props.searchUrl"
+            :label="props.searchbarLabel"
+            :info="props.searchbarInfo"
+            :custom-route-redirect-name="searchCustomRouteRedirect"
+            :redirect="searchRedirect"
+        />
+    </slot>
+    <slot v-else name="searchbar" />
     <RightMenu>
         <template #right-panel v-if="props.filterPanel">
             <component :is="props.filterPanel" :data-key="props.searchDataKey" />
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index e5b2f02d2..923ab52f6 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -5,9 +5,11 @@ import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import useRedirect from 'src/composables/useRedirect';
 import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const quasar = useQuasar();
 const { t } = useI18n();
+const state = useStateStore();
 
 const props = defineProps({
     dataKey: {
@@ -107,36 +109,37 @@ async function search() {
     });
 }
 </script>
-
 <template>
-    <QForm @submit="search" id="searchbarForm">
-        <VnInput
-            id="searchbar"
-            v-model="searchText"
-            :placeholder="t(props.label)"
-            dense
-            standout
-            autofocus
-        >
-            <template #prepend>
-                <QIcon
-                    v-if="!quasar.platform.is.mobile"
-                    class="cursor-pointer"
-                    name="search"
-                    @click="search"
-                />
-            </template>
-            <template #append>
-                <QIcon
-                    v-if="props.info && $q.screen.gt.xs"
-                    name="info"
-                    class="cursor-info"
-                >
-                    <QTooltip>{{ t(props.info) }}</QTooltip>
-                </QIcon>
-            </template>
-        </VnInput>
-    </QForm>
+    <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
+        <QForm @submit="search" id="searchbarForm">
+            <VnInput
+                id="searchbar"
+                v-model="searchText"
+                :placeholder="t(props.label)"
+                dense
+                standout
+                autofocus
+            >
+                <template #prepend>
+                    <QIcon
+                        v-if="!quasar.platform.is.mobile"
+                        class="cursor-pointer"
+                        name="search"
+                        @click="search"
+                    />
+                </template>
+                <template #append>
+                    <QIcon
+                        v-if="props.info && $q.screen.gt.xs"
+                        name="info"
+                        class="cursor-info"
+                    >
+                        <QTooltip>{{ t(props.info) }}</QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+        </QForm>
+    </Teleport>
 </template>
 
 <style lang="scss" scoped>