refactor(FE): Refactor filter parameter keys to singular form

This commit is contained in:
rstubryan
2026-02-12 09:52:21 +07:00
parent 62dd1de150
commit 28dabcbeb6
@@ -40,10 +40,10 @@ interface PurchasesPerSupplierTabProps {
} }
interface FilterParams { interface FilterParams {
area_ids?: string; area_id?: string;
supplier_ids?: string; supplier_id?: string;
product_ids?: string; product_id?: string;
product_category_ids?: string; product_category_id?: string;
start_date?: string; start_date?: string;
end_date?: string; end_date?: string;
sort_by?: string; sort_by?: string;
@@ -107,7 +107,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
const handleFilterModalOpen = () => { const handleFilterModalOpen = () => {
filterModal.openModal(); filterModal.openModal();
formik.resetForm({ values: formik.values }); formik.validateForm();
}; };
// ===== FORMIK SETUP ===== // ===== FORMIK SETUP =====
@@ -123,19 +123,19 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
sort_by: null, sort_by: null,
}, },
validationSchema: PurchasesPerSupplierFilterSchema, validationSchema: PurchasesPerSupplierFilterSchema,
onSubmit: (values, { resetForm }) => { onSubmit: (values, { setSubmitting }) => {
setFilterParams({ setFilterParams({
start_date: values.start_date?.toString() || undefined, start_date: values.start_date?.toString() || undefined,
end_date: values.end_date?.toString() || undefined, end_date: values.end_date?.toString() || undefined,
area_ids: area_id:
values.area_ids?.map((v) => String(v.value)).join(',') || undefined, values.area_ids?.map((v) => String(v.value)).join(',') || undefined,
supplier_ids: supplier_id:
values.supplier_ids?.map((v) => String(v.value)).join(',') || values.supplier_ids?.map((v) => String(v.value)).join(',') ||
undefined, undefined,
product_ids: product_id:
values.product_ids?.map((v) => String(v.value)).join(',') || values.product_ids?.map((v) => String(v.value)).join(',') ||
undefined, undefined,
product_category_ids: product_category_id:
values.product_category_ids?.map((v) => String(v.value)).join(',') || values.product_category_ids?.map((v) => String(v.value)).join(',') ||
undefined, undefined,
filter_by: values.filter_by?.value?.toString() || undefined, filter_by: values.filter_by?.value?.toString() || undefined,
@@ -144,7 +144,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
filterModal.closeModal(); filterModal.closeModal();
setIsSubmitted(true); setIsSubmitted(true);
setCurrentPage(1); setCurrentPage(1);
resetForm({ values }); setSubmitting(false);
}, },
onReset: () => { onReset: () => {
setFilterParams({}); setFilterParams({});
@@ -228,19 +228,19 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
count += 1; count += 1;
} }
if (filterParams.area_ids) { if (filterParams.area_id) {
count += 1; count += 1;
} }
if (filterParams.supplier_ids) { if (filterParams.supplier_id) {
count += 1; count += 1;
} }
if (filterParams.product_ids) { if (filterParams.product_id) {
count += 1; count += 1;
} }
if (filterParams.product_category_ids) { if (filterParams.product_category_id) {
count += 1; count += 1;
} }
@@ -262,10 +262,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
isSubmitted isSubmitted
? () => { ? () => {
const params = { const params = {
area_ids: filterParams.area_ids, area_id: filterParams.area_id,
supplier_ids: filterParams.supplier_ids, supplier_id: filterParams.supplier_id,
product_ids: filterParams.product_ids, product_id: filterParams.product_id,
product_category_ids: filterParams.product_category_ids, product_category_id: filterParams.product_category_id,
start_date: filterParams.start_date, start_date: filterParams.start_date,
end_date: filterParams.end_date, end_date: filterParams.end_date,
sort_by: filterParams.sort_by, sort_by: filterParams.sort_by,
@@ -279,10 +279,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
: null, : null,
([, params]) => ([, params]) =>
LogisticApi.getLogisticPurchasePerSupplierReport( LogisticApi.getLogisticPurchasePerSupplierReport(
params.area_ids, params.area_id,
params.supplier_ids, params.supplier_id,
params.product_ids, params.product_id,
params.product_category_ids, params.product_category_id,
params.filter_by === 'received_date' ? params.start_date : undefined, params.filter_by === 'received_date' ? params.start_date : undefined,
params.filter_by === 'po_date' ? params.start_date : undefined, params.filter_by === 'po_date' ? params.start_date : undefined,
params.start_date, params.start_date,
@@ -313,10 +313,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
LogisticPurchasePerSupplierReport[] | null LogisticPurchasePerSupplierReport[] | null
> => { > => {
const params = { const params = {
area_ids: filterParams.area_ids, area_id: filterParams.area_id,
supplier_ids: filterParams.supplier_ids, supplier_id: filterParams.supplier_id,
product_ids: filterParams.product_ids, product_id: filterParams.product_id,
product_category_ids: filterParams.product_category_ids, product_category_id: filterParams.product_category_id,
start_date: filterParams.start_date, start_date: filterParams.start_date,
end_date: filterParams.end_date, end_date: filterParams.end_date,
sort_by: filterParams.sort_by, sort_by: filterParams.sort_by,
@@ -326,10 +326,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
}; };
const response = await LogisticApi.getLogisticPurchasePerSupplierReport( const response = await LogisticApi.getLogisticPurchasePerSupplierReport(
params.area_ids, params.area_id,
params.supplier_ids, params.supplier_id,
params.product_ids, params.product_id,
params.product_category_ids, params.product_category_id,
params.filter_by === 'received_date' ? params.start_date : undefined, params.filter_by === 'received_date' ? params.start_date : undefined,
params.filter_by === 'po_date' ? params.start_date : undefined, params.filter_by === 'po_date' ? params.start_date : undefined,
params.start_date, params.start_date,
@@ -383,37 +383,37 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
return; return;
} }
const areaName = filterParams.area_ids const areaName = filterParams.area_id
? areaOptions ? areaOptions
.filter((opt) => .filter((opt) =>
filterParams.area_ids?.split(',').includes(String(opt.value)) filterParams.area_id?.split(',').includes(String(opt.value))
) )
.map((opt) => opt.label) .map((opt) => opt.label)
.join(', ') || 'Semua Area' .join(', ') || 'Semua Area'
: 'Semua Area'; : 'Semua Area';
const supplierName = filterParams.supplier_ids const supplierName = filterParams.supplier_id
? supplierOptions ? supplierOptions
.filter((opt) => .filter((opt) =>
filterParams.supplier_ids?.split(',').includes(String(opt.value)) filterParams.supplier_id?.split(',').includes(String(opt.value))
) )
.map((opt) => opt.label) .map((opt) => opt.label)
.join(', ') || 'Semua Supplier' .join(', ') || 'Semua Supplier'
: 'Semua Supplier'; : 'Semua Supplier';
const productName = filterParams.product_ids const productName = filterParams.product_id
? productOptions ? productOptions
.filter((opt) => .filter((opt) =>
filterParams.product_ids?.split(',').includes(String(opt.value)) filterParams.product_id?.split(',').includes(String(opt.value))
) )
.map((opt) => opt.label) .map((opt) => opt.label)
.join(', ') || 'Semua Produk' .join(', ') || 'Semua Produk'
: 'Semua Produk'; : 'Semua Produk';
const productCategoryName = filterParams.product_category_ids const productCategoryName = filterParams.product_category_id
? productCategoryOptions ? productCategoryOptions
.filter((opt) => .filter((opt) =>
filterParams.product_category_ids filterParams.product_category_id
?.split(',') ?.split(',')
.includes(String(opt.value)) .includes(String(opt.value))
) )