Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14188 | Ir a la última revisión | | Ultima modificación | Ver Log |

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