Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15507 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5647 stevensc 1 
import axios from 'axios';
2 
import React, { useEffect, useState } from 'react'
3 
import { Modal, Button } from 'react-bootstrap';
4 
import { useForm } from "react-hook-form";
5 
import { CKEditor } from "ckeditor4-react";
6 
 
7 
const EditModal = ({
8 
    title = '',
9 
    isEdit = false,
10 
    isOpen = false,
11 
    closeModal = function () { },
12 
    currentItem,
13 
    url,
14 
    action
15 
}) => {
16 
 
17 
    const {
18 
        register,
19 
        handleSubmit,
20 
        getValues,
21 
        setValue,
22 
        watch,
23 
        clearErrors,
24 
        formState: { errors }
25 
    } = useForm({
26 
        defaultValues: {
27 
            description: '',
28 
        }
29 
    });
30 
    const [isActive, setIsActive] = useState(false);
31 
 
32 
    const onSubmit = (data) => {
33 
        let newData = { ...data, status: isActive === true ? "a" : "i" }
34 
        let formData = new URLSearchParams(newData).toString()
35 
        axios.post(url, formData)
36 
            .then(async ({ data }) => {
37 
                if (data.success) {
38 
                    try {
39 
                        await action()
40 
                        closeModal()
41 
                    }
42 
                    catch (err) { console.log(err) }
43 
                }
44 
            })
45 
            .catch((err) => console.log(err))
46 
    };
47 
 
48 
    useEffect(() => {
49 
        register("description", {
50 
            required: { value: "true" },
51 
        });
52 
    }, [currentItem]);
53 
 
54 
    useEffect(() => {
55 
        if (currentItem && currentItem.status === "a") {
56 
            setIsActive(true)
57 
        }
58 
    }, [currentItem]);
59 
 
60 
    return (
61 
        <Modal
62 
            size="lg"
63 
            show={isOpen}
64 
            onHide={closeModal}
65 
            autoFocus={false}
66 
        >
67 
            <Modal.Header closeButton>
68 
                <Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
69 
            </Modal.Header>
70 
            <form onSubmit={handleSubmit(onSubmit)}>
71 
                <Modal.Body>
72 
                    <div className="form-group">
73 
                        <label>Nombre</label>
74 
                        <input
75 
                            className='form-control'
76 
                            name='name'
77 
                            ref={register}
78 
                            defaultValue={currentItem ? currentItem.name : ''}
79 
                        />
80 
                        {errors.name && <p>Este campo es requerido</p>}
81 
                    </div>
82 
                    <CKEditor
83 
                        data={watch("description")}
84 
                        onChange={(e) => {
85 
                            const text = e.editor.getData();
86 
                            setValue("description", text);
87 
                            if (errors.description && getValues(description)) {
88 
                                clearErrors("description");
89 
                            }
90 
                        }}
91 
                        onInstanceReady={(e) => currentItem && e.editor.setData(currentItem.name)}
92 
                        config={{
93 
                            toolbar: [
94 
                                { name: 'editing', items: ['Scayt'] },
95 
                                { name: 'links', items: ['Link', 'Unlink'] },
96 
                                { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
97 
                                { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
98 
                                '/',
99 
                                { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
100 
                                { name: 'styles', items: ['Styles', 'Format'] },
101 
                                { name: 'tools', items: ['Maximize'] }
102 
                            ],
103 
                            removePlugins: 'elementspath,Anchor',
104 
                            heigth: 100
105 
                        }}
106 
                        name="description"
107 
                    />
108 
                    {errors.description && <p>Este campo es requerido</p>}
109 
                    <div
110 
                        className={`toggle btn btn-primary ${!isActive && "off"}`}
111 
                        data-toggle="toggle"
112 
                        role="button"
113 
                        style={{ width: '130px' }}
114 
                        onClick={() => setIsActive(!isActive)}
115 
                    >
116 
                        <input
117 
                            type="checkbox"
118 
                            name="status"
119 
                            checked={isActive}
120 
                        />
121 
                        <div className="toggle-group">
122 
                            <label for="status" className="btn btn-primary toggle-on">Activo</label>
123 
                            <label for="status" className="btn btn-light toggle-off">Inactivo</label>
124 
                            <span className="toggle-handle btn btn-light"></span>
125 
                        </div>
126 
                    </div>
127 
                </Modal.Body>
128 
                <Modal.Footer>
129 
                    <Button
130 
                        variant="primary"
131 
                        type="submit"
132 
                    >
133 
                        Enviar
134 
                    </Button>
135 
                    <Button variant="danger" onClick={closeModal}>
136 
                        Cancelar
137 
                    </Button>
138 
                </Modal.Footer>
139 
            </form>
140 
        </Modal >
141 
    )
142 
}
143 
 
144 
export default EditModal