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, reset } = useForm()

	const [isActive, setIsActive] = useState(false)

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

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

	const [year, setYear] = useState(new Intl.DateTimeFormat('en-CA').format(new Date()))

	const dispatch = useDispatch()

	const deleteUserSelected = (uuid) => {

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

		setUsersSelected(newUsersSelected)

	}

	const addUser = () => {

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

		setUsersSelected(prev => [...prev, { uuid: newUser.uuid }])

	}

	const onClose = () => {

		reset()

		closeModal()

	}

	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()

				reset()

				onComplete()

				dispatch(addNotification({

					style: 'success',

					msg: 'Registro guardadof'

				}))

			})

	}

	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)

					setUsersSelected(data.users)

				})

		}

	}, [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={onClose} 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='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 className='table'>

							<thead>

								<tr>

									<th>Usuario</th>

									<th>Acciones</th>

								</tr>

							</thead>

							<tbody>

								{

									usersSelected.map((user) => {

										const renderUser = allUsers.find(userOption => userOption.uuid === user.uuid)

										return (

											<tr key={renderUser.uuid}>

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

												<td>

													<div className="d-flex">

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

															Eliminar

														</button>

													</div>

												</td>

											</tr>

										)

									})

								}

							</tbody>

						</table>

					</div>

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

						<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='d-flex align-items-center btn btn-primary ml-2' onClick={addUser}>

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

							Agregar

						</button>

					</div>

					<div className="d-flex align-items-centers" style={{ gap: '5px' }}>

						<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} defaultValue='1' />

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

						</div>

					</div>

					<div className="d-flex align-items-centers" style={{ gap: '5px' }}>

						<div className='form-group'>

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

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

						</div>

						<div className='form-group'>

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

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

								<option selected={watch('priority') === ''} value="">Seleccione</option>

								<option selected={watch('priority') === 'i'} value="i">Importante</option>

								<option selected={watch('priority') === 'ni'} 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 selected={watch('urgent') === ''} value="">Seleccione</option>

								<option selected={watch('urgent') === 'u'} value="u">Urgente</option>

								<option selected={watch('urgent') === 'nu'} value="nu">No urgente</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