diff --git a/src/components/pages/expense/ExpensesTable.tsx b/src/components/pages/expense/ExpensesTable.tsx index 61fa7fa6..83b8015f 100644 --- a/src/components/pages/expense/ExpensesTable.tsx +++ b/src/components/pages/expense/ExpensesTable.tsx @@ -51,7 +51,9 @@ type ExpenseTableFilters = { transactionDate: string; realizationDate: string; locationId: string; + locationName: string; vendorId: string; + vendorName: string; userId: string; }; @@ -235,6 +237,7 @@ const ExpensesTable = () => { setPage, setPageSize, toQueryString: getTableFilterQueryString, + reset: resetFilter, } = useTableFilter({ initial: { page: 1, @@ -244,7 +247,9 @@ const ExpensesTable = () => { transactionDate: '', realizationDate: '', locationId: '', + locationName: '', vendorId: '', + vendorName: '', userId: '', }, paramMap: { @@ -254,7 +259,9 @@ const ExpensesTable = () => { transactionDate: 'transaction_date', realizationDate: 'realization_date', locationId: 'location_id', + locationName: 'location_name', vendorId: 'vendor_id', + vendorName: 'vendor_name', userId: 'user_id', }, @@ -740,20 +747,31 @@ const ExpensesTable = () => { const handleFilterSubmit = (values: { transaction_date?: string | null; realization_date?: string | null; - location_id?: string | null; - vendor_id?: string | null; + location?: { value: number; label: string } | null; + vendor?: { value: number; label: string } | null; }) => { updateFilter('transactionDate', values.transaction_date || ''); updateFilter('realizationDate', values.realization_date || ''); - updateFilter('locationId', values.location_id || ''); - updateFilter('vendorId', values.vendor_id || ''); + updateFilter( + 'locationId', + values.location?.value ? String(values.location?.value) : '' + ); + updateFilter( + 'locationName', + values.location?.label ? String(values.location?.label) : '' + ); + updateFilter( + 'vendorId', + values.vendor?.value ? String(values.vendor?.value) : '' + ); + updateFilter( + 'vendorName', + values.vendor?.label ? String(values.vendor?.label) : '' + ); }; const handleFilterReset = () => { - updateFilter('transactionDate', ''); - updateFilter('realizationDate', ''); - updateFilter('locationId', ''); - updateFilter('vendorId', ''); + resetFilter(); }; // track sorting @@ -927,6 +945,8 @@ const ExpensesTable = () => { 'search', 'nameSort', 'userId', + 'locationName', + 'vendorName', ]} onClick={handleFilterModalOpen} className='px-3 py-2.5' @@ -1245,6 +1265,24 @@ const ExpensesTable = () => { ref={filterModal.ref} onSubmit={handleFilterSubmit} onReset={handleFilterReset} + initialValues={{ + location: + tableFilterState.locationId && tableFilterState.locationName + ? { + value: Number(tableFilterState.locationId), + label: tableFilterState.locationName, + } + : null, + vendor: + tableFilterState.vendorId && tableFilterState.vendorName + ? { + value: Number(tableFilterState.vendorId), + label: tableFilterState.vendorName, + } + : null, + realization_date: tableFilterState.realizationDate, + transaction_date: tableFilterState.transactionDate, + }} /> ); diff --git a/src/components/pages/expense/filter/ExpensesFilter.ts b/src/components/pages/expense/filter/ExpensesFilter.ts index 8ee14a90..703863ea 100644 --- a/src/components/pages/expense/filter/ExpensesFilter.ts +++ b/src/components/pages/expense/filter/ExpensesFilter.ts @@ -3,8 +3,8 @@ import * as yup from 'yup'; export type ExpensesFilterType = { transaction_date: string | null; realization_date: string | null; - location_id: string | null; - vendor_id: string | null; + location: { value: number; label: string } | null; + vendor: { value: number; label: string } | null; }; export const ExpensesFilterSchema = yup.object({ @@ -21,8 +21,18 @@ export const ExpensesFilterSchema = yup.object({ return new Date(value) >= new Date(transaction_date); } ), - location_id: yup.string().nullable(), - vendor_id: yup.string().nullable(), + location: yup + .object({ + value: yup.number().required(), + label: yup.string().required(), + }) + .nullable(), + vendor: yup + .object({ + value: yup.number().required(), + label: yup.string().required(), + }) + .nullable(), }); export type ExpensesFilterValues = yup.InferType;