fix: filter and correct list

src/pages/Route/Card/RouteFilter.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -16,39 +14,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['search']);
-
-const workerList = ref([]);
-const agencyList = ref([]);
-const vehicleList = ref([]);
-const warehouseList = ref([]);
 </script>
 
 <template>
-    <FetchData
-        url="Workers/search"
-        :filter="{ fields: ['id', 'nickname'] }"
-        sort-by="nickname ASC"
-        limit="30"
-        @on-fetch="(data) => (workerList = data)"
-        auto-load
-    />
-    <FetchData
-        url="AgencyModes/isActive"
-        :filter="{ fields: ['id', 'name'] }"
-        sort-by="name ASC"
-        limit="30"
-        @on-fetch="(data) => (agencyList = data)"
-        auto-load
-    />
-    <FetchData
-        url="Vehicles"
-        :filter="{ fields: ['id', 'numberPlate'] }"
-        sort-by="numberPlate ASC"
-        limit="30"
-        @on-fetch="(data) => (vehicleList = data)"
-        auto-load
-    />
-    <FetchData url="Warehouses" @on-fetch="(data) => (warehouseList = data)" auto-load />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
@@ -62,19 +30,17 @@ const warehouseList = ref([]);
         </template>
         <template #body="{ params }">
             <QItem class="q-my-sm">
-                <QItemSection v-if="workerList">
+                <QItemSection>
                     <VnSelect
                         :label="t('Worker')"
                         v-model="params.workerFk"
-                        :options="workerList"
+                        url="Workers/search"
+                        sort-by="nickname ASC"
                         option-value="id"
                         option-label="nickname"
                         dense
                         outlined
                         rounded
-                        emit-value
-                        map-options
-                        use-input
                         :input-debounce="0"
                     >
                         <template #option="{ itemProps, opt }">
@@ -91,19 +57,17 @@ const warehouseList = ref([]);
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
-                <QItemSection v-if="agencyList">
+                <QItemSection>
                     <VnSelect
                         :label="t('Agency')"
                         v-model="params.agencyModeFk"
-                        :options="agencyList"
+                        url="AgencyModes/isActive"
+                        sort-by="name ASC"
                         option-value="id"
                         option-label="name"
                         dense
                         outlined
                         rounded
-                        emit-value
-                        map-options
-                        use-input
                         :input-debounce="0"
                     />
                 </QItemSection>
@@ -147,19 +111,17 @@ const warehouseList = ref([]);
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
-                <QItemSection v-if="vehicleList">
+                <QItemSection>
                     <VnSelect
                         :label="t('Vehicle')"
                         v-model="params.vehicleFk"
-                        :options="vehicleList"
+                        url="Vehicles"
+                        sort-by="numberPlate ASC"
                         option-value="id"
                         option-label="numberPlate"
                         dense
                         outlined
                         rounded
-                        emit-value
-                        map-options
-                        use-input
                         :input-debounce="0"
                     />
                 </QItemSection>
@@ -170,19 +132,16 @@ const warehouseList = ref([]);
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
-                <QItemSection v-if="vehicleList">
+                <QItemSection>
                     <VnSelect
                         :label="t('Warehouse')"
                         v-model="params.warehouseFk"
-                        :options="warehouseList"
+                        url="Warehouses"
                         option-value="id"
                         option-label="name"
                         dense
                         outlined
                         rounded
-                        emit-value
-                        map-options
-                        use-input
                         :input-debounce="0"
                     />
                 </QItemSection>

src/pages/Route/Card/RouteSearchbar.vue

@@ -9,10 +9,9 @@ const { t } = useI18n();
         data-key="RouteList"
         :label="t('Search route')"
         :info="t('You can search by route reference')"
+        url="Routes/filter"
     />
 </template>
-
-<style scoped lang="scss"></style>
 <i18n>
 es:
     Search route: Buscar rutas

src/pages/Route/RouteList.vue

@@ -11,6 +11,8 @@ import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -271,13 +273,18 @@ const openTicketsDialog = (id) => {
         </QCard>
     </QDialog>
     <VnSubToolbar />
+    <RightMenu>
+        <template #right-panel>
+            <RouteFilter data-key="RouteList" />
+        </template>
+    </RightMenu>
     <VnTable
         class="route-list"
         ref="tableRef"
         data-key="RouteList"
         url="Routes/filter"
         :columns="columns"
-        :right-search="true"
+        :right-search="false"
         :is-editable="true"
         :filter="routeFilter"
         redirect="route"