Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12373 | Rev 12375 | 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 },
13 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
9543 stevensc 14 
]
15 
 
9929 stevensc 16 
const MainView = ({ table_link, setActionLink, permisions, add_link }) => {
9502 stevensc 17 
 
11264 stevensc 18 
	const history = useHistory()
19 
	const dispatch = useDispatch()
20 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
21 
	const [deleteLink, setDeleteLink] = useState('')
22 
	const [data, setData] = useState({})
23 
	const [search, setSearch] = useState('')
12373 stevensc 24 
	const [startItem, setStartItem] = useState(1)
25 
	const [lastItem, setLastItem] = useState(10)
11264 stevensc 26 
	const [dataLength, setDataLength] = useState(10)
27 
	const [pages, setPages] = useState({
28 
		current: 1,
29 
		last: 1
30 
	})
9502 stevensc 31 
 
11264 stevensc 32 
	const getData = ({ url = '', params = {} }) => {
9502 stevensc 33 
 
11264 stevensc 34 
		axios.get(url, { params: { ...params } })
35 
			.then(({ data }) => {
36 
				if (!data.success) {
37 
					dispatch(addNotification({
38 
						style: 'error',
39 
						msg: 'Ha ocurrido un error'
40 
					}))
41 
				}
9502 stevensc 42 
 
11264 stevensc 43 
				setData(data.data)
44 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
45 
			})
46 
			.catch(() => dispatch(addNotification({
47 
				style: 'error',
48 
				msg: 'Ha ocurrido un error'
49 
			})))
50 
	}
9502 stevensc 51 
 
11264 stevensc 52 
	useEffect(() => {
53 
		getData({
54 
			url: table_link,
55 
			params: {
56 
				search: search,
57 
				length: dataLength,
12374 stevensc 58 
				start: pages.current
11264 stevensc 59 
			}
60 
		})
61 
	}, [search, dataLength, pages.current])
9502 stevensc 62 
 
12373 stevensc 63 
	useEffect(() => {
64 
		if (pages.current > 1) {
65 
			setStartItem((dataLength * (pages.current - 1)) + 1)
66 
		} else {
67 
			setStartItem(1)
68 
		}
69 
	}, [pages.current])
70 
 
71 
	useEffect(() => {
72 
		if (data.items) {
73 
			if (startItem > 1) {
74 
				setLastItem(startItem + (data.items.length - 1))
75 
			} else {
76 
				setLastItem(data.items.length)
77 
			}
78 
		}
79 
	}, [data])
80 
 
11264 stevensc 81 
	return (
82 
		<>
83 
			<section className="content">
84 
				<div className="container-fluid">
85 
					<div className="row">
86 
						<div className="col-12">
87 
							<Card>
88 
								<Card.Header>
89 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
90 
										{
91 
											permisions.allowAdd
11268 stevensc 92 
											&&
93 
											<label
94 
												className='d-flex align-items-center'
95 
												onClick={() => {
96 
													setActionLink(add_link)
97 
													history.push('/recruitment-and-selection/vacancies/add')
98 
												}}
99 
												style={{ cursor: 'pointer' }}
100 
											>
101 
												<i className="fa fa-plus mr-2" />
102 
												Agregar
103 
											</label>
11264 stevensc 104 
										}
105 
										<label
106 
											className='d-flex align-items-center'
107 
											onClick={() => getData({
108 
												url: table_link,
109 
												params: {
110 
													search: search,
111 
													length: dataLength,
112 
													page: pages.current
113 
												}
114 
											})}
115 
											style={{ cursor: 'pointer' }}
116 
										>
117 
											<i className='fa fa-refresh mr-2' />
11268 stevensc 118 
											Actualizar
11264 stevensc 119 
										</label>
120 
									</div>
121 
									<div className="row justify-content-between align-items-center">
122 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
123 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
124 
									</div>
125 
								</Card.Header>
126 
								<Card.Body>
11268 stevensc 127 
									<div className="table-responsive">
128 
										<Table data={data.items} headers={headers} setData={setData}>
129 
											{
130 
												data.items?.map((item, index) => (
131 
													<tr key={index}>
132 
														<td>{item.name}</td>
133 
														<td>{item.job_description}</td>
12141 stevensc 134 
														<td>
135 
															{
136 
																item.status === 'a'
137 
																	? 'Activo'
138 
																	: 'Inactivo'
139 
															}
140 
														</td>
11268 stevensc 141 
														<td className='d-flex' style={{ gap: '10px' }}>
142 
															{
143 
																permisions.allowEdit
144 
																&&
145 
																<i
146 
																	className='fa fa-pencil'
147 
																	onClick={() => {
148 
																		setActionLink(item.actions.link_edit)
149 
																		history.push('/recruitment-and-selection/vacancies/edit')
150 
																	}}
151 
																	style={{ cursor: 'pointer' }}
152 
																/>
153 
															}
154 
															{
155 
																permisions.allowDelete
156 
																&&
157 
																<i
158 
																	className='fa fa-trash'
159 
																	onClick={() => {
160 
																		setShowDeleteModal(true)
161 
																		setDeleteLink(item.actions.link_delete)
162 
																	}}
163 
																	style={{ cursor: 'pointer' }}
164 
																/>
165 
															}
166 
														</td>
167 
													</tr>
168 
												))
169 
											}
170 
										</Table>
171 
									</div>
11264 stevensc 172 
									<div className='row justify-content-between align-items-center'>
173 
										<p className='mb-0'>
12373 stevensc 174 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${data.total} registros`}
11264 stevensc 175 
										</p>
176 
										<TablePagination
12326 stevensc 177 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
12325 stevensc 178 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11264 stevensc 179 
											totalPages={pages.last}
180 
											currentPage={pages.current}
181 
										/>
182 
									</div>
183 
								</Card.Body>
184 
							</Card>
185 
						</div>
186 
					</div >
187 
				</div >
188 
			</section >
189 
			<DeleteModal
190 
				url={deleteLink}
191 
				isOpen={showDeleteModal}
192 
				closeModal={() => setShowDeleteModal(false)}
193 
				title="Esta seguro de borrar esta vacante?"
194 
				onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== deleteLink) })}
195 
				message="Vacante eliminada"
196 
			/>
197 
		</>
198 
	)
9489 stevensc 199 
}
200 
export default MainView