Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3262 | Rev 3335 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3211 stevensc 1 
import React from 'react'
3269 stevensc 2 
import { useForm } from 'react-hook-form'
3 
import { Button } from '@mui/material'
3211 stevensc 4 
 
3244 stevensc 5 
import Widget from '@components/UI/Widget'
3211 stevensc 6 
import Form from '@components/common/form'
7 
import Input from '@components/UI/inputs/Input'
3269 stevensc 8 
import Select from '@components/UI/inputs/Select'
9 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
10 
import DatetimePicker from '@components/common/inputs/datetime-picker'
3211 stevensc 11 
import LoadingWrapper from '@components/common/loading-wrapper'
12 
 
13 
export default function GoalForm({
14 
  onSubmit = () => {},
3217 stevensc 15 
  habits = [],
3211 stevensc 16 
  defaultValues = {},
17 
  values = {}
18 
}) {
19 
  const {
20 
    control,
21 
    handleSubmit,
22 
    formState: { errors, isSubmitting }
23 
  } = useForm({
3230 stevensc 24 
    defaultValues,
3254 stevensc 25 
    values
3211 stevensc 26 
  })
27 
 
28 
  return (
3254 stevensc 29 
    <Widget styles={{ overflow: 'visible' }}>
3244 stevensc 30 
      <Widget.Body>
31 
        <Form onSubmit={handleSubmit(onSubmit)}>
32 
          <LoadingWrapper loading={isSubmitting} displayChildren>
33 
            <Input
34 
              name='name'
35 
              label='Nombre'
36 
              placeholder='Escribe el nombre de la meta'
37 
              control={control}
38 
              rules={{ required: 'El nombre es requerido' }}
39 
              error={errors.name?.message}
40 
            />
3211 stevensc 41 
 
3244 stevensc 42 
            <Ckeditor
43 
              label='Descripción'
44 
              name='description'
45 
              control={control}
46 
              rules={{ required: 'La descripción es requerida' }}
47 
              error={errors.description?.message}
48 
            />
3211 stevensc 49 
 
3244 stevensc 50 
            <Input
51 
              type='number'
52 
              name='value'
3262 stevensc 53 
              label='Valor cuantitativo de la Meta a lograr'
54 
              placeholder='Escribe el valor'
3244 stevensc 55 
              control={control}
56 
              rules={{
57 
                required: { value: true, message: 'El valor es requerido' },
58 
                validate: {
59 
                  positive: (value) =>
60 
                    Number(value) > 0 || 'El valor mayor a cero',
61 
                  max: (value) =>
62 
                    Number(value) <= 100 ||
63 
                    'El valor debe ser menor o igual a 100'
64 
                }
65 
              }}
66 
              error={errors.value?.message}
67 
            />
3211 stevensc 68 
 
3269 stevensc 69 
            <Select
70 
              label='Hábitos y competencias para lograr la Meta'
3244 stevensc 71 
              name='skill_id'
72 
              control={control}
3269 stevensc 73 
              options={habits}
3244 stevensc 74 
              defaultValue={[]}
3269 stevensc 75 
              error={errors.skill_id?.message}
3244 stevensc 76 
            />
3211 stevensc 77 
 
3269 stevensc 78 
            <DatetimePicker
79 
              label='Fecha de inicio'
3244 stevensc 80 
              name='start_date'
81 
              control={control}
82 
              rules={{
83 
                required: { value: true, message: 'La fecha es requerida' },
84 
                validate: {
85 
                  beGreaterThanToday: (value) =>
86 
                    new Date(value) > new Date() ||
87 
                    'La fecha debe ser mayor a la fecha actual'
88 
                }
89 
              }}
90 
            />
3223 stevensc 91 
 
3269 stevensc 92 
            <DatetimePicker
93 
              label='Fecha de finalización'
3244 stevensc 94 
              name='end_date'
95 
              control={control}
96 
              rules={{
97 
                required: { value: true, message: 'La fecha es requerida' },
98 
                validate: (value, { start_date }) =>
99 
                  new Date(value) > new Date(start_date) ||
100 
                  'La fecha debe ser mayor a la fecha de inicio'
101 
              }}
102 
            />
3211 stevensc 103 
 
3244 stevensc 104 
            <Button type='submit' color='primary'>
105 
              Enviar
106 
            </Button>
107 
          </LoadingWrapper>
108 
        </Form>
109 
      </Widget.Body>
110 
    </Widget>
3211 stevensc 111 
  )
112 
}