Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12379 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11960 stevensc 1
/* eslint-disable no-mixed-spaces-and-tabs */
2
import React, { useState, useEffect } from 'react'
3
import { Card } from 'react-bootstrap'
4
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
5
import { addNotification } from '../../../redux/notification/notification.actions'
6
import DeleteModal from '../../../shared/DeleteModal'
7
import axios from 'axios'
8
import { useDispatch } from 'react-redux'
9
 
10
const headers = [
11
	{ key: 'name', label: 'Nombre', isSorteable: true },
12
	{ key: 'job_description', label: 'Descripción', isSorteable: true },
13
	{ key: 'status', label: 'Estatus', isSorteable: false },
14
	{ key: 'actions', label: 'Acciones', isSorteable: false }
15
]
16
 
15102 stevensc 17
const TableView = ({
18
	add_link,
19
	table_link,
20
	permisions,
21
	actionLink,
22
	setActionLink,
23
	setAction }) => {
11960 stevensc 24
 
25
	const dispatch = useDispatch()
26
	const [modalToShow, setModalToShow] = useState('')
27
	const [items, setItems] = useState([])
28
	const [total, setTotal] = useState(0)
29
	const [search, setSearch] = useState('')
30
	const [dataLength, setDataLength] = useState(10)
12379 stevensc 31
	const [startItem, setStartItem] = useState(1)
32
	const [lastItem, setLastItem] = useState(10)
11960 stevensc 33
	const [pages, setPages] = useState({
34
		current: 1,
35
		last: 1
36
	})
37
 
38
	const getData = ({ url = '', params = {} }) => {
39
 
40
		axios.get(url, { params: { ...params } })
41
			.then(({ data }) => {
42
				if (!data.success) {
43
					return dispatch(addNotification({
44
						style: 'danger',
45
						msg: 'Ha ocurrido un error'
46
					}))
47
				}
48
 
49
				setItems(data.data.items)
50
				setTotal(data.data.total)
51
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
52
			})
53
			.catch(() => dispatch(addNotification({
54
				style: 'danger',
55
				msg: 'Ha ocurrido un error'
56
			})))
57
	}
58
 
59
	useEffect(() => {
60
		getData({
61
			url: table_link,
62
			params: {
63
				search: search,
64
				length: dataLength,
12379 stevensc 65
				start: pages.current
11960 stevensc 66
			}
67
		})
68
	}, [search, dataLength, pages.current])
69
 
12379 stevensc 70
	useEffect(() => {
15102 stevensc 71
		pages.current > 1
72
			? setStartItem((dataLength * (pages.current - 1)) + 1)
73
			: setStartItem(1)
12379 stevensc 74
	}, [pages.current])
75
 
76
	useEffect(() => {
77
		if (items) {
15102 stevensc 78
			startItem > 1
79
				? setLastItem(startItem + (items.length - 1))
80
				: setLastItem(items.length)
12379 stevensc 81
		}
82
	}, [items])
83
 
11960 stevensc 84
	return (
85
		<>
11965 stevensc 86
			<section className="content">
87
				<div className="container-fluid">
88
					<div className="row">
89
						<div className="col-12">
90
							<Card>
91
								<Card.Header>
92
									<div className="row justify-content-end" style={{ gap: '10px' }}>
15102 stevensc 93
										{permisions.allowAdd &&
11965 stevensc 94
											<label
95
												className='d-flex align-items-center'
96
												onClick={() => {
97
													setActionLink(add_link)
15102 stevensc 98
													setAction('add')
11965 stevensc 99
												}}
100
												style={{ cursor: 'pointer' }}
101
											>
102
												<i className="fa fa-plus mr-2" />
103
												Agregar
104
											</label>
105
										}
106
										<label
107
											className='d-flex align-items-center'
108
											onClick={() => getData({
109
												url: table_link,
110
												params: {
111
													search: search,
112
													length: dataLength,
113
													page: pages.current
114
												}
115
											})}
116
											style={{ cursor: 'pointer' }}
117
										>
118
											<i className='fa fa-refresh mr-2' />
119
											Actualizar
120
										</label>
121
									</div>
122
									<div className="row justify-content-between align-items-center">
123
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
124
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
125
									</div>
126
								</Card.Header>
127
								<Card.Body>
128
									<div className="table-responsive">
129
										<Table data={items} headers={headers} setData={setItems}>
15102 stevensc 130
											{!!items.length &&
11965 stevensc 131
												items.map((item, index) => (
132
													<tr key={index}>
133
														<td className='text-vertical-middle'>{item.name}</td>
134
														<td className='text-vertical-middle'>{item.job_description}</td>
135
														<td className='text-vertical-middle'>
15102 stevensc 136
															{item.status === 'a'
137
																? 'Activo'
138
																: 'Inactivo'
11965 stevensc 139
															}
140
														</td>
141
														<td>
142
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
15102 stevensc 143
																{permisions.allowEdit &&
11965 stevensc 144
																	<i
145
																		className='fa fa-pencil'
146
																		onClick={() => {
147
																			setActionLink(item.actions.link_edit)
15102 stevensc 148
																			setAction('edit')
11965 stevensc 149
																		}}
150
																		style={{ cursor: 'pointer' }}
151
																	/>
152
																}
15102 stevensc 153
																{permisions.allowDelete &&
11965 stevensc 154
																	<i
155
																		className='fa fa-trash'
156
																		onClick={() => {
157
																			setActionLink(item.actions.link_delete)
158
																			setModalToShow('delete')
159
																		}}
160
																		style={{ cursor: 'pointer' }}
161
																	/>
162
																}
15102 stevensc 163
																{permisions.allowReport &&
11965 stevensc 164
																	<a href={item.actions.link_report} target='_blank' rel="noreferrer" >
12156 stevensc 165
																		<i className='fa fa-file' style={{ color: '#333' }} />
11965 stevensc 166
																	</a>
167
																}
168
															</div>
169
														</td>
170
													</tr>
171
												))
172
											}
173
										</Table>
174
									</div>
175
									<div className='row justify-content-between align-items-center'>
176
										<p className='mb-0'>
12379 stevensc 177
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
11965 stevensc 178
										</p>
179
										<TablePagination
12326 stevensc 180
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
181
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11965 stevensc 182
											totalPages={pages.last}
183
											currentPage={pages.current}
184
										/>
185
									</div>
186
								</Card.Body>
187
							</Card>
188
						</div>
189
					</div >
190
				</div >
191
			</section >
192
			<DeleteModal
193
				url={actionLink}
194
				isOpen={modalToShow === 'delete'}
195
				closeModal={() => setModalToShow('')}
196
				title="Esta seguro de borrar este formulario?"
197
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
198
				message="Registro borrado"
199
			/>
11960 stevensc 200
		</>
201
	)
202
}
203
 
204
export default TableView