mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Make filter type nullable and use applied filters
This commit is contained in:
@@ -56,8 +56,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
// typeof salesOptions
|
// typeof salesOptions
|
||||||
// >([]);
|
// >([]);
|
||||||
const [appliedFilterByType, setAppliedFilterByType] = useState<
|
const [appliedFilterByType, setAppliedFilterByType] = useState<
|
||||||
(typeof dataTypeOptions)[0]
|
(typeof dataTypeOptions)[0] | null
|
||||||
>({ value: 'trans_date', label: 'Tanggal Jual/Bayar' });
|
>(null);
|
||||||
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
|
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
|
||||||
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
|
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
|
||||||
|
|
||||||
@@ -79,9 +79,9 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
const [filterByType, setFilterByType] = useState<(typeof dataTypeOptions)[0]>(
|
const [filterByType, setFilterByType] = useState<
|
||||||
dataTypeOptions[0]
|
(typeof dataTypeOptions)[0] | null
|
||||||
);
|
>(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
options: customerOptions,
|
options: customerOptions,
|
||||||
@@ -154,14 +154,14 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
const handleResetFilters = useCallback(() => {
|
const handleResetFilters = useCallback(() => {
|
||||||
setIsSubmitted(false);
|
setIsSubmitted(false);
|
||||||
setFilterCustomer([]);
|
setFilterCustomer([]);
|
||||||
setFilterByType(dataTypeOptions[0]);
|
setFilterByType(null);
|
||||||
setFilterStartDate('');
|
setFilterStartDate('');
|
||||||
setFilterEndDate('');
|
setFilterEndDate('');
|
||||||
setAppliedFilterCustomer([]);
|
setAppliedFilterCustomer([]);
|
||||||
setAppliedFilterByType(dataTypeOptions[0]);
|
setAppliedFilterByType(null);
|
||||||
setAppliedFilterStartDate('');
|
setAppliedFilterStartDate('');
|
||||||
setAppliedFilterEndDate('');
|
setAppliedFilterEndDate('');
|
||||||
}, [dataTypeOptions]);
|
}, []);
|
||||||
|
|
||||||
const handleApplyFilters = useCallback(() => {
|
const handleApplyFilters = useCallback(() => {
|
||||||
setAppliedFilterCustomer(filterCustomer);
|
setAppliedFilterCustomer(filterCustomer);
|
||||||
@@ -184,23 +184,33 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
let count = 0;
|
let count = 0;
|
||||||
|
|
||||||
// Date filter (start_date + end_date = 1 filter)
|
// Date filter (start_date + end_date = 1 filter)
|
||||||
if (filterStartDate || filterEndDate) {
|
if (appliedFilterStartDate || appliedFilterEndDate) {
|
||||||
count += 1;
|
count += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Customer filter
|
// Customer filter
|
||||||
if (filterCustomer.length > 0) {
|
if (appliedFilterCustomer.length > 0) {
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
|
||||||
|
if (appliedFilterByType) {
|
||||||
count += 1;
|
count += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Uncomment when BE is ready
|
// TODO: Uncomment when BE is ready
|
||||||
// // Sales filter
|
// // Sales filter
|
||||||
// if (filterSales.length > 0) {
|
// if (appliedFilterSales.length > 0) {
|
||||||
// count += 1;
|
// count += 1;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
return count;
|
return count;
|
||||||
}, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]);
|
}, [
|
||||||
|
appliedFilterStartDate,
|
||||||
|
appliedFilterEndDate,
|
||||||
|
appliedFilterCustomer,
|
||||||
|
appliedFilterByType,
|
||||||
|
]);
|
||||||
|
|
||||||
const hasFilters = activeFiltersCount > 0;
|
const hasFilters = activeFiltersCount > 0;
|
||||||
|
|
||||||
@@ -218,9 +228,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
// appliedFilterSales.length > 0
|
// appliedFilterSales.length > 0
|
||||||
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
||||||
// : undefined,
|
// : undefined,
|
||||||
filter_by: appliedFilterByType.value as
|
filter_by: appliedFilterByType?.value as
|
||||||
| 'trans_date'
|
| 'trans_date'
|
||||||
| 'realization_date',
|
| 'realization_date'
|
||||||
|
| undefined,
|
||||||
start_date: appliedFilterStartDate || undefined,
|
start_date: appliedFilterStartDate || undefined,
|
||||||
end_date: appliedFilterEndDate || undefined,
|
end_date: appliedFilterEndDate || undefined,
|
||||||
page: currentPage,
|
page: currentPage,
|
||||||
@@ -263,7 +274,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
// appliedFilterSales.length > 0
|
// appliedFilterSales.length > 0
|
||||||
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
||||||
// : undefined,
|
// : undefined,
|
||||||
filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date',
|
filter_by: appliedFilterByType?.value as
|
||||||
|
| 'trans_date'
|
||||||
|
| 'realization_date'
|
||||||
|
| undefined,
|
||||||
start_date: appliedFilterStartDate || undefined,
|
start_date: appliedFilterStartDate || undefined,
|
||||||
end_date: appliedFilterEndDate || undefined,
|
end_date: appliedFilterEndDate || undefined,
|
||||||
limit: 100,
|
limit: 100,
|
||||||
@@ -342,9 +356,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
// : undefined,
|
// : undefined,
|
||||||
start_date: appliedFilterStartDate || undefined,
|
start_date: appliedFilterStartDate || undefined,
|
||||||
end_date: appliedFilterEndDate || undefined,
|
end_date: appliedFilterEndDate || undefined,
|
||||||
filter_by: appliedFilterByType.value as
|
filter_by: appliedFilterByType?.value as
|
||||||
| 'trans_date'
|
| 'trans_date'
|
||||||
| 'realization_date',
|
| 'realization_date'
|
||||||
|
| undefined,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
toast.success('PDF berhasil dibuat dan diunduh.');
|
toast.success('PDF berhasil dibuat dan diunduh.');
|
||||||
|
|||||||
Reference in New Issue
Block a user