Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
10447 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
10436 stevensc 2 
import React, { useState, useEffect } from 'react'
3 
import axios from 'axios'
4 
import { Card } from 'react-bootstrap'
5 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
10860 stevensc 6 
import { useHistory, useRouteMatch } from 'react-router-dom'
10436 stevensc 7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import { useDispatch } from 'react-redux'
9 
import DeleteModal from '../../../shared/DeleteModal'
10 
 
11 
const headers = [
10447 stevensc 12 
	{ key: 'name', label: 'Nombre', isSorteable: true },
13 
	{ key: 'email', label: 'Correo electrónico', isSorteable: true },
14 
	{ key: 'type', label: 'Entrevistado por', isSorteable: true },
15 
	{ key: 'vacancy', label: 'Vacantes', isSorteable: true },
16 
	{ key: 'points', label: 'Evaluación', isSorteable: true },
17 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
10436 stevensc 18 
]
19 
 
10840 stevensc 20 
const TableView = ({ table_link, permisions, vacancies, setActionLink, add_link }) => {
10436 stevensc 21 
 
10447 stevensc 22 
	const history = useHistory()
10462 stevensc 23 
	const { url } = useRouteMatch()
10447 stevensc 24 
	const dispatch = useDispatch()
25 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
26 
	const [currentVacancy, setCurrentVacancy] = useState(vacancies[0].uuid || '')
27 
	const [deleteLink, setDeleteLink] = useState('')
12712 stevensc 28 
	const [items, setItems] = useState([])
29 
	const [total, setTotal] = useState(0)
10447 stevensc 30 
	const [search, setSearch] = useState('')
12375 stevensc 31 
	const [startItem, setStartItem] = useState(1)
32 
	const [lastItem, setLastItem] = useState(10)
10447 stevensc 33 
	const [dataLength, setDataLength] = useState(10)
34 
	const points = {
35 
		0: '0%',
36 
		1: '25%',
37 
		2: '50%',
38 
		3: '75%',
39 
		4: '100%'
40 
	}
41 
	const [pages, setPages] = useState({
42 
		current: 1,
43 
		last: 1
44 
	})
10436 stevensc 45 
 
10447 stevensc 46 
	const getData = ({ url = '', params = {} }) => {
10436 stevensc 47 
 
10447 stevensc 48 
		axios.get(url, { params: { ...params } })
49 
			.then(({ data }) => {
50 
				if (!data.success) {
11071 stevensc 51 
					return dispatch(addNotification({
11051 stevensc 52 
						style: 'danger',
10447 stevensc 53 
						msg: 'Ha ocurrido un error'
54 
					}))
55 
				}
10436 stevensc 56 
 
12712 stevensc 57 
				setItems(data.data.items)
58 
				setTotal(data.data.total)
10447 stevensc 59 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
60 
			})
61 
			.catch(() => dispatch(addNotification({
11051 stevensc 62 
				style: 'danger',
10447 stevensc 63 
				msg: 'Ha ocurrido un error'
64 
			})))
65 
	}
10436 stevensc 66 
 
10447 stevensc 67 
	useEffect(() => {
68 
		getData({
69 
			url: `${table_link}/${currentVacancy}`,
70 
			params: {
71 
				search: search,
72 
				length: dataLength,
12375 stevensc 73 
				start: pages.current
10447 stevensc 74 
			}
75 
		})
76 
	}, [search, dataLength, pages.current, currentVacancy])
10436 stevensc 77 
 
10836 stevensc 78 
	useEffect(() => {
10840 stevensc 79 
		setActionLink(add_link.replace('UUID_PLACEHOLDER', currentVacancy))
10836 stevensc 80 
	}, [currentVacancy])
81 
 
12375 stevensc 82 
	useEffect(() => {
83 
		if (pages.current > 1) {
84 
			setStartItem((dataLength * (pages.current - 1)) + 1)
85 
		} else {
86 
			setStartItem(1)
87 
		}
88 
	}, [pages.current])
89 
 
90 
	useEffect(() => {
12712 stevensc 91 
		if (items) {
12375 stevensc 92 
			if (startItem > 1) {
12712 stevensc 93 
				setLastItem(startItem + (items.length - 1))
12375 stevensc 94 
			} else {
12712 stevensc 95 
				setLastItem(items.length)
12375 stevensc 96 
			}
97 
		}
12712 stevensc 98 
	}, [items])
12375 stevensc 99 
 
10447 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" style={{ gap: '10px' }}>
109 
										<div className="form-group">
110 
											<label>Vacantes</label>
111 
											<select
112 
												className="form-control"
113 
												value={currentVacancy}
114 
												onChange={(e) => setCurrentVacancy(e.target.value)}
115 
												defaultValue={vacancies[0].uuid}
116 
											>
117 
												{
118 
													vacancies.map((vacancy) => (
119 
														<option key={vacancy.uuid} value={vacancy.uuid}>{vacancy.name}</option>
120 
													))
121 
												}
122 
											</select>
123 
										</div>
124 
									</div>
125 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
126 
										{
127 
											permisions.allowAdd
128 
											&&
129 
											<label
130 
												className='d-flex align-items-center'
10462 stevensc 131 
												onClick={() => history.push(`${url}/add`)}
10447 stevensc 132 
												style={{ cursor: 'pointer' }}
133 
											>
134 
												<i className="fa fa-plus mr-2" />
135 
												Agregar
136 
											</label>
137 
										}
138 
										<label
139 
											className='d-flex align-items-center'
140 
											onClick={() => getData({
141 
												url: table_link,
142 
												params: {
143 
													search: search,
144 
													length: dataLength,
145 
													page: pages.current
146 
												}
147 
											})}
148 
											style={{ cursor: 'pointer' }}
149 
										>
150 
											<i className='fa fa-refresh mr-2' />
151 
											Actualizar
152 
										</label>
153 
									</div>
154 
									<div className="row justify-content-between align-items-center">
155 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
156 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
157 
									</div>
158 
								</Card.Header>
159 
								<Card.Body>
11268 stevensc 160 
									<div className="table-responsive">
12712 stevensc 161 
										<Table data={items} headers={headers} setData={setItems}>
11268 stevensc 162 
											{
12712 stevensc 163 
												items.map((item) => (
11268 stevensc 164 
													<tr key={item.uuid}>
165 
														<td>{`${item.first_name} ${item.last_name}`}</td>
166 
														<td>{item.email}</td>
167 
														<td>
168 
															{
169 
																item.type === 'r'
170 
																	? 'Recursos Humanos'
171 
																	: 'Potencial superior'
172 
															}
173 
														</td>
174 
														<td>{item.vacancy}</td>
175 
														<td>
176 
															{
177 
																points[item.points]
178 
															}
179 
														</td>
180 
														<td className='d-inline-flex align-items-center' style={{ gap: '10px' }}>
181 
															{
182 
																permisions.allowEdit
183 
																&&
184 
																<i
185 
																	className='fa fa-pencil'
186 
																	style={{ cursor: 'pointer' }}
187 
																	onClick={() => {
188 
																		setActionLink(item.actions.link_edit)
189 
																		history.push(`${url}/edit`)
190 
																	}}
191 
																/>
192 
															}
193 
															{
194 
																permisions.allowDelete
195 
																&&
196 
																<i
197 
																	className='fa fa-trash'
198 
																	onClick={() => {
199 
																		setShowDeleteModal(true)
200 
																		setDeleteLink(item.actions.link_delete)
201 
																	}}
202 
																	style={{ cursor: 'pointer' }}
203 
																/>
204 
															}
205 
															{
206 
																item.type === 'r'
207 
																&&
208 
																<a href={`/recruitment-and-selection/interview/${item.uuid}/file`} className='btn p-0'>
209 
																	<i className='fa fa-external-link' style={{ cursor: 'pointer' }} />
210 
																</a>
211 
															}
212 
															{
213 
																permisions.allowFile
214 
																&&
215 
																<a href={item.actions.link_report} target='_blank' className='btn p-0' rel="noreferrer">
216 
																	<i className='fa fa-file-o' style={{ cursor: 'pointer' }} />
217 
																</a>
218 
															}
219 
														</td>
220 
													</tr>
221 
												))
222 
											}
223 
										</Table>
224 
									</div>
10447 stevensc 225 
									<div className='row justify-content-between align-items-center'>
226 
										<p className='mb-0'>
12712 stevensc 227 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
10447 stevensc 228 
										</p>
229 
										<TablePagination
12326 stevensc 230 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
231 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
10447 stevensc 232 
											totalPages={pages.last}
233 
											currentPage={pages.current}
234 
										/>
235 
									</div>
236 
								</Card.Body>
237 
							</Card>
238 
						</div>
239 
					</div >
240 
				</div >
241 
			</section >
242 
			<DeleteModal
243 
				url={deleteLink}
244 
				isOpen={showDeleteModal}
245 
				closeModal={() => setShowDeleteModal(false)}
246 
				title="Esta seguro de borrar esta entrevista?"
12712 stevensc 247 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== deleteLink))}
10447 stevensc 248 
				message="Entrevista eliminada"
249 
			/>
250 
		</>
251 
	)
10436 stevensc 252 
}
253 
export default TableView