Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 5647 Rev 15507
Línea 1... Línea -...
1 
import axios from 'axios';
 - 
 
2 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
3 
import { Modal, Button } from 'react-bootstrap';
 2 
import { useForm } from 'react-hook-form'
4 
import { useForm } from "react-hook-form";
 3 
import { CKEditor } from 'ckeditor4-react'
5 
import { CKEditor } from "ckeditor4-react";
 4 
import { Modal, Button } from 'react-bootstrap'
- 
 
 5 
import { axios, CKEDITOR_OPTIONS } from '../../../utils'
- 
 
 6 
import ToggleComponent from '../../../shared/ToggleComponent'
Línea 6... Línea 7...
6 
 
 7 
 
7 
const EditModal = ({
 8 
const EditModal = ({
8 
    title = '',
 9 
	title = 'Indusrias',
9 
    isEdit = false,
 10 
	url = '',
10 
    isOpen = false,
 - 
 
11 
    closeModal = function () { },
 11 
	isOpen = false,
12 
    currentItem,
 12 
	currentItem = null,
13 
    url,
 13 
	onClose = function () { },
14 
    action
 14 
	onComplete= function () { }
15 
}) => {
 - 
 
16 
 
 - 
 
17 
    const {
 - 
 
18 
        register,
 - 
 
19 
        handleSubmit,
 - 
 
20 
        getValues,
 15 
}) => {
21 
        setValue,
 - 
 
22 
        watch,
 - 
 
23 
        clearErrors,
 16 
	const [isActive, setIsActive] = useState(false)
24 
        formState: { errors }
 - 
 
25 
    } = useForm({
 17 
	const {register,handleSubmit,getValues,setValue,clearErrors,formState: { errors }} = useForm({
26 
        defaultValues: {
 18 
		defaultValues: {
27 
            description: '',
 19 
			description: '',
28 
        }
 20 
		}
29 
    });
 - 
 
30 
    const [isActive, setIsActive] = useState(false);
 21 
	})
31 
 
 22 
 
- 
 
 23 
	const onSubmit = (data) => {
- 
 
 24 
		const formData = new FormData()
32 
    const onSubmit = (data) => {
 25 
 
33 
        let newData = { ...data, status: isActive === true ? "a" : "i" }
 26 
		Object.entries(data).forEach(([key, value])=> formData.append(key, value))
- 
 
 27 
		formData.append('status', isActive === true ? 'a' : 'i')
34 
        let formData = new URLSearchParams(newData).toString()
 28 
 
35 
        axios.post(url, formData)
 29 
		axios.post(url, formData)
36 
            .then(async ({ data }) => {
 30 
			.then(({ data: response }) => {
37 
                if (data.success) {
 31 
				if (response.success) {
38 
                    try {
 - 
 
39 
                        await action()
 - 
 
40 
                        closeModal()
 32 
					onComplete()
41 
                    }
 - 
 
42 
                    catch (err) { console.log(err) }
 33 
					onClose()
43 
                }
 34 
				}
44 
            })
 35 
			})
45 
            .catch((err) => console.log(err))
 36 
			.catch((err) => console.log(err))
46 
    };
 37 
	}
47 
 
 38 
 
48 
    useEffect(() => {
 39 
	useEffect(() => {
49 
        register("description", {
 40 
		register('description', {
50 
            required: { value: "true" },
 41 
			required: { value: 'true' },
51 
        });
 42 
		})
52 
    }, [currentItem]);
 43 
	}, [currentItem])
53 
 
 44 
 
54 
    useEffect(() => {
 45 
	useEffect(() => {
55 
        if (currentItem && currentItem.status === "a") {
 46 
		if (currentItem?.status === 'a') {
56 
            setIsActive(true)
 47 
			setIsActive(true)
57 
        }
 48 
		}
58 
    }, [currentItem]);
 49 
	}, [currentItem])
59 
 
 50 
 
60 
    return (
 - 
 
61 
        <Modal
 - 
 
62 
            size="lg"
 - 
 
63 
            show={isOpen}
 51 
	return (
64 
            onHide={closeModal}
 - 
 
65 
            autoFocus={false}
 - 
 
66 
        >
 52 
		<Modal show={isOpen} onHide={onClose}>
67 
            <Modal.Header closeButton>
 53 
			<Modal.Header closeButton>
68 
                <Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
 54 
				<Modal.Title>{title} - {currentItem ? 'Editar' : 'Agregar'}</Modal.Title>
69 
            </Modal.Header>
 55 
			</Modal.Header>
70 
            <form onSubmit={handleSubmit(onSubmit)}>
 56 
			<form onSubmit={handleSubmit(onSubmit)}>
71 
                <Modal.Body>
 57 
				<Modal.Body>
72 
                    <div className="form-group">
 58 
					<div className="form-group">
73 
                        <label>Nombre</label>
 59 
						<label>Nombre</label>
74 
                        <input
 60 
						<input
75 
                            className='form-control'
 61 
							className='form-control'
76 
                            name='name'
 62 
							name='name'
77 
                            ref={register}
 63 
							ref={register}
78 
                            defaultValue={currentItem ? currentItem.name : ''}
 64 
							defaultValue={currentItem ? currentItem.name : ''}
79 
                        />
 65 
						/>
80 
                        {errors.name && <p>Este campo es requerido</p>}
 66 
						{errors.name && <p>Este campo es requerido</p>}
81 
                    </div>
 67 
					</div>
82 
                    <CKEditor
 - 
 
83 
                        data={watch("description")}
 68 
					<CKEditor
84 
                        onChange={(e) => {
 69 
						onChange={(e) => {
85 
                            const text = e.editor.getData();
 70 
							const text = e.editor.getData()
86 
                            setValue("description", text);
 71 
							setValue('description', text)
87 
                            if (errors.description && getValues(description)) {
 72 
							if (errors.description && getValues('description')) {
88 
                                clearErrors("description");
 73 
								clearErrors('description')
89 
                            }
 74 
							}
90 
                        }}
 75 
						}}
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'] }
 76 
						onInstanceReady={(e) => currentItem && e.editor.setData(currentItem.name)}
102 
                            ],
 - 
 
103 
                            removePlugins: 'elementspath,Anchor',
 - 
 
104 
                            heigth: 100
 - 
 
105 
                        }}
 77 
						config={CKEDITOR_OPTIONS}
106 
                        name="description"
 78 
						name="description"
107 
                    />
 79 
					/>
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' }}
 80 
					{errors.description && <p>Este campo es requerido</p>}
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>
 81 
					<ToggleComponent setValue={(value)=> setIsActive(value)}/>
127 
                </Modal.Body>
 82 
				</Modal.Body>
128 
                <Modal.Footer>
 - 
 
129 
                    <Button
 - 
 
130 
                        variant="primary"
 83 
				<Modal.Footer>
131 
                        type="submit"
 - 
 
132 
                    >
 84 
					<Button variant="primary" type="submit">
133 
                        Enviar
 85 
                        Enviar
134 
                    </Button>
 86 
					</Button>
135 
                    <Button variant="danger" onClick={closeModal}>
 87 
					<Button variant="danger" onClick={onClose}>
136 
                        Cancelar
 88 
                        Cancelar
137 
                    </Button>
 89 
					</Button>
138 
                </Modal.Footer>
 90 
				</Modal.Footer>
139 
            </form>
 91 
			</form>
140 
        </Modal >
 92 
		</Modal >
141 
    )
 93 
	)
Línea 142... Línea 94...
142 
}
 94 
}
143 
 
 95