src/components/common/VnSection.vue

@@ -2,7 +2,7 @@
 import RightAdvancedMenu from './RightAdvancedMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
-import { onBeforeMount, onMounted, onUnmounted, computed, ref, inject, watch } from 'vue';
+import { onBeforeMount, onMounted, onUnmounted, computed, ref } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute, useRouter } from 'vue-router';
 import { useHasContent } from 'src/composables/useHasContent';
@@ -36,10 +36,6 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    filterPanelRef: {
-        type: Object,
-        default: null,
-    },
     redirect: {
         type: Boolean,
         default: true,
@@ -60,9 +56,6 @@ const isMainSection = ref(false);
 const searchbarId = 'section-searchbar';
 const advancedMenuSlot = 'advanced-menu';
 const hasContent = useHasContent(`#${searchbarId}`);
-// const filterPanel = ref(inject('filterPanel', null));
-
-// filterPanel.value = inject('filterPanel', null);
 
 onBeforeMount(() => {
     if ($props.dataKey)
@@ -74,26 +67,14 @@ onBeforeMount(() => {
         });
     checkIsMain();
 });
-// const filterPanel = ref(inject('filterPanel', null));
 
 onMounted(() => {
     const unsubscribe = router.afterEach(() => {
         checkIsMain();
     });
-    // filterPanel.value = inject('filterPanel', null);
     onUnmounted(unsubscribe);
 });
 
-watch(
-    () => inject('filterPanel'),
-    (newValue) => {
-        if (newValue) {
-            debugger;
-            // hacer algo cuando el valor esté disponible
-        }
-    },
-    { immediate: true },
-);
 onUnmounted(() => {
     if (arrayData) arrayData.destroy();
 });
@@ -107,10 +88,8 @@ function checkIsMain() {
 }
 </script>
 <template>
-    <pre>{{ filterPanelRef }}</pre>
     <slot name="searchbar">
         <VnSearchbar
-            :filterPanel="filterPanelRef"
             v-if="searchBar && !hasContent"
             v-bind="arrayDataProps"
             :data-key="dataKey"

src/components/ui/VnFilterPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject, onMounted, provide } from 'vue';
+import { ref, computed, provide } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import toDate from 'filters/toDate';
@@ -92,25 +92,16 @@ const arrayData =
 const store = arrayData.store;
 const userParams = ref(useFilterParams($props.dataKey).params);
 const userOrders = ref(useFilterParams($props.dataKey).orders);
-const searchbar = ref(null);
 const isLoading = ref(false);
 const excludeParams = ref($props.excludeParams);
-onMounted(() => {
-    searchbar.value = inject('searchbar');
-});
 
 defineExpose({ search, params: userParams, remove });
 
 async function search(evt) {
     try {
-        // if ($props.searchbarOptions.use) {
-        //     // if (!searchbar.value) {
-        //     //     return;
-        //     // }
         const validations = $props.validations.every((validation) => {
             return validation(userParams.value);
         });
-        // $props.searchbarOptions.validateFn(userParams.value);
 
         if (!validations) {
             return;
@@ -120,7 +111,6 @@ async function search(evt) {
             excludeParams.value = null;
         }
 
-        // }
         if (evt && $props.disableSubmitEvent) return;
 
         store.filter.where = {};
@@ -143,7 +133,6 @@ async function search(evt) {
         isLoading.value = false;
     }
 }
-provide('filterPanel', search);
 
 async function clearFilters() {
     try {

src/components/ui/VnSearchbar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, watch, inject, onUpdated } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -69,10 +69,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    filterPanelOptions: {
-        type: Boolean,
-        default: true,
-    },
     filterPanel: {
         type: Object,
         default: true,
@@ -93,6 +89,7 @@ if (props.redirect)
     };
 let arrayData = useArrayData(props.dataKey, arrayDataProps);
 let store = arrayData.store;
+const filterPanel = ref(props.filterPanel);
 const to = computed(() => {
     const url = { path: route.path, query: { ...(route.query ?? {}) } };
     const searchUrl = arrayData.store.searchUrl;
@@ -104,30 +101,6 @@ const to = computed(() => {
     if (searchUrl) url.query[searchUrl] = JSON.stringify(currentFilter);
     return url;
 });
-
-// watch(
-//     () => filterPanel.value,
-//     (newValue) => {
-//         if (newValue) {
-//             // hacer algo cuando el valor esté disponible
-//             filterPanel.value = newValue;
-//         }
-//     },
-//     { immediate: true },
-// );
-
-const filterPanelRef = ref(null);
-const filterPanel = ref(null);
-watch(
-    () => filterPanelRef.value,
-    (newValue) => {
-        if (newValue) {
-            // hacer algo cuando el valor esté disponible
-            filterPanelRef.value = newValue;
-        }
-    },
-    { immediate: true },
-);
 watch(
     () => props.dataKey,
     (val) => {
@@ -153,7 +126,7 @@ async function search() {
     arrayData.resetPagination();
 
     let filter = { params: { search: searchText.value } };
-    if (props.filterPanelOptions && filterPanel.value) {
+    if (filterPanel.value) {
         filterPanel.value.filterPanelRef.search(filter);
         return;
     }