gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 21:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-364): Enable multi-select filters for purchases report

Browse Source
This commit is contained in:
rstubryan
2025-12-18 13:28:00 +07:00
parent 1de98db4ba
commit e8492f87ba
2 changed files with 154 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+150 -104
View File
@@ -59,10 +59,10 @@ const PurchasesPerSupplierTab = () => {
// ===== TABLE FILTER STATE =====
const { state: tableFilterState, updateFilter } = useTableFilter({
initial: {
area_id: '',
supplier_id: '',
product_id: '',
product_category_id: '',
area_id: [] as string[],
supplier_id: [] as string[],
product_id: [] as string[],
product_category_id: [] as string[],
received_date: '',
po_date: '',
start_date: '',
@@ -104,8 +104,11 @@ const PurchasesPerSupplierTab = () => {
const areaChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
updateFilter('area_id', newVal?.value ? String(newVal.value) : '');
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'area_id',
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
[updateFilter]
@@ -113,8 +116,11 @@ const PurchasesPerSupplierTab = () => {
const supplierChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
updateFilter('supplier_id', newVal?.value ? String(newVal.value) : '');
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'supplier_id',
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
[updateFilter]
@@ -122,8 +128,11 @@ const PurchasesPerSupplierTab = () => {
const productChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
updateFilter('product_id', newVal?.value ? String(newVal.value) : '');
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'product_id',
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
[updateFilter]
@@ -131,10 +140,10 @@ const PurchasesPerSupplierTab = () => {
const productCategoryChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'product_category_id',
newVal?.value ? String(newVal.value) : ''
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
@@ -177,10 +186,10 @@ const PurchasesPerSupplierTab = () => {
);
const resetFilters = useCallback(() => {
updateFilter('area_id', '');
updateFilter('supplier_id', '');
updateFilter('product_id', '');
updateFilter('product_category_id', '');
updateFilter('area_id', []);
updateFilter('supplier_id', []);
updateFilter('product_id', []);
updateFilter('product_category_id', []);
updateFilter('received_date', '');
updateFilter('po_date', '');
updateFilter('start_date', '');
@@ -200,18 +209,22 @@ const PurchasesPerSupplierTab = () => {
isSubmitted
? () => {
const params = {
area_id: tableFilterState.area_id
? Number(tableFilterState.area_id)
: undefined,
supplier_id: tableFilterState.supplier_id
? Number(tableFilterState.supplier_id)
: undefined,
product_id: tableFilterState.product_id
? Number(tableFilterState.product_id)
: undefined,
product_category_id: tableFilterState.product_category_id
? Number(tableFilterState.product_category_id)
: undefined,
area_id:
tableFilterState.area_id.length > 0
? tableFilterState.area_id
: undefined,
supplier_id:
tableFilterState.supplier_id.length > 0
? tableFilterState.supplier_id
: undefined,
product_id:
tableFilterState.product_id.length > 0
? tableFilterState.product_id
: undefined,
product_category_id:
tableFilterState.product_category_id.length > 0
? tableFilterState.product_category_id
: undefined,
received_date:
tableFilterState.filter_by === 'received_date'
? tableFilterState.start_date || undefined
@@ -266,18 +279,22 @@ const PurchasesPerSupplierTab = () => {
isSubmitted
? () => {
const params = {
area_id: tableFilterState.area_id
? Number(tableFilterState.area_id)
: undefined,
supplier_id: tableFilterState.supplier_id
? Number(tableFilterState.supplier_id)
: undefined,
product_id: tableFilterState.product_id
? Number(tableFilterState.product_id)
: undefined,
product_category_id: tableFilterState.product_category_id
? Number(tableFilterState.product_category_id)
: undefined,
area_id:
tableFilterState.area_id.length > 0
? tableFilterState.area_id
: undefined,
supplier_id:
tableFilterState.supplier_id.length > 0
? tableFilterState.supplier_id
: undefined,
product_id:
tableFilterState.product_id.length > 0
? tableFilterState.product_id
: undefined,
product_category_id:
tableFilterState.product_category_id.length > 0
? tableFilterState.product_category_id
: undefined,
received_date:
tableFilterState.filter_by === 'received_date'
? tableFilterState.start_date || undefined
@@ -344,17 +361,27 @@ const PurchasesPerSupplierTab = () => {
const workbook = XLSX.utils.book_new();
const areaName = tableFilterState.area_id
? areaOptions.find(
(opt) => opt.value === Number(tableFilterState.area_id)
)?.label || 'Semua Area'
: 'Semua Area';
const areaName =
tableFilterState.area_id.length > 0
? tableFilterState.area_id
.map(
(id) =>
areaOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Area'
: 'Semua Area';
const supplierName = tableFilterState.supplier_id
? supplierOptions.find(
(opt) => opt.value === Number(tableFilterState.supplier_id)
)?.label || 'Semua Supplier'
: 'Semua Supplier';
const supplierName =
tableFilterState.supplier_id.length > 0
? tableFilterState.supplier_id
.map(
(id) =>
supplierOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Supplier'
: 'Semua Supplier';
const startDate = tableFilterState.start_date || 'all';
const endDate = tableFilterState.end_date || 'all';
@@ -469,28 +496,56 @@ const PurchasesPerSupplierTab = () => {
setIsPdfExportLoading(true);
try {
const areaName =
tableFilterState.area_id.length > 0
? tableFilterState.area_id
.map(
(id) =>
areaOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Area'
: 'Semua Area';
const supplierName =
tableFilterState.supplier_id.length > 0
? tableFilterState.supplier_id
.map(
(id) =>
supplierOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Supplier'
: 'Semua Supplier';
const productName =
tableFilterState.product_id.length > 0
? tableFilterState.product_id
.map(
(id) =>
productOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Produk'
: 'Semua Produk';
const productCategoryName =
tableFilterState.product_category_id.length > 0
? tableFilterState.product_category_id
.map(
(id) =>
productCategoryOptions.find((opt) => opt.value === Number(id))
?.label
)
.filter(Boolean)
.join(', ') || 'Semua Kategori Produk'
: 'Semua Kategori Produk';
const exportParams = {
area_name: tableFilterState.area_id
? areaOptions.find(
(opt) => opt.value === Number(tableFilterState.area_id)
)?.label || ''
: 'Semua Area',
supplier_name: tableFilterState.supplier_id
? supplierOptions.find(
(opt) => opt.value === Number(tableFilterState.supplier_id)
)?.label || ''
: 'Semua Supplier',
product_name: tableFilterState.product_id
? productOptions.find(
(opt) => opt.value === Number(tableFilterState.product_id)
)?.label || ''
: 'Semua Produk',
product_category_name: tableFilterState.product_category_id
? productCategoryOptions.find(
(opt) =>
opt.value === Number(tableFilterState.product_category_id)
)?.label || ''
: 'Semua Kategori Produk',
area_name: areaName,
supplier_name: supplierName,
product_name: productName,
product_category_name: productCategoryName,
filter_by: tableFilterState.filter_by || 'received_date',
start_date: tableFilterState.start_date || '',
end_date: tableFilterState.end_date || '',
@@ -748,15 +803,13 @@ const PurchasesPerSupplierTab = () => {
<SelectInput
label='Area'
placeholder='Pilih Area'
isMulti
options={areaOptions}
value={
tableFilterState.area_id
? areaOptions.find(
(option) =>
option.value === Number(tableFilterState.area_id)
) || null
: null
}
value={areaOptions.filter((opt) =>
(tableFilterState.area_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={areaChangeHandler}
isLoading={isLoadingAreas}
isClearable
@@ -764,15 +817,13 @@ const PurchasesPerSupplierTab = () => {
<SelectInput
label='Supplier'
placeholder='Pilih Supplier'
isMulti
options={supplierOptions}
value={
tableFilterState.supplier_id
? supplierOptions.find(
(option) =>
option.value === Number(tableFilterState.supplier_id)
) || null
: null
}
value={supplierOptions.filter((opt) =>
(tableFilterState.supplier_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={supplierChangeHandler}
isLoading={isLoadingSuppliers}
isClearable
@@ -780,15 +831,13 @@ const PurchasesPerSupplierTab = () => {
<SelectInput
label='Produk'
placeholder='Pilih Produk'
isMulti
options={productOptions}
value={
tableFilterState.product_id
? productOptions.find(
(option) =>
option.value === Number(tableFilterState.product_id)
) || null
: null
}
value={productOptions.filter((opt) =>
(tableFilterState.product_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={productChangeHandler}
isLoading={isLoadingProducts}
isClearable
@@ -798,16 +847,13 @@ const PurchasesPerSupplierTab = () => {
<SelectInput
label='Kategori Produk'
placeholder='Pilih Kategori Produk'
isMulti
options={productCategoryOptions}
value={
tableFilterState.product_category_id
? productCategoryOptions.find(
(option) =>
option.value ===
Number(tableFilterState.product_category_id)
) || null
: null
}
value={productCategoryOptions.filter((opt) =>
(tableFilterState.product_category_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={productCategoryChangeHandler}
isLoading={isLoadingProductCategories}
isClearable