mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-114): improve validation messages and update layout for better responsiveness
This commit is contained in:
rstubryan
@@ -52,7 +52,7 @@ export const RecordingFormSchema = Yup.object({
|
||||
feed_qty: Yup.mixed<number | ''>().notRequired(),
|
||||
feed_stock: Yup.number()
|
||||
.required('Jumlah pakan yang digunakan wajib diisi!')
|
||||
.min(1, 'Jumlah pakan minimal 1 kg!')
|
||||
.min(1, 'Jumlah pakan minimal 1!')
|
||||
.typeError('Jumlah pakan yang digunakan harus berupa angka!')
|
||||
.test(
|
||||
'is-not-exceed-qty',
|
||||
@@ -60,7 +60,12 @@ export const RecordingFormSchema = Yup.object({
|
||||
function (value) {
|
||||
const { feed_qty } = this.parent;
|
||||
if (value === undefined) return true;
|
||||
if (feed_qty === undefined || feed_qty === '' || typeof feed_qty !== 'number') return true;
|
||||
if (
|
||||
feed_qty === undefined ||
|
||||
feed_qty === '' ||
|
||||
typeof feed_qty !== 'number'
|
||||
)
|
||||
return true;
|
||||
return value <= feed_qty;
|
||||
}
|
||||
),
|
||||
@@ -102,7 +107,12 @@ export const RecordingFormSchema = Yup.object({
|
||||
function (value) {
|
||||
const { total_stock } = this.parent;
|
||||
if (value === undefined) return true;
|
||||
if (total_stock === undefined || total_stock === '' || typeof total_stock !== 'number') return true;
|
||||
if (
|
||||
total_stock === undefined ||
|
||||
total_stock === '' ||
|
||||
typeof total_stock !== 'number'
|
||||
)
|
||||
return true;
|
||||
return value <= total_stock;
|
||||
}
|
||||
),
|
||||
|
||||
@@ -477,7 +477,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-5xl'>
|
||||
<section className='w-full'>
|
||||
<FormHeader type={type} title='Recording' backUrl='/flock/recording' />
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
@@ -488,96 +488,92 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<div className='card-body flex flex-col gap-6'>
|
||||
<h2 className='card-title'>Recording Information</h2>
|
||||
|
||||
<div className='flex flex-col gap-6'>
|
||||
<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
|
||||
placeholder='Pilih lokasi terlebih dahulu'
|
||||
/>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
|
||||
<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
|
||||
placeholder='Pilih lokasi terlebih dahulu'
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label='Tanggal Recording'
|
||||
type='date'
|
||||
name='recording_date'
|
||||
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)
|
||||
: null;
|
||||
formik.setFieldValue('recording_date', 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>
|
||||
<TextInput
|
||||
required
|
||||
label='Tanggal Recording'
|
||||
type='date'
|
||||
name='recording_date'
|
||||
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)
|
||||
: null;
|
||||
formik.setFieldValue('recording_date', 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 className='flex gap-4'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Flock'
|
||||
value={formik.values.flock ?? undefined}
|
||||
onChange={flockChangeHandler}
|
||||
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' || !formik.values.location_id}
|
||||
isClearable
|
||||
placeholder={
|
||||
!formik.values.location_id
|
||||
? 'Pilih lokasi terlebih dahulu'
|
||||
: 'Pilih Flock'
|
||||
}
|
||||
/>
|
||||
<SelectInput
|
||||
required
|
||||
label='Flock'
|
||||
value={formik.values.flock ?? undefined}
|
||||
onChange={flockChangeHandler}
|
||||
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' || !formik.values.location_id}
|
||||
isClearable
|
||||
placeholder={
|
||||
!formik.values.location_id
|
||||
? 'Pilih lokasi terlebih dahulu'
|
||||
: 'Pilih Flock'
|
||||
}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
|
||||
required
|
||||
label='Kandang'
|
||||
value={formik.values.coop ?? undefined}
|
||||
onChange={coopChangeHandler}
|
||||
options={coopOptions}
|
||||
isError={
|
||||
formik.touched.coop_id && Boolean(formik.errors.coop_id)
|
||||
}
|
||||
errorMessage={formik.errors.coop_id as string}
|
||||
isDisabled={type === 'detail' || !selectedProjectFlock}
|
||||
isClearable
|
||||
placeholder={
|
||||
!selectedProjectFlock
|
||||
? 'Pilih flock terlebih dahulu'
|
||||
: 'Pilih Kandang'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<SelectInput
|
||||
key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
|
||||
required
|
||||
label='Kandang'
|
||||
value={formik.values.coop ?? undefined}
|
||||
onChange={coopChangeHandler}
|
||||
options={coopOptions}
|
||||
isError={
|
||||
formik.touched.coop_id && Boolean(formik.errors.coop_id)
|
||||
}
|
||||
errorMessage={formik.errors.coop_id as string}
|
||||
isDisabled={type === 'detail' || !selectedProjectFlock}
|
||||
isClearable
|
||||
placeholder={
|
||||
!selectedProjectFlock
|
||||
? 'Pilih flock terlebih dahulu'
|
||||
: 'Pilih Kandang'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -689,7 +685,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
wrapper:
|
||||
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
@@ -1074,7 +1071,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
productWarehouseId as number
|
||||
) ?? '')
|
||||
: '';
|
||||
|
||||
formik.setFieldValue(
|
||||
`vaccination.${idx}.vaccine`,
|
||||
val
|
||||
@@ -1111,7 +1107,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
wrapper:
|
||||
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
@@ -1306,6 +1303,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
options={RECORDING_FLAG_OPTIONS}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
className={{
|
||||
wrapper:
|
||||
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Reference in New Issue
Block a user