Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3383 | Rev 3385 | 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) =>
3335 stevensc 60 
                    Number(value) > 0 || 'El valor mayor a cero'
3244 stevensc 61 
                }
62 
              }}
63 
              error={errors.value?.message}
64 
            />
3211 stevensc 65 
 
3269 stevensc 66 
            <Select
67 
              label='Hábitos y competencias para lograr la Meta'
3244 stevensc 68 
              name='skill_id'
69 
              control={control}
3269 stevensc 70 
              options={habits}
3244 stevensc 71 
              defaultValue={[]}
3376 stevensc 72 
              rules={{ required: 'Por favor selecciona un hábito' }}
3269 stevensc 73 
              error={errors.skill_id?.message}
3376 stevensc 74 
              multiple
3244 stevensc 75 
            />
3211 stevensc 76 
 
3269 stevensc 77 
            <DatetimePicker
78 
              label='Fecha de inicio'
3244 stevensc 79 
              name='start_date'
80 
              control={control}
81 
              rules={{
82 
                required: { value: true, message: 'La fecha es requerida' },
83 
                validate: {
3384 stevensc 84 
                  beEqualOrGreaterThanToday: (date) => {
85 
                    const selectedDate = new Date(date + 'T00:00:00')
3383 stevensc 86 
                    const today = new Date()
87 
                    today.setHours(0, 0, 0, 0)
88 
 
89 
                    return (
3384 stevensc 90 
                      selectedDate >= today ||
91 
                      'La fecha debe ser mayor o igual a hoy'
3383 stevensc 92 
                    )
93 
                  }
3244 stevensc 94 
                }
95 
              }}
96 
            />
3223 stevensc 97 
 
3269 stevensc 98 
            <DatetimePicker
99 
              label='Fecha de finalización'
3244 stevensc 100 
              name='end_date'
101 
              control={control}
102 
              rules={{
103 
                required: { value: true, message: 'La fecha es requerida' },
3384 stevensc 104 
                validate: (value, { start_date }) => {
105 
                  const startDate = new Date(start_date + 'T00:00:00')
106 
                  const endDate = new Date(value + 'T00:00:00')
107 
 
108 
                  return (
109 
                    endDate >= startDate ||
110 
                    'La fecha debe ser mayor o igual a la fecha de inicio'
111 
                  )
112 
                }
3244 stevensc 113 
              }}
114 
            />
3211 stevensc 115 
 
3244 stevensc 116 
            <Button type='submit' color='primary'>
117 
              Enviar
118 
            </Button>
119 
          </LoadingWrapper>
120 
        </Form>
121 
      </Widget.Body>
122 
    </Widget>
3211 stevensc 123 
  )
124 
}