Proyectos de Subversion LeadersLinked - Backend

Rev

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