fix(FE): fixing url encode for filters

This commit is contained in:
randy-ar
2026-01-20 15:34:33 +07:00
parent 596e2d0095
commit 71e6ac9c63
+40 -15
View File
@@ -176,13 +176,18 @@ const FinanceTable = () => {
startDate: '', startDate: '',
endDate: '', endDate: '',
}); });
const [selectedTransactionType, setSelectedTransactionType] = const [selectedTransactionType, setSelectedTransactionType] = useState<
useState<OptionType | null>(null); OptionType | OptionType[] | null
const [selectedBank, setSelectedBank] = useState<OptionType | null>(null); >(null);
const [selectedCustomerId, setSelectedCustomerId] = const [selectedBank, setSelectedBank] = useState<
useState<OptionType | null>(null); OptionType | OptionType[] | null
const [selectedSupplierId, setSelectedSupplierId] = >(null);
useState<OptionType | null>(null); const [selectedCustomerId, setSelectedCustomerId] = useState<
OptionType | OptionType[] | null
>(null);
const [selectedSupplierId, setSelectedSupplierId] = useState<
OptionType | OptionType[] | null
>(null);
const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null); const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null); const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -229,31 +234,47 @@ const FinanceTable = () => {
const transactionTypeChangeHandler = ( const transactionTypeChangeHandler = (
val: OptionType | OptionType[] | null val: OptionType | OptionType[] | null
) => { ) => {
setSelectedTransactionType(val as OptionType); setSelectedTransactionType(val);
setPendingFilters((prev) => ({ setPendingFilters((prev) => ({
...prev, ...prev,
transactionType: val ? ((val as OptionType).value as string) : '', transactionType: val
? Array.isArray(val)
? val.map((item) => item.value).join(',')
: (val.value as string)
: '',
})); }));
}; };
const bankChangeHandler = (val: OptionType | OptionType[] | null) => { const bankChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedBank(val as OptionType); setSelectedBank(val);
setPendingFilters((prev) => ({ setPendingFilters((prev) => ({
...prev, ...prev,
bankId: val ? ((val as OptionType).value as string) : '', bankId: val
? Array.isArray(val)
? val.map((item) => item.value).join(',')
: (val.value as string)
: '',
})); }));
}; };
const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => { const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedCustomerId(val as OptionType); setSelectedCustomerId(val);
setPendingFilters((prev) => ({ setPendingFilters((prev) => ({
...prev, ...prev,
customerId: val ? ((val as OptionType).value as string) : '', customerId: val
? Array.isArray(val)
? val.map((item) => item.value).join(',')
: (val.value as string)
: '',
})); }));
}; };
const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => { const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedSupplierId(val as OptionType); setSelectedSupplierId(val);
setPendingFilters((prev) => ({ setPendingFilters((prev) => ({
...prev, ...prev,
supplierId: val ? ((val as OptionType).value as string) : '', supplierId: val
? Array.isArray(val)
? val.map((item) => item.value).join(',')
: (val.value as string)
: '',
})); }));
}; };
const sortByChangeHandler = (val: OptionType | OptionType[] | null) => { const sortByChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -484,6 +505,7 @@ const FinanceTable = () => {
value={selectedTransactionType} value={selectedTransactionType}
onChange={transactionTypeChangeHandler} onChange={transactionTypeChangeHandler}
isClearable isClearable
isMulti
/> />
<SelectInput <SelectInput
options={customerOptions} options={customerOptions}
@@ -494,6 +516,7 @@ const FinanceTable = () => {
onMenuScrollToBottom={customerLoadMore} onMenuScrollToBottom={customerLoadMore}
isLoading={customerIsLoadingOptions} isLoading={customerIsLoadingOptions}
isClearable isClearable
isMulti
/> />
<SelectInput <SelectInput
options={supplierOptions} options={supplierOptions}
@@ -504,6 +527,7 @@ const FinanceTable = () => {
onMenuScrollToBottom={supplierLoadMore} onMenuScrollToBottom={supplierLoadMore}
isLoading={supplierIsLoadingOptions} isLoading={supplierIsLoadingOptions}
isClearable isClearable
isMulti
/> />
<SelectInput <SelectInput
options={ options={
@@ -528,6 +552,7 @@ const FinanceTable = () => {
onInputChange={bankInputValue} onInputChange={bankInputValue}
onMenuScrollToBottom={bankLoadMore} onMenuScrollToBottom={bankLoadMore}
isClearable isClearable
isMulti
/> />
<SelectInput <SelectInput
options={sortByOptions} options={sortByOptions}