diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx index 2879d114..8dc6b0d6 100644 --- a/src/components/pages/master-data/location/LocationsTable.tsx +++ b/src/components/pages/master-data/location/LocationsTable.tsx @@ -1,8 +1,13 @@ 'use client'; -import { ChangeEventHandler, useEffect, useState } from 'react'; +import { ChangeEventHandler, useCallback, useEffect, useState } from 'react'; import useSWR from 'swr'; -import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table'; +import { + CellContext, + ColumnDef, + ColumnSort, + SortingState, +} from '@tanstack/react-table'; import toast from 'react-hot-toast'; import { Icon } from '@iconify/react'; @@ -88,8 +93,14 @@ const LocationsTable = () => { setPageSize, toQueryString: getTableFilterQueryString, } = useTableFilter({ - initial: { search: '', nameSort: '' }, - paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' }, + initial: { search: '', nameSort: '', addressSort: '', areaSort: '' }, + paramMap: { + page: 'page', + pageSize: 'limit', + nameSort: 'sort_name', + addressSort: 'sort_address', + areaSort: ' sort_area', + }, }); const { @@ -194,15 +205,36 @@ const LocationsTable = () => { setPageSize(newVal.value as number); }; + const updateSortingFilter = useCallback( + ( + sortName: Exclude, + sortFilter: ColumnSort | undefined + ) => { + if (!sortFilter) { + updateFilter(sortName, ''); + } else { + updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc'); + } + }, + [updateFilter] + ); + + console.log({ + sorting, + getTableFilterQueryString: getTableFilterQueryString(), + }); + // track sorting useEffect(() => { - const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name'); + const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name'); + const addressSortFilter = sorting.find( + (sortItem) => sortItem.id === 'address' + ); + const areaSortFilter = sorting.find((sortItem) => sortItem.id === 'area'); - if (!isNameSorted) { - updateFilter('nameSort', ''); - } else { - updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc'); - } + updateSortingFilter('nameSort', nameSortFilter); + updateSortingFilter('addressSort', addressSortFilter); + updateSortingFilter('areaSort', areaSortFilter); }, [sorting]); return (