Proyectos de Subversion LeadersLinked - Backend

Rev

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