refactor(FE-357): Make area/location/kandang filters multi-select

This commit is contained in:
rstubryan
2025-12-18 12:56:05 +07:00
parent f844c9ff2c
commit 843fa6ee7a
2 changed files with 129 additions and 93 deletions
@@ -43,9 +43,9 @@ const HppPerKandangTab = () => {
// ===== TABLE FILTER STATE =====
const { state: tableFilterState, updateFilter } = useTableFilter({
initial: {
area_id: '',
location_id: '',
kandang_id: '',
area_id: [] as string[],
location_id: [] as string[],
kandang_id: [] as string[],
weight_min: '',
weight_max: '',
period: '',
@@ -78,8 +78,11 @@ const HppPerKandangTab = () => {
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]
@@ -87,8 +90,11 @@ const HppPerKandangTab = () => {
const locationChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
updateFilter('location_id', newVal?.value ? String(newVal.value) : '');
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'location_id',
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
[updateFilter]
@@ -96,8 +102,11 @@ const HppPerKandangTab = () => {
const kandangChangeHandler = useCallback(
(val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
updateFilter('kandang_id', newVal?.value ? String(newVal.value) : '');
const arr = Array.isArray(val) ? val : val ? [val] : [];
updateFilter(
'kandang_id',
arr.map((v) => String((v as OptionType).value))
);
setIsSubmitted(false);
},
[updateFilter]
@@ -144,9 +153,9 @@ const HppPerKandangTab = () => {
);
const resetFilters = useCallback(() => {
updateFilter('area_id', '');
updateFilter('location_id', '');
updateFilter('kandang_id', '');
updateFilter('area_id', []);
updateFilter('location_id', []);
updateFilter('kandang_id', []);
updateFilter('weight_min', '');
updateFilter('weight_max', '');
updateFilter('period', '');
@@ -168,15 +177,18 @@ const HppPerKandangTab = () => {
isSubmitted
? () => {
const params = {
area_id: tableFilterState.area_id
? Number(tableFilterState.area_id)
: undefined,
location_id: tableFilterState.location_id
? Number(tableFilterState.location_id)
: undefined,
kandang_id: tableFilterState.kandang_id
? Number(tableFilterState.kandang_id)
: undefined,
area_id:
tableFilterState.area_id.length > 0
? tableFilterState.area_id.join(',')
: undefined,
location_id:
tableFilterState.location_id.length > 0
? tableFilterState.location_id.join(',')
: undefined,
kandang_id:
tableFilterState.kandang_id.length > 0
? tableFilterState.kandang_id.join(',')
: undefined,
weight_min: tableFilterState.weight_min
? Number(tableFilterState.weight_min)
: undefined,
@@ -226,15 +238,18 @@ const HppPerKandangTab = () => {
const hppPerKandangExport =
useCallback(async (): Promise<HppPerKandangReport | null> => {
const params = {
area_id: tableFilterState.area_id
? Number(tableFilterState.area_id)
: undefined,
location_id: tableFilterState.location_id
? Number(tableFilterState.location_id)
: undefined,
kandang_id: tableFilterState.kandang_id
? Number(tableFilterState.kandang_id)
: undefined,
area_id:
tableFilterState.area_id.length > 0
? tableFilterState.area_id.join(',')
: undefined,
location_id:
tableFilterState.location_id.length > 0
? tableFilterState.location_id.join(',')
: undefined,
kandang_id:
tableFilterState.kandang_id.length > 0
? tableFilterState.kandang_id.join(',')
: undefined,
weight_min: tableFilterState.weight_min
? Number(tableFilterState.weight_min)
: undefined,
@@ -386,23 +401,38 @@ const HppPerKandangTab = () => {
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'HPP Per Kandang');
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 locationName = tableFilterState.location_id
? locationOptions.find(
(opt) => opt.value === Number(tableFilterState.location_id)
)?.label || 'Semua Lokasi'
: 'Semua Lokasi';
const locationName =
tableFilterState.location_id.length > 0
? tableFilterState.location_id
.map(
(id) =>
locationOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Lokasi'
: 'Semua Lokasi';
const kandangName = tableFilterState.kandang_id
? kandangOptions.find(
(opt) => opt.value === Number(tableFilterState.kandang_id)
)?.label || 'Semua Kandang'
: 'Semua Kandang';
const kandangName =
tableFilterState.kandang_id.length > 0
? tableFilterState.kandang_id
.map(
(id) =>
kandangOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Kandang'
: 'Semua Kandang';
const filename = `Laporan_HPP_Per_Kandang_${areaName}_${locationName}_${kandangName}_${tableFilterState.period}.xlsx`;
@@ -435,23 +465,38 @@ const HppPerKandangTab = () => {
return;
}
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 locationName = tableFilterState.location_id
? locationOptions.find(
(opt) => opt.value === Number(tableFilterState.location_id)
)?.label || 'Semua Lokasi'
: 'Semua Lokasi';
const locationName =
tableFilterState.location_id.length > 0
? tableFilterState.location_id
.map(
(id) =>
locationOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Lokasi'
: 'Semua Lokasi';
const kandangName = tableFilterState.kandang_id
? kandangOptions.find(
(opt) => opt.value === Number(tableFilterState.kandang_id)
)?.label || 'Semua Kandang'
: 'Semua Kandang';
const kandangName =
tableFilterState.kandang_id.length > 0
? tableFilterState.kandang_id
.map(
(id) =>
kandangOptions.find((opt) => opt.value === Number(id))?.label
)
.filter(Boolean)
.join(', ') || 'Semua Kandang'
: 'Semua Kandang';
await generateHppPerKandangPDF(allDataForExport, {
area_name: areaName,
@@ -716,15 +761,13 @@ const HppPerKandangTab = () => {
<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
@@ -732,15 +775,13 @@ const HppPerKandangTab = () => {
<SelectInput
label='Lokasi'
placeholder='Pilih Lokasi'
isMulti
options={locationOptions}
value={
tableFilterState.location_id
? locationOptions.find(
(option) =>
option.value === Number(tableFilterState.location_id)
) || null
: null
}
value={locationOptions.filter((opt) =>
(tableFilterState.location_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={locationChangeHandler}
isLoading={isLoadingLocations}
isClearable
@@ -748,15 +789,13 @@ const HppPerKandangTab = () => {
<SelectInput
label='Kandang'
placeholder='Pilih Kandang'
isMulti
options={kandangOptions}
value={
tableFilterState.kandang_id
? kandangOptions.find(
(option) =>
option.value === Number(tableFilterState.kandang_id)
) || null
: null
}
value={kandangOptions.filter((opt) =>
(tableFilterState.kandang_id || [])
.map(String)
.includes(String(opt.value))
)}
onChange={kandangChangeHandler}
isLoading={isLoadingKandangs}
isClearable
+6 -9
View File
@@ -12,9 +12,9 @@ export class MarketingSaleReportService extends BaseApiService<
}
async getHppPerKandangReport(
area_id?: number,
location_id?: number,
kandang_id?: number,
area_id?: string,
location_id?: string,
kandang_id?: string,
weight_min?: number,
weight_max?: number,
period?: string,
@@ -48,9 +48,6 @@ export const SaleReportApi = new MarketingSaleReportService(
'reports/marketings'
);
/* For local testing purpose only
export const SaleReportApi = new MarketingSaleReportService(
'http://localhost:4010/api/reports/marketings'
'reports/marketings'
);
*/
// export const SaleReportApi = new MarketingSaleReportService(
// 'http://localhost:4010/api/reports/marketings'
// );