Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3380 | Rev 3382 | 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}
3381 stevensc 81 
              dateFormat='DD-MM-YYYY'
3380 stevensc 82 
              parseFormat='MM-DD-YYYY'
3244 stevensc 83 
              rules={{
84 
                required: { value: true, message: 'La fecha es requerida' },
85 
                validate: {
3380 stevensc 86 
                  beGreaterThanToday: (value) => {
87 
                    console.log(value)
88 
 
89 
                    return (
3381 stevensc 90 
                      new Date(value).getTime() >=
91 
                        new Date().setHours(0, 0, 0, 0) ||
3380 stevensc 92 
                      'La fecha debe ser igual o mayor a la fecha actual'
93 
                    )
94 
                  }
3244 stevensc 95 
                }
96 
              }}
97 
            />
3223 stevensc 98 
 
3269 stevensc 99 
            <DatetimePicker
100 
              label='Fecha de finalización'
3244 stevensc 101 
              name='end_date'
102 
              control={control}
3381 stevensc 103 
              dateFormat='DD-MM-YYYY'
104 
              parseFormat='MM-DD-YYYY'
3244 stevensc 105 
              rules={{
106 
                required: { value: true, message: 'La fecha es requerida' },
107 
                validate: (value, { start_date }) =>
108 
                  new Date(value) > new Date(start_date) ||
109 
                  'La fecha debe ser mayor a la fecha de inicio'
110 
              }}
111 
            />
3211 stevensc 112 
 
3244 stevensc 113 
            <Button type='submit' color='primary'>
114 
              Enviar
115 
            </Button>
116 
          </LoadingWrapper>
117 
        </Form>
118 
      </Widget.Body>
119 
    </Widget>
3211 stevensc 120 
  )
121 
}