Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 11546 Rev 11659
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
 2 
import { Button, Modal } from 'react-bootstrap'
3 
import axios from 'axios'
 3 
import axios from 'axios'
- 
 
 4 
import Datetime from 'react-datetime'
4 
import { useForm } from 'react-hook-form'
 5 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
 6 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 8 
import 'react-datetime/css/react-datetime.css'
Línea 7... Línea 9...
7 
 
 9 
 
Línea 8... Línea 10...
8 
const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {
 10 
const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {
9 
 
 11 
 
10 
	//Hooks
 12 
	//Hooks
- 
 
 13 
	const { register, handleSubmit, errors, setValue, clearErrors, watch } = useForm()
- 
 
 14 
	const [isActive, setIsActive] = useState(false)
- 
 
 15 
	const [usersSelected, setUsersSelected] = useState([])
11 
	const { register, handleSubmit, errors, setValue, clearErrors } = useForm()
 16 
	const [allUsers, setAllUsers] = useState([])
Línea -... Línea 17...
- 
 
 17 
	const [year, setYear] = useState(new Date())
- 
 
 18 
	const dispatch = useDispatch()
- 
 
 19 
 
- 
 
 20 
	const deleteUserSelected = (uuid) => {
- 
 
 21 
		const newUsersSelected = usersSelected.filter((user) => user.uuid !== uuid)
- 
 
 22 
		setUsersSelected(newUsersSelected)
- 
 
 23 
	}
- 
 
 24 
 
- 
 
 25 
	const addUser = () => {
- 
 
 26 
		const newUser = usersSelected.find((user) => user.uuid === watch('user'))
12 
	const [isActive, setIsActive] = useState(false)
 27 
		setUsersSelected(prev => [...prev, newUser])
13 
	const dispatch = useDispatch()
 28 
	}
Línea 14... Línea 29...
14 
 
 29 
 
15 
	const onSubmit = (data) => {
 30 
	const onSubmit = (data) => {
16 
		const submitData = new FormData()
 31 
		const submitData = new FormData()
17 
 
 32 
 
18 
		Object.entries({
 33 
		submitData.append('status', isActive ? 'a' : 'i')
19 
			...data,
 34 
		submitData.append('date', year)
Línea 20... Línea 35...
20 
			status: isActive ? 'a' : 'i'
 35 
		usersSelected.map((user) => submitData.append('who[]', user.uuid))
21 
		}).map(([key, value]) => {
 36 
		Object.entries(data).map(([key, value]) => {
Línea 50... Línea 65...
50 
							style: 'danger',
 65 
							style: 'danger',
51 
							msg: 'Ha ocurrido un error'
 66 
							msg: 'Ha ocurrido un error'
52 
						}))
 67 
						}))
53 
					}
 68 
					}
Línea -... Línea 69...
- 
 
 69 
 
54 
 
 70 
					setAllUsers(data.all_users)
- 
 
 71 
					setValue('title', data.data.title)
55 
					Object.entries(data.data).map(([key, value]) => {
 72 
					setValue('description', data.data.description)
- 
 
 73 
					setValue('how', data.data.how)
- 
 
 74 
					setValue('place', data.data.place)
- 
 
 75 
					setValue('date', data.data.date)
- 
 
 76 
					setValue('cost', data.data.time)
- 
 
 77 
					setValue('priority', data.data.time)
- 
 
 78 
					setValue('urgent', data.data.time)
56 
						if (key === 'status') {
 79 
					setValue('indicator', data.data.indicator)
- 
 
 80 
					setIsActive(data.data.status === 'a' ? true : false)
- 
 
 81 
 
- 
 
 82 
					data.users.forEach(userId => {
57 
							return setIsActive(value === 'a' ? true : false)
 83 
						const user = allUsers.find(userToAdd => userToAdd.uuid === userId)
58 
						}
 84 
 
59 
						setValue(key, value)
 85 
						setUsersSelected(prev => [...prev, user])
60 
					})
 86 
					})
61 
				})
 87 
				})
62 
		}
 88 
		}
Línea -... Línea 89...
- 
 
 89 
	}, [type])
- 
 
 90 
 
- 
 
 91 
	useEffect(() => {
- 
 
 92 
		if (type === 'add') {
- 
 
 93 
			axios.get(action_link)
- 
 
 94 
				.then(({ data }) => {
- 
 
 95 
					if (!data.success) {
- 
 
 96 
						return dispatch(addNotification({
- 
 
 97 
							style: 'danger',
- 
 
 98 
							msg: 'Ha ocurrido un error'
- 
 
 99 
						}))
- 
 
 100 
					}
- 
 
 101 
 
- 
 
 102 
					setAllUsers(data.data)
- 
 
 103 
				})
- 
 
 104 
		}
63 
	}, [type])
 105 
	}, [type])
64 
 
 106 
 
65 
	return (
 107 
	return (
66 
		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
 108 
		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
67 
			<Modal.Header closeButton>
 109 
			<Modal.Header closeButton>
68 
				<Modal.Title>
 110 
				<Modal.Title>
69 
					{
 111 
					{
70 
						type === 'add'
 112 
						type === 'add'
71 
							? 'Agregar Meta'
 113 
							? 'Agregar Tarea'
72 
							: 'Editar Meta'
 114 
							: 'Editar Tarea'
73 
					}
 115 
					}
74 
				</Modal.Title>
 116 
				</Modal.Title>
75 
			</Modal.Header>
 117 
			</Modal.Header>
Línea 80... Línea 122...
80 
							<label className="form-label">Título</label>
 122 
							<label className="form-label">Título</label>
81 
							<input type="text" name='title' className='form-control' ref={register({ required: true })} />
 123 
							<input type="text" name='title' className='form-control' ref={register({ required: true })} />
82 
							{errors.title && <p>{errors.title.message}</p>}
 124 
							{errors.title && <p>{errors.title.message}</p>}
83 
						</div>
 125 
						</div>
84 
						<div className='form-group'>
 126 
						<div className='form-group'>
- 
 
 127 
							<label className="form-label">Descripción de la tarea</label>
- 
 
 128 
							<input type="text" name='description' className='form-control' ref={register({ required: true })} />
- 
 
 129 
							{errors.description && <p>{errors.description.message}</p>}
- 
 
 130 
						</div>
- 
 
 131 
						<div className='form-group'>
- 
 
 132 
							<label className="form-label">Como se implementara</label>
- 
 
 133 
							<input type="text" name='how' className='form-control' ref={register({ required: true })} />
- 
 
 134 
							{errors.how && <p>{errors.how.message}</p>}
- 
 
 135 
						</div>
- 
 
 136 
						<div className="w-100">
- 
 
 137 
							<table>
- 
 
 138 
								<thead>
- 
 
 139 
									<tr>
- 
 
 140 
										<th>Usuario</th>
- 
 
 141 
										<th>Acciones</th>
- 
 
 142 
									</tr>
- 
 
 143 
								</thead>
- 
 
 144 
								<tbody>
- 
 
 145 
									{
- 
 
 146 
										usersSelected.map((user) => (
- 
 
 147 
											<tr key={user.uuid}>
- 
 
 148 
												<td>{`${user.first_name} ${user.last_name}`}</td>
- 
 
 149 
												<td>
- 
 
 150 
													<div className="d-flex">
- 
 
 151 
														<button className='btn btn-danger' onClick={() => deleteUserSelected(user.uuid)}>
- 
 
 152 
															Eliminar
- 
 
 153 
														</button>
- 
 
 154 
													</div>
- 
 
 155 
												</td>
- 
 
 156 
											</tr>
- 
 
 157 
										))
- 
 
 158 
									}
- 
 
 159 
								</tbody>
- 
 
 160 
							</table>
- 
 
 161 
						</div>
- 
 
 162 
						<div className="form-row">
- 
 
 163 
							<select name='user' ref={register} className='form-control'>
- 
 
 164 
								<option value=''>Seleccione</option>
- 
 
 165 
								{
- 
 
 166 
									allUsers.map((user) => (
- 
 
 167 
										<option key={user.uuid} value={user.uuid}>{`${user.first_name} ${user.last_name}`}</option>
- 
 
 168 
									))
- 
 
 169 
								}
- 
 
 170 
							</select>
- 
 
 171 
							<button className='btn btn-primary ml-5' onClick={addUser}>
- 
 
 172 
								<i className='fa fa-plus' />
- 
 
 173 
								Agregar
- 
 
 174 
							</button>
- 
 
 175 
						</div>
- 
 
 176 
						<div className="form-row">
- 
 
 177 
							<div className='form-group'>
- 
 
 178 
								<label className="form-label">Donde se realizara:</label>
- 
 
 179 
								<input type="text" name='place' className='form-control' ref={register({ required: true })} />
- 
 
 180 
								{errors.place && <p>{errors.place.message}</p>}
- 
 
 181 
							</div>
- 
 
 182 
							<div className='form-group'>
- 
 
 183 
								<label className="form-label">Fecha:</label>
- 
 
 184 
								<Datetime
- 
 
 185 
									dateFormat="DD-MM-YYYY"
- 
 
 186 
									timeFormat={false}
- 
 
 187 
									onChange={(e) =>
- 
 
 188 
										setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
- 
 
 189 
									}
- 
 
 190 
									inputProps={{ className: 'form-control' }}
- 
 
 191 
									initialValue={Date.parse(year)}
- 
 
 192 
									closeOnSelect
- 
 
 193 
									value={year}
- 
 
 194 
								/>
- 
 
 195 
							</div>
- 
 
 196 
							<div className='form-group'>
- 
 
 197 
								<label className="form-label">Horas:</label>
- 
 
 198 
								<input type="number" name='time' className='form-control' ref={register} />
- 
 
 199 
								{errors.time && <p>{errors.time.message}</p>}
- 
 
 200 
							</div>
- 
 
 201 
						</div>
- 
 
 202 
					</div>
- 
 
 203 
					<div className="form-row">
- 
 
 204 
						<div className='form-group'>
85 
							<label className="form-label">Estatus</label>
 205 
							<label className="form-label">Costo:</label>
- 
 
 206 
							<input type="number" name='cost' className='form-control' ref={register} />
- 
 
 207 
						</div>
- 
 
 208 
						<div className='form-group'>
- 
 
 209 
							<label className="form-label">Prioridad:</label>
- 
 
 210 
							<select name="priority" ref={register({ required: true })}>
- 
 
 211 
								<option value="">Seleccione</option>
- 
 
 212 
								<option value="i">Importante</option>
- 
 
 213 
								<option value="ni">No importante</option>
- 
 
 214 
							</select>
- 
 
 215 
						</div>
- 
 
 216 
						<div className='form-group'>
- 
 
 217 
							<label className="form-label">Urgencia:</label>
- 
 
 218 
							<select name="urgent" ref={register({ required: true })}>
- 
 
 219 
								<option value="">Seleccione</option>
- 
 
 220 
								<option value="u">Importante</option>
- 
 
 221 
								<option value="nu">No importante</option>
- 
 
 222 
							</select>
- 
 
 223 
						</div>
- 
 
 224 
					</div>
- 
 
 225 
					<div className="form-row">
- 
 
 226 
						<div className="col-md-9 mb-3">
- 
 
 227 
							<label>Indicador de progreso:</label>
- 
 
 228 
							<div className="d-flex justify-content-between align-items-center">
- 
 
 229 
								<input type="range" name="indicator" min='1' max='100' className="form-control" ref={register} />
- 
 
 230 
								<span className="ml-2" id="spanIndicator">{watch('indicator')}</span>
- 
 
 231 
							</div>
- 
 
 232 
						</div>
- 
 
 233 
						<div className="col-md-3 mb-3 text-center">
- 
 
 234 
							<label htmlFor="status">Estatus:</label>
86 
							<div
 235 
							<div
87 
								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
 236 
								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
88 
								data-toggle="toggle"
 237 
								data-toggle="toggle"
89 
								role="button"
 238 
								role="button"
90 
								style={{ width: '130px' }}
 239 
								style={{ width: '130px' }}
Línea 100... Línea 249...
100 
									<span className="toggle-handle btn btn-light"></span>
 249 
									<span className="toggle-handle btn btn-light"></span>
101 
								</div>
 250 
								</div>
102 
							</div>
 251 
							</div>
103 
						</div>
 252 
						</div>
104 
					</div>
 253 
					</div>
105 
					<div className='form-group'>
 - 
 
106 
						<label className="form-label">Descripción</label>
 - 
 
107 
						<textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
 - 
 
108 
						{errors.description && <p>{errors.description.message}</p>}
 - 
 
109 
					</div>
 - 
 
110 
				</Modal.Body>
 254 
				</Modal.Body>
111 
				<Modal.Footer>
 255 
				<Modal.Footer>
112 
					<Button variant="primary" type='submit'>
 256 
					<Button variant="primary" type='submit'>
113 
						Enviar
 257 
						Enviar
114 
					</Button>
 258 
					</Button>