Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12375 | Rev 14838 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
9928 stevensc 1 
import React, { useState, useEffect } from 'react'
9502 stevensc 2 
import axios from 'axios'
9512 stevensc 3 
import { Card } from 'react-bootstrap'
10061 stevensc 4 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
9622 stevensc 5 
import { useHistory } from 'react-router-dom'
9907 stevensc 6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import { useDispatch } from 'react-redux'
9908 stevensc 8 
import DeleteModal from '../../../shared/DeleteModal'
9469 stevensc 9 
 
9543 stevensc 10 
const headers = [
11264 stevensc 11 
	{ key: 'name', label: 'Nombre', isSorteable: true },
12 
	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },
12375 stevensc 13 
	{ key: 'status', label: 'Estatus', isSorteable: true },
11264 stevensc 14 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
9543 stevensc 15 
]
16 
 
9929 stevensc 17 
const MainView = ({ table_link, setActionLink, permisions, add_link }) => {
9502 stevensc 18 
 
11264 stevensc 19 
	const history = useHistory()
20 
	const dispatch = useDispatch()
21 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
22 
	const [deleteLink, setDeleteLink] = useState('')
12712 stevensc 23 
	const [items, setItems] = useState([])
24 
	const [total, setTotal] = useState(0)
11264 stevensc 25 
	const [search, setSearch] = useState('')
12373 stevensc 26 
	const [startItem, setStartItem] = useState(1)
27 
	const [lastItem, setLastItem] = useState(10)
11264 stevensc 28 
	const [dataLength, setDataLength] = useState(10)
29 
	const [pages, setPages] = useState({
30 
		current: 1,
31 
		last: 1
32 
	})
9502 stevensc 33 
 
11264 stevensc 34 
	const getData = ({ url = '', params = {} }) => {
9502 stevensc 35 
 
11264 stevensc 36 
		axios.get(url, { params: { ...params } })
37 
			.then(({ data }) => {
38 
				if (!data.success) {
39 
					dispatch(addNotification({
40 
						style: 'error',
41 
						msg: 'Ha ocurrido un error'
42 
					}))
43 
				}
9502 stevensc 44 
 
12712 stevensc 45 
				setItems(data.data.items)
46 
				setTotal(data.data.total)
11264 stevensc 47 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
48 
			})
49 
			.catch(() => dispatch(addNotification({
50 
				style: 'error',
51 
				msg: 'Ha ocurrido un error'
52 
			})))
53 
	}
9502 stevensc 54 
 
11264 stevensc 55 
	useEffect(() => {
56 
		getData({
57 
			url: table_link,
58 
			params: {
59 
				search: search,
60 
				length: dataLength,
12374 stevensc 61 
				start: pages.current
11264 stevensc 62 
			}
63 
		})
64 
	}, [search, dataLength, pages.current])
9502 stevensc 65 
 
12373 stevensc 66 
	useEffect(() => {
67 
		if (pages.current > 1) {
68 
			setStartItem((dataLength * (pages.current - 1)) + 1)
69 
		} else {
70 
			setStartItem(1)
71 
		}
72 
	}, [pages.current])
73 
 
74 
	useEffect(() => {
12712 stevensc 75 
		if (items) {
12373 stevensc 76 
			if (startItem > 1) {
12712 stevensc 77 
				setLastItem(startItem + (items.length - 1))
12373 stevensc 78 
			} else {
12712 stevensc 79 
				setLastItem(items.length)
12373 stevensc 80 
			}
81 
		}
12712 stevensc 82 
	}, [items])
12373 stevensc 83 
 
11264 stevensc 84 
	return (
85 
		<>
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' }}>
93 
										{
94 
											permisions.allowAdd
11268 stevensc 95 
											&&
96 
											<label
97 
												className='d-flex align-items-center'
98 
												onClick={() => {
99 
													setActionLink(add_link)
100 
													history.push('/recruitment-and-selection/vacancies/add')
101 
												}}
102 
												style={{ cursor: 'pointer' }}
103 
											>
104 
												<i className="fa fa-plus mr-2" />
105 
												Agregar
106 
											</label>
11264 stevensc 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' />
11268 stevensc 121 
											Actualizar
11264 stevensc 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>
11268 stevensc 130 
									<div className="table-responsive">
12712 stevensc 131 
										<Table data={items} headers={headers} setData={setItems}>
11268 stevensc 132 
											{
12712 stevensc 133 
												items.map((item, index) => (
11268 stevensc 134 
													<tr key={index}>
135 
														<td>{item.name}</td>
136 
														<td>{item.job_description}</td>
12141 stevensc 137 
														<td>
138 
															{
139 
																item.status === 'a'
140 
																	? 'Activo'
141 
																	: 'Inactivo'
142 
															}
143 
														</td>
11268 stevensc 144 
														<td className='d-flex' style={{ gap: '10px' }}>
145 
															{
146 
																permisions.allowEdit
147 
																&&
148 
																<i
149 
																	className='fa fa-pencil'
150 
																	onClick={() => {
151 
																		setActionLink(item.actions.link_edit)
152 
																		history.push('/recruitment-and-selection/vacancies/edit')
153 
																	}}
154 
																	style={{ cursor: 'pointer' }}
155 
																/>
156 
															}
157 
															{
158 
																permisions.allowDelete
159 
																&&
160 
																<i
161 
																	className='fa fa-trash'
162 
																	onClick={() => {
163 
																		setShowDeleteModal(true)
164 
																		setDeleteLink(item.actions.link_delete)
165 
																	}}
166 
																	style={{ cursor: 'pointer' }}
167 
																/>
168 
															}
169 
														</td>
170 
													</tr>
171 
												))
172 
											}
173 
										</Table>
174 
									</div>
11264 stevensc 175 
									<div className='row justify-content-between align-items-center'>
176 
										<p className='mb-0'>
12712 stevensc 177 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
11264 stevensc 178 
										</p>
179 
										<TablePagination
12326 stevensc 180 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
12325 stevensc 181 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11264 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={deleteLink}
194 
				isOpen={showDeleteModal}
195 
				closeModal={() => setShowDeleteModal(false)}
196 
				title="Esta seguro de borrar esta vacante?"
12712 stevensc 197 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== deleteLink))}
11264 stevensc 198 
				message="Vacante eliminada"
199 
			/>
200 
		</>
201 
	)
9489 stevensc 202 
}
203 
export default MainView