Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3385 Rev 3389
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React, { useState } from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
3 
import { Button } from '@mui/material'
 3 
import { Button, Tab, Tabs } from '@mui/material'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import Widget from '@components/UI/Widget'
 5 
import Widget from '@components/UI/Widget'
6 
import Form from '@components/common/form'
 6 
import Form from '@components/common/form'
7 
import Input from '@components/UI/inputs/Input'
 7 
import Input from '@components/UI/inputs/Input'
- 
 
 8 
import Select from '@components/UI/inputs/Select'
8 
import Select from '@components/UI/inputs/Select'
 9 
import TabPanel from '@components/common/tab-panel'
9 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
 10 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
10 
import DatetimePicker from '@components/common/inputs/datetime-picker'
 11 
import DatetimePicker from '@components/common/inputs/datetime-picker'
Línea -... Línea 12...
- 
 
 12 
import LoadingWrapper from '@components/common/loading-wrapper'
- 
 
 13 
 
- 
 
 14 
const FormTabPanel = styled(TabPanel)(({ theme }) => ({
- 
 
 15 
  display: 'flex',
- 
 
 16 
  flexDirection: 'column',
- 
 
 17 
  width: '100%',
- 
 
 18 
  gap: theme.spacing(0.5)
11 
import LoadingWrapper from '@components/common/loading-wrapper'
 19 
}))
12 
 
 20 
 
13 
export default function GoalForm({
 21 
export default function GoalForm({
14 
  onSubmit = () => {},
 22 
  onSubmit = () => {},
15 
  habits = [],
 23 
  habits = [],
16 
  defaultValues = {},
 24 
  defaultValues = {},
- 
 
 25 
  values = {}
- 
 
 26 
}) {
17 
  values = {}
 27 
  const [currentTab, setCurrentTab] = useState(0)
18 
}) {
 28 
 
19 
  const {
 29 
  const {
20 
    control,
 30 
    control,
- 
 
 31 
    handleSubmit,
21 
    handleSubmit,
 32 
    formState: { errors, isSubmitting },
22 
    formState: { errors, isSubmitting }
 33 
    trigger
23 
  } = useForm({
 34 
  } = useForm({
24 
    defaultValues,
 35 
    defaultValues,
Línea -... Línea 36...
- 
 
 36 
    values
- 
 
 37 
  })
- 
 
 38 
 
- 
 
 39 
  const handleChange = async (event, newValue) => {
- 
 
 40 
    const valid = await trigger()
- 
 
 41 
    if (valid) setCurrentTab(newValue)
- 
 
 42 
  }
- 
 
 43 
 
- 
 
 44 
  const nextStep = async () => {
- 
 
 45 
    const valid = await trigger()
25 
    values
 46 
    if (valid) setCurrentTab(currentTab + 1)
26 
  })
 47 
  }
- 
 
 48 
 
- 
 
 49 
  return (
- 
 
 50 
    <Widget styles={{ overflow: 'visible' }}>
- 
 
 51 
      <Tabs value={currentTab} onChange={handleChange}>
- 
 
 52 
        <Tab label='Detalles' />
- 
 
 53 
        <Tab label='Frecuencia' />
27 
 
 54 
        <Tab label='Valor' />
28 
  return (
 55 
      </Tabs>
29 
    <Widget styles={{ overflow: 'visible' }}>
 56 
 
- 
 
 57 
      <Widget.Body>
30 
      <Widget.Body>
 58 
        <Form onSubmit={handleSubmit(onSubmit)}>
31 
        <Form onSubmit={handleSubmit(onSubmit)}>
 59 
          <LoadingWrapper loading={isSubmitting} displayChildren>
32 
          <LoadingWrapper loading={isSubmitting} displayChildren>
 60 
            <FormTabPanel value={0} index={currentTab}>
33 
            <Input
 61 
              <Input
34 
              name='name'
 62 
                name='name'
35 
              label='Nombre'
 63 
                label='Nombre'
36 
              placeholder='Escribe el nombre de la meta'
 64 
                placeholder='Escribe el nombre de la meta'
37 
              control={control}
 65 
                control={control}
38 
              rules={{ required: 'El nombre es requerido' }}
 66 
                rules={{ required: 'El nombre es requerido' }}
39 
              error={errors.name?.message}
 67 
                error={errors.name?.message}
40 
            />
 68 
              />
41 
 
 69 
 
42 
            <Ckeditor
 70 
              <Ckeditor
43 
              label='Descripción'
 71 
                label='Descripción'
44 
              name='description'
 72 
                name='description'
45 
              control={control}
 73 
                control={control}
46 
              rules={{ required: 'La descripción es requerida' }}
 74 
                rules={{ required: 'La descripción es requerida' }}
- 
 
 75 
                error={errors.description?.message}
- 
 
 76 
              />
- 
 
 77 
 
- 
 
 78 
              <Button color='primary' onClick={nextStep}>
- 
 
 79 
                Continuar
- 
 
 80 
              </Button>
47 
              error={errors.description?.message}
 81 
            </FormTabPanel>
48 
            />
 82 
 
49 
 
 83 
            <FormTabPanel value={1} index={currentTab}>
50 
            <Input
 84 
              <Input
51 
              type='number'
 85 
                type='number'
52 
              name='value'
 86 
                name='value'
53 
              label='Valor cuantitativo de la Meta a lograr'
 87 
                label='Valor cuantitativo de la Meta a lograr'
54 
              placeholder='Escribe el valor'
 88 
                placeholder='Escribe el valor'
55 
              control={control}
 89 
                control={control}
56 
              rules={{
 90 
                rules={{
57 
                required: { value: true, message: 'El valor es requerido' },
 91 
                  required: { value: true, message: 'El valor es requerido' },
58 
                validate: {
 92 
                  validate: {
59 
                  positive: (value) =>
 93 
                    positive: (value) =>
60 
                    Number(value) > 0 || 'El valor mayor a cero'
 94 
                      Number(value) > 0 || 'El valor mayor a cero'
61 
                }
 95 
                  }
62 
              }}
 96 
                }}
63 
              error={errors.value?.message}
 97 
                error={errors.value?.message}
64 
            />
 98 
              />
65 
 
 99 
 
66 
            <Select
 100 
              <Select
67 
              label='Hábitos y competencias para lograr la Meta'
 101 
                label='Hábitos y competencias para lograr la Meta'
68 
              name='skill_id'
 102 
                name='skill_id'
69 
              control={control}
 103 
                control={control}
70 
              options={habits}
 104 
                options={habits}
71 
              defaultValue={[]}
 105 
                defaultValue={[]}
72 
              rules={{ required: 'Por favor selecciona un hábito' }}
 106 
                rules={{ required: 'Por favor selecciona un hábito' }}
- 
 
 107 
                error={errors.skill_id?.message}
- 
 
 108 
                multiple
- 
 
 109 
              />
- 
 
 110 
 
- 
 
 111 
              <Button color='primary' onClick={nextStep}>
73 
              error={errors.skill_id?.message}
 112 
                Continuar
- 
 
 113 
              </Button>
74 
              multiple
 114 
            </FormTabPanel>
75 
            />
 115 
 
76 
 
 116 
            <FormTabPanel value={2} index={currentTab}>
77 
            <DatetimePicker
 117 
              <DatetimePicker
78 
              label='Fecha de inicio'
 118 
                label='Fecha de inicio'
79 
              name='start_date'
 119 
                name='start_date'
80 
              control={control}
 120 
                control={control}
81 
              rules={{
 121 
                rules={{
82 
                required: { value: true, message: 'La fecha es requerida' },
 122 
                  required: { value: true, message: 'La fecha es requerida' },
83 
                validate: {
 123 
                  validate: {
84 
                  beEqualOrGreaterThanToday: (date) => {
 124 
                    beEqualOrGreaterThanToday: (date) => {
- 
 
 125 
                      const selectedDate = new Date(date + 'T00:00:00')
- 
 
 126 
                      const selectedDateMs = selectedDate.getTime()
- 
 
 127 
                      const todayMs = new Date().setHours(0, 0, 0, 0)
- 
 
 128 
 
- 
 
 129 
                      return (
- 
 
 130 
                        selectedDateMs >= todayMs ||
- 
 
 131 
                        'La fecha debe ser mayor o igual a hoy'
- 
 
 132 
                      )
- 
 
 133 
                    }
- 
 
 134 
                  }
- 
 
 135 
                }}
- 
 
 136 
              />
- 
 
 137 
 
- 
 
 138 
              <DatetimePicker
- 
 
 139 
                label='Fecha de finalización'
- 
 
 140 
                name='end_date'
- 
 
 141 
                control={control}
- 
 
 142 
                rules={{
- 
 
 143 
                  required: { value: true, message: 'La fecha es requerida' },
- 
 
 144 
                  validate: (value, { start_date }) => {
- 
 
 145 
                    const startDate = new Date(start_date + 'T00:00:00')
Línea 85... Línea 146...
85 
                    const selectedDate = new Date(date + 'T00:00:00')
 146 
                    const endDate = new Date(value + 'T00:00:00')
86 
                    const selectedDateMs = selectedDate.getTime()
 147 
                    const startDateMs = startDate.getTime()
87 
                    const todayMs = new Date().setHours(0, 0, 0, 0)
 148 
                    const endDateMs = endDate.getTime()
88 
 
 149 
 
89 
                    return (
 150 
                    return (
90 
                      selectedDateMs >= todayMs ||
 151 
                      endDateMs > startDateMs ||
91 
                      'La fecha debe ser mayor o igual a hoy'
 152 
                      'La fecha debe ser mayor a la fecha de inicio'
92 
                    )
 - 
 
93 
                  }
 153 
                    )
94 
                }
 - 
 
95 
              }}
 - 
 
96 
            />
 - 
 
97 
 
 - 
 
98 
            <DatetimePicker
 - 
 
99 
              label='Fecha de finalización'
 - 
 
100 
              name='end_date'
 - 
 
101 
              control={control}
 - 
 
102 
              rules={{
 - 
 
103 
                required: { value: true, message: 'La fecha es requerida' },
 - 
 
104 
                validate: (value, { start_date }) => {
 154 
                  }
105 
                  const startDate = new Date(start_date + 'T00:00:00')
 - 
 
106 
                  const endDate = new Date(value + 'T00:00:00')
 - 
 
107 
                  const startDateMs = startDate.getTime()
 - 
 
108 
                  const endDateMs = endDate.getTime()
 - 
 
109 
 
 155 
                }}
110 
                  return (
 - 
 
111 
                    endDateMs > startDateMs ||
 - 
 
112 
                    'La fecha debe ser mayor a la fecha de inicio'
 - 
 
113 
                  )
 - 
 
114 
                }
 - 
 
115 
              }}
 156 
              />
116 
            />
 157 
 
117 
 
 158 
              <Button type='submit' color='primary'>
118 
            <Button type='submit' color='primary'>
 159 
                Enviar
119 
              Enviar
 160 
              </Button>
120 
            </Button>
 161 
            </FormTabPanel>
121 
          </LoadingWrapper>
 162 
          </LoadingWrapper>