TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update method search

Browse Source
This commit is contained in:
wayanrivan
2025-05-06 17:45:25 +07:00
parent 4d0d6fd039
commit f0ed1cebe6
4 changed files with 162 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
View File

@ -33,9 +33,10 @@ const ListToolbar = () => {
return date.toISOString().split('T')[0];
};
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('code')?.getFilterValue() as string) ?? ''
);
const [searchValue, setSearchValue] = useState<string>();
const [typeSearchValue, setSearchTypeValue] = useState<string>();
// useEffect to set the default date values
useEffect(() => {
@ -56,6 +57,19 @@ const ListToolbar = () => {
}
}, [trxDate, table]);
useEffect(() => {
const timer = setTimeout(() => {
// Add search type filter to column filters
table.setColumnFilters((prev) => [
...prev.filter((f) => f.id !== 'searchtype'),
{ id: 'searchtype', value: typeSearchValue },
]);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [typeSearchValue, table]);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('code')?.setFilterValue(searchValue);
@ -117,11 +131,27 @@ const ListToolbar = () => {
</SelectContent>
</Select>
<Select
value={typeSearchValue}
onValueChange={(value) => {
setSearchTypeValue(value);
}}
>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="msisdn">MSISDN</SelectItem>
<SelectItem value="fullname">FULLNAME</SelectItem>
<SelectItem value="trxid">TRANSACTION ID</SelectItem>
</SelectContent>
</Select>
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Transaction ID, MSISDN, Or Full Name Customer"
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
@ -146,6 +176,8 @@ const ListToolbar = () => {
to: formatDate(today),
});
setSearchTypeValue('');
table.getColumn('code')?.setFilterValue('');
table.getColumn('status_approve')?.setFilterValue('');
table.setPageIndex(0);

44
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
View File

@ -270,19 +270,49 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
});
}
// ✅ Declare formattedFilter early
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
}
};
if (transactioncode) {
formattedFilter["$or"] = [
{ "Transactions.code": { like: `%${transactioncode}%` } },
{ "Transactions.msisdn": { like: `${transactioncode}` } },
{ "origin_customer.fullname": { like: `${transactioncode}` } }
];
if (Array.isArray(filter)) {
let searchType = '';
let codeValue = '';
// Ambil code dan searchtype dulu
filter.forEach((f: any) => {
if (f.id === 'code' && f.value) {
codeValue = f.value;
}
if (f.id === 'searchtype' && f.value) {
searchType = f.value;
}
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
startdate = f.value.from;
enddate = f.value.to;
formattedFilter["Transactions.transaction_date"] = {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
};
}
});
// Terapkan berdasarkan searchtype + code
if (searchType && codeValue) {
if (searchType === "msisdn") {
formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
} else if (searchType === "fullname") {
formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
} else if (searchType === "trxid") {
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
}
}
}
// Handle approval status filter

61
src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
View File

@ -15,9 +15,7 @@ const ListToolbar = () => {
const { table, reload } = useDataGrid();
const [trxDate, settrxDate] = useState({ from: '', to: '' });
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('code')?.getFilterValue() as string) ?? ''
);
const [searchValue, setSearchValue] = useState<string>();
// const [statusValue, setStatusValue] = useState<string>(
// (table.getColumn('status')?.getFilterValue() as string) ?? ''
@ -27,18 +25,12 @@ const ListToolbar = () => {
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
);
const [typeSearchValue, setSearchTypeValue] = useState<string>();
const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0];
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('code')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
// useEffect(() => {
// const timer = setTimeout(() => {
@ -59,6 +51,30 @@ const ListToolbar = () => {
return () => clearTimeout(timer);
}, [typeValue, table]);
useEffect(() => {
const timer = setTimeout(() => {
// Add search type filter to column filters
table.setColumnFilters((prev) => [
...prev.filter((f) => f.id !== 'searchtype'),
{ id: 'searchtype', value: typeSearchValue },
]);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [typeSearchValue, table]);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('code')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
useEffect(() => {
const today = new Date();
// const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@ -135,8 +151,8 @@ const ListToolbar = () => {
setTypeValue(value);
}}
>
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
<SelectValue placeholder="Select Type" />
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="T">TRANSFER</SelectItem>
@ -148,11 +164,27 @@ const ListToolbar = () => {
</SelectContent>
</Select>
<Select
value={typeSearchValue}
onValueChange={(value) => {
setSearchTypeValue(value);
}}
>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="msisdn">MSISDN</SelectItem>
<SelectItem value="fullname">FULLNAME</SelectItem>
<SelectItem value="trxid">TRANSACTION ID</SelectItem>
</SelectContent>
</Select>
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Transaction ID, MSISDN, Or Full Name Customer"
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
@ -171,6 +203,7 @@ const ListToolbar = () => {
// Only reset filters excluding from and to
setSearchValue('');
setSearchTypeValue('');
// setStatusValue('');
setTypeValue('');
settrxDate({

78
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -236,58 +236,64 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
// Default values
let startdate = firstDayOfMonth.toISOString().split('T')[0];
let enddate = today.toISOString().split('T')[0];
let transactioncode = '';
// let transactionstatus = '';
let type = ''
if (Array.isArray(filter)) {
// console.log(filter);
filter.forEach((f: any) => {
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
startdate = f.value.from;
enddate = f.value.to;
}
if (f.id === 'code' && f.value) {
transactioncode = f.value;
}
// if (f.id === 'status' && f.value) {
// transactionstatus = f.value;
// }
if (f.id === 'kind' && f.value) {
type = f.value;
}
});
}
let type = '';
// ✅ Declare formattedFilter early
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
}
};
if (transactioncode) {
formattedFilter["$or"] = [
{ "Transactions.code": { like: `%${transactioncode}%` } },
{ "Transactions.msisdn": { like: `${transactioncode}` } },
{ "origin_customer.fullname": { like: `${transactioncode}` } }
];
if (Array.isArray(filter)) {
let searchType = '';
let codeValue = '';
// Ambil code dan searchtype dulu
filter.forEach((f: any) => {
if (f.id === 'code' && f.value) {
codeValue = f.value;
}
if (f.id === 'searchtype' && f.value) {
searchType = f.value;
}
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
startdate = f.value.from;
enddate = f.value.to;
formattedFilter["Transactions.transaction_date"] = {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
};
}
if (f.id === 'kind' && f.value) {
type = f.value;
}
});
// Terapkan berdasarkan searchtype + code
if (searchType && codeValue) {
if (searchType === "msisdn") {
formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
} else if (searchType === "fullname") {
formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
} else if (searchType === "trxid") {
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
}
}
}
// if (transactionstatus) {
// formattedFilter["Transactions.status"] = transactionstatus;
// }
if (type) {
formattedFilter["Transactions.kind"] = type;
}
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,