src/components/VnTable/VnFilter.vue

@@ -48,6 +48,17 @@ const forceAttrs = {
     label: $props.showTitle ? '' : $props.column.label,
 };
 
+const selectComponent = {
+    component: markRaw(VnSelect),
+    event: updateEvent,
+    attrs: {
+        class: 'q-px-sm q-pb-xs q-pt-none fit',
+        dense: true,
+        filled: !$props.showTitle,
+    },
+    forceAttrs,
+};
+
 const components = {
     input: {
         component: markRaw(VnInput),
@@ -97,16 +108,8 @@ const components = {
         },
         forceAttrs,
     },
-    select: {
+    select: selectComponent,
-        component: markRaw(VnSelect),
+    rawSelect: selectComponent,
-        event: updateEvent,
-        attrs: {
-            class: 'q-px-sm q-pb-xs q-pt-none fit',
-            dense: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs,
-    },
 };
 
 async function addFilter(value) {

src/components/VnTable/VnTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue';
+import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -96,6 +96,7 @@ const DEFAULT_MODE = 'card';
 const TABLE_MODE = 'table';
 const mode = ref(DEFAULT_MODE);
 const selected = ref([]);
+const hasParams = ref(false);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
 const orders = ref(parseOrder(routeQuery.filter?.order));
@@ -117,11 +118,14 @@ const tableModes = [
         disable: $props.disableOption?.card,
     },
 ];
+onBeforeMount(() => {
+    setUserParams(route.query[$props.searchUrl]);
+    hasParams.value = Object.keys(params.value).length !== 0;
+});
 
 onMounted(() => {
     mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
     stateStore.rightDrawer = true;
-    setUserParams(route.query[$props.searchUrl]);
     columnsVisibilitySkiped.value = [
         ...splittedColumns.value.columns
             .filter((c) => c.visible == false)
@@ -295,6 +299,7 @@ defineExpose({
             :disable-infinite-scroll="isTableMode"
             @save-changes="reload"
             :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
+            :auto-load="hasParams || $attrs['auto-load']"
         >
             <template
                 v-for="(_, slotName) in $slots"

src/components/common/VnSelect.vue

@@ -125,7 +125,8 @@ function filter(val, options) {
             });
         }
 
-        const id = row.id;
+        if (!row) return;
+        const id = row[$props.optionValue];
         const optionLabel = String(row[$props.optionLabel]).toLowerCase();
 
         return id == search || optionLabel.includes(search);

src/components/common/VnSelectCache.vue

@@ -8,18 +8,31 @@ const $props = defineProps({
         default: null,
     },
     find: {
-        type: String,
+        type: [String, Object],
         default: null,
     },
 });
 const options = ref([]);
+
 onBeforeMount(async () => {
-    const { url } = useAttrs();
+    const { url, optionValue, optionLabel } = useAttrs();
     const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
-    if (findBy) options.value = [$props.row[findBy]];
+    if (!findBy || !$props.row) return;
+    // is object
+    if (typeof findBy == 'object') {
+        const { value, label } = findBy;
+        if (!$props.row[value] || !$props.row[label]) return;
+        return (options.value = [
+            {
+                [optionValue ?? 'id']: $props.row[value],
+                [optionLabel ?? 'name']: $props.row[label],
+            },
+        ]);
+    }
+    // is string
+    if ($props.row[findBy]) options.value = [$props.row[findBy]];
 });
 </script>
-
 <template>
     <VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
 </template>

src/pages/Route/Cmr/CmrList.vue

@@ -72,10 +72,7 @@ const columns = computed(() => [
         label: t('globals.warehouse'),
         component: 'select',
         attrs: {
-            url: 'warehouses',
+            options: warehouses.value,
-            fields: ['id', 'name'],
-            optionLabel: 'name',
-            optionValue: 'id',
         },
     },
     {

src/pages/Route/RouteList.vue

@@ -57,9 +57,13 @@ const columns = computed(() => [
         component: 'select',
         attrs: {
             url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'nickname'],
+            fields: ['id', 'name'],
-            optionValue: 'id',
+            useLike: false,
-            optionLabel: 'nickname',
+            optionFilter: 'firstName',
+            find: {
+                value: 'workerFk',
+                label: 'workerUserName',
+            },
         },
         useLike: false,
         cardVisible: true,
@@ -76,8 +80,10 @@ const columns = computed(() => [
         attrs: {
             url: 'agencyModes',
             fields: ['id', 'name'],
-            optionLabel: 'name',
+            find: {
-            optionValue: 'id',
+                value: 'agencyModeFk',
+                label: 'agencyName',
+            },
         },
     },
     {
@@ -91,7 +97,10 @@ const columns = computed(() => [
             url: 'vehicles',
             fields: ['id', 'numberPlate'],
             optionLabel: 'numberPlate',
-            optionValue: 'id',
+            find: {
+                value: 'vehicleFk',
+                label: 'vehiclePlateNumber',
+            },
         },
     },
     {
@@ -248,6 +257,7 @@ const openTicketsDialog = (id) => {
         :is-editable="true"
         :filter="routeFilter"
         redirect="route"
+        :row-click="false"
         :create="{
             urlCreate: 'Routes',
             title: t('Create route'),