mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-357): Make area/location/kandang filters multi-select
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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'
|
||||
// );
|
||||
|
||||
Reference in New Issue
Block a user