mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 07:15:44 +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 */}
|
{/* Basic Info Card */}
|
||||||
<div className='card bg-base-100 shadow mb-4'>
|
<div className='card bg-base-100 shadow mb-4'>
|
||||||
<div className='card-body'>
|
<div className='card-body flex flex-col gap-6'>
|
||||||
<div className='flex gap-4'>
|
<h2 className='card-title'>Flock</h2>
|
||||||
{/*<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
|
<div className='flex flex-col gap-6'>
|
||||||
key={`coop-select-${formik.values.location_id || 'no-location'}`}
|
<div className='flex gap-4'>
|
||||||
required
|
{/*<SelectInput*/}
|
||||||
label='Kandang'
|
{/* required*/}
|
||||||
value={formik.values.coop ?? undefined}
|
{/* label='Flock'*/}
|
||||||
onChange={coopChangeHandler}
|
{/* value={*/}
|
||||||
options={coopOptions}
|
{/* formik.values.flock_id*/}
|
||||||
onInputChange={setCoopSelectInputValue}
|
{/* ? {*/}
|
||||||
isLoading={isLoadingCoops}
|
{/* value: formik.values.flock_id,*/}
|
||||||
isError={
|
{/* label: initialValues?.flock?.name,*/}
|
||||||
formik.touched.coop_id && Boolean(formik.errors.coop_id)
|
{/* }*/}
|
||||||
}
|
{/* : null*/}
|
||||||
errorMessage={formik.errors.coop_id as string}
|
{/* }*/}
|
||||||
isDisabled={type === 'detail' || !formik.values.location_id}
|
{/* onChange={(val) => {*/}
|
||||||
isClearable
|
{/* formik.setFieldValue(*/}
|
||||||
placeholder={
|
{/* 'flock_id',*/}
|
||||||
!formik.values.location_id
|
{/* (val as OptionType)?.value*/}
|
||||||
? 'Pilih lokasi terlebih dahulu'
|
{/* );*/}
|
||||||
: 'Pilih Kandang'
|
{/* }}*/}
|
||||||
}
|
{/* options={flockOptions}*/}
|
||||||
/>
|
{/* onInputChange={setFlockSelectInputValue}*/}
|
||||||
</div>{' '}
|
{/* 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user