Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6794 stevensc 1 
/* eslint-disable react/prop-types */
2 
import { CKEditor } from 'ckeditor4-react';
3 
import React, { useEffect, useRef, useState } from 'react'
4 
import { Button, Modal } from 'react-bootstrap'
5 
import { useForm } from 'react-hook-form';
6 
import { addNotification } from '../../../../../../redux/notification/notification.actions';
7 
import FormErrorFeedback from '../../../../../../shared/form-error-feedback/FormErrorFeedback';
8 
import Spinner from '../../../../../../shared/loading-spinner/Spinner';
9 
import UbicationInput from '../../../../../../shared/ubication-input/UbicationInput';
10 
import { axios, CKEDITOR_OPTIONS } from '../../../../../../utils';
11 
 
12 
const ExperienceModal = ({ show, closeModal, setSettedUserExperiences, settedUserExperiences }) => {
13 
 
14 
    const { register, errors, handleSubmit, setValue, clearErrors, getValues, watch, setError, } = useForm();
15 
 
16 
    const [isModalOpen, setIsModalOpen] = useState(false);
17 
    const [modalLoading, setModalLoading] = useState(false);
18 
    const [settedDescription, setSettedDescription] = useState("");
19 
 
20 
    const isAddressEmpty = useRef(true);
21 
    const postUrl = useRef("");
22 
    const addressKeys = useRef([
23 
        "address1",
24 
        "address2",
25 
        "country",
26 
        "state",
27 
        "city1",
28 
        "city2",
29 
        "postal_code",
30 
        "latitude",
31 
        "longitude",
32 
    ]);
33 
 
34 
    useEffect(() => {
35 
        addressKeys.current.map((addressKey) => {
36 
            register(addressKey);
37 
        });
38 
        register("formatted_address", {
39 
            required: "Este campo es requerido",
40 
        });
41 
        register("description");
42 
    }, []);
43 
 
44 
    const getAddressHandler = (addresObject) => {
45 
        addressKeys.current.map((addressKey) => {
46 
            setValue(addressKey, "");
47 
        });
48 
        const { address_components } = addresObject;
49 
        if (address_components) {
50 
            address_components.map((address_component) => {
51 
                const address_component_name = address_component.long_name;
52 
                const address_component_type = address_component.types[0];
53 
                switch (address_component_type) {
54 
                    case "route":
55 
                        setValue("address1", address_component_name);
56 
                        break;
57 
                    case "sublocality":
58 
                        setValue("address2", address_component_name);
59 
                        break;
60 
                    case "locality":
61 
                        setValue("city1", address_component_name);
62 
                        break;
63 
                    case "administrative_area_level_2":
64 
                        setValue("city2", address_component_name);
65 
                        break;
66 
                    case "administrative_area_level_1":
67 
                        setValue("state", address_component_name);
68 
                        break;
69 
                    case "country":
70 
                        setValue("country", address_component_name);
71 
                        break;
72 
                    case "postal_code":
73 
                        setValue("postal_code", address_component_name);
74 
                        break;
75 
                    case "geometry":
76 
                        setValue("latitude", address_component.latitude);
77 
                        setValue("longitude", address_component.longitude);
78 
                        break;
79 
                    default:
80 
                        break;
81 
                }
82 
            });
83 
            isAddressEmpty.current = false;
84 
        } else {
85 
            isAddressEmpty.current = true;
86 
        }
87 
        setValue("formatted_address", addresObject.formatted_address);
88 
        clearErrors("formatted_address");
89 
    };
90 
 
91 
    const getYears = () => {
92 
        const date = new Date();
93 
        const currentYear = date.getFullYear();
94 
        let years = [];
95 
        for (let index = currentYear; index > currentYear - 100; index--) {
96 
            years = [...years, index];
97 
        }
98 
        return years;
99 
    };
100 
 
101 
    const onSubmitHandler = async (data) => {
102 
        console.log(data)
103 
        setModalLoading(true);
104 
 
105 
        const formData = new FormData();
106 
        Object.entries(data).map(([key, value]) => {
107 
            if (value) formData.append(key, value);
108 
        });
109 
 
110 
        await axios.post(postUrl.current, formData)
111 
            .then((response) => {
112 
                const resData = response.data;
113 
 
114 
                if (resData.success) {
115 
                    setSettedUserExperiences(resData.data);
116 
                    closeModal();
117 
                } else {
118 
                    const resError = resData.data;
119 
                    if (resError.constructor.name === "Object") {
120 
                        Object.entries(resError).map(([key, value]) => {
121 
                            if (key in getValues()) {
122 
                                setError(key, {
123 
                                    type: "manual",
124 
                                    message: Array.isArray(value) ? value[0] : value,
125 
                                });
126 
                            }
127 
                        });
128 
                    } else {
129 
                        addNotification({
130 
                            style: "danger",
131 
                            msg: resError,
132 
                        });
133 
                    }
134 
                }
135 
            });
136 
        setModalLoading(false);
137 
    };
138 
 
139 
 
140 
 
141 
    const handleNewExperience = (event) => {
142 
        event.preventDefault();
143 
        postUrl.current = `/profile/my-profiles/experience/${userIdEncrypted}/operation/add`;
144 
        setSettedDescription("");
145 
        handleModalOpen();
146 
    };
147 
 
148 
    const handleEdit = async (linkEdit) => {
149 
        postUrl.current = linkEdit;
150 
        const currentDescription = settedUserExperiences.find(experience => experience.link_edit === linkEdit)
151 
        setSettedDescription(currentDescription.description)
152 
        setModalLoading(true)
153 
        const { data } = await axios.get(linkEdit)
154 
        if (!data.success) {
155 
            addNotification({
156 
                style: "danger",
157 
                msg: typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
158 
            })
159 
            setModalLoading(false);
160 
            return
161 
        }
162 
        handleModalOpen();
163 
        Object.entries(data.data.experience)
164 
            .map(([key, value]) => value && setValue(key, value));
165 
        Object.entries(data.data.location)
166 
            .map(([key, value]) => value && setValue(key, value));
167 
        isAddressEmpty.current = false;
168 
        setModalLoading(false)
169 
    };
170 
 
171 
    return (
172 
        <Modal show={show} onHide={closeModal} style={{ overflowY: "scroll" }}>
173 
            <Modal.Header closeButton>
174 
                <Modal.Title>Experiencia</Modal.Title>
175 
            </Modal.Header>
176 
            <form onSubmit={handleSubmit(onSubmitHandler)}>
177 
                <Modal.Body>
178 
                    <div className="form-group">
179 
                        <input
180 
                            type="text"
181 
                            name="company"
182 
                            placeholder="Empresa"
183 
                            ref={register({
184 
                                required: "este campo es requerido",
185 
                            })}
186 
                        />
187 
                        {errors.company && <FormErrorFeedback>{errors.company.message}</FormErrorFeedback>}
188 
                    </div>
189 
                    <div className="form-group">
190 
                        <select
191 
                            name="industry_id"
192 
                            id="industry_id"
193 
                            ref={register({
194 
                                required: "este campo es requerido",
195 
                            })}
196 
                            defaultValue=""
197 
                        >
198 
                            <option value="" hidden>
199 
                                Industria
200 
                            </option>
201 
                            {Object.entries(industriesOptions).map(([key, value]) => (
202 
                                <option value={key} key={key}>
203 
                                    {value}
204 
                                </option>
205 
                            ))}
206 
                        </select>
207 
                        {errors.industry_id && (
208 
                            <FormErrorFeedback>
209 
                                {errors.industry_id.message}
210 
                            </FormErrorFeedback>
211 
                        )}
212 
                    </div>
213 
                    <div className="form-group">
214 
                        <select
215 
                            name="company_size_id"
216 
                            id="company_size_id"
217 
                            ref={register({
218 
                                required: "este campo es requerido",
219 
                            })}
220 
                            defaultValue=""
221 
                        >
222 
                            <option value="" hidden>
223 
                                Tamaño de la Empresa
224 
                            </option>
225 
                            {Object.entries(companySizesOptions).map(([key, value]) => (
226 
                                <option value={key} key={key}>
227 
                                    {value}
228 
                                </option>
229 
                            ))}
230 
                        </select>
231 
                        {errors.company_size_id && (
232 
                            <FormErrorFeedback>
233 
                                {errors.company_size_id.message}
234 
                            </FormErrorFeedback>
235 
                        )}
236 
                    </div>
237 
                    <div className="form-group">
238 
                        <input
239 
                            type="text"
240 
                            name="title"
241 
                            placeholder="Titulo"
242 
                            ref={register({
243 
                                required: "este campo es requerido",
244 
                            })}
245 
                        />
246 
                        {errors.title && (
247 
                            <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
248 
                        )}
249 
                    </div>
250 
                    <div className="form-group datefm">
251 
                        <UbicationInput
252 
                            onGetAddress={getAddressHandler}
253 
                            settedQuery={watch("formatted_address")}
254 
                        />
255 
                        <i className="fa fa-map-marker" />
256 
                        {errors.formatted_address &&
257 
                            <FormErrorFeedback>
258 
                                {errors.formatted_address.message}
259 
                            </FormErrorFeedback>
260 
                        }
261 
                    </div>
262 
                    <div className="row profile-year" style={{ gap: '.5rem' }}>
263 
                        <div className="input-c p-0">
264 
                            <div className="form-group">
265 
                                <select
266 
                                    name="from_month"
267 
                                    id="from_month"
268 
                                    ref={register({ required: "este campo es requerido" })}
269 
                                    defaultValue=""
270 
                                >
271 
                                    <option value="">Mes desde</option>
272 
                                    {months.map((month, id) => (
273 
                                        <option key={id} value={id + 1}>
274 
                                            {month}
275 
                                        </option>
276 
                                    ))}
277 
                                </select>
278 
                                {errors.from_month &&
279 
                                    <FormErrorFeedback>
280 
                                        {errors.from_month.message}
281 
                                    </FormErrorFeedback>
282 
                                }
283 
                            </div>
284 
                        </div>
285 
                        <div className="input-c p-0">
286 
                            <div className="form-group">
287 
                                <select
288 
                                    name="from_year"
289 
                                    ref={register({ required: "este campo es requerido", })}
290 
                                    defaultValue=""
291 
                                >
292 
                                    <option value="">Año desde</option>
293 
                                    {getYears().map((year) => (
294 
                                        <option key={year} value={year}>
295 
                                            {year}
296 
                                        </option>
297 
                                    ))}
298 
                                </select>
299 
                                {errors.from_year && (
300 
                                    <FormErrorFeedback>
301 
                                        {errors.from_year.message}
302 
                                    </FormErrorFeedback>
303 
                                )}
304 
                            </div>
305 
                        </div>
306 
                    </div>
307 
                    <label htmlFor="is_current"> Trabajo Actual</label>
308 
                    <div className="form-group">
309 
                        <StyledSwitch className="switch">
310 
                            <input
311 
                                type="checkbox"
312 
                                name="is_current"
313 
                                id="is_current"
314 
                                value="y"
315 
                                ref={register}
316 
                            />
317 
                            <span className="slider round"></span>
318 
                        </StyledSwitch>
319 
                    </div>
320 
                    {!watch("is_current") && (
321 
                        <div className="row profile-year">
322 
                            <div className="input-c p-0">
323 
                                <div className="form-group">
324 
                                    <select
325 
                                        name="to_month"
326 
                                        id="to_month"
327 
                                        ref={register({
328 
                                            required: "este campo es requerido",
329 
                                        })}
330 
                                        defaultValue=""
331 
                                    >
332 
                                        <option value="">Mes hasta</option>
333 
                                        {months.map((month, id) => (
334 
                                            <option key={id} value={id + 1}>
335 
                                                {month}
336 
                                            </option>
337 
                                        ))}
338 
                                    </select>
339 
                                    {errors.to_month && (
340 
                                        <FormErrorFeedback>
341 
                                            {errors.to_month.message}
342 
                                        </FormErrorFeedback>
343 
                                    )}
344 
                                </div>
345 
                            </div>
346 
                            <div className="input-c p-0">
347 
                                <div className="form-group">
348 
                                    <select
349 
                                        name="to_year"
350 
                                        id="to_year"
351 
                                        ref={register({
352 
                                            required: "este campo es requerido",
353 
                                        })}
354 
                                        defaultValue=""
355 
                                    >
356 
                                        <option value="">Año hasta</option>
357 
                                        {getYears().map((year) => (
358 
                                            <option key={year} value={year}>
359 
                                                {year}
360 
                                            </option>
361 
                                        ))}
362 
                                    </select>
363 
                                    {errors.to_year && (
364 
                                        <FormErrorFeedback>
365 
                                            {errors.to_year.message}
366 
                                        </FormErrorFeedback>
367 
                                    )}
368 
                                </div>
369 
                            </div>
370 
                        </div>
371 
                    )}
372 
                    <div className="form-group">
373 
                        <CKEditor
374 
                            onChange={(e) => setValue('description', e.editor.getData())}
375 
                            onInstanceReady={(e) => e.editor.setData(settedDescription)}
376 
                            config={CKEDITOR_OPTIONS}
377 
                        />
378 
                        {errors.description && (
379 
                            <FormErrorFeedback>
380 
                                {errors.description.message}
381 
                            </FormErrorFeedback>
382 
                        )}
383 
                    </div>
384 
                </Modal.Body>
385 
                <Modal.Footer>
386 
                    <Button size="sm" type="submit">Enviar</Button>
387 
                    <Button size="sm" variant="danger" onClick={handleModalOpen}>
388 
                        Cancelar
389 
                    </Button>
390 
                </Modal.Footer>
391 
            </form>
392 
            {modalLoading && <Spinner />}
393 
        </Modal>
394 
    )
395 
}
396 
 
397 
export default ExperienceModal