Merge pull request '8197-fix_searchbar_teleport' (!1204) from 8197-fix_searchbar_teleport into test

Reviewed-on: #1204
Reviewed-by: Jorge Penadés <jorgep@verdnatura.es>

src/components/common/RightMenu.vue

@@ -1,29 +1,17 @@
 <script setup>
-import { ref, onMounted, useSlots } from 'vue';
+import { onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useQuasar } from 'quasar';
+import { useHasContent } from 'src/composables/useHasContent';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const stateStore = useStateStore();
 const slots = useSlots();
-const hasContent = ref(false);
-const rightPanel = ref(null);
+const hasContent = useHasContent('#right-panel');
 
 onMounted(() => {
-    rightPanel.value = document.querySelector('#right-panel');
-    if (!rightPanel.value) return;
-
-    const observer = new MutationObserver(() => {
-        hasContent.value = rightPanel.value.childNodes.length;
-    });
-
-    observer.observe(rightPanel.value, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-    });
     if ((!slots['right-panel'] && !hasContent.value) || quasar.platform.is.mobile)
         stateStore.rightDrawer = false;
 });

src/components/common/VnSection.vue

@@ -2,9 +2,10 @@
 import RightMenu from './RightMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, ref } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
+import { useHasContent } from 'src/composables/useHasContent';
 
 const $props = defineProps({
     section: {
@@ -55,6 +56,8 @@ const isMainSection = computed(() => {
     }
     return isSame;
 });
+const searchbarId = 'section-searchbar';
+const hasContent = useHasContent(`#${searchbarId}`);
 
 onBeforeMount(() => {
     if ($props.dataKey)
@@ -69,12 +72,13 @@ onBeforeMount(() => {
 <template>
     <slot name="searchbar">
         <VnSearchbar
-            v-if="searchBar"
+            v-if="searchBar && !hasContent"
             v-bind="arrayDataProps"
             :data-key="dataKey"
             :label="$t(`${prefix}.search`)"
             :info="$t(`${prefix}.searchInfo`)"
         />
+        <div :id="searchbarId"></div>
     </slot>
 
     <RightMenu>

src/composables/useHasContent.js

@@ -0,0 +1,24 @@
+import { onMounted, ref } from 'vue';
+
+export function useHasContent(selector) {
+    const container = ref({});
+    const hasContent = ref();
+
+    onMounted(() => {
+        container.value = document.querySelector(selector);
+        if (!container.value) return;
+
+        const observer = new MutationObserver(() => {
+            if (document.querySelector(selector))
+                hasContent.value = !!container.value.childNodes.length;
+        });
+
+        observer.observe(container.value, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+        });
+    });
+
+    return hasContent;
+}