Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 5512 Rev 14885
Línea 1... Línea 1...
1 
import axios from 'axios';
 1 
import axios from 'axios'
2 
import React, { useState } from 'react'
 2 
import React, { useState } from 'react'
3 
import { Modal, Button } from 'react-bootstrap';
 3 
import { Modal, Button } from 'react-bootstrap'
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from 'react-hook-form'
Línea 5... Línea 5...
5 
 
 5 
 
6 
const EditModal = ({
 6 
const EditModal = ({
7 
    title = '',
 7 
	title = '',
8 
    isEdit = false,
 8 
	isEdit = false,
9 
    isOpen = false,
 9 
	isOpen = false,
10 
    closeModal = function () { },
 10 
	closeModal = function () { },
11 
    currentItem,
 11 
	currentItem,
12 
    url,
 12 
	url,
13 
    action
 13 
	action
Línea 14... Línea 14...
14 
}) => {
 14 
}) => {
15 
 
 15 
 
16 
    const {
 16 
	const {
17 
        register,
 17 
		register,
18 
        handleSubmit,
 18 
		handleSubmit,
19 
        formState: { errors }
 19 
		formState: { errors }
Línea 20... Línea 20...
20 
    } = useForm();
 20 
	} = useForm()
21 
    const [isActive, setIsActive] = useState(true);
 21 
	const [isActive, setIsActive] = useState(true)
22 
 
 22 
 
23 
    const onSubmit = (data) => {
 23 
	const onSubmit = (data) => {
24 
        let newData = { ...data, status: data.status ? "a" : "i" }
 24 
		let newData = { ...data, status: isActive ? 'a' : 'i' }
25 
        let formData = new URLSearchParams(newData).toString()
 25 
		let formData = new URLSearchParams(newData).toString()
26 
        axios.post(url, formData)
 26 
		axios.post(url, formData)
27 
            .then(async ({ data }) => {
 27 
			.then(async ({ data }) => {
28 
                if (data.success) {
 28 
				if (data.success) {
29 
                    try {
 29 
					try {
30 
                        await action()
 30 
						await action()
31 
                        closeModal()
 31 
						closeModal()
32 
                    }
 32 
					}
33 
                    catch (err) { console.log(err) }
 33 
					catch (err) { console.log(err) }
34 
                }
 34 
				}
Línea 35... Línea 35...
35 
            })
 35 
			})
36 
            .catch((err) => console.log(err))
 36 
			.catch((err) => console.log(err))
37 
    };
 37 
	}
38 
 
 38 
 
39 
    return (
 39 
	return (
40 
        <Modal
 40 
		<Modal
41 
            size="lg"
 41 
			size="lg"
42 
            show={isOpen}
 42 
			show={isOpen}
43 
            onHide={closeModal}
 43 
			onHide={closeModal}
44 
            autoFocus={false}
 44 
			autoFocus={false}
45 
        >
 45 
		>
46 
            <Modal.Header closeButton>
 46 
			<Modal.Header closeButton>
47 
                <Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
 47 
				<Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
48 
            </Modal.Header>
 48 
			</Modal.Header>
49 
            <form onSubmit={handleSubmit(onSubmit)}>
 49 
			<form onSubmit={handleSubmit(onSubmit)}>
50 
                <Modal.Body>
 50 
				<Modal.Body>
51 
                    <div className="form-group">
 51 
					<div className="form-group">
52 
                        <label>Nombre</label>
 52 
						<label>Nombre</label>
53 
                        <input
 53 
						<input
54 
                            className='form-control'
 54 
							className='form-control'
55 
                            name='name'
 55 
							name='name'
56 
                            ref={register}
 56 
							ref={register}
57 
                            defaultValue={currentItem ? currentItem.name : ''}
 57 
							defaultValue={currentItem ? currentItem.name : ''}
58 
                        />
 58 
						/>
59 
                        {errors.name && <p>Este campo es requerido</p>}
 59 
						{errors.name && <p>Este campo es requerido</p>}
60 
                    </div>
 60 
					</div>
61 
                    <div className="form-group">
 61 
					<div className="form-group">
62 
                        <label>Mínimo</label>
 62 
						<label>Mínimo</label>
63 
                        <input
 63 
						<input
64 
                            className="form-control"
 64 
							className="form-control"
65 
                            name="minimum_no_of_employee"
 65 
							name="minimum_no_of_employee"
66 
                            ref={register}
 66 
							ref={register}
67 
                            required
 67 
							required
68 
                            defaultValue={currentItem ? currentItem.minimum_no_of_employee : ''}
 68 
							defaultValue={currentItem ? currentItem.minimum_no_of_employee : ''}
69 
                        />
 69 
						/>
70 
                        {errors.minimum_no_of_employee && <p>Este campo es requerido</p>}
 70 
						{errors.minimum_no_of_employee && <p>Este campo es requerido</p>}
71 
                    </div>
 71 
					</div>
72 
                    <div className="form-group">
 72 
					<div className="form-group">
73 
                        <label>Máximo</label>
 73 
						<label>Máximo</label>
74 
                        <input
 74 
						<input
75 
                            className="form-control"
 75 
							className="form-control"
76 
                            name="maximum_no_of_employee"
 76 
							name="maximum_no_of_employee"
77 
                            ref={register}
 77 
							ref={register}
78 
                            defaultValue={currentItem ? currentItem.maximum_no_of_employee : ''}
 78 
							defaultValue={currentItem ? currentItem.maximum_no_of_employee : ''}
79 
                        />
 79 
						/>
80 
                        {errors.maximum_no_of_employee && <p>Este campo es requerido</p>}
 80 
						{errors.maximum_no_of_employee && <p>Este campo es requerido</p>}
81 
                    </div>
 81 
					</div>
82 
                    <div
 82 
					<div
83 
                        className={`toggle btn btn-primary ${!isActive && "off"}`}
 83 
						className={`toggle btn btn-primary ${!isActive && 'off'}`}
84 
                        data-toggle="toggle"
 84 
						data-toggle="toggle"
85 
                        role="button"
 85 
						role="button"
86 
                        onClick={() => setIsActive(!isActive)}
 86 
						onClick={() => setIsActive(!isActive)}
87 
                        style={{ width: '130px' }}
 87 
						style={{ width: '130px' }}
88 
                    >
 88 
					>
89 
                        <input
 89 
						<input
90 
                            type="checkbox"
 90 
							type="checkbox"
91 
                            name="status"
 91 
							name="status"
92 
                            ref={register}
 92 
							ref={register}
93 
                            checked={isActive}
 93 
							checked={isActive}
94 
                        />
 94 
						/>
95 
                        <div className="toggle-group">
 95 
						<div className="toggle-group">
96 
                            <label for="status" className="btn btn-primary toggle-on">Activo</label>
 96 
							<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
97 
                            <label for="status" className="btn btn-light toggle-off">Inactivo</label>
 97 
							<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
98 
                            <span className="toggle-handle btn btn-light"></span>
 98 
							<span className="toggle-handle btn btn-light"></span>
99 
                        </div>
 99 
						</div>
100 
                    </div>
 100 
					</div>
101 
                </Modal.Body>
 101 
				</Modal.Body>
102 
                <Modal.Footer>
 102 
				<Modal.Footer>
103 
                    <Button
 103 
					<Button
104 
                        variant="primary"
 104 
						variant="primary"
105 
                        type="submit"
 105 
						type="submit"
106 
                    >
 106 
					>
107 
                        Enviar
 107 
                        Enviar
108 
                    </Button>
 108 
					</Button>
109 
                    <Button variant="danger" onClick={closeModal}>
 109 
					<Button variant="danger" onClick={closeModal}>
110 
                        Cancelar
 110 
                        Cancelar
111 
                    </Button>
 111 
					</Button>
112 
                </Modal.Footer>
 112 
				</Modal.Footer>
Línea 113... Línea 113...
113 
            </form>
 113 
			</form>
114 
        </Modal >
 114 
		</Modal >