Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12379 | Rev 15098 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
12264 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React, { useState, useEffect } from 'react'
12274 stevensc 3 
import axios from 'axios'
12264 stevensc 4 
import { Card } from 'react-bootstrap'
12274 stevensc 5 
import { useDispatch } from 'react-redux'
6 
import { useHistory } from 'react-router-dom'
12264 stevensc 7 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
8 
import { addNotification } from '../../../redux/notification/notification.actions'
9 
import DeleteModal from '../../../shared/DeleteModal'
12329 stevensc 10 
import AddModal from '../components/AddModal'
12264 stevensc 11 
 
12 
const headers = [
13 
	{ key: 'last_date', label: 'Último día', isSorteable: true },
14 
	{ key: 'form', label: 'Nombre del Formulario', isSorteable: true },
15 
	{ key: 'supervisor', label: 'Supervisor', isSorteable: true },
16 
	{ key: 'first_name', label: 'Evaluado', isSorteable: true },
17 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
18 
]
19 
 
20 
const TableView = ({
21 
	add_link,
22 
	table_link,
23 
	permisions,
24 
	actionLink,
12329 stevensc 25 
	setActionLink,
26 
	email_link
12264 stevensc 27 
}) => {
28 
 
29 
	//Hooks
30 
	const dispatch = useDispatch()
12274 stevensc 31 
	const history = useHistory()
12264 stevensc 32 
 
33 
	//State
34 
	const [modalToShow, setModalToShow] = useState('')
35 
	const [items, setItems] = useState([])
36 
	const [total, setTotal] = useState(0)
37 
	const [search, setSearch] = useState('')
38 
	const [dataLength, setDataLength] = useState(10)
12379 stevensc 39 
	const [startItem, setStartItem] = useState(1)
40 
	const [lastItem, setLastItem] = useState(10)
12264 stevensc 41 
	const [pages, setPages] = useState({
42 
		current: 1,
43 
		last: 1
44 
	})
45 
 
46 
	const getData = ({ url = '', params = {} }) => {
47 
		axios.get(url, { params: { ...params } })
48 
			.then(({ data }) => {
49 
				if (!data.success) {
14843 stevensc 50 
					typeof data.data === 'string'
51 
						?
52 
						dispatch(addNotification({
53 
							style: 'danger',
54 
							msg: data.data
55 
						}))
56 
						: Object.entries(data.data).map(([key, value]) =>
57 
							value.map(err =>
58 
								dispatch(addNotification({
59 
									style: 'danger',
60 
									msg: `${key}: ${err}`
61 
								}))
62 
							)
63 
						)
64 
					return
12264 stevensc 65 
				}
66 
 
67 
				setItems(data.data.items)
68 
				setTotal(data.data.total)
69 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
70 
			})
71 
			.catch(() => dispatch(addNotification({
72 
				style: 'danger',
73 
				msg: 'Ha ocurrido un error'
74 
			})))
75 
	}
76 
 
77 
	useEffect(() => {
78 
		getData({
79 
			url: table_link,
80 
			params: {
81 
				search: search,
82 
				length: dataLength,
12379 stevensc 83 
				start: pages.current
12264 stevensc 84 
			}
85 
		})
86 
	}, [search, dataLength, pages.current])
87 
 
12379 stevensc 88 
	useEffect(() => {
89 
		if (pages.current > 1) {
90 
			setStartItem((dataLength * (pages.current - 1)) + 1)
91 
		} else {
92 
			setStartItem(1)
93 
		}
94 
	}, [pages.current])
95 
 
96 
	useEffect(() => {
97 
		if (items) {
98 
			if (startItem > 1) {
99 
				setLastItem(startItem + (items.length - 1))
100 
			} else {
101 
				setLastItem(items.length)
102 
			}
103 
		}
104 
	}, [items])
105 
 
12264 stevensc 106 
	return (
107 
		<>
108 
			<section className="content">
109 
				<div className="container-fluid">
110 
					<div className="row">
111 
						<div className="col-12">
112 
							<Card>
113 
								<Card.Header>
114 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
115 
										{
116 
											permisions.allowAdd
117 
											&&
118 
											<label
12329 stevensc 119 
												className='d-flex align-items-center btn-add'
12330 stevensc 120 
												/* onClick={() => {
12264 stevensc 121 
													setActionLink(add_link)
12292 stevensc 122 
													setModalToShow('add')
12330 stevensc 123 
												}} */
12264 stevensc 124 
												style={{ cursor: 'pointer' }}
125 
											>
126 
												<i className="fa fa-plus mr-2" />
127 
												Agregar
128 
											</label>
129 
										}
130 
										<label
131 
											className='d-flex align-items-center'
132 
											onClick={() => getData({
133 
												url: table_link,
134 
												params: {
135 
													search: search,
136 
													length: dataLength,
137 
													page: pages.current
138 
												}
139 
											})}
140 
											style={{ cursor: 'pointer' }}
141 
										>
142 
											<i className='fa fa-refresh mr-2' />
143 
											Actualizar
144 
										</label>
145 
									</div>
146 
									<div className="row justify-content-between align-items-center">
147 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
148 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
149 
									</div>
150 
								</Card.Header>
151 
								<Card.Body>
152 
									<div className="table-responsive">
153 
										<Table data={items} headers={headers} setData={setItems}>
154 
											{
155 
												items.length
156 
												&&
157 
												items.map((item, index) => (
158 
													<tr key={index}>
12314 stevensc 159 
														<td className='text-vertical-middle'>{item.last_date}</td>
12264 stevensc 160 
														<td className='text-vertical-middle'>
161 
															{item.form}
12269 stevensc 162 
															<br />
12301 stevensc 163 
															{
164 
																item.actions.link_report_both
165 
																	?
166 
																	<div>
167 
																		<a
168 
																			className="btn btn-info btn-sm"
169 
																			href={item.actions.link_report_both}
170 
																			target="_blank" rel="noreferrer" >
171 
																			<i className="fa fa-file-o" />
172 
																			PDF de evaluacion conjunta
173 
																		</a>
174 
																	</div>
175 
																	:
176 
																	<button
177 
																		className="btn btn-info btn-sm"
178 
																		onClick={() => {
179 
																			setActionLink(item.actions.link_both)
180 
																			history.push('evaluations/both')
181 
																		}}
182 
																	>
183 
																		<i className="fa fa-external-link" />
184 
																		Evaluacion en conjunto
185 
																	</button>
186 
															}
187 
 
12264 stevensc 188 
														</td>
189 
														<td className='text-vertical-middle'>
190 
															{item.supervisor}
12301 stevensc 191 
															{
192 
																item.actions.link_report_superviser
193 
																	?
194 
																	<div>
195 
																		<a
196 
																			className="btn btn-info btn-sm"
197 
																			href={item.actions.link_report_superviser}
198 
																			target="_blank" rel="noreferrer" >
199 
																			<i className="fa fa-file-o" />
200 
																			PDF de evaluacion del supervisor
201 
																		</a>
202 
																	</div>
203 
																	:
204 
																	<button
205 
																		className="btn btn-info btn-sm"
206 
																		onClick={() => {
207 
																			setActionLink(item.actions.link_superviser)
208 
																			history.push('evaluations/superviser')
209 
																		}}
210 
																	>
211 
																		<i className="fa fa-external-link" />
212 
																		Evaluacion del supervisor
213 
																	</button>
214 
															}
12264 stevensc 215 
														</td>
216 
														<td className='text-vertical-middle'>
217 
															{`${item.first_name} ${item.last_name}`}
12301 stevensc 218 
															{
219 
																item.actions.link_report_self
220 
																	?
221 
																	<div>
222 
																		<a
223 
																			className="btn btn-info btn-sm"
224 
																			href={item.actions.link_report_self}
225 
																			target="_blank" rel="noreferrer" >
226 
																			<i className="fa fa-file-o" />
227 
																			PDF de autoevaluación
228 
																		</a>
229 
																	</div>
230 
																	:
231 
																	<button
232 
																		className="btn btn-info btn-sm"
233 
																		onClick={() => {
234 
																			setActionLink(item.actions.link_self)
235 
																			history.push('evaluations/self')
236 
																		}}
237 
																	>
238 
																		<i className="fa fa-external-link" />
239 
																		Autoevaluación
240 
																	</button>
241 
															}
242 
 
12264 stevensc 243 
														</td>
244 
														<td>
245 
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
246 
																{
247 
																	permisions.allowDelete
248 
																	&&
249 
																	<i
250 
																		className='fa fa-trash'
251 
																		onClick={() => {
252 
																			setActionLink(item.actions.link_delete)
253 
																			setModalToShow('delete')
254 
																		}}
255 
																		style={{ cursor: 'pointer' }}
256 
																	/>
257 
																}
258 
															</div>
259 
														</td>
260 
													</tr>
261 
												))
262 
											}
263 
										</Table>
264 
									</div>
265 
									<div className='row justify-content-between align-items-center'>
266 
										<p className='mb-0'>
12379 stevensc 267 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
12264 stevensc 268 
										</p>
269 
										<TablePagination
12326 stevensc 270 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
271 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
12264 stevensc 272 
											totalPages={pages.last}
273 
											currentPage={pages.current}
274 
										/>
275 
									</div>
276 
								</Card.Body>
277 
							</Card>
278 
						</div>
279 
					</div >
280 
				</div >
281 
			</section >
12329 stevensc 282 
			<AddModal
283 
				action_link={actionLink}
284 
				closeModal={() => setModalToShow('')}
285 
				isOpen={modalToShow === 'add'}
286 
				email_link={email_link}
287 
				onComplete={() => getData({
288 
					url: table_link,
289 
					params: {
290 
						search: search,
291 
						length: dataLength,
292 
						page: pages.current
293 
					}
294 
				})}
295 
			/>
12264 stevensc 296 
			<DeleteModal
297 
				url={actionLink}
298 
				isOpen={modalToShow === 'delete'}
299 
				closeModal={() => setModalToShow('')}
300 
				title="Esta seguro de borrar esta evaluación?"
301 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
302 
				message="Registro borrado"
303 
			/>
304 
		</>
305 
	)
306 
}
307 
 
308 
export default TableView