mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-114): enhance layout and structure of RecordingForm component
This commit is contained in:
rstubryan
@@ -346,125 +346,129 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
>
|
||||
{/* Basic Info Card */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<div className='flex gap-4'>
|
||||
{/*<SelectInput*/}
|
||||
{/* required*/}
|
||||
{/* label='Flock'*/}
|
||||
{/* value={*/}
|
||||
{/* formik.values.flock_id*/}
|
||||
{/* ? {*/}
|
||||
{/* value: formik.values.flock_id,*/}
|
||||
{/* label: initialValues?.flock?.name,*/}
|
||||
{/* }*/}
|
||||
{/* : null*/}
|
||||
{/* }*/}
|
||||
{/* onChange={(val) => {*/}
|
||||
{/* formik.setFieldValue(*/}
|
||||
{/* 'flock_id',*/}
|
||||
{/* (val as OptionType)?.value*/}
|
||||
{/* );*/}
|
||||
{/* }}*/}
|
||||
{/* options={flockOptions}*/}
|
||||
{/* onInputChange={setFlockSelectInputValue}*/}
|
||||
{/* isLoading={isLoadingFlocks}*/}
|
||||
{/* isError={*/}
|
||||
{/* formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
|
||||
{/* }*/}
|
||||
{/* errorMessage={formik.errors.flock_id as string}*/}
|
||||
{/* isDisabled={type === 'detail'}*/}
|
||||
{/* isClearable*/}
|
||||
{/*/>*/}
|
||||
<SelectInput
|
||||
required
|
||||
label='Flock'
|
||||
value={formik.values.flock ?? undefined}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('flock', val);
|
||||
formik.setFieldValue(
|
||||
'flock_id',
|
||||
(val as OptionType)?.value
|
||||
);
|
||||
}}
|
||||
options={flockOptions}
|
||||
onInputChange={(val) => {
|
||||
return val;
|
||||
}}
|
||||
isLoading={false}
|
||||
isError={
|
||||
formik.touched.flock_id && Boolean(formik.errors.flock_id)
|
||||
}
|
||||
errorMessage={formik.errors.flock_id as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label='Tanggal Recording'
|
||||
type='date'
|
||||
name='tanggal_recording'
|
||||
value={
|
||||
formik.values.recording_date instanceof Date
|
||||
? formik.values.recording_date
|
||||
.toISOString()
|
||||
.substring(0, 10)
|
||||
: ''
|
||||
}
|
||||
onChange={(e) => {
|
||||
const date = e.target.value
|
||||
? new Date(e.target.value)
|
||||
: new Date();
|
||||
formik.setFieldValue('tanggal_recording', date);
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.recording_date &&
|
||||
Boolean(formik.errors.recording_date)
|
||||
}
|
||||
errorMessage={formik.errors.recording_date as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Lokasi'
|
||||
value={formik.values.location ?? undefined}
|
||||
onChange={locationChangeHandler}
|
||||
options={locationOptions}
|
||||
onInputChange={setLocationSelectInputValue}
|
||||
isLoading={isLoadingLocations}
|
||||
isError={
|
||||
formik.touched.location_id &&
|
||||
Boolean(formik.errors.location_id)
|
||||
}
|
||||
errorMessage={formik.errors.location_id as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
<div className='card-body flex flex-col gap-6'>
|
||||
<h2 className='card-title'>Flock</h2>
|
||||
|
||||
<SelectInput
|
||||
key={`coop-select-${formik.values.location_id || 'no-location'}`}
|
||||
required
|
||||
label='Kandang'
|
||||
value={formik.values.coop ?? undefined}
|
||||
onChange={coopChangeHandler}
|
||||
options={coopOptions}
|
||||
onInputChange={setCoopSelectInputValue}
|
||||
isLoading={isLoadingCoops}
|
||||
isError={
|
||||
formik.touched.coop_id && Boolean(formik.errors.coop_id)
|
||||
}
|
||||
errorMessage={formik.errors.coop_id as string}
|
||||
isDisabled={type === 'detail' || !formik.values.location_id}
|
||||
isClearable
|
||||
placeholder={
|
||||
!formik.values.location_id
|
||||
? 'Pilih lokasi terlebih dahulu'
|
||||
: 'Pilih Kandang'
|
||||
}
|
||||
/>
|
||||
</div>{' '}
|
||||
<div className='flex flex-col gap-6'>
|
||||
<div className='flex gap-4'>
|
||||
{/*<SelectInput*/}
|
||||
{/* required*/}
|
||||
{/* label='Flock'*/}
|
||||
{/* value={*/}
|
||||
{/* formik.values.flock_id*/}
|
||||
{/* ? {*/}
|
||||
{/* value: formik.values.flock_id,*/}
|
||||
{/* label: initialValues?.flock?.name,*/}
|
||||
{/* }*/}
|
||||
{/* : null*/}
|
||||
{/* }*/}
|
||||
{/* onChange={(val) => {*/}
|
||||
{/* formik.setFieldValue(*/}
|
||||
{/* 'flock_id',*/}
|
||||
{/* (val as OptionType)?.value*/}
|
||||
{/* );*/}
|
||||
{/* }}*/}
|
||||
{/* options={flockOptions}*/}
|
||||
{/* onInputChange={setFlockSelectInputValue}*/}
|
||||
{/* isLoading={isLoadingFlocks}*/}
|
||||
{/* isError={*/}
|
||||
{/* formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
|
||||
{/* }*/}
|
||||
{/* errorMessage={formik.errors.flock_id as string}*/}
|
||||
{/* isDisabled={type === 'detail'}*/}
|
||||
{/* isClearable*/}
|
||||
{/*/>*/}
|
||||
<SelectInput
|
||||
required
|
||||
label='Flock'
|
||||
value={formik.values.flock ?? undefined}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('flock', val);
|
||||
formik.setFieldValue(
|
||||
'flock_id',
|
||||
(val as OptionType)?.value
|
||||
);
|
||||
}}
|
||||
options={flockOptions}
|
||||
onInputChange={(val) => {
|
||||
return val;
|
||||
}}
|
||||
isLoading={false}
|
||||
isError={
|
||||
formik.touched.flock_id && Boolean(formik.errors.flock_id)
|
||||
}
|
||||
errorMessage={formik.errors.flock_id as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label='Tanggal Recording'
|
||||
type='date'
|
||||
name='tanggal_recording'
|
||||
value={
|
||||
formik.values.recording_date instanceof Date
|
||||
? formik.values.recording_date
|
||||
.toISOString()
|
||||
.substring(0, 10)
|
||||
: ''
|
||||
}
|
||||
onChange={(e) => {
|
||||
const date = e.target.value
|
||||
? new Date(e.target.value)
|
||||
: new Date();
|
||||
formik.setFieldValue('tanggal_recording', date);
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.recording_date &&
|
||||
Boolean(formik.errors.recording_date)
|
||||
}
|
||||
errorMessage={formik.errors.recording_date as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex gap-4'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Lokasi'
|
||||
value={formik.values.location ?? undefined}
|
||||
onChange={locationChangeHandler}
|
||||
options={locationOptions}
|
||||
onInputChange={setLocationSelectInputValue}
|
||||
isLoading={isLoadingLocations}
|
||||
isError={
|
||||
formik.touched.location_id &&
|
||||
Boolean(formik.errors.location_id)
|
||||
}
|
||||
errorMessage={formik.errors.location_id as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
key={`coop-select-${formik.values.location_id || 'no-location'}`}
|
||||
required
|
||||
label='Kandang'
|
||||
value={formik.values.coop ?? undefined}
|
||||
onChange={coopChangeHandler}
|
||||
options={coopOptions}
|
||||
onInputChange={setCoopSelectInputValue}
|
||||
isLoading={isLoadingCoops}
|
||||
isError={
|
||||
formik.touched.coop_id && Boolean(formik.errors.coop_id)
|
||||
}
|
||||
errorMessage={formik.errors.coop_id as string}
|
||||
isDisabled={type === 'detail' || !formik.values.location_id}
|
||||
isClearable
|
||||
placeholder={
|
||||
!formik.values.location_id
|
||||
? 'Pilih lokasi terlebih dahulu'
|
||||
: 'Pilih Kandang'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user