gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 07:15:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Separate applied and modal filter state

Browse Source
This commit is contained in:
rstubryan
2026-02-05 14:39:33 +07:00
parent 92886fe5e2
commit eb95afe9a0
1 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+71 -30
View File
@@ -48,6 +48,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
const [isSubmitted, setIsSubmitted] = useState(false);
// ===== FILTER STATE =====
const [appliedFilterCustomer, setAppliedFilterCustomer] = useState<
typeof customerOptions
>([]);
// TODO: Uncomment when BE is ready
// const [appliedFilterSales, setAppliedFilterSales] = useState<
// typeof salesOptions
// >([]);
const [appliedFilterByType, setAppliedFilterByType] = useState<
(typeof dataTypeOptions)[0]
>({ value: 'trans_date', label: 'Tanggal Jual/Bayar' });
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
[]
);
@@ -124,23 +137,47 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// ===== FILTER HANDLERS =====
const handleFilterModalOpen = useCallback(() => {
setFilterCustomer(appliedFilterCustomer);
// setFilterSales(appliedFilterSales);
setFilterByType(appliedFilterByType);
setFilterStartDate(appliedFilterStartDate);
setFilterEndDate(appliedFilterEndDate);
filterModal.openModal();
}, [filterModal]);
}, [
filterModal,
appliedFilterCustomer,
appliedFilterByType,
appliedFilterStartDate,
appliedFilterEndDate,
]);
const handleResetFilters = useCallback(() => {
setIsSubmitted(false);
setFilterCustomer([]);
// setFilterSales([]);
setFilterByType(dataTypeOptions[0]);
setFilterStartDate('');
setFilterEndDate('');
setAppliedFilterCustomer([]);
setAppliedFilterByType(dataTypeOptions[0]);
setAppliedFilterStartDate('');
setAppliedFilterEndDate('');
}, [dataTypeOptions]);
const handleApplyFilters = useCallback(() => {
setAppliedFilterCustomer(filterCustomer);
setAppliedFilterByType(filterByType);
setAppliedFilterStartDate(filterStartDate);
setAppliedFilterEndDate(filterEndDate);
setIsSubmitted(true);
setCurrentPage(1);
filterModal.closeModal();
}, [filterModal]);
}, [
filterModal,
filterCustomer,
filterByType,
filterStartDate,
filterEndDate,
]);
// ===== ACTIVE FILTERS COUNT =====
const activeFiltersCount = useMemo(() => {
@@ -163,7 +200,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// }
return count;
}, [filterStartDate, filterEndDate, filterCustomer]);
}, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]);
const hasFilters = activeFiltersCount > 0;
@@ -173,17 +210,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
? () => {
const params = {
customer_ids:
filterCustomer.length > 0
? filterCustomer.map((v) => String(v.value)).join(',')
appliedFilterCustomer.length > 0
? appliedFilterCustomer.map((v) => String(v.value)).join(',')
: undefined,
// TODO: Uncomment when BE is ready
// sales_id:
// filterSales.length > 0
// ? filterSales.map((v) => String(v.value)).join(',')
// appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date',
start_date: filterStartDate || undefined,
end_date: filterEndDate || undefined,
filter_by: appliedFilterByType.value as
| 'trans_date'
| 'realization_date',
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
page: currentPage,
limit: pageSize,
};
@@ -216,17 +255,17 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
> => {
const params = {
customer_ids:
filterCustomer.length > 0
? filterCustomer.map((v) => String(v.value)).join(',')
appliedFilterCustomer.length > 0
? appliedFilterCustomer.map((v) => String(v.value)).join(',')
: undefined,
// TODO: Uncomment when BE is ready
// sales_id:
// filterSales.length > 0
// ? filterSales.map((v) => String(v.value)).join(',')
// appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date',
start_date: filterStartDate || undefined,
end_date: filterEndDate || undefined,
filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date',
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
limit: 100,
page: 1,
};
@@ -244,11 +283,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
? (response.data as unknown as CustomerPaymentReport[])
: null;
}, [
filterCustomer,
// filterSales,
filterStartDate,
filterEndDate,
filterByType,
appliedFilterCustomer,
// appliedFilterSales,
appliedFilterStartDate,
appliedFilterEndDate,
appliedFilterByType,
]);
// ===== EXPORT HANDLERS =====
@@ -293,17 +332,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
data: allDataForExport,
params: {
customer_name:
filterCustomer.length > 0
? filterCustomer.map((c) => c.label).join(', ')
appliedFilterCustomer.length > 0
? appliedFilterCustomer.map((c) => c.label).join(', ')
: undefined,
// TODO: Uncomment when BE is ready
// sales:
// filterSales.length > 0
// ? filterSales.map((s) => s.label).join(', ')
// appliedFilterSales.length > 0
// ? appliedFilterSales.map((s) => s.label).join(', ')
// : undefined,
start_date: filterStartDate || undefined,
end_date: filterEndDate || undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date',
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
filter_by: appliedFilterByType.value as
| 'trans_date'
| 'realization_date',
},
});
toast.success('PDF berhasil dibuat dan diunduh.');