Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14199 | Rev 14253 | Ir a la última revisión | | Comparar con el anterior | 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'
14197 stevensc 9 
import DeleteModal from '../../shared/DeleteModal'
14184 stevensc 10 
import PaginationComponent from '../../shared/PaginationComponent'
11 
 
12 
const headers = [
13 
	{ key: 'name', label: 'Nombre', isSorteable: true },
14 
	{ key: 'status', label: 'Activo', isSorteable: false },
15 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
16 
]
17 
 
18 
const TableView = ({
14197 stevensc 19 
	actionLink = '',
14193 stevensc 20 
	import_link = '',
14184 stevensc 21 
	add_link = '',
22 
	table_link = '',
23 
	permisions = '',
24 
	setActionLink = function () { }
25 
}) => {
26 
 
27 
	//Hooks
28 
	const dispatch = useDispatch()
29 
	const history = useHistory()
30 
 
31 
	//State
14197 stevensc 32 
	const [isOpen, setIsOpen] = useState(false)
14184 stevensc 33 
	const [items, setItems] = useState([])
34 
	const [total, setTotal] = useState(0)
35 
	const [search, setSearch] = useState('')
36 
	const [dataLength, setDataLength] = useState(10)
37 
	const [startItem, setStartItem] = useState(1)
38 
	const [lastItem, setLastItem] = useState(10)
39 
	const [pages, setPages] = useState({
40 
		current: 1,
41 
		last: 1
42 
	})
43 
 
44 
	const getData = ({ url = '', params = {} }) => {
14199 stevensc 45 
		axios.get(url, { params: { ...params } })
14184 stevensc 46 
			.then(({ data }) => {
47 
				if (!data.success) {
48 
					return dispatch(addNotification({
49 
						style: 'danger',
50 
						msg: typeof data.data === 'string'
51 
							? data.data
52 
							: 'Ha ocurrido un error'
53 
					}))
54 
				}
55 
 
56 
				setItems(data.data.items)
57 
				setTotal(data.data.total)
58 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
59 
			})
60 
			.catch(() => dispatch(addNotification({
61 
				style: 'danger',
62 
				msg: 'Ha ocurrido un error'
63 
			})))
64 
	}
65 
 
14193 stevensc 66 
	const getImport = () => {
14199 stevensc 67 
		axios.post(import_link)
14193 stevensc 68 
			.then(({ data }) => {
69 
				if (!data.success) {
14201 stevensc 70 
					return dispatch(addNotification({
14193 stevensc 71 
						style: 'danger',
72 
						msg: data.data
73 
					}))
74 
				}
14201 stevensc 75 
 
76 
				dispatch(addNotification({
77 
					style: 'success',
78 
					msg: data.data
79 
				}))
14193 stevensc 80 
			})
81 
	}
82 
 
14184 stevensc 83 
	useEffect(() => {
84 
		getData({
85 
			url: table_link,
86 
			params: {
87 
				search: search,
88 
				length: dataLength,
89 
				start: pages.current
90 
			}
91 
		})
92 
	}, [search, dataLength, pages.current])
93 
 
94 
	useEffect(() => {
95 
		if (pages.current > 1) {
96 
			setStartItem((dataLength * (pages.current - 1)) + 1)
97 
		} else {
98 
			setStartItem(1)
99 
		}
100 
	}, [pages.current])
101 
 
102 
	useEffect(() => {
103 
		if (items) {
104 
			if (startItem > 1) {
105 
				setLastItem(startItem + (items.length - 1))
106 
			} else {
107 
				setLastItem(items.length)
108 
			}
109 
		}
110 
	}, [items])
111 
 
112 
	return (
14197 stevensc 113 
		<>
114 
			<section className="content">
115 
				<div className="container-fluid">
116 
					<div className="row">
117 
						<div className="col-12">
118 
							<Card>
119 
								<Card.Header>
120 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
14184 stevensc 121 
										{
14197 stevensc 122 
											permisions.allowAdd
14184 stevensc 123 
                                            &&
14197 stevensc 124 
                                            <label
125 
                                            	onClick={getImport}
126 
                                            	className='d-flex align-items-center btn-add'
127 
                                            	style={{ cursor: 'pointer' }}
128 
                                            >
129 
                                            	<i className="fa fa-upload mr-2" />
130 
                                                Importar
131 
                                            </label>
14184 stevensc 132 
										}
14197 stevensc 133 
										{
134 
											permisions.allowAdd
135 
                                            &&
136 
                                            <label
137 
                                            	onClick={() => setActionLink(add_link)}
138 
                                            	className='d-flex align-items-center btn-add'
139 
                                            	style={{ cursor: 'pointer' }}
140 
                                            >
141 
                                            	<i className="fa fa-plus mr-2" />
142 
                                                Agregar
143 
                                            </label>
144 
										}
145 
										<label
146 
											className='d-flex align-items-center'
147 
											onClick={() => getData({
148 
												url: table_link,
149 
												params: {
150 
													search: search,
151 
													length: dataLength,
152 
													page: pages.current
153 
												}
154 
											})}
155 
											style={{ cursor: 'pointer' }}
156 
										>
157 
											<i className='fa fa-refresh mr-2' />
158 
                                            Actualizar
159 
										</label>
160 
									</div>
161 
									<div className="row justify-content-between align-items-center">
162 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
163 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
164 
									</div>
165 
								</Card.Header>
166 
								<Card.Body>
167 
									<div className="table-responsive">
168 
										<Table data={items} headers={headers} setData={setItems}>
169 
											{
170 
												items.length
171 
                                                &&
172 
                                                items.map((item, index) => (
173 
                                                	<tr key={index}>
174 
                                                		<td className='text-vertical-middle'>{item.name}</td>
175 
                                                		<td className='text-vertical-middle'>
176 
                                                			{item.status === 'a'
177 
                                                				? 'Activo'
178 
                                                				: 'Inactivo'
179 
                                                			}
180 
                                                		</td>
181 
                                                		<td>
182 
                                                			<div className="d-flex align-items-center" style={{ gap: '.5rem' }}>
183 
                                                				{
184 
                                                					permisions.allowEdit
185 
                                                                    &&
186 
                                                                    <i
187 
                                                                    	onClick={() => {
188 
                                                                    		setActionLink(item.actions.link_edit)
189 
                                                                    		history.push('/settings/jobs-description/edit')
190 
                                                                    	}}
191 
                                                                    	className='fa fa-pencil'
192 
                                                                    	style={{ cursor: 'pointer' }}
193 
                                                                    />
194 
                                                				}
195 
                                                				{
196 
                                                					permisions.allowDelete
197 
                                                                    &&
198 
                                                                    <i
199 
                                                                    	className='fa fa-trash'
200 
                                                                    	onClick={() => {
201 
                                                                    		setActionLink(item.actions.link_delete)
202 
                                                                    		setIsOpen(true)
203 
                                                                    	}}
204 
                                                                    	style={{ cursor: 'pointer' }}
205 
                                                                    />
206 
                                                				}
207 
                                                				{
208 
                                                					permisions.allowReport
209 
                                                                    &&
210 
                                                                    <a
211 
                                                                    	href={item.actions.link_report}
212 
                                                                    	target='_blank'
213 
                                                                    	rel="noreferrer"
214 
                                                                    >
215 
                                                                    	<i
216 
                                                                    		className='fa fa-file'
217 
                                                                    		style={{ cursor: 'pointer' }}
218 
                                                                    	/>
219 
                                                                    </a>
220 
                                                				}
221 
                                                			</div>
222 
                                                		</td>
223 
                                                	</tr>
224 
                                                ))
225 
											}
226 
										</Table>
227 
									</div>
228 
									<div className='row justify-content-between align-items-center'>
229 
										<p className='mb-0'>
230 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
231 
										</p>
232 
										<PaginationComponent
233 
											pages={pages.last}
234 
											currentActivePage={pages.current}
235 
											onChangePage={(page) => setPages({ ...pages, current: page })}
236 
										/>
237 
									</div>
238 
								</Card.Body>
239 
							</Card>
240 
						</div>
241 
					</div >
14184 stevensc 242 
				</div >
14197 stevensc 243 
			</section >
244 
			<DeleteModal
245 
				url={actionLink}
246 
				isOpen={isOpen}
247 
				closeModal={() => setIsOpen(false)}
248 
				title="Esta seguro de borrar este registro?"
249 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
250 
				message="Registro eliminado"
251 
			/>
252 
		</>
14184 stevensc 253 
	)
254 
}
255 
 
256 
export default TableView