diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx index a133e437..8d145ca8 100644 --- a/src/components/pages/flock/recording/form/RecordingForm.tsx +++ b/src/components/pages/flock/recording/form/RecordingForm.tsx @@ -74,7 +74,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { recording_date: values.recording_date instanceof Date ? values.recording_date.toISOString() - : new Date().toISOString(), + : '', feed_data: (values.feed_data ?? []).map((p) => ({ feed_name: p.feed_name, feed_qty: p.feed_qty, @@ -119,11 +119,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { const flockOptions = DUMMY_FLOCKS; - // Location and Coop state/handlers const [locationSelectInputValue, setLocationSelectInputValue] = useState(''); const [coopSelectInputValue, setCoopSelectInputValue] = useState(''); - // Location fetch const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue ?? '' }).toString()}`; const { data: locations, isLoading: isLoadingLocations } = useSWR( locationsUrl, @@ -133,14 +131,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { ? locations?.data.map((loc) => ({ value: loc.id, label: loc.name })) : []; - // Coop fetch const coopsUrl = `${KandangApi.basePath}?${new URLSearchParams({ search: coopSelectInputValue ?? '' }).toString()}`; const { data: coops, isLoading: isLoadingCoops } = useSWR( coopsUrl, KandangApi.getAllFetcher ); - // Filter coop options based on selected location const coopOptions = useMemo(() => { if (!isResponseSuccess(coops) || !formik.values.location_id) return []; return coops.data @@ -148,14 +144,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { .map((coop) => ({ value: coop.id, label: coop.name })); }, [coops, formik.values.location_id]); - // Handlers const locationChangeHandler = (val: OptionType | OptionType[] | null) => { const locationValue = (val as OptionType)?.value; formik.setFieldValue('location', val); formik.setFieldValue('location_id', locationValue || 0); - // Only set touched if there's a value if (locationValue) { formik.setFieldTouched('location', true); formik.setFieldTouched('location_id', true); @@ -164,7 +158,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { formik.setFieldTouched('location_id', false); } - // Reset coop selection when location changes or is cleared formik.setFieldValue('coop', null); formik.setFieldValue('coop_id', 0); formik.setFieldTouched('coop', false); @@ -178,7 +171,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { formik.setFieldValue('coop', val); formik.setFieldValue('coop_id', coopValue || 0); - // Only set touched if there's a value if (coopValue) { formik.setFieldTouched('coop', true); formik.setFieldTouched('coop_id', true); @@ -229,6 +221,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { }; }; + const flockChangeHandler = (val: OptionType | OptionType[] | null) => { + const flockValue = (val as OptionType)?.value; + + formik.setFieldValue('flock', val); + formik.setFieldValue('flock_id', flockValue || 0); + + if (flockValue) { + formik.setFieldTouched('flock', true); + formik.setFieldTouched('flock_id', true); + } else { + formik.setFieldTouched('flock', false); + formik.setFieldTouched('flock_id', false); + } + }; + const addFeedData = () => { const newFeedData = [ ...(formik.values.feed_data || []), @@ -382,17 +389,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { required label='Flock' value={formik.values.flock ?? undefined} - onChange={(val) => { - formik.setFieldValue('flock', val); - formik.setFieldValue( - 'flock_id', - (val as OptionType)?.value - ); - }} + onChange={flockChangeHandler} options={flockOptions} - onInputChange={(val) => { - return val; - }} + onInputChange={setFlockSelectInputValue} isLoading={false} isError={ formik.touched.flock_id && Boolean(formik.errors.flock_id) @@ -405,7 +404,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { required label='Tanggal Recording' type='date' - name='tanggal_recording' + name='recording_date' value={ formik.values.recording_date instanceof Date ? formik.values.recording_date @@ -416,8 +415,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { onChange={(e) => { const date = e.target.value ? new Date(e.target.value) - : new Date(); - formik.setFieldValue('tanggal_recording', date); + : null; + formik.setFieldValue('recording_date', date); }} onBlur={formik.handleBlur} isError={ @@ -1129,6 +1128,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { } options={RECORDING_FLAG_OPTIONS} isDisabled={type === 'detail'} + isClearable />