[skip ci] update search customer on add and edit transferfee
This commit is contained in:
bagusajisaputroo
@ -45,7 +45,7 @@ interface WalletProps {
|
||||
|
||||
interface CustomerProps {
|
||||
id: string;
|
||||
username: string;
|
||||
fullname: string;
|
||||
msisdn: string;
|
||||
}
|
||||
|
||||
@ -59,6 +59,12 @@ const EditFeeDialog = () => {
|
||||
const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
|
||||
useManageTransferFeeContext();
|
||||
const { reload } = useDataGrid();
|
||||
const [deductSearchTerm, setDeductSearchTerm] = useState('');
|
||||
const [creditSearchTerm, setCreditSearchTerm] = useState('');
|
||||
const [deductFilteredCustomers, setDeductFilteredCustomers] = useState<CustomerProps[]>([]);
|
||||
const [creditFilteredCustomers, setCreditFilteredCustomers] = useState<CustomerProps[]>([]);
|
||||
const [isSearchingCustomers, setIsSearchingCustomers] = useState(false);
|
||||
|
||||
const { GetData, PutData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
|
||||
@ -70,7 +76,7 @@ const EditFeeDialog = () => {
|
||||
const [transactionTypeName, setTransactionTypeName] = useState('');
|
||||
const customersWithNames = customers.map((customer) => ({
|
||||
id: customer.id,
|
||||
name: customer.username
|
||||
name: customer.fullname
|
||||
}));
|
||||
const [customerSearchTerm, setCustomerSearchTerm] = useState('');
|
||||
const [showCustomerSearch, setShowCustomerSearch] = useState(false);
|
||||
@ -80,6 +86,8 @@ const EditFeeDialog = () => {
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const [selectedDeductCustomer, setSelectedDeductCustomer] = useState<CustomerProps | null>(null);
|
||||
const [selectedCreditCustomer, setSelectedCreditCustomer] = useState<CustomerProps | null>(null);
|
||||
|
||||
const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
|
||||
const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
|
||||
@ -110,7 +118,24 @@ const EditFeeDialog = () => {
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const useDebounce = (value:string, delay:number) => {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
};
|
||||
|
||||
const debouncedDeductSearch = useDebounce(deductSearchTerm, 300);
|
||||
const debouncedCreditSearch = useDebounce(creditSearchTerm, 300);
|
||||
useEffect(() => {
|
||||
const updated_time = new Date();
|
||||
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
@ -204,7 +229,6 @@ const EditFeeDialog = () => {
|
||||
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
|
||||
// console.log(payload);
|
||||
try {
|
||||
const response = await PutData(
|
||||
`${API_URL}/transactionfees/update/${selectedTransferFee}`,
|
||||
@ -262,31 +286,89 @@ const EditFeeDialog = () => {
|
||||
if (!showEditFeeDialog) return;
|
||||
fetchWallets();
|
||||
}, [showEditFeeDialog, fetchWallets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditFeeDialog) return;
|
||||
|
||||
const getCustomerList = async (sorting: any) => {
|
||||
setIsLoadingCustomers(true);
|
||||
const searchDeductCustomers = useCallback(
|
||||
async (searchTerm: string) => {
|
||||
setIsSearchingCustomers(true);
|
||||
try {
|
||||
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
|
||||
});
|
||||
setCustomers(response?.data.list || []);
|
||||
let response;
|
||||
if (!searchTerm.trim()) {
|
||||
response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'username',
|
||||
order_direction: 'ASC'
|
||||
});
|
||||
} else {
|
||||
const filters = [{ id: 'fullname', value: searchTerm.trim() }];
|
||||
response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'username',
|
||||
order_direction: 'ASC',
|
||||
filter: JSON.stringify(filters),
|
||||
specialFilter: true
|
||||
});
|
||||
}
|
||||
setDeductFilteredCustomers(response?.data?.list || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching customers', error);
|
||||
console.error('Error searching deduct customers', error);
|
||||
setDeductFilteredCustomers([]);
|
||||
} finally {
|
||||
setIsLoadingCustomers(false);
|
||||
setIsSearchingCustomers(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
[GetData]
|
||||
);
|
||||
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
}, [showEditFeeDialog, GetData]);
|
||||
const searchCreditCustomers = useCallback(
|
||||
async (searchTerm: string) => {
|
||||
setIsSearchingCustomers(true);
|
||||
try {
|
||||
let response;
|
||||
if (!searchTerm.trim()) {
|
||||
response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'username',
|
||||
order_direction: 'ASC'
|
||||
});
|
||||
} else {
|
||||
const filters = [{ id: 'fullname', value: searchTerm.trim() }];
|
||||
response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'username',
|
||||
order_direction: 'ASC',
|
||||
filter: JSON.stringify(filters),
|
||||
specialFilter: true
|
||||
});
|
||||
}
|
||||
setCreditFilteredCustomers(response?.data?.list || []);
|
||||
} catch (error) {
|
||||
console.error('Error searching credit customers', error);
|
||||
setCreditFilteredCustomers([]);
|
||||
} finally {
|
||||
setIsSearchingCustomers(false);
|
||||
}
|
||||
},
|
||||
[GetData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (openDeductOrigin) {
|
||||
searchDeductCustomers(debouncedDeductSearch);
|
||||
}
|
||||
}, [debouncedDeductSearch, openDeductOrigin, searchDeductCustomers]);
|
||||
|
||||
useEffect(() => {
|
||||
if (openCreditDestination) {
|
||||
searchCreditCustomers(debouncedCreditSearch);
|
||||
}
|
||||
}, [debouncedCreditSearch, openCreditDestination, searchCreditCustomers]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditFeeDialog) return;
|
||||
@ -323,7 +405,7 @@ const EditFeeDialog = () => {
|
||||
setIsLoadingTransferFee(true);
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
|
||||
// console.log(response);
|
||||
|
||||
if (response?.status) {
|
||||
setFormField({
|
||||
...initialState,
|
||||
@ -354,6 +436,32 @@ const EditFeeDialog = () => {
|
||||
if (response.data.transaction_type?.name) {
|
||||
setTransactionTypeName(response.data.transaction_type.name);
|
||||
}
|
||||
|
||||
if (
|
||||
response.data.deduct_origin &&
|
||||
response.data.deduct_origin.id !== '00000000-0000-0000-0000-000000000000'
|
||||
) {
|
||||
setSelectedDeductCustomer({
|
||||
id: response.data.deduct_origin.id,
|
||||
fullname: response.data.deduct_origin.fullname || '',
|
||||
msisdn: response.data.deduct_origin.msisdn || ''
|
||||
});
|
||||
} else {
|
||||
setSelectedDeductCustomer(null);
|
||||
}
|
||||
|
||||
if (
|
||||
response.data.credit_destination &&
|
||||
response.data.credit_destination.id !== '00000000-0000-0000-0000-000000000000'
|
||||
) {
|
||||
setSelectedCreditCustomer({
|
||||
id: response.data.credit_destination.id,
|
||||
fullname: response.data.credit_destination.fullname || '',
|
||||
msisdn: response.data.credit_destination.msisdn || ''
|
||||
});
|
||||
} else {
|
||||
setSelectedCreditCustomer(null);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction fee details', error);
|
||||
@ -658,11 +766,19 @@ const EditFeeDialog = () => {
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
|
||||
onClick={() => {
|
||||
setOpenDeductOrigin(!openDeductOrigin);
|
||||
if (!openDeductOrigin && deductSearchTerm.trim() === '') {
|
||||
searchDeductCustomers('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
{selectedDeductCustomer
|
||||
? selectedDeductCustomer.fullname
|
||||
: deductFilteredCustomers.find(
|
||||
(customer) => customer.id === formField.deduct_origin
|
||||
)?.fullname || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -673,45 +789,44 @@ const EditFeeDialog = () => {
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
value={deductSearchTerm}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setDeductSearchTerm(value);
|
||||
|
||||
}}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
{isSearchingCustomers ? (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">Searching...</div>
|
||||
) : (
|
||||
deductFilteredCustomers.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({ ...formField, deduct_origin: customer.id });
|
||||
setSelectedDeductCustomer(customer);
|
||||
setDeductSearchTerm('');
|
||||
setOpenDeductOrigin(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
{customer.fullname}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{!isSearchingCustomers &&
|
||||
deductFilteredCustomers.length === 0 &&
|
||||
deductSearchTerm.trim() && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -763,12 +878,19 @@ const EditFeeDialog = () => {
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenCreditDestination(!openCreditDestination)}
|
||||
onClick={() => {
|
||||
setOpenCreditDestination(!openCreditDestination);
|
||||
if (!openCreditDestination && creditSearchTerm.trim() === '') {
|
||||
searchCreditCustomers('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.credit_destination
|
||||
)?.username || 'Search customer...'}
|
||||
{selectedCreditCustomer
|
||||
? selectedCreditCustomer.fullname
|
||||
: creditFilteredCustomers.find(
|
||||
(customer) => customer.id === formField.credit_destination
|
||||
)?.fullname || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -779,23 +901,21 @@ const EditFeeDialog = () => {
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
value={creditSearchTerm}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setCreditSearchTerm(value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
{isSearchingCustomers ? (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">Searching...</div>
|
||||
) : (
|
||||
creditFilteredCustomers.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
@ -803,24 +923,22 @@ const EditFeeDialog = () => {
|
||||
setFormField({
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpenCreditDestination(false);
|
||||
});
|
||||
setOpenCreditDestination(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
{customer.fullname}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{!isSearchingCustomers &&
|
||||
creditFilteredCustomers.length === 0 &&
|
||||
creditSearchTerm.trim() && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user