Proyectos de Subversion LeadersLinked - Backend

Rev

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