src/components/ui/VnFilterPanel.vue

@@ -61,14 +61,6 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    validations: {
-        type: Array,
-        default: () => [],
-    },
-    excludeParams: {
-        type: Object,
-        default: null,
-    },
 });
 
 const emit = defineEmits([
@@ -92,37 +84,18 @@ const arrayData =
 const store = arrayData.store;
 const userParams = ref(useFilterParams($props.dataKey).params);
 const userOrders = ref(useFilterParams($props.dataKey).orders);
-const isLoading = ref(false);
-const excludeParams = ref($props.excludeParams);
 
 defineExpose({ search, params: userParams, remove });
 
+const isLoading = ref(false);
 async function search(evt) {
     try {
-        const validations = $props.validations.every((validation) => {
-            return validation(userParams.value);
-        });
-
-        if (!validations) {
-            return;
-        }
-
-        if (Object.keys(userParams.value).length) {
-            excludeParams.value = null;
-        }
-
         if (evt && $props.disableSubmitEvent) return;
 
         store.filter.where = {};
         isLoading.value = true;
-        const filter = { ...userParams.value, ...$props.modelValue, ...evt };
+        const filter = { ...userParams.value, ...$props.modelValue };
         store.userParamsChanged = true;
-        if (excludeParams.value) {
-            filter.params = {
-                ...filter.params,
-                exclude: excludeParams.value,
-            };
-        }
         await arrayData.addFilter({
             params: filter,
         });

src/components/ui/VnSearchbar.vue

@@ -69,10 +69,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    filterPanel: {
-        type: Object,
-        default: true,
-    },
 });
 
 const searchText = ref();
@@ -89,7 +85,6 @@ 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;
@@ -101,6 +96,7 @@ const to = computed(() => {
     if (searchUrl) url.query[searchUrl] = JSON.stringify(currentFilter);
     return url;
 });
+
 watch(
     () => props.dataKey,
     (val) => {
@@ -108,12 +104,6 @@ watch(
         store = arrayData.store;
     },
 );
-watch(
-    () => props.filterPanel,
-    (val) => {
-        filterPanel.value = val;
-    },
-);
 
 onMounted(() => {
     const params = store.userParams;
@@ -126,10 +116,7 @@ async function search() {
     arrayData.resetPagination();
 
     let filter = { params: { search: searchText.value } };
-    if (filterPanel?.value?.filterPanelRef) {
+
-        filterPanel.value.filterPanelRef.search(filter);
-        return;
-    }
     if (!props.searchRemoveParams || !searchText.value) {
         filter = {
             params: {
@@ -217,8 +204,9 @@ async function search() {
 }
 
 :deep(.q-field--focused) {
-    .q-icon {
+    .q-icon,
-        color: black;
+    .q-placeholder {
+        color: var(--vn-black-text-color);
     }
 }
 

src/composables/useArrayData.js

@@ -75,13 +75,12 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    async function fetch(fetchOptions) {
+    async function fetch({ append = false, updateRouter = true }) {
-        let { append = false, updateRouter = true } = fetchOptions ?? {};
         if (!store.url) return;
 
         cancelRequest();
         canceller = new AbortController();
-        let { params, limit } = setCurrentFilter();
+        const { params, limit } = setCurrentFilter();
 
         let exprFilter;
         if (store?.exprBuilder) {
@@ -99,10 +98,7 @@ export function useArrayData(key, userOptions) {
         if (!params?.filter?.order?.length) delete params?.filter?.order;
 
         params.filter = JSON.stringify(params.filter);
-        if (fetchOptions?.exclude) {
+
-            delete params.exclude;
-            params = { ...params.params, ...fetchOptions.exclude };
-        }
         store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
@@ -154,30 +150,22 @@ export function useArrayData(key, userOptions) {
     async function applyFilter({ filter, params }, fetchOptions = {}) {
         if (filter) store.userFilter = filter;
         store.filter = {};
-        if (params?.exclude) {
-            fetchOptions = { ...fetchOptions, exclude: params.exclude };
-            delete params.exclude;
-        }
         if (params) store.userParams = { ...params };
+
         const response = await fetch(fetchOptions);
         return response;
     }
 
     async function addFilter({ filter, params }) {
         if (filter) store.filter = filter;
-        let exclude = {};
+
-        if (params?.params?.exclude) {
-            exclude = params.params.exclude;
-            // params = { ...params, ...params.exclude };
-            delete params.params.exclude;
-        }
         let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
         resetPagination();
 
-        await fetch({ exclude });
+        await fetch({});
         return { filter, params };
     }
 
@@ -229,11 +217,7 @@ export function useArrayData(key, userOptions) {
 
     function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
-            if (
+            if (params[param] === '' || params[param] === null) {
-                params[param] === '' ||
-                params[param] === null ||
-                !Object.keys(params[param]).length
-            ) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {

src/pages/Ticket/TicketFilter.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
@@ -9,7 +8,6 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
-import useNotify from 'src/composables/useNotify';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -18,27 +16,13 @@ const props = defineProps({
         required: true,
     },
 });
-const route = useRoute();
-const userParams = {
-    from: null,
-    to: null,
-};
-const filterPanelRef = ref(null);
 
-defineExpose({ filterPanelRef });
 const provinces = ref([]);
 const states = ref([]);
 const agencies = ref([]);
 const warehouses = ref([]);
 const groupedStates = ref([]);
-const { notify } = useNotify();
+
-const initializeFromQuery = computed(() => {
-    const query = route.query.table ? JSON.parse(route.query.table) : {};
-    from.value = query.from || from.toISOString();
-    to.value = query.to || to.toISOString();
-    Object.assign(userParams, { from, to });
-    return userParams;
-});
 const getGroupedStates = (data) => {
     for (const state of data) {
         groupedStates.value.push({
@@ -48,22 +32,6 @@ const getGroupedStates = (data) => {
         });
     }
 };
-const from = Date.vnNew();
-from.setHours(0, 0, 0, 0);
-from.setDate(from.getDate() - 7);
-const to = Date.vnNew();
-to.setHours(23, 59, 0, 0);
-to.setDate(to.getDate() + 1);
-function validateDateRange(params) {
-    const hasFrom = 'from' in params;
-    const hasTo = 'to' in params;
-
-    if (hasFrom !== hasTo) {
-        notify(t(`dateRangeMustHaveBothFrom`), 'negative');
-    }
-
-    return (hasFrom && hasTo) || (!hasFrom && !hasTo);
-}
 </script>
 
 <template>
@@ -85,13 +53,7 @@ function validateDateRange(params) {
         auto-load
     />
     <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
-    <VnFilterPanel
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        ref="filterPanelRef"
-        :data-key="props.dataKey"
-        :search-button="true"
-        :validations="[validateDateRange]"
-        :exclude-params="initializeFromQuery"
-    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -341,7 +303,6 @@ function validateDateRange(params) {
 
 <i18n>
 en:
-    dateRangeMustHaveBothFrom: The date range must have both 'from' and 'to'
     params:
         search: Contains
         clientFk: Customer
@@ -370,7 +331,6 @@ en:
     DELIVERED: Delivered
     ON_PREVIOUS: ON_PREVIOUS
 es:
-    dateRangeMustHaveBothFrom: El rango de fechas debe tener 'desde' y 'hasta'
     params:
         search: Contiene
         clientFk: Cliente

src/pages/Ticket/TicketList.vue

@@ -44,12 +44,22 @@ from.setDate(from.getDate() - 7);
 const to = Date.vnNew();
 to.setHours(23, 59, 0, 0);
 to.setDate(to.getDate() + 1);
-
+const userParams = {
+    from: null,
+    to: null,
+};
 onBeforeMount(() => {
+    initializeFromQuery();
     stateStore.rightDrawer = true;
     if (!route.query.createForm) return;
     onClientSelected(JSON.parse(route.query.createForm));
 });
+const initializeFromQuery = () => {
+    const query = route.query.table ? JSON.parse(route.query.table) : {};
+    from.value = query.from || from.toISOString();
+    to.value = query.to || to.toISOString();
+    Object.assign(userParams, { from, to });
+};
 
 const selectedRows = ref([]);
 const hasSelectedRows = computed(() => selectedRows.value.length > 0);
@@ -471,17 +481,11 @@ watch(
         :array-data-props="{
             url: 'Tickets/filter',
             order: ['shippedDate DESC', 'shippedHour ASC', 'zoneLanding ASC', 'id'],
-            filterPanel: filterPanelRef,
-            searchRemoveParams: true,
             exprBuilder,
         }"
     >
         <template #advanced-menu>
-            <TicketFilter
+            <TicketFilter data-key="TicketList" />
-                ref="filterPanelRef"
-                data-key="TicketList"
-                :excludeParams="{ ...userParams }"
-            />
         </template>
         <template #body>
             <VnTable
@@ -495,6 +499,7 @@ watch(
                 }"
                 default-mode="table"
                 :columns="columns"
+                :user-params="userParams"
                 :right-search="false"
                 redirect="ticket"
                 v-model:selected="selectedRows"