Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3231 Rev 3239
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { Controller, useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
3 
import { Box, Button, InputLabel, Tab, Tabs } from '@mui/material'
 3 
import { Button, styled, Tab, Tabs } from '@mui/material'
4 
import Datetime from 'react-datetime'
 - 
 
5 
 
 - 
 
6 
import {
 - 
 
7 
  CREATE_OPTIONS,
 - 
 
8 
  FREQUENCYS,
 - 
 
9 
  INTELLIGENCES,
 - 
 
10 
  WEEK_DAYS
 - 
 
11 
} from '@constants/habits'
 - 
 
Línea -... Línea 4...
- 
 
 4 
 
- 
 
 5 
import { INTELLIGENCES, WEEK_DAYS } from '@constants/habits'
- 
 
 6 
 
12 
 
 7 
import Row from '@components/common/Row'
- 
 
 8 
import Form from '@components/common/form'
13 
import Form from '@components/common/form'
 9 
import Input from '@components/UI/inputs/Input'
14 
import Widget from '@components/UI/Widget'
 10 
import Widget from '@components/UI/Widget'
15 
import TabPanel from '@components/common/tab-panel'
 - 
 
16 
import LoadingWrapper from '@components/common/loading-wrapper'
 - 
 
17 
import Select from '@components/UI/inputs/Select'
 - 
 
18 
import Input from '@components/UI/inputs/Input'
 11 
import TabPanel from '@components/common/tab-panel'
- 
 
 12 
import Ckeditor from '@components/UI/Ckeditor'
19 
import Ckeditor from '@components/UI/Ckeditor'
 13 
import Select from '@components/UI/inputs/Select'
20 
import CheckboxInput from '@components/UI/inputs/Checkbox'
 14 
import CheckboxInput from '@components/UI/inputs/Checkbox'
- 
 
 15 
import LoadingWrapper from '@components/common/loading-wrapper'
- 
 
 16 
 
- 
 
 17 
const FormTabPanel = styled(TabPanel)(({ theme }) => ({
- 
 
 18 
  display: 'flex',
- 
 
 19 
  flexDirection: 'column',
- 
 
 20 
  width: '100%',
- 
 
 21 
  gap: theme.spacing(0.5)
Línea 21... Línea 22...
21 
import SwitchInput from '@components/UI/SwitchInput'
 22 
}))
22 
 
 23 
 
23 
export default function HabitForm({
 24 
export default function HabitForm({
24 
  onSubmit = () => {},
 25 
  onSubmit = () => {},
25 
  defaultValues = {
 26 
  defaultValues = {
26 
    name: '',
 27 
    name: '',
27 
    description: '',
 28 
    description: '',
28 
    monday_active: '0',
 29 
    monday_active: false,
29 
    tuesday_active: '0',
 30 
    tuesday_active: false,
30 
    wednesday_active: '0',
 31 
    wednesday_active: false,
31 
    thursday_active: '0',
 32 
    thursday_active: false,
32 
    friday_active: '0',
 33 
    friday_active: false,
33 
    saturday_active: '0',
 34 
    saturday_active: false,
34 
    sunday_active: '0',
 35 
    sunday_active: false,
35 
    monday_time: '06:00',
 36 
    monday_time: '00:00',
36 
    tuesday_time: '07:00',
 37 
    tuesday_time: '00:00',
37 
    wednesday_time: '08:00',
 38 
    wednesday_time: '00:00',
38 
    thursday_time: '09:00',
 39 
    thursday_time: '00:00',
39 
    friday_time: '10:00',
 40 
    friday_time: '00:00',
40 
    saturday_time: '11:00',
 41 
    saturday_time: '00:00',
41 
    sunday_time: '12:00',
 42 
    sunday_time: '00:00',
42 
    quantitative_value: '0',
 43 
    quantitative_value: false,
43 
    qualitative_description: 'hora',
 44 
    qualitative_description: '',
44 
    notification_10min_before: '0',
 45 
    notification_10min_before: false,
45 
    notification_30min_before: '0',
 46 
    notification_30min_before: false,
46 
    intelligence: 'physical'
 47 
    intelligence: ''
47 
  },
 48 
  },
48 
  values = {}
 49 
  values = {}
Línea 49... Línea -...
49 
}) {
 - 
 
50 
  const [currentTab, setCurrentTab] = useState(0)
 - 
 
51 
 
 50 
}) {
- 
 
 51 
  const [currentTab, setCurrentTab] = useState(0)
52 
  const handleChange = (event, newValue) => setCurrentTab(newValue)
 52 
 
53 
 
 53 
  const {
54 
  const {
 - 
 
55 
    control,
 54 
    handleSubmit,
56 
    formState: { errors, isSubmitting },
 - 
 
57 
    watch,
 55 
    control,
58 
    setValue,
 56 
    formState: { errors, isSubmitting },
59 
    handleSubmit
 57 
    trigger
60 
  } = useForm({
 58 
  } = useForm({
61 
    defaultValues,
 59 
    defaultValues,
- 
 
 60 
    values
- 
 
 61 
  })
- 
 
 62 
  const handleChange = async (event, newValue) => {
- 
 
 63 
    const valid = await trigger()
- 
 
 64 
    if (valid) setCurrentTab(newValue)
- 
 
 65 
  }
- 
 
 66 
 
- 
 
 67 
  const nextStep = async () => {
- 
 
 68 
    const valid = await trigger()
- 
 
 69 
    if (valid) setCurrentTab(currentTab + 1)
- 
 
 70 
  }
- 
 
 71 
 
- 
 
 72 
  const dataAdapter = ({
- 
 
 73 
    monday_active,
- 
 
 74 
    tuesday_active,
- 
 
 75 
    wednesday_active,
- 
 
 76 
    thursday_active,
- 
 
 77 
    friday_active,
- 
 
 78 
    saturday_active,
- 
 
 79 
    sunday_active,
- 
 
 80 
    notification_10min_before,
- 
 
 81 
    notification_30min_before,
- 
 
 82 
    ...habit
- 
 
 83 
  }) => {
- 
 
 84 
    onSubmit({
- 
 
 85 
      monday_active: monday_active ? '1' : '0',
- 
 
 86 
      tuesday_active: tuesday_active ? '1' : '0',
- 
 
 87 
      wednesday_active: wednesday_active ? '1' : '0',
- 
 
 88 
      thursday_active: thursday_active ? '1' : '0',
- 
 
 89 
      friday_active: friday_active ? '1' : '0',
- 
 
 90 
      saturday_active: saturday_active ? '1' : '0',
- 
 
 91 
      sunday_active: sunday_active ? '1' : '0',
- 
 
 92 
      notification_10min_before: notification_10min_before ? '1' : '0',
- 
 
 93 
      notification_30min_before: notification_30min_before ? '1' : '0',
Línea 62... Línea 94...
62 
    values
 94 
      ...habit
63 
  })
 95 
    })
64 
  const watchedInderminate = watch('indeterminate')
 96 
  }
65 
 
 97 
 
66 
  return (
 - 
 
67 
    <Widget styles={{ overflow: 'visible' }}>
 98 
  return (
68 
      <Tabs value={currentTab} onChange={handleChange}>
 99 
    <Widget>
69 
        {CREATE_OPTIONS.map(({ label, value }) => (
 - 
 
70 
          <Tab
 - 
 
71 
            key={value}
 100 
      <Tabs value={currentTab} onChange={handleChange}>
72 
            label={label}
 - 
 
73 
            id={`simple-tab-${value}`}
 - 
 
74 
            aria-controls={`simple-tabpanel-${value}`}
 101 
        <Tab label='Detalles' />
75 
            value={value}
 102 
        <Tab label='Frecuencia' />
76 
          />
 103 
        <Tab label='Valor' />
77 
        ))}
 104 
        <Tab label='Notificaciones' />
- 
 
 105 
      </Tabs>
78 
      </Tabs>
 106 
      <Widget.Body>
- 
 
 107 
        <Form onSubmit={handleSubmit(dataAdapter)}>
- 
 
 108 
          <LoadingWrapper loading={isSubmitting} displayChildren>
- 
 
 109 
            {/* Detalles */}
- 
 
 110 
            <FormTabPanel value={0} index={currentTab}>
- 
 
 111 
              <Input
- 
 
 112 
                label='Nombre del hábito:'
- 
 
 113 
                name='name'
- 
 
 114 
                placeholder='Escribe el nombre del hábito'
- 
 
 115 
                control={control}
79 
      <Widget.Body>
 116 
                rules={{ required: 'El nombre es requerido' }}
- 
 
 117 
                error={errors.name?.message}
80 
        <Form onSubmit={handleSubmit(onSubmit)}>
 118 
              />
81 
          <LoadingWrapper loading={isSubmitting} displayChildren>
 - 
 
82 
            <TabPanel value={0} index={currentTab}>
 119 
 
83 
              <Select
 120 
              <Select
84 
                name='intelligence'
 121 
                label='Inteligencia:'
85 
                label='Inteligencia'
 122 
                name='intelligence'
86 
                options={INTELLIGENCES}
 123 
                options={INTELLIGENCES}
Línea 87... Línea -...
87 
                control={control}
 - 
 
88 
                rules={{ required: 'Este campo es requerido' }}
 - 
 
89 
                error={errors.intelligence?.message}
 - 
 
90 
              />
 - 
 
91 
 
 - 
 
92 
              <Input
 - 
 
93 
                name='title'
 - 
 
94 
                label='Titulo'
 - 
 
95 
                placeholder='Define el título de tu hábito'
 - 
 
96 
                control={control}
 124 
                control={control}
97 
                rules={{ required: 'Este campo es requerido' }}
 - 
 
98 
                error={errors.title?.message}
 - 
 
99 
              />
 125 
                rules={{ required: 'Este campo es requerido' }}
100 
 
 126 
                error={errors.intelligence?.message}
101 
              <Ckeditor
 127 
              />
- 
 
 128 
 
- 
 
 129 
              <Ckeditor
102 
                name='description'
 130 
                control={control}
Línea -... Línea 131...
- 
 
 131 
                name='description'
- 
 
 132 
                error={errors.description?.message}
103 
                label='Descripción'
 133 
                rules={{ required: 'La descripción es requerida' }}
- 
 
 134 
                label='Descripción:'
- 
 
 135 
              />
- 
 
 136 
 
- 
 
 137 
              <Button color='primary' onClick={nextStep}>
- 
 
 138 
                Continuar
104 
                control={control}
 139 
              </Button>
- 
 
 140 
            </FormTabPanel>
105 
                rules={{ required: 'Este campo es requerido' }}
 141 
 
106 
                error={errors.description?.message}
 142 
            {/* Frecuencia */}
- 
 
 143 
            <FormTabPanel value={1} index={currentTab}>
- 
 
 144 
              {WEEK_DAYS.map(({ label, value, time }) => {
- 
 
 145 
                return (
- 
 
 146 
                  <Row
107 
              />
 147 
                    key={value}
- 
 
 148 
                    styles={{
- 
 
 149 
                      flexFlow: 'nowrap',
- 
 
 150 
                      justifyContent: 'space-between'
- 
 
 151 
                    }}
- 
 
 152 
                  >
- 
 
 153 
                    {/* Campos de días activos */}
- 
 
 154 
                    <CheckboxInput
- 
 
 155 
                      label={label}
108 
 
 156 
                      control={control}
- 
 
 157 
                      name={value}
- 
 
 158 
                    />
- 
 
 159 
                    {/* Puedes repetir los campos de días activos y sus horas para cada día de la semana */}
109 
              <Input
 160 
                    <Input
- 
 
 161 
                      type='time'
- 
 
 162 
                      control={control}
- 
 
 163 
                      name={time}
- 
 
 164 
                      rules={{
- 
 
 165 
                        validate: (time, formValues) => {
110 
                type='number'
 166 
                          if (!formValues[value]) return true
- 
 
 167 
                          if (formValues[value] && time) return true
- 
 
 168 
                          return 'La hora es requerida si el día está activo'
- 
 
 169 
                        }
111 
                name='value'
 170 
                      }}
- 
 
 171 
                      style={{ width: 'auto' }}
- 
 
 172 
                      error={errors[time]?.message}
- 
 
 173 
                    />
- 
 
 174 
                  </Row>
- 
 
 175 
                )
Línea -... Línea 176...
- 
 
 176 
              })}
- 
 
 177 
 
112 
                label='Valor'
 178 
              <Button color='primary' onClick={nextStep}>
113 
                placeholder='Define un valor a hábito'
 - 
 
114 
                control={control}
 179 
                Continuar
- 
 
 180 
              </Button>
115 
                rules={{ required: 'Este campo es requerido' }}
 181 
            </FormTabPanel>
116 
                error={errors.value?.message}
 182 
 
- 
 
 183 
            {/* Valor */}
- 
 
 184 
            <FormTabPanel value={2} index={currentTab}>
117 
              />
 185 
              <Input
Línea 118... Línea -...
118 
 
 - 
 
119 
              <Input
 - 
 
120 
                label='Metodo'
 - 
 
121 
                control={control}
 - 
 
122 
                name='method'
 186 
                control={control}
123 
                type='file'
 - 
 
124 
              />
 - 
 
125 
 
 - 
 
126 
              <Button color='primary'>Continuar</Button>
 187 
                label='Valor cuantitativo:'
- 
 
 188 
                name='quantitative_value'
- 
 
 189 
                type='number'
127 
            </TabPanel>
 190 
                rules={{ required: 'El valor es requerido' }}
128 
 
 191 
                error={errors.quantitative_value?.message}
129 
            <TabPanel value={1} index={currentTab}>
 192 
              />
130 
              <Select
 193 
 
131 
                name='frequency'
 194 
              <Ckeditor
132 
                label='Frecuencia'
 195 
                control={control}
133 
                options={FREQUENCYS}
 196 
                name='qualitative_description'
134 
                control={control}
 197 
                error={errors.qualitative_description?.message}
- 
 
 198 
                rules={{ required: 'La descripción es requerida' }}
135 
                rules={{ required: 'Este campo es requerido' }}
 199 
                label='Descripción cualitativa:'
136 
                error={errors.frequency?.message}
 200 
              />
137 
              />
 - 
 
138 
 
 201 
 
139 
              {WEEK_DAYS.map(({ label, value, time }) => (
 - 
 
140 
                <Box
 - 
 
141 
                  key={value}
 202 
              <Button color='primary' onClick={nextStep}>
142 
                  sx={{
 203 
                Continuar
143 
                    display: 'flex',
 204 
              </Button>
144 
                    justifyContent: 'space-between',
 205 
            </FormTabPanel>
145 
                    gap: '1rem'
 206 
 
146 
                  }}
 - 
 
147 
                >
 207 
            {/* Notificaciones */}
148 
                  <CheckboxInput label={label} control={control} name={value} />
 208 
            <FormTabPanel value={3} index={currentTab}>
149 
                  <Controller
 - 
 
150 
                    name={time}
 - 
 
151 
                    control={control}
 209 
              <CheckboxInput
152 
                    rules={{
 - 
 
153 
                      validate: (val, formValues) => {
 - 
 
154 
                        return (
 - 
 
155 
                          (formValues[value] && val) ||
 - 
 
156 
                          'Debes seleccionar una hora'
 - 
 
157 
                        )
 210 
                label='Notificación 10 min antes'
158 
                      }
 211 
                name='notification_10min_before'
159 
                    }}
 - 
 
160 
                    render={({ field: { onChange, disabled } }) => (
 - 
 
161 
                      <Datetime
 212 
                control={control}
162 
                        dateFormat={false}
 - 
 
163 
                        timeFormat={true}
 - 
 
164 
                        onChange={(e) => {
 - 
 
165 
                          const hour = new Date(e.toDate()).getHours()
 213 
                rules={{
166 
                          const minute = new Date(e.toDate()).getMinutes()
 - 
 
167 
                          const time = `${hour}:${minute}`
 - 
 
168 
                          onChange(time)
 214 
                  validate: (value, formValues) => {
169 
                        }}
 215 
                    if (!value && !formValues.notification_30min_before) {
170 
                        inputProps={{
 - 
 
171 
                          className: 'form-control custom-picker',
 216 
                      return 'Debe seleccionar al menos una opción'
172 
                          disabled
 - 
 
173 
                        }}
 - 
 
174 
                        closeOnSelect
 - 
 
175 
                      />
 217 
                    }
176 
                    )}
 218 
                    if (value && formValues.notification_30min_before) {
177 
                  />
 219 
                      return 'No se puede seleccionar ambas opciones simultáneamente'
178 
                </Box>
 220 
                    }
179 
              ))}
 221 
                    return true
180 
 
 222 
                  }
181 
              <InputLabel>Fecha limite</InputLabel>
 - 
 
182 
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
 223 
                }}
183 
                <SwitchInput
 224 
              />
184 
                  label='Indeterminado'
 225 
              <CheckboxInput
185 
                  setValue={(val) => setValue('indeterminate', val)}
 226 
                label='Notificación 30 min antes'
186 
                  isChecked={watchedInderminate}
 227 
                name='notification_30min_before'
187 
                />
 228 
                control={control}
188 
                {!watchedInderminate && (
 229 
                rules={{
189 
                  <>
 230 
                  validate: (value, formValues) => {
190 
                    <Datetime
 231 
                    if (!value && !formValues.notification_10min_before) {
191 
                      dateFormat='DD-MM-YYYY'
 232 
                      return 'Debe seleccionar al menos una opción'
192 
                      timeFormat={false}
 - 
 
193 
                      inputProps={{ className: 'form-control custom-picker' }}
 233 
                    }
- 
 
 234 
                    if (value && formValues.notification_10min_before) {
- 
 
 235 
                      return 'No se puede seleccionar ambas opciones simultáneamente'
194 
                      initialValue={Date.parse(new Date())}
 236 
                    }
195 
                      closeOnSelect
 237 
                    return true
196 
                    />
 238 
                  }
197 
                  </>
 239 
                }}
198 
                )}
 240 
              />
199 
              </Box>
 241 
              <Button color='primary' type='submit'>