Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3269 Rev 3697
Línea 1... Línea 1...
1 
import React, { useEffect } from 'react'
 1 
import React, { useEffect } from 'react';
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux';
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form';
4 
import { Box } from '@mui/material'
 4 
import { Box } from '@mui/material';
5 
 
 5 
 
6 
import { getMonths, getYears } from '@app/utils/dates'
 6 
import { getMonths, getYears } from '@app/utils/dates';
7 
import { useFetchHelper } from '@hooks'
 7 
import { useFetchHelper } from '@hooks';
8 
 
 8 
 
9 
import CKEditor from '@components/common/ckeditor/Ckeditor'
 9 
import CKEditor from '@components/common/ckeditor/Ckeditor';
10 
import SwitchInput from '@app/components/UI/SwitchInput'
 10 
import SwitchInput from '@app/components/UI/SwitchInput';
11 
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'
 11 
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback';
12 
import Select from '@app/components/UI/inputs/Select'
 12 
import Select from '@app/components/UI/inputs/Select';
13 
import Input from '@app/components/UI/inputs/Input'
 13 
import Input from '@app/components/UI/inputs/Input';
14 
import UbicationInput from '@app/components/UI/inputs/UbicationInput'
 14 
import UbicationInput from '@app/components/UI/inputs/UbicationInput';
15 
import Modal from '@app/components/UI/modal/Modal'
 15 
import Modal from '@app/components/UI/modal/Modal';
Línea 16... Línea 16...
16 
 
 16 
 
17 
const ExperienceModal = ({
 17 
const ExperienceModal = ({
18 
  show = false,
 18 
  show = false,
19 
  onClose = () => {},
 19 
  onClose = () => {},
20 
  onConfirm = () => {},
 20 
  onConfirm = () => {},
21 
  currentExperience = null
 21 
  currentExperience = null
22 
}) => {
 22 
}) => {
23 
  const { data: companySizes } = useFetchHelper('company-sizes')
 23 
  const { data: companySizes } = useFetchHelper('company-sizes');
24 
  const { data: industries } = useFetchHelper('industries')
 24 
  const { data: industries } = useFetchHelper('industries');
Línea 25... Línea 25...
25 
  const labels = useSelector(({ intl }) => intl.labels)
 25 
  const labels = useSelector(({ intl }) => intl.labels);
26 
 
 26 
 
27 
  const {
 27 
  const {
28 
    register,
 28 
    register,
Línea 43... Línea 43...
43 
      company_size_id: '',
 43 
      company_size_id: '',
44 
      title: '',
 44 
      title: '',
45 
      to_month: '',
 45 
      to_month: '',
46 
      to_year: ''
 46 
      to_year: ''
47 
    }
 47 
    }
48 
  })
 48 
  });
49 
  const isCurrent = watch('is_current', 'n') === 'y'
 49 
  const isCurrent = watch('is_current', 'n') === 'y';
Línea 50... Línea 50...
50 
 
 50 
 
51 
  const handleClose = () => {
 51 
  const handleClose = () => {
52 
    reset()
 52 
    reset();
53 
    onClose()
 53 
    onClose();
Línea 54... Línea 54...
54 
  }
 54 
  };
55 
 
 55 
 
56 
  const addressHandler = (address) => {
 56 
  const addressHandler = (address) => {
57 
    Object.entries(address).forEach(([key, value]) => {
 57 
    Object.entries(address).forEach(([key, value]) => {
58 
      if (value) {
 58 
      if (value) {
59 
        register(key)
 59 
        register(key);
60 
        setValue(key, value)
 60 
        setValue(key, value);
61 
      }
 61 
      }
Línea 62... Línea 62...
62 
    })
 62 
    });
Línea 63... Línea 63...
63 
  }
 63 
  };
64 
 
 64 
 
65 
  const onSubmit = handleSubmit((data) => onConfirm(data))
 65 
  const onSubmit = handleSubmit((data) => onConfirm(data));
66 
 
 66 
 
67 
  useEffect(() => {
 67 
  useEffect(() => {
Línea 68... Línea 68...
68 
    register('formatted_address', { required: 'Este campo es requerido' })
 68 
    register('formatted_address', { required: 'Este campo es requerido' });
69 
    register('description', { required: 'Este campo es requerido' })
 69 
    register('description', { required: 'Este campo es requerido' });
Línea 70... Línea 70...
70 
    register('is_current', { required: 'Este campo es requerido' })
 70 
    register('is_current', { required: 'Este campo es requerido' });
71 
  }, [])
 71 
  }, []);
72 
 
 72 
 
73 
  useEffect(() => {
 73 
  useEffect(() => {
Línea 82... Línea 82...
82 
      is_current,
 82 
      is_current,
83 
      size,
 83 
      size,
84 
      title,
 84 
      title,
85 
      to_month,
 85 
      to_month,
86 
      to_year
 86 
      to_year
87 
    } = currentExperience
 87 
    } = currentExperience;
Línea 88... Línea 88...
88 
 
 88 
 
89 
    setValue('company', company)
 89 
    setValue('company', company);
90 
    setValue('description', description)
 90 
    setValue('description', description);
91 
    setValue('from_month', from_month)
 91 
    setValue('from_month', from_month);
92 
    setValue('from_year', from_year)
 92 
    setValue('from_year', from_year);
93 
    setValue('is_current', is_current)
 93 
    setValue('is_current', is_current);
94 
    setValue('title', title)
 94 
    setValue('title', title);
95 
    setValue('to_month', to_month)
 95 
    setValue('to_month', to_month);
Línea 96... Línea 96...
96 
    setValue('to_year', to_year)
 96 
    setValue('to_year', to_year);
97 
 
 97 
 
Línea 98... Línea 98...
98 
    const currentSize = companySizes.find(({ name }) => size.includes(name))
 98 
    const currentSize = companySizes.find(({ name }) => size.includes(name));
99 
    const currentIndustry = industries.find(({ name }) => name === industry)
 99 
    const currentIndustry = industries.find(({ name }) => name === industry);
100 
 
 100 
 
101 
    if (currentSize) {
 101 
    if (currentSize) {
102 
      setValue('company_size_id', currentSize.value)
 102 
      setValue('company_size_id', currentSize.value);
103 
    }
 103 
    }
104 
    if (currentIndustry) {
 104 
    if (currentIndustry) {
Línea 105... Línea 105...
105 
      setValue('industry_id', currentIndustry.value)
 105 
      setValue('industry_id', currentIndustry.value);
106 
    }
 106 
    }
107 
  }, [currentExperience, companySizes, industries])
 107 
  }, [currentExperience, companySizes, industries]);
108 
 
 108 
 
109 
  useEffect(() => {
 109 
  useEffect(() => {
110 
    if (isCurrent) {
 110 
    if (isCurrent) {
Línea 111... Línea 111...
111 
      setValue('to_month', '')
 111 
      setValue('to_month', '');
112 
      setValue('to_year', '')
 112 
      setValue('to_year', '');
113 
    }
 113 
    }
114 
  }, [isCurrent])
 - 
 
115 
 
 - 
 
116 
  return (
 114 
  }, [isCurrent]);
117 
    <Modal
 115 
 
118 
      title={`${currentExperience ? labels.edit : labels.add} - ${
 116 
  return (
119 
        labels.experience
 117 
    <Modal
120 
      }`}
 118 
      title={`${currentExperience ? labels.edit : labels.add} - ${labels.experience}`}
Línea 171... Línea 169...
171 
          name='from_month'
 169 
          name='from_month'
172 
          error={errors.from_month?.message}
 170 
          error={errors.from_month?.message}
173 
          label='Desde'
 171 
          label='Desde'
174 
          placeholder='Mes desde'
 172 
          placeholder='Mes desde'
175 
          options={getMonths().map((month, i) => ({
 173 
          options={getMonths().map((month, i) => ({
176 
            name: month,
 174 
            label: month,
177 
            value: i + 1
 175 
            value: i + 1
178 
          }))}
 176 
          }))}
179 
          control={control}
 177 
          control={control}
180 
          rules={{ required: 'Este campo es requerido' }}
 178 
          rules={{ required: 'Este campo es requerido' }}
181 
        />
 179 
        />
Línea 182... Línea 180...
182 
 
 180 
 
183 
        <Select
 181 
        <Select
184 
          error={errors.from_year?.message}
 182 
          error={errors.from_year?.message}
185 
          options={getYears().map((year) => ({
 183 
          options={getYears().map((year) => ({
186 
            name: year,
 184 
            label: year,
187 
            value: year
 185 
            value: year
188 
          }))}
 186 
          }))}
189 
          placeholder='Año desde'
 187 
          placeholder='Año desde'
190 
          name='from_year'
 188 
          name='from_year'
Línea 197... Línea 195...
197 
      {!isCurrent && (
 195 
      {!isCurrent && (
198 
        <Box sx={{ display: 'flex', gap: 1 }}>
 196 
        <Box sx={{ display: 'flex', gap: 1 }}>
199 
          <Select
 197 
          <Select
200 
            error={errors.to_month?.message}
 198 
            error={errors.to_month?.message}
201 
            options={getMonths().map((month, i) => ({
 199 
            options={getMonths().map((month, i) => ({
202 
              name: month,
 200 
              label: month,
203 
              value: i + 1
 201 
              value: i + 1
204 
            }))}
 202 
            }))}
205 
            placeholder='Mes hasta'
 203 
            placeholder='Mes hasta'
206 
            label='Hasta'
 204 
            label='Hasta'
207 
            name='to_month'
 205 
            name='to_month'
208 
            rules={{
 206 
            rules={{
209 
              required: isCurrent ? false : 'Este campo es requerido',
 207 
              required: isCurrent ? false : 'Este campo es requerido',
210 
              validate: (value) => {
 208 
              validate: (value) => {
211 
                const currentMonth = new Date().getMonth() + 1
 209 
                const currentMonth = new Date().getMonth() + 1;
212 
                const currentYear = new Date().getFullYear()
 210 
                const currentYear = new Date().getFullYear();
213 
                const toYear = watch('to_year')
 211 
                const toYear = watch('to_year');
Línea 214... Línea 212...
214 
 
 212 
 
215 
                return (
 213 
                return (
216 
                  (toYear === currentYear && value < currentMonth) ||
 214 
                  (toYear === currentYear && value < currentMonth) ||
217 
                  'La fecha no puede ser superior a la actual'
 215 
                  'La fecha no puede ser superior a la actual'
218 
                )
 216 
                );
219 
              }
 217 
              }
220 
            }}
 218 
            }}
221 
            control={control}
 219 
            control={control}
Línea 222... Línea 220...
222 
          />
 220 
          />
223 
 
 221 
 
224 
          <Select
 222 
          <Select
225 
            error={errors.to_year?.message}
 223 
            error={errors.to_year?.message}
226 
            options={getYears().map((year) => ({
 224 
            options={getYears().map((year) => ({
227 
              name: year,
 225 
              label: year,
228 
              value: year
 226 
              value: year
229 
            }))}
 227 
            }))}
230 
            placeholder='Año hasta'
 228 
            placeholder='Año hasta'
Línea 248... Línea 246...
248 
 
 246 
 
249 
      <CKEditor
 247 
      <CKEditor
250 
        defaultValue={currentExperience?.description ?? ''}
 248 
        defaultValue={currentExperience?.description ?? ''}
251 
        onChange={(value) => setValue('description', value)}
 249 
        onChange={(value) => setValue('description', value)}
252 
      />
 - 
 
253 
      {errors.description && (
 250 
      />
254 
        <FormErrorFeedback>Este campo es requerido</FormErrorFeedback>
 - 
 
255 
      )}
 251 
      {errors.description && <FormErrorFeedback>Este campo es requerido</FormErrorFeedback>}
256 
    </Modal>
 252 
    </Modal>
257 
  )
 253 
  );
Línea 258... Línea 254...
258 
}
 254 
};