Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3230 | Rev 3254 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3230 Rev 3244
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { Controller, useForm } from 'react-hook-form'
 2 
import { Controller, useForm } from 'react-hook-form'
3 
import { Button, InputLabel } from '@mui/material'
 3 
import { Button, InputLabel } from '@mui/material'
4 
import Datetime from 'react-datetime'
 4 
import Datetime from 'react-datetime'
Línea -... Línea 5...
- 
 
 5 
 
5 
 
 6 
import Widget from '@components/UI/Widget'
6 
import Form from '@components/common/form'
 7 
import Form from '@components/common/form'
7 
import Input from '@components/UI/inputs/Input'
 8 
import Input from '@components/UI/inputs/Input'
8 
import Ckeditor from '@components/UI/Ckeditor'
 9 
import Ckeditor from '@components/UI/Ckeditor'
9 
import TagsInput from '@components/UI/TagsInput'
 10 
import TagsInput from '@components/UI/TagsInput'
Línea 27... Línea 28...
27 
    values,
 28 
    values,
28 
    mode: 'all'
 29 
    mode: 'all'
29 
  })
 30 
  })
Línea 30... Línea 31...
30 
 
 31 
 
- 
 
 32 
  return (
- 
 
 33 
    <Widget>
31 
  return (
 34 
      <Widget.Body>
32 
    <Form onSubmit={handleSubmit(onSubmit)}>
 35 
        <Form onSubmit={handleSubmit(onSubmit)}>
33 
      <LoadingWrapper loading={isSubmitting} displayChildren>
 36 
          <LoadingWrapper loading={isSubmitting} displayChildren>
34 
        <Input
 37 
            <Input
35 
          name='name'
 38 
              name='name'
36 
          label='Nombre'
 39 
              label='Nombre'
37 
          placeholder='Escribe el nombre de la meta'
 40 
              placeholder='Escribe el nombre de la meta'
38 
          control={control}
 41 
              control={control}
39 
          rules={{ required: 'El nombre es requerido' }}
 42 
              rules={{ required: 'El nombre es requerido' }}
40 
          error={errors.name?.message}
 43 
              error={errors.name?.message}
41 
        />
 44 
            />
42 
 
 45 
 
43 
        <Ckeditor
 46 
            <Ckeditor
44 
          label='Descripción'
 47 
              label='Descripción'
45 
          name='description'
 48 
              name='description'
46 
          control={control}
 49 
              control={control}
47 
          rules={{ required: 'La descripción es requerida' }}
 50 
              rules={{ required: 'La descripción es requerida' }}
48 
          error={errors.description?.message}
 51 
              error={errors.description?.message}
49 
        />
 52 
            />
50 
 
 53 
 
51 
        <Input
 54 
            <Input
52 
          type='number'
 55 
              type='number'
53 
          name='value'
 56 
              name='value'
54 
          label='Valor'
 57 
              label='Valor'
55 
          placeholder='Define el valor de la meta'
 58 
              placeholder='Define el valor de la meta'
56 
          control={control}
 59 
              control={control}
57 
          rules={{
 60 
              rules={{
58 
            required: { value: true, message: 'El valor es requerido' },
 61 
                required: { value: true, message: 'El valor es requerido' },
- 
 
 62 
                validate: {
59 
            validate: {
 63 
                  positive: (value) =>
60 
              positive: (value) => Number(value) > 0 || 'El valor mayor a cero',
 64 
                    Number(value) > 0 || 'El valor mayor a cero',
- 
 
 65 
                  max: (value) =>
61 
              max: (value) =>
 66 
                    Number(value) <= 100 ||
62 
                Number(value) <= 100 || 'El valor debe ser menor o igual a 100'
 67 
                    'El valor debe ser menor o igual a 100'
63 
            }
 68 
                }
64 
          }}
 69 
              }}
65 
          error={errors.value?.message}
 70 
              error={errors.value?.message}
66 
        />
 71 
            />
67 
 
 72 
 
68 
        <Controller
 73 
            <Controller
69 
          name='skill_id'
 74 
              name='skill_id'
70 
          control={control}
 75 
              control={control}
71 
          defaultValue={[]}
 76 
              defaultValue={[]}
72 
          render={({ field: { name, onChange } }) => (
 77 
              render={({ field: { name, onChange } }) => (
73 
            <>
 78 
                <>
74 
              <TagsInput
 79 
                  <TagsInput
75 
                name={name}
 80 
                    name={name}
76 
                label='Habitos'
 81 
                    label='Habitos'
77 
                onChange={onChange}
 82 
                    onChange={onChange}
78 
                suggestions={habits}
 83 
                    suggestions={habits}
79 
              />
 84 
                  />
80 
              {errors.skill_id && (
 85 
                  {errors.skill_id && (
81 
                <FormErrorFeedback>
 86 
                    <FormErrorFeedback>
82 
                  {errors.skill_id?.message}
 87 
                      {errors.skill_id?.message}
- 
 
 88 
                    </FormErrorFeedback>
- 
 
 89 
                  )}
83 
                </FormErrorFeedback>
 90 
                </>
84 
              )}
 91 
              )}
85 
            </>
 - 
 
86 
          )}
 - 
 
87 
        />
 92 
            />
88 
 
 93 
 
89 
        <Controller
 94 
            <Controller
90 
          name='start_date'
 95 
              name='start_date'
91 
          control={control}
 96 
              control={control}
92 
          rules={{
 97 
              rules={{
93 
            required: { value: true, message: 'La fecha es requerida' },
 98 
                required: { value: true, message: 'La fecha es requerida' },
94 
            validate: {
 99 
                validate: {
95 
              beGreaterThanToday: (value) =>
 100 
                  beGreaterThanToday: (value) =>
96 
                new Date(value) > new Date() ||
 101 
                    new Date(value) > new Date() ||
97 
                'La fecha debe ser mayor a la fecha actual'
 102 
                    'La fecha debe ser mayor a la fecha actual'
98 
            }
 103 
                }
99 
          }}
 104 
              }}
100 
          render={({ field: { onChange, ref, value, name } }) => (
 105 
              render={({ field: { onChange, ref, value, name } }) => (
101 
            <>
 106 
                <>
102 
              <InputLabel>Fecha de inicio</InputLabel>
 107 
                  <InputLabel>Fecha de inicio</InputLabel>
103 
              <Datetime
 108 
                  <Datetime
104 
                dateFormat='DD-MM-YYYY'
 109 
                    dateFormat='DD-MM-YYYY'
105 
                onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
 110 
                    onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
106 
                timeFormat={false}
 111 
                    timeFormat={false}
107 
                inputProps={{ className: 'form-control', ref, name }}
 112 
                    inputProps={{ className: 'form-control', ref, name }}
108 
                value={value}
 113 
                    value={value}
109 
                closeOnSelect
 114 
                    closeOnSelect
110 
              />
 115 
                  />
111 
              {errors.start_date && (
 116 
                  {errors.start_date && (
112 
                <FormErrorFeedback>
 117 
                    <FormErrorFeedback>
113 
                  {errors.start_date?.message}
 118 
                      {errors.start_date?.message}
- 
 
 119 
                    </FormErrorFeedback>
- 
 
 120 
                  )}
114 
                </FormErrorFeedback>
 121 
                </>
115 
              )}
 122 
              )}
116 
            </>
 - 
 
117 
          )}
 - 
 
118 
        />
 123 
            />
119 
 
 124 
 
120 
        <Controller
 125 
            <Controller
121 
          name='end_date'
 126 
              name='end_date'
122 
          control={control}
 127 
              control={control}
123 
          rules={{
 128 
              rules={{
124 
            required: { value: true, message: 'La fecha es requerida' },
 129 
                required: { value: true, message: 'La fecha es requerida' },
125 
            validate: (value, { start_date }) =>
 130 
                validate: (value, { start_date }) =>
126 
              new Date(value) > new Date(start_date) ||
 131 
                  new Date(value) > new Date(start_date) ||
127 
              'La fecha debe ser mayor a la fecha de inicio'
 132 
                  'La fecha debe ser mayor a la fecha de inicio'
128 
          }}
 133 
              }}
129 
          render={({ field: { onChange, name, ref, value } }) => (
 134 
              render={({ field: { onChange, name, ref, value } }) => (
130 
            <>
 135 
                <>
131 
              <InputLabel>Fecha de finalización</InputLabel>
 136 
                  <InputLabel>Fecha de finalización</InputLabel>
132 
              <Datetime
 137 
                  <Datetime
133 
                dateFormat='DD-MM-YYYY'
 138 
                    dateFormat='DD-MM-YYYY'
134 
                onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
 139 
                    onChange={(e) => onChange(e.format('YYYY-MM-DD'))}
135 
                timeFormat={false}
 140 
                    timeFormat={false}
136 
                inputProps={{ className: 'form-control', ref, name }}
 141 
                    inputProps={{ className: 'form-control', ref, name }}
137 
                value={value}
 142 
                    value={value}
138 
                closeOnSelect
 143 
                    closeOnSelect
139 
              />
 144 
                  />
140 
              {errors.end_date && (
 145 
                  {errors.end_date && (
141 
                <FormErrorFeedback>
 146 
                    <FormErrorFeedback>
142 
                  {errors.end_date?.message}
 147 
                      {errors.end_date?.message}
- 
 
 148 
                    </FormErrorFeedback>
- 
 
 149 
                  )}
143 
                </FormErrorFeedback>
 150 
                </>
144 
              )}
 151 
              )}
145 
            </>
 - 
 
146 
          )}
 - 
 
147 
        />
 152 
            />
148 
 
 153 
 
149 
        <Button type='submit' color='primary'>
 154 
            <Button type='submit' color='primary'>
150 
          Enviar
 155 
              Enviar
151 
        </Button>
 156 
            </Button>
152 
      </LoadingWrapper>
 157 
          </LoadingWrapper>
- 
 
 158 
        </Form>
- 
 
 159 
      </Widget.Body>
153 
    </Form>
 160 
    </Widget>
154 
  )
 161 
  )