Rev 3325 | Rev 3328 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import { useForm } from 'react-hook-form'
import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'
import Button from '@components/UI/buttons/Buttons'
import Ckeditor from '@components/common/ckeditor/Ckeditor'
import LoadingWrapper from '@components/common/loading-wrapper'
import DatetimePicker from '@components/common/inputs/datetime-picker'
function ProgressForm({
onSubmit = () => {},
defaultValues = {
date: null,
quantitative_value: 0,
qualitative_description: ''
},
values = {}
}) {
const {
control,
formState: { errors, isSubmitting },
handleSubmit
} = useForm({
defaultValues,
values: values ?? { ...values, date: new Date(values.date) }
})
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<LoadingWrapper loading={isSubmitting} displayChildren>
<Input
control={control}
label='Valor cuantitativo:'
name='quantitative_value'
type='number'
rules={{ required: 'El valor es requerido' }}
error={errors.quantitative_value?.message}
/>
<Ckeditor
control={control}
name='qualitative_description'
error={errors.qualitative_description?.message}
rules={{ required: 'La descripción es requerida' }}
label='Descripción cualitativa:'
/>
<DatetimePicker
label='Fecha'
name='date'
control={control}
rules={{
required: { value: true, message: 'La fecha es requerida' },
validate: {
beGreaterThanToday: (value) =>
new Date(value) > new Date() ||
'La fecha debe ser mayor a la fecha actual'
}
}}
displayTime
parseFormat='YYYY-MM-DD HH:mm:ss'
/>
<Button color='primary' type='submit'>
Enviar
</Button>
</LoadingWrapper>
</Form>
)
}
export default ProgressForm