Proyectos de Subversion LeadersLinked - Backend

Rev

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