Proyectos de Subversion LeadersLinked - Backend

Rev

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