src/pages/Route/RouteList.vue

@@ -2,7 +2,7 @@
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, reactive, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toHour } from 'src/filters';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
@@ -20,6 +20,8 @@ import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+import { useArrayData } from 'composables/useArrayData';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -27,8 +29,13 @@ const { validate } = useValidator();
 const quasar = useQuasar();
 const session = useSession();
 const { viewSummary } = useSummaryDialog();
-
-onMounted(() => (stateStore.rightDrawer = true));
+const router = useRouter();
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+    await arrayData.fetch({ append: false });
+});
 onUnmounted(() => (stateStore.rightDrawer = false));
 
 const selectedRows = ref([]);
@@ -39,6 +46,15 @@ const columns = computed(() => [
         field: (row) => row.id,
         sortable: true,
         align: 'center',
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         name: 'worker',
@@ -46,6 +62,18 @@ const columns = computed(() => [
         field: (row) => row.workerUserName,
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: workers,
+                'option-value': 'id',
+                'option-label': 'nickname',
+                dense: true,
+            },
+        },
     },
     {
         name: 'agency',
@@ -53,6 +81,18 @@ const columns = computed(() => [
         field: (row) => row.agencyName,
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: agencyList,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
     },
     {
         name: 'vehicle',
@@ -60,6 +100,18 @@ const columns = computed(() => [
         field: (row) => row.vehiclePlateNumber,
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: vehicleList,
+                'option-value': 'id',
+                'option-label': 'numberPlate',
+                dense: true,
+            },
+        },
     },
     {
         name: 'date',
@@ -67,6 +119,12 @@ const columns = computed(() => [
         field: (row) => row.created,
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnInputDate,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+        },
     },
     {
         name: 'volume',
@@ -81,6 +139,12 @@ const columns = computed(() => [
         field: (row) => row.description,
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnInput,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+        },
     },
     {
         name: 'started',
@@ -88,6 +152,12 @@ const columns = computed(() => [
         field: (row) => toHour(row.started),
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnInputTime,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+        },
     },
     {
         name: 'finished',
@@ -95,6 +165,12 @@ const columns = computed(() => [
         field: (row) => toHour(row.finished),
         sortable: true,
         align: 'left',
+        columnFilter: {
+            component: VnInputDate,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+        },
     },
     {
         name: 'actions',
@@ -103,7 +179,11 @@ const columns = computed(() => [
         align: 'right',
     },
 ]);
-
+const params = reactive({});
+const arrayData = useArrayData('EntryLatestBuys', {
+    url: 'Buys/latestBuysFilter',
+    order: ['itemFk DESC'],
+});
 const refreshKey = ref(0);
 const workers = ref([]);
 const agencyList = ref([]);
@@ -115,9 +195,29 @@ const updateRoute = async (route) => {
         return err;
     }
 };
-
+const allColumnNames = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
+const store = arrayData.store;
+const rows = computed(() => store.data);
+const rowsSelected = ref([]);
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const applyColumnFilter = async (col) => {
+    try {
+        params[col.field] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
 
 const cloneRoutes = () => {
     axios.post('Routes/clone', {
@@ -225,16 +325,16 @@ const openTicketsDialog = (id) => {
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center">
-        <QToolbar class="justify-end"> </QToolbar>
+        <QToolbar
+            ><TableVisibleColumns
+                class="LeftIcon"
+                :all-columns="allColumnNames"
+                table-code="routes"
+                @on-config-saved="visibleColumns = ['picture', ...$event]"
+            />
+        </QToolbar>
         <VnSubToolbar class="justify-end">
             <template #st-actions>
-                <TableVisibleColumns
-                    class="LeftIcon"
-                    :all-columns="allColumnNames"
-                    table-code="latestBuys"
-                    labels-traductions-path="entry.latestBuys"
-                    @on-config-saved="visibleColumns = ['picture', ...$event]"
-                />
                 <QBtn
                     icon="vn:clone"
                     color="primary"