Proyectos de Subversion LeadersLinked - SPA

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