Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 11467 Rev 11483
Línea -... Línea 1...
- 
 
 1 
import React, { useState, useEffect } from 'react'
- 
 
 2 
import { Button, Modal } from 'react-bootstrap'
1 
import React from 'react'
 3 
import axios from 'axios'
- 
 
 4 
import { useForm } from 'react-hook-form'
- 
 
 5 
import { useDispatch } from 'react-redux'
- 
 
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 7 
 
- 
 
 8 
const EditAndAddModal = ({ action_link, closeModal, type }) => {
- 
 
 9 
 
- 
 
 10 
	//Hooks
- 
 
 11 
	const { register, handleSubmit, errors, setValue, clearErrors } = useForm()
- 
 
 12 
	const [isActive, setIsActive] = useState(false)
- 
 
 13 
	const dispatch = useDispatch()
- 
 
 14 
 
- 
 
 15 
	const onSubmit = (data) => {
- 
 
 16 
		const submitData = new FormData()
- 
 
 17 
 
- 
 
 18 
		Object.entries({
- 
 
 19 
			...data,
- 
 
 20 
			status: isActive ? 'a' : 'i'
- 
 
 21 
		}).map(([key, value]) => {
- 
 
 22 
			submitData.append(key, value)
- 
 
 23 
		})
- 
 
 24 
 
- 
 
 25 
		axios.post(action_link, submitData)
- 
 
 26 
			.then(({ data }) => {
- 
 
 27 
				if (!data.success) {
- 
 
 28 
					return dispatch(addNotification({
- 
 
 29 
						style: 'danger',
- 
 
 30 
						msg: 'Ha ocurrido un error'
- 
 
 31 
					}))
- 
 
 32 
				}
- 
 
 33 
 
- 
 
 34 
				clearErrors()
- 
 
 35 
				closeModal()
- 
 
 36 
				dispatch(addNotification({
- 
 
 37 
					style: 'success',
- 
 
 38 
					msg: 'Usuario registrado'
- 
 
 39 
				}))
- 
 
 40 
			})
- 
 
 41 
	}
- 
 
 42 
 
- 
 
 43 
	useEffect(() => {
- 
 
 44 
		if (type === 'edit') {
- 
 
 45 
			axios.get(action_link)
- 
 
 46 
				.then(({ data }) => {
- 
 
 47 
					if (!data.success) {
- 
 
 48 
						return dispatch(addNotification({
- 
 
 49 
							style: 'danger',
- 
 
 50 
							msg: 'Ha ocurrido un error'
- 
 
 51 
						}))
- 
 
 52 
					}
- 
 
 53 
 
- 
 
 54 
					Object.entries(data.data).map(([key, value]) => {
- 
 
 55 
						if (key === 'status') {
- 
 
 56 
							return setIsActive(value === 'a' ? true : false)
- 
 
 57 
						}
- 
 
 58 
						setValue(key, value)
- 
 
 59 
					})
- 
 
 60 
				})
- 
 
 61 
		}
- 
 
 62 
	}, [type])
Línea 2... Línea -...
2 
 
 - 
 
3 
const EditAndAddModal = () => {
 63 
 
- 
 
 64 
	return (
- 
 
 65 
		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
- 
 
 66 
			<Modal.Header closeButton>
- 
 
 67 
				<Modal.Title>
- 
 
 68 
					{
- 
 
 69 
						type === 'add'
- 
 
 70 
							? 'Agregar Objetivo'
- 
 
 71 
							: 'Editar Objetivo'
- 
 
 72 
					}
- 
 
 73 
				</Modal.Title>
- 
 
 74 
			</Modal.Header>
- 
 
 75 
			<form onSubmit={handleSubmit(onSubmit)}>
- 
 
 76 
				<Modal.Body>
- 
 
 77 
					<div className="d-flex" style={{ gap: '10px' }}>
- 
 
 78 
						<div className='form-group'>
- 
 
 79 
							<label className="form-label">Título</label>
- 
 
 80 
							<input type="text" name='title' className='form-control' ref={register({ required: true })} />
- 
 
 81 
							{errors.title && <p>{errors.title.message}</p>}
- 
 
 82 
						</div>
- 
 
 83 
						<div className='form-group'>
- 
 
 84 
							<label className="form-label">Estatus</label>
- 
 
 85 
							<div
- 
 
 86 
								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
- 
 
 87 
								data-toggle="toggle"
- 
 
 88 
								role="button"
- 
 
 89 
								style={{ width: '130px' }}
- 
 
 90 
								onClick={() => setIsActive(!isActive)}
- 
 
 91 
							>
- 
 
 92 
								<input
- 
 
 93 
									type="checkbox"
- 
 
 94 
									checked={isActive}
- 
 
 95 
								/>
- 
 
 96 
								<div className="toggle-group">
- 
 
 97 
									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
- 
 
 98 
									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
- 
 
 99 
									<span className="toggle-handle btn btn-light"></span>
- 
 
 100 
								</div>
- 
 
 101 
							</div>
- 
 
 102 
						</div>
4 
	return (
 103 
					</div>
- 
 
 104 
					<div className='form-group'>
- 
 
 105 
						<label className="form-label">Descripción</label>
- 
 
 106 
						<textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
- 
 
 107 
						{errors.description && <p>{errors.description.message}</p>}
- 
 
 108 
					</div>
- 
 
 109 
				</Modal.Body>
- 
 
 110 
				<Modal.Footer>
- 
 
 111 
					<Button variant="primary" type='submit'>
- 
 
 112 
						Enviar
- 
 
 113 
					</Button>
- 
 
 114 
					<Button variant="danger" onClick={closeModal}>
- 
 
 115 
						Cancelar
- 
 
 116 
					</Button>
- 
 
 117 
				</Modal.Footer>
- 
 
 118 
			</form>
5 
		<div>EditAndAddModal</div>
 119 
		</Modal >
6 
	)
 120 
	)
Línea 7... Línea 121...
7 
}
 121 
}
8 
 
 122