fix(zone): zoneLocation and the others searchbar

src/components/VnTable/VnTable.vue

@@ -363,7 +363,7 @@ defineExpose({
                     @update:selected="emit('update:selected', $event)"
                 >
                     <template #top-left v-if="!$props.withoutHeader">
-                        <slot name="top-left"></slot>
+                        <slot name="top-left"> </slot>
                     </template>
                     <template #top-right v-if="!$props.withoutHeader">
                         <VnVisibleColumn

src/components/ui/VnFilterPanel.vue

@@ -81,24 +81,27 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
-function setUserParams(watchedParams) {
+function setUserParams(watchedParams, quien) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
+    if (typeof watchedParams?.filter == 'string')
+        watchedParams.filter = JSON.parse(watchedParams.filter);
+
     watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
     delete watchedParams.filter;
-    userParams.value = { ...userParams.value, ...watchedParams };
+    userParams.value = { ...userParams.value, ...sanitizer(watchedParams) };
     emit('setUserParams', userParams.value);
 }
 
 watch(
     () => route.query[$props.searchUrl],
-    (val) => setUserParams(val)
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
 );
 
 watch(
     () => arrayData.store.userParams,
-    (val) => setUserParams(val)
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
 );
 
 watch(

src/components/ui/VnSearchbar.vue

@@ -61,15 +61,11 @@ const props = defineProps({
     },
     customRouteRedirectName: {
         type: String,
-        default: null,
+        default: '',
     },
-    makeFetch: {
+    whereFilter: {
-        type: Boolean,
+        type: Function,
-        default: true,
+        default: undefined,
-    },
-    isQueryFilter: {
-        type: Boolean,
-        default: false,
     },
 });
 
@@ -109,18 +105,18 @@ async function search() {
     );
     arrayData.reset(['skip', 'page']);
 
-    if (!props.makeFetch) return;
     const filter = {
         params: {
             ...Object.fromEntries(staticParams),
+            search: searchText.value,
         },
     };
-    if (props.isQueryFilter) {
+
+    if (props.whereFilter) {
         filter.filter = {
-            where: {
+            where: props.whereFilter(searchText.value),
-                name: searchText.value == '' ? undefined : searchText.value,
-            },
         };
+        delete filter.params.search;
     }
     await arrayData.applyFilter(filter);
 }

src/pages/Zone/Card/ZoneCard.vue

@@ -1,11 +1,20 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
 
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
 import ZoneFilterPanel from '../ZoneFilterPanel.vue';
 
 const { t } = useI18n();
+const route = useRoute();
+const routeName = computed(() => route.name);
+
+function notIsLocations(ifIsFalse, ifIsTrue) {
+    if (routeName.value != 'ZoneLocations') return ifIsFalse;
+    return ifIsTrue;
+}
 </script>
 
 <template>
@@ -14,18 +23,14 @@ const { t } = useI18n();
         base-url="Zones"
         :descriptor="ZoneDescriptor"
         :filter-panel="ZoneFilterPanel"
-        search-data-key="ZoneList"
+        :search-data-key="notIsLocations('ZoneList', 'ZoneLocations')"
-        search-url="Zones"
-        :searchbar-label="t('list.searchZone')"
-        :searchbar-info="t('list.searchInfo')"
         :searchbar-props="{
             url: 'Zones',
-            label: t('list.searchZone'),
+            label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
             info: t('list.searchInfo'),
+            whereFilter: notIsLocations((text) => {
+                return { name: { like: `%${text}%` } };
+            }),
         }"
-    >
+    />
-        <template #searchbar>
-            <ZoneSearchbar />
-        </template>
-    </VnCard>
 </template>

src/pages/Zone/Card/ZoneEvents.vue

@@ -44,25 +44,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#right-panel" v-if="useStateStore().isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
         <ZoneEventsPanel
             :first-day="firstDay"
             :last-day="lastDay"
@@ -70,8 +52,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             v-model:formModeName="formModeName"
             @open-zone-form="openForm"
         />
-        </QScrollArea>
+    </Teleport>
-    </QDrawer>
     <QPage class="q-pa-md flex justify-center">
         <ZoneCalendarGrid
             v-model:events="events"

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -1,10 +1,7 @@
 <script setup>
 import { onMounted, ref, computed, watch, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnInput from 'src/components/common/VnInput.vue';
-
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
@@ -30,7 +27,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:tickedNodes']);
 
-const { t } = useI18n();
 const route = useRoute();
 const state = useState();
 
@@ -186,16 +182,6 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <VnInput
-        v-if="showSearchBar"
-        v-model="store.userParams.search"
-        :placeholder="t('globals.search')"
-        @keydown.enter.prevent="reFetch()"
-    >
-        <template #prepend>
-            <QIcon class="cursor-pointer" name="search" />
-        </template>
-    </VnInput>
     <QTree
         ref="treeRef"
         :nodes="nodes"

src/pages/Zone/ZoneList.vue

@@ -132,7 +132,11 @@ const handleClone = (id) => {
         data-key="Zones"
         :label="t('Search zone')"
         :info="t('You can search zones by id or name')"
-        :is-query-filter="true"
+        :where-filter="
+            (text) => {
+                return { name: { like: `%${text}%` } };
+            }
+        "
     />
     <VnTable
         ref="tableRef"

src/pages/Zone/locale/en.yml

@@ -18,6 +18,7 @@ list:
     create: Create zone
     openSummary: Details
     searchZone: Search zones
+    searchLocation: Search locations
     searchInfo: Search zone by id or name
     confirmCloneTitle: All it's properties will be copied
     confirmCloneSubtitle: Do you want to clone this zone?

src/pages/Zone/locale/es.yml

@@ -18,6 +18,7 @@ list:
     create: Crear zona
     openSummary: Detalles
     searchZone: Buscar zonas
+    searchLocation: Buscar localizaciones
     searchInfo: Buscar zonas por identificador o nombre
     confirmCloneTitle: Todas sus propiedades serán copiadas
     confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?

src/router/modules/zone.js

@@ -68,15 +68,6 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneCreate.vue'),
                 },
-                // {
-                //     path: 'counter',
-                //     name: 'ZoneCounter',
-                //     meta: {
-                //         title: 'zoneCounter',
-                //         icon: 'add_circle',
-                //     },
-                //     component: () => import('src/pages/Zone/ZoneCounter.vue'),
-                // },
                 {
                     name: 'ZoneUpcomingDeliveries',
                     path: 'upcoming-deliveries',