diff --git a/src/components/common/RightMenu.vue b/src/components/common/RightMenu.vue index 32dc2874d..9512d32d4 100644 --- a/src/components/common/RightMenu.vue +++ b/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; }); diff --git a/src/components/common/VnSection.vue b/src/components/common/VnSection.vue index edd8d3dfa..11fd6013f 100644 --- a/src/components/common/VnSection.vue +++ b/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> diff --git a/src/composables/useHasContent.js b/src/composables/useHasContent.js new file mode 100644 index 000000000..8ab018376 --- /dev/null +++ b/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; +} diff --git a/src/pages/Order/Card/OrderCatalog.vue b/src/pages/Order/Card/OrderCatalog.vue index da2e88aa9..7c454ed0f 100644 --- a/src/pages/Order/Card/OrderCatalog.vue +++ b/src/pages/Order/Card/OrderCatalog.vue @@ -78,16 +78,18 @@ watch( </script> <template> - <VnSearchbar - :data-key="dataKey" - :user-params="catalogParams" - :static-params="['orderFk', 'orderBy']" - :redirect="false" - url="Orders/CatalogFilter" - :label="t('Search items')" - :info="t('You can search items by name or id')" - :search-remove-params="false" - /> + <Teleport to="#section-searchbar" v-if="stateStore.isHeaderMounted()"> + <VnSearchbar + :data-key="dataKey" + :user-params="catalogParams" + :static-params="['orderFk', 'orderBy']" + :redirect="false" + url="Orders/CatalogFilter" + :label="t('Search items')" + :info="t('You can search items by name or id')" + :search-remove-params="false" + /> + </Teleport> <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()"> <OrderCatalogFilter :data-key="dataKey"