Proyectos de Subversion LeadersLinked - Backend

Rev

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