Proyectos de Subversion LeadersLinked - Backend

Rev

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