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

refactor(FE): Refactor selects to use useSelect hook

Browse Source
This commit is contained in:
rstubryan
2026-01-15 10:44:27 +07:00
parent 3bc5030a3d
commit a1301121ac
1 changed files with 129 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/form/RecordingForm.tsx
+124 -165
View File
@@ -12,7 +12,10 @@ import RequirePermission from '@/components/helper/RequirePermission';
import Card from '@/components/Card'; import Card from '@/components/Card';
import Badge from '@/components/Badge'; import Badge from '@/components/Badge';
import NumberInput from '@/components/input/NumberInput'; import NumberInput from '@/components/input/NumberInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput'; import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import CheckboxInput from '@/components/input/CheckboxInput'; import CheckboxInput from '@/components/input/CheckboxInput';
import ConfirmationModal from '@/components/modal/ConfirmationModal'; import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes'; import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -26,6 +29,7 @@ import {
} from '@/services/api/production'; } from '@/services/api/production';
import { LocationApi } from '@/services/api/master-data'; import { LocationApi } from '@/services/api/master-data';
import { ProductWarehouseApi } from '@/services/api/inventory'; import { ProductWarehouseApi } from '@/services/api/inventory';
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
import { import {
CreateGrowingRecordingPayload, CreateGrowingRecordingPayload,
@@ -36,7 +40,10 @@ import {
NextDayRecording, NextDayRecording,
} from '@/types/api/production/recording'; } from '@/types/api/production/recording';
import { type BaseApiResponse } from '@/types/api/api-general'; import { type BaseApiResponse } from '@/types/api/api-general';
import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock'; import {
ProjectFlockKandangLookup,
ProjectFlock,
} from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang'; import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { Kandang } from '@/types/api/master-data/kandang'; import { Kandang } from '@/types/api/master-data/kandang';
@@ -77,16 +84,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]); const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
const [selectedEggs, setSelectedEggs] = useState<number[]>([]); const [selectedEggs, setSelectedEggs] = useState<number[]>([]);
const [locationSearchValue, setLocationSearchValue] = useState('');
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>( const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
null null
); );
const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
const [selectedProjectFlock, setSelectedProjectFlock] = const [selectedProjectFlock, setSelectedProjectFlock] =
useState<OptionType | null>(null); useState<OptionType | null>(null);
const [selectedKandang, setSelectedKandang] = useState<OptionType | null>( const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
null null
); );
const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
useState<string>('');
const [stockProductsLocationId, setStockProductsLocationId] =
useState<string>('');
const [stockProductsKandangId, setStockProductsKandangId] =
useState<string>('');
const [depletionProductsLocationId, setDepletionProductsLocationId] =
useState<string>('');
const [depletionProductsKandangId, setDepletionProductsKandangId] =
useState<string>('');
const [eggProductsLocationId, setEggProductsLocationId] =
useState<string>('');
const [eggProductsKandangId, setEggProductsKandangId] = useState<string>('');
const [isApproveLoading, setIsApproveLoading] = useState(false); const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false); const [isRejectLoading, setIsRejectLoading] = useState(false);
@@ -210,26 +228,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}, [deleteModal, initialValues?.id, router]); }, [deleteModal, initialValues?.id, router]);
// ===== API DATA FETCHING ===== // ===== API DATA FETCHING =====
const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ const {
search: locationSearchValue || '', setInputValue: setLocationSearchValue,
limit: '100', options: locationOptions,
}).toString()}`; isLoadingOptions: isLoadingLocations,
const { data: locations, isLoading: isLoadingLocations } = useSWR( loadMore: loadMoreLocations,
locationsUrl, hasMore: hasMoreLocations,
LocationApi.getAllFetcher } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
);
const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({ const {
search: projectFlockSearchValue || '', setInputValue: setProjectFlockSearchValue,
limit: '100', options: projectFlockOptions,
...(selectedLocation rawData: projectFlocksRawData,
? { location_id: selectedLocation.value.toString() } isLoadingOptions: isLoadingProjectFlocks,
: {}), loadMore: loadMoreProjectFlocks,
}).toString()}`; hasMore: hasMoreProjectFlocks,
const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR( } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
projectFlocksUrl, location_id: selectedProjectFlockLocationId,
ProjectFlockApi.getAllFetcher });
);
const projectFlockKandangLookupUrl = useMemo(() => { const projectFlockKandangLookupUrl = useMemo(() => {
if (!selectedProjectFlock || !selectedKandang) return null; if (!selectedProjectFlock || !selectedKandang) return null;
@@ -279,47 +295,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
? projectFlockKandangDetailData.data ? projectFlockKandangDetailData.data
: undefined; : undefined;
const stockProductsUrl = useMemo(() => { const {
if (!selectedLocation || !selectedKandang) return null; options: stockProductOptions,
const params = new URLSearchParams({ rawData: stockProducts,
isLoadingOptions: isLoadingStockProducts,
loadMore: loadMoreStockProducts,
hasMore: hasMoreStockProducts,
} = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', '', {
flags: 'PAKAN,OVK', flags: 'PAKAN,OVK',
search: '', location_id: stockProductsLocationId,
limit: '100', kandang_id: stockProductsKandangId,
location_id: selectedLocation.value.toString(),
}); });
if (projectFlockKandangLookup?.kandang?.id) { const {
params.append( options: depletionProductOptions,
'kandang_id', rawData: depletionProductsData,
projectFlockKandangLookup.kandang.id.toString() isLoadingOptions: isLoadingDepletionProducts,
); loadMore: loadMoreDepletionProducts,
} else if (selectedKandang) { hasMore: hasMoreDepletionProducts,
params.append('kandang_id', selectedKandang.value.toString()); } = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', '', {
} location_id: depletionProductsLocationId,
kandang_id: depletionProductsKandangId,
return `${ProductWarehouseApi.basePath}?${params.toString()}`;
}, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
const depletionProductsUrl = useMemo(() => {
if (!selectedLocation || !selectedKandang) return null;
const params = new URLSearchParams({
search: '',
limit: '100',
location_id: selectedLocation.value.toString(),
}); });
if (projectFlockKandangLookup?.kandang?.id) {
params.append(
'kandang_id',
projectFlockKandangLookup.kandang.id.toString()
);
} else if (selectedKandang) {
params.append('kandang_id', selectedKandang.value.toString());
}
return `${ProductWarehouseApi.basePath}?${params.toString()}`;
}, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
const today = new Date().toISOString().split('T')[0]; const today = new Date().toISOString().split('T')[0];
const existingRecordingsUrl = `${RecordingApi.basePath}`; const existingRecordingsUrl = `${RecordingApi.basePath}`;
@@ -360,39 +358,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
}, [nextDayRecordingData]); }, [nextDayRecordingData]);
const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR( const {
stockProductsUrl, options: eggProductOptions,
ProductWarehouseApi.getAllFetcher rawData: eggProductsData,
); isLoadingOptions: isLoadingEggProducts,
loadMore: loadMoreEggProducts,
const { data: depletionProductsData, isLoading: isLoadingDepletionProducts } = hasMore: hasMoreEggProducts,
useSWR(depletionProductsUrl, ProductWarehouseApi.getAllFetcher); } = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', 'search', {
const eggProductsUrl = useMemo(() => {
if (!selectedLocation || !selectedKandang) return null;
const params = new URLSearchParams({
search: 'telur', search: 'telur',
limit: '100', location_id: eggProductsLocationId,
location_id: selectedLocation.value.toString(), kandang_id: eggProductsKandangId,
}); });
if (projectFlockKandangLookup?.kandang?.id) {
params.append(
'kandang_id',
projectFlockKandangLookup.kandang.id.toString()
);
} else if (selectedKandang) {
params.append('kandang_id', selectedKandang.value.toString());
}
return `${ProductWarehouseApi.basePath}?${params.toString()}`;
}, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
const { data: eggProductsData, isLoading: isLoadingEggProducts } = useSWR(
eggProductsUrl,
ProductWarehouseApi.getAllFetcher
);
const approvedProjectFlockKandangsUrl = useMemo(() => { const approvedProjectFlockKandangsUrl = useMemo(() => {
const params = new URLSearchParams({ const params = new URLSearchParams({
step_name: 'Disetujui', step_name: 'Disetujui',
@@ -448,17 +425,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}); });
// ===== DATA PROCESSING ===== // ===== DATA PROCESSING =====
const locationOptions = useMemo(() => { const enhancedLocationOptions = useMemo(() => {
let options: OptionType[] = []; const options = [...locationOptions];
if (isResponseSuccess(locations)) {
const locationOptionsList =
locations?.data.map((location) => ({
value: location.id,
label: location.name || '',
})) || [];
options = options.concat(locationOptionsList);
}
if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) { if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
const currentLocation = projectFlockKandangDetail.project_flock.location; const currentLocation = projectFlockKandangDetail.project_flock.location;
@@ -474,19 +442,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
return options; return options;
}, [locations, projectFlockKandangDetail, type]); }, [locationOptions, projectFlockKandangDetail, type]);
const projectFlockOptions = useMemo(() => { const enhancedProjectFlockOptions = useMemo(() => {
let options: OptionType[] = []; const options = [...projectFlockOptions];
if (isResponseSuccess(projectFlocks)) {
const flockOptions =
projectFlocks?.data.map((projectFlock) => ({
value: projectFlock.id,
label: projectFlock.flock_name || '',
})) || [];
options = options.concat(flockOptions);
}
if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) { if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
const currentProjectFlock = projectFlockKandangDetail.project_flock; const currentProjectFlock = projectFlockKandangDetail.project_flock;
@@ -502,13 +461,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
return options; return options;
}, [projectFlocks, projectFlockKandangDetail, type]); }, [projectFlockOptions, projectFlockKandangDetail, type]);
const kandangOptions = useMemo(() => { const kandangOptions = useMemo(() => {
let options: OptionType[] = []; let options: OptionType[] = [];
if (selectedProjectFlock && isResponseSuccess(projectFlocks)) { if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
const selectedProjectFlockData = projectFlocks.data.find( const data = projectFlocksRawData.data as ProjectFlock[];
const selectedProjectFlockData = data.find(
(pf) => pf.id === selectedProjectFlock.value (pf) => pf.id === selectedProjectFlock.value
); );
@@ -548,7 +508,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
return options; return options;
}, [ }, [
selectedProjectFlock, selectedProjectFlock,
projectFlocks, projectFlocksRawData,
projectFlockKandangDetail, projectFlockKandangDetail,
type, type,
approvedProjectFlockKandangs, approvedProjectFlockKandangs,
@@ -598,20 +558,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
]); ]);
const unifiedStockProducts = useMemo(() => { const unifiedStockProducts = useMemo(() => {
const options: OptionType[] = []; const options = [...stockProductOptions];
if (isResponseSuccess(stockProducts) && selectedKandang) {
stockProducts.data.forEach((product) => {
const hasPakanFlag = product.product.flags?.includes('PAKAN');
const hasOvkFlag = product.product.flags?.includes('OVK');
if (hasPakanFlag || hasOvkFlag) {
options.push({
value: product.id,
label: product.product.name,
});
}
});
}
if ( if (
initialValues && initialValues &&
@@ -635,12 +582,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
return options; return options;
}, [stockProducts, initialValues, type, selectedKandang]); }, [stockProductOptions, initialValues, type]);
const depletionProducts = useMemo(() => { const depletionProducts = useMemo(() => {
const options: OptionType[] = []; const options: OptionType[] = [];
if (isResponseSuccess(depletionProductsData) && selectedKandang) { if (isResponseSuccess(depletionProductsData) && selectedKandang) {
depletionProductsData.data.forEach((product) => { const data = depletionProductsData.data as unknown as ProductWarehouse[];
data.forEach((product) => {
const productName = product.product.name; const productName = product.product.name;
if ( if (
@@ -680,8 +629,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const eggProducts = useMemo(() => { const eggProducts = useMemo(() => {
const options: OptionType[] = []; const options: OptionType[] = [];
if (isResponseSuccess(eggProductsData) && selectedKandang) { if (isResponseSuccess(eggProductsData) && selectedKandang) {
eggProductsData.data.forEach((product) => { const data = eggProductsData.data as unknown as ProductWarehouse[];
data.forEach((product) => {
const productName = product.product.name; const productName = product.product.name;
if ( if (
@@ -812,33 +763,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}; };
// ===== HELPER FUNCTIONS ===== // ===== HELPER FUNCTIONS =====
useCallback((): OptionType | null => {
if (
!formik.values.project_flock_kandang ||
!isResponseSuccess(projectFlocks)
) {
return selectedLocation;
}
const projectFlockId = formik.values.project_flock_kandang.value;
const projectFlock = projectFlocks.data.find(
(pf) => pf.id === projectFlockId
);
if (projectFlock && projectFlock.location) {
return {
value: projectFlock.location.id,
label: projectFlock.location.name,
};
}
return selectedLocation;
}, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);
const getAvailableStock = useCallback( const getAvailableStock = useCallback(
(productWarehouseId: number) => { (productWarehouseId: number) => {
if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0; if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0;
if (!isResponseSuccess(stockProducts)) return 0; if (!isResponseSuccess(stockProducts)) return 0;
const productWarehouse = stockProducts.data.find( const data = stockProducts.data as unknown as ProductWarehouse[];
(pw) => pw.id === productWarehouseId const productWarehouse = data.find((pw) => pw.id === productWarehouseId);
);
return productWarehouse?.quantity ?? 0; return productWarehouse?.quantity ?? 0;
}, },
[stockProducts, type] [stockProducts, type]
@@ -915,9 +845,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
(productWarehouseId: number) => { (productWarehouseId: number) => {
if (!isResponseSuccess(stockProducts)) return null; if (!isResponseSuccess(stockProducts)) return null;
const productWarehouse = stockProducts.data.find( const data = stockProducts.data as unknown as ProductWarehouse[];
(pw) => pw.id === productWarehouseId const productWarehouse = data.find((pw) => pw.id === productWarehouseId);
);
if (!productWarehouse) return null; if (!productWarehouse) return null;
const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN'); const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
@@ -1002,9 +931,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
// ===== EVENT HANDLERS ===== // ===== EVENT HANDLERS =====
const locationChangeHandler = (val: OptionType | OptionType[] | null) => { const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedLocation(val as OptionType); const location = val as OptionType;
setSelectedLocation(location);
setSelectedProjectFlock(null); setSelectedProjectFlock(null);
setSelectedKandang(null); setSelectedKandang(null);
setSelectedProjectFlockLocationId(
location ? location.value.toString() : ''
);
formik.setFieldValue('project_flock_kandang', null); formik.setFieldValue('project_flock_kandang', null);
formik.setFieldValue('project_flock_kandang_id', 0); formik.setFieldValue('project_flock_kandang_id', 0);
}; };
@@ -1017,7 +950,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}; };
const kandangChangeHandler = (val: OptionType | OptionType[] | null) => { const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedKandang(val as OptionType); const kandang = val as OptionType;
setSelectedKandang(kandang);
if (selectedLocation && kandang) {
setStockProductsLocationId(selectedLocation.value.toString());
setStockProductsKandangId(kandang.value.toString());
setDepletionProductsLocationId(selectedLocation.value.toString());
setDepletionProductsKandangId(kandang.value.toString());
setEggProductsLocationId(selectedLocation.value.toString());
setEggProductsKandangId(kandang.value.toString());
} else {
setStockProductsLocationId('');
setStockProductsKandangId('');
setDepletionProductsLocationId('');
setDepletionProductsKandangId('');
setEggProductsLocationId('');
setEggProductsKandangId('');
}
formik.setFieldTouched('project_flock_kandang', true); formik.setFieldTouched('project_flock_kandang', true);
formik.setFieldTouched('project_flock_kandang_id', true); formik.setFieldTouched('project_flock_kandang_id', true);
}; };
@@ -1091,6 +1040,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
label: location.name || '', label: location.name || '',
}; };
setSelectedLocation(locationOption); setSelectedLocation(locationOption);
setSelectedProjectFlockLocationId(location.id.toString());
if (projectFlock) { if (projectFlock) {
const projectFlockOption = { const projectFlockOption = {
@@ -1106,6 +1056,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}; };
setSelectedKandang(kandangOption); setSelectedKandang(kandangOption);
setStockProductsLocationId(location.id.toString());
setStockProductsKandangId(kandang.id.toString());
setDepletionProductsLocationId(location.id.toString());
setDepletionProductsKandangId(kandang.id.toString());
setEggProductsLocationId(location.id.toString());
setEggProductsKandangId(kandang.id.toString());
if ( if (
formik.values.project_flock_kandang_id !== formik.values.project_flock_kandang_id !==
projectFlockKandangDetail.id projectFlockKandangDetail.id
@@ -1126,7 +1083,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}, [ }, [
projectFlockKandangDetail, projectFlockKandangDetail,
type, type,
projectFlockOptions, enhancedProjectFlockOptions,
formik.values.project_flock_kandang_id, formik.values.project_flock_kandang_id,
]); ]);
@@ -1415,23 +1372,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
label='Lokasi' label='Lokasi'
value={selectedLocation} value={selectedLocation}
onChange={locationChangeHandler} onChange={locationChangeHandler}
options={locationOptions} options={enhancedLocationOptions}
onInputChange={setLocationSearchValue} onInputChange={setLocationSearchValue}
isLoading={isLoadingLocations} isLoading={isLoadingLocations}
onMenuScrollToBottom={loadMoreLocations}
placeholder='Pilih Lokasi' placeholder='Pilih Lokasi'
isClearable isClearable
isSearchable isSearchable
/> />
<SelectInput <SelectInput
key={`project-flock-select-${selectedProjectFlock?.value || 'default'}-${projectFlockOptions.length}`} key={`project-flock-select-${selectedProjectFlock?.value || 'default'}-${enhancedProjectFlockOptions.length}`}
required required
label='Project Flock' label='Project Flock'
value={selectedProjectFlock} value={selectedProjectFlock}
onChange={projectFlockChangeHandler} onChange={projectFlockChangeHandler}
options={projectFlockOptions} options={enhancedProjectFlockOptions}
onInputChange={setProjectFlockSearchValue} onInputChange={setProjectFlockSearchValue}
isLoading={isLoadingProjectFlocks} isLoading={isLoadingProjectFlocks}
onMenuScrollToBottom={loadMoreProjectFlocks}
isDisabled={!selectedLocation} isDisabled={!selectedLocation}
placeholder={ placeholder={
selectedLocation selectedLocation