Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3329 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3329 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form';
3 
 
 3 
 
4 
import Form from '@components/common/form'
 4 
import Form from '@components/common/form';
5 
import Input from '@components/UI/inputs/Input'
 5 
import Input from '@components/UI/inputs/Input';
6 
import Button from '@components/UI/buttons/Buttons'
 6 
import Button from '@components/UI/buttons/Buttons';
7 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
 7 
import Ckeditor from '@components/common/ckeditor/Ckeditor';
8 
import LoadingWrapper from '@components/common/loading-wrapper'
 8 
import LoadingWrapper from '@components/common/loading-wrapper';
9 
import DatetimePicker from '@components/common/inputs/datetime-picker'
 9 
import DatetimePicker from '@components/common/inputs/datetime-picker';
10 
 
 10 
 
11 
function ProgressForm({
 11 
function ProgressForm({
12 
  onSubmit = () => {},
 12 
  onSubmit = () => {},
13 
  defaultValues = {
 13 
  defaultValues = {
14 
    date: null,
 14 
    date: null,
15 
    quantitative_value: 0,
 15 
    quantitative_value: 0,
16 
    qualitative_description: ''
 16 
    qualitative_description: ''
17 
  },
 17 
  },
18 
  values = {}
 18 
  values = {}
19 
}) {
 19 
}) {
20 
  const {
 20 
  const {
21 
    control,
 21 
    control,
22 
    formState: { errors, isSubmitting },
 22 
    formState: { errors, isSubmitting },
23 
    watch,
 23 
    watch,
24 
    handleSubmit
 24 
    handleSubmit
25 
  } = useForm({
 25 
  } = useForm({
26 
    defaultValues,
 26 
    defaultValues,
27 
    values
 27 
    values
28 
  })
 28 
  });
29 
  const watchedDate = watch('date', new Date())
 29 
  const watchedDate = watch('date', new Date());
30 
 
 30 
 
31 
  return (
 31 
  return (
32 
    <Form onSubmit={handleSubmit(onSubmit)}>
 32 
    <Form onSubmit={handleSubmit(onSubmit)}>
33 
      <LoadingWrapper loading={isSubmitting} displayChildren>
 33 
      <LoadingWrapper loading={isSubmitting} displayChildren>
34 
        <Input
 34 
        <Input
35 
          control={control}
 35 
          control={control}
36 
          label='Valor cuantitativo:'
 36 
          label='Valor cuantitativo:'
37 
          name='quantitative_value'
 37 
          name='quantitative_value'
38 
          type='number'
 38 
          type='number'
39 
          rules={{ required: 'El valor es requerido' }}
 39 
          rules={{ required: 'El valor es requerido' }}
40 
          error={errors.quantitative_value?.message}
 40 
          error={errors.quantitative_value?.message}
41 
        />
 41 
        />
42 
 
 42 
 
43 
        <Ckeditor
 43 
        <Ckeditor
44 
          control={control}
 44 
          control={control}
45 
          name='qualitative_description'
 45 
          name='qualitative_description'
46 
          error={errors.qualitative_description?.message}
 46 
          error={errors.qualitative_description?.message}
47 
          rules={{ required: 'La descripción es requerida' }}
 47 
          rules={{ required: 'La descripción es requerida' }}
48 
          label='Descripción cualitativa:'
 48 
          label='Descripción cualitativa:'
49 
        />
 49 
        />
50 
 
 50 
 
51 
        <DatetimePicker
 51 
        <DatetimePicker
52 
          label='Fecha'
 52 
          label='Fecha'
53 
          name='date'
 53 
          name='date'
54 
          control={control}
 54 
          control={control}
55 
          defaultValue={new Date(watchedDate)}
 55 
          defaultValue={new Date(watchedDate)}
56 
          rules={{
 56 
          rules={{
57 
            required: { value: true, message: 'La fecha es requerida' },
 57 
            required: { value: true, message: 'La fecha es requerida' },
58 
            validate: {
 58 
            validate: {
59 
              beGreaterThanToday: (value) =>
 59 
              beGreaterThanToday: (value) =>
60 
                new Date(value) > new Date() ||
 - 
 
61 
                'La fecha debe ser mayor a la fecha actual'
 60 
                new Date(value) > new Date() || 'La fecha debe ser mayor a la fecha actual'
62 
            }
 61 
            }
63 
          }}
 62 
          }}
64 
          displayTime
 63 
          displayTime
65 
          parseFormat='YYYY-MM-DD HH:mm:ss'
 64 
          parseFormat='YYYY-MM-DD HH:mm:ss'
66 
        />
 65 
        />
67 
 
 66 
 
68 
        <Button color='primary' type='submit'>
 67 
        <Button color='primary' type='submit'>
69 
          Enviar
 68 
          Enviar
70 
        </Button>
 69 
        </Button>
71 
      </LoadingWrapper>
 70 
      </LoadingWrapper>
72 
    </Form>
 71 
    </Form>
73 
  )
 72 
  );
74 
}
 73 
}
75 
 
 74 
 
76 
export default ProgressForm
 75 
export default ProgressForm;