Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'

import { Button, Modal } from 'react-bootstrap'

import axios from 'axios'

import Datetime from 'react-datetime'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import 'react-datetime/css/react-datetime.css'

const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {

	//Hooks

	const { register, handleSubmit, errors, setValue, clearErrors, watch } = useForm()

	const [isActive, setIsActive] = useState(false)

	const [usersSelected, setUsersSelected] = useState([])

	const [allUsers, setAllUsers] = useState([])

	const [year, setYear] = useState(new Date())

	const dispatch = useDispatch()

	const deleteUserSelected = (uuid) => {

		const newUsersSelected = usersSelected.filter((user) => user.uuid !== uuid)

		setUsersSelected(newUsersSelected)

	}

	const addUser = () => {

		const newUser = usersSelected.find((user) => user.uuid === watch('user'))

		setUsersSelected(prev => [...prev, newUser])

	}

	const onSubmit = (data) => {

		const submitData = new FormData()

		submitData.append('status', isActive ? 'a' : 'i')

		submitData.append('date', year)

		usersSelected.map((user) => submitData.append('who[]', user.uuid))

		Object.entries(data).map(([key, value]) => {

			submitData.append(key, value)

		})

		axios.post(action_link, submitData)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				clearErrors()

				closeModal()

				onComplete()

				dispatch(addNotification({

					style: 'success',

					msg: 'Usuario registrado'

				}))

			})

	}

	useEffect(() => {

		if (type === 'edit') {

			axios.get(action_link)

				.then(({ data }) => {

					if (!data.success) {

						return dispatch(addNotification({

							style: 'danger',

							msg: 'Ha ocurrido un error'

						}))

					}

					setAllUsers(data.all_users)

					setValue('title', data.data.title)

					setValue('description', data.data.description)

					setValue('how', data.data.how)

					setValue('place', data.data.place)

					setValue('date', data.data.date)

					setValue('cost', data.data.time)

					setValue('priority', data.data.time)

					setValue('urgent', data.data.time)

					setValue('indicator', data.data.indicator)

					setIsActive(data.data.status === 'a' ? true : false)

					data.users.forEach(userId => {

						const user = allUsers.find(userToAdd => userToAdd.uuid === userId)

						setUsersSelected(prev => [...prev, user])

					})

				})

		}

	}, [type])

	useEffect(() => {

		if (type === 'add') {

			axios.get(action_link)

				.then(({ data }) => {

					if (!data.success) {

						return dispatch(addNotification({

							style: 'danger',

							msg: 'Ha ocurrido un error'

						}))

					}

					setAllUsers(data.data)

				})

		}

	}, [type])

	return (

		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>

			<Modal.Header closeButton>

				<Modal.Title>

					{

						type === 'add'

							? 'Agregar Tarea'

							: 'Editar Tarea'

					}

				</Modal.Title>

			</Modal.Header>

			<form onSubmit={handleSubmit(onSubmit)}>

				<Modal.Body>

					<div className="d-flex" style={{ gap: '10px' }}>

						<div className='form-group'>

							<label className="form-label">Título</label>

							<input type="text" name='title' className='form-control' ref={register({ required: true })} />

							{errors.title && <p>{errors.title.message}</p>}

						</div>

						<div className='form-group'>

							<label className="form-label">Descripción de la tarea</label>

							<input type="text" name='description' className='form-control' ref={register({ required: true })} />

							{errors.description && <p>{errors.description.message}</p>}

						</div>

						<div className='form-group'>

							<label className="form-label">Como se implementara</label>

							<input type="text" name='how' className='form-control' ref={register({ required: true })} />

							{errors.how && <p>{errors.how.message}</p>}

						</div>

						<div className="w-100">

							<table>

								<thead>

									<tr>

										<th>Usuario</th>

										<th>Acciones</th>

									</tr>

								</thead>

								<tbody>

									{

										usersSelected.map((user) => (

											<tr key={user.uuid}>

												<td>{`${user.first_name} ${user.last_name}`}</td>

												<td>

													<div className="d-flex">

														<button className='btn btn-danger' onClick={() => deleteUserSelected(user.uuid)}>

															Eliminar

														</button>

													</div>

												</td>

											</tr>

										))

									}

								</tbody>

							</table>

						</div>

						<div className="form-row">

							<select name='user' ref={register} className='form-control'>

								<option value=''>Seleccione</option>

								{

									allUsers.map((user) => (

										<option key={user.uuid} value={user.uuid}>{`${user.first_name} ${user.last_name}`}</option>

									))

								}

							</select>

							<button className='btn btn-primary ml-5' onClick={addUser}>

								<i className='fa fa-plus' />

								Agregar

							</button>

						</div>

						<div className="form-row">

							<div className='form-group'>

								<label className="form-label">Donde se realizara:</label>

								<input type="text" name='place' className='form-control' ref={register({ required: true })} />

								{errors.place && <p>{errors.place.message}</p>}

							</div>

							<div className='form-group'>

								<label className="form-label">Fecha:</label>

								<Datetime

									dateFormat="DD-MM-YYYY"

									timeFormat={false}

									onChange={(e) =>

										setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))

									}

									inputProps={{ className: 'form-control' }}

									initialValue={Date.parse(year)}

									closeOnSelect

									value={year}

								/>

							</div>

							<div className='form-group'>

								<label className="form-label">Horas:</label>

								<input type="number" name='time' className='form-control' ref={register} />

								{errors.time && <p>{errors.time.message}</p>}

							</div>

						</div>

					</div>

					<div className="form-row">

						<div className='form-group'>

							<label className="form-label">Costo:</label>

							<input type="number" name='cost' className='form-control' ref={register} />

						</div>

						<div className='form-group'>

							<label className="form-label">Prioridad:</label>

							<select name="priority" ref={register({ required: true })}>

								<option value="">Seleccione</option>

								<option value="i">Importante</option>

								<option value="ni">No importante</option>

							</select>

						</div>

						<div className='form-group'>

							<label className="form-label">Urgencia:</label>

							<select name="urgent" ref={register({ required: true })}>

								<option value="">Seleccione</option>

								<option value="u">Importante</option>

								<option value="nu">No importante</option>

							</select>

						</div>

					</div>

					<div className="form-row">

						<div className="col-md-9 mb-3">

							<label>Indicador de progreso:</label>

							<div className="d-flex justify-content-between align-items-center">

								<input type="range" name="indicator" min='1' max='100' className="form-control" ref={register} />

								<span className="ml-2" id="spanIndicator">{watch('indicator')}</span>

							</div>

						</div>

						<div className="col-md-3 mb-3 text-center">

							<label htmlFor="status">Estatus:</label>

							<div

								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}

								data-toggle="toggle"

								role="button"

								style={{ width: '130px' }}

								onClick={() => setIsActive(!isActive)}

							>

								<input

									type="checkbox"

									checked={isActive}

								/>

								<div className="toggle-group">

									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>

									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>

									<span className="toggle-handle btn btn-light"></span>

								</div>

							</div>

						</div>

					</div>

				</Modal.Body>

				<Modal.Footer>

					<Button variant="primary" type='submit'>

						Enviar

					</Button>

					<Button variant="danger" onClick={closeModal}>

						Cancelar

					</Button>

				</Modal.Footer>

			</form>

		</Modal >

	)

}

export default EditAndAddModal