Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useForm } from 'react-hook-form'

import { Button } from '@mui/material'

import Widget from '@components/UI/Widget'

import Form from '@components/common/form'

import Input from '@components/UI/inputs/Input'

import Select from '@components/UI/inputs/Select'

import Ckeditor from '@components/common/ckeditor/Ckeditor'

import DatetimePicker from '@components/common/inputs/datetime-picker'

import LoadingWrapper from '@components/common/loading-wrapper'

export default function GoalForm({

  onSubmit = () => {},

  habits = [],

  defaultValues = {},

  values = {}

}) {

  const {

    control,

    handleSubmit,

    formState: { errors, isSubmitting }

  } = useForm({

    defaultValues,

    values

  })

  return (

    <Widget styles={{ overflow: 'visible' }}>

      <Widget.Body>

        <Form onSubmit={handleSubmit(onSubmit)}>

          <LoadingWrapper loading={isSubmitting} displayChildren>

            <Input

              name='name'

              label='Nombre'

              placeholder='Escribe el nombre de la meta'

              control={control}

              rules={{ required: 'El nombre es requerido' }}

              error={errors.name?.message}

            />

            <Ckeditor

              label='Descripción'

              name='description'

              control={control}

              rules={{ required: 'La descripción es requerida' }}

              error={errors.description?.message}

            />

            <Input

              type='number'

              name='value'

              label='Valor cuantitativo de la Meta a lograr'

              placeholder='Escribe el valor'

              control={control}

              rules={{

                required: { value: true, message: 'El valor es requerido' },

                validate: {

                  positive: (value) =>

                    Number(value) > 0 || 'El valor mayor a cero'

                }

              }}

              error={errors.value?.message}

            />

            <Select

              label='Hábitos y competencias para lograr la Meta'

              name='skill_id'

              control={control}

              options={habits}

              defaultValue={[]}

              rules={{ required: 'Por favor selecciona un hábito' }}

              error={errors.skill_id?.message}

              multiple

            />

            <DatetimePicker

              label='Fecha de inicio'

              name='start_date'

              control={control}

              parseFormat='MM-DD-YYYY'

              rules={{

                required: { value: true, message: 'La fecha es requerida' },

                validate: {

                  beGreaterThanToday: (value) => {

                    console.log(value)

                    return (

                      new Date(value).getDate() >= new Date().getDate() ||

                      'La fecha debe ser igual o mayor a la fecha actual'

                    )

                  }

                }

              }}

            />

            <DatetimePicker

              label='Fecha de finalización'

              name='end_date'

              control={control}

              rules={{

                required: { value: true, message: 'La fecha es requerida' },

                validate: (value, { start_date }) =>

                  new Date(value) > new Date(start_date) ||

                  'La fecha debe ser mayor a la fecha de inicio'

              }}

            />

            <Button type='submit' color='primary'>

              Enviar

            </Button>

          </LoadingWrapper>

        </Form>

      </Widget.Body>

    </Widget>

  )

}