Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11024 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
10061 stevensc 2 
import React, { useState, useEffect } from 'react'
3 
import axios from 'axios'
4 
import { Card } from 'react-bootstrap'
5 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
6 
import { useHistory } from 'react-router-dom'
7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import { useDispatch } from 'react-redux'
9 
import DeleteModal from '../../../shared/DeleteModal'
10095 stevensc 10 
import ContentTitle from '../../../shared/ContentTitle'
11046 stevensc 11 
import AddModal from '../components/AddModal'
11061 stevensc 12 
import EditModal from '../components/EditModal'
9954 stevensc 13 
 
10061 stevensc 14 
const headers = [
11024 stevensc 15 
	{ key: 'first_name', label: 'Nombre', isSorteable: true },
16 
	{ key: 'last_name', label: 'Apellido', isSorteable: true },
17 
	{ key: 'email', label: 'Correo electrónico', isSorteable: true },
18 
	{ key: 'status', label: 'Estatus', isSorteable: false },
19 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
10061 stevensc 20 
]
9954 stevensc 21 
 
11024 stevensc 22 
const MainView = ({ email_link, add_link, table_link, permisions, vacancies }) => {
9954 stevensc 23 
 
11024 stevensc 24 
	const dispatch = useDispatch()
25 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
11046 stevensc 26 
	const [isShowAddModal, setIsShowAddModal] = useState(false)
11061 stevensc 27 
	const [currentEditLink, setCurrentEditLink] = useState('')
28 
	const [isShowEditModal, setIsShowEditModal] = useState(false)
11024 stevensc 29 
	const [currentVacancy, setCurrentVacancy] = useState(vacancies[0].uuid || '')
30 
	const [actionLink, setActionLink] = useState('')
31 
	const [data, setData] = useState({})
32 
	const [search, setSearch] = useState('')
33 
	const [dataLength, setDataLength] = useState(10)
34 
	const [pages, setPages] = useState({
35 
		current: 1,
36 
		last: 1
37 
	})
10061 stevensc 38 
 
11024 stevensc 39 
	const getData = ({ url = '', params = {} }) => {
10061 stevensc 40 
 
11024 stevensc 41 
		axios.get(`${url}/${currentVacancy}`, { params: { ...params } })
42 
			.then(({ data }) => {
43 
				if (!data.success) {
44 
					dispatch(addNotification({
11051 stevensc 45 
						style: 'danger',
11024 stevensc 46 
						msg: 'Ha ocurrido un error'
47 
					}))
48 
				}
10061 stevensc 49 
 
11024 stevensc 50 
				setData(data.data)
51 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
52 
			})
53 
			.catch(() => dispatch(addNotification({
11051 stevensc 54 
				style: 'danger',
11024 stevensc 55 
				msg: 'Ha ocurrido un error'
56 
			})))
57 
	}
10061 stevensc 58 
 
11024 stevensc 59 
	useEffect(() => {
60 
		getData({
61 
			url: table_link,
62 
			params: {
63 
				search: search,
64 
				length: dataLength,
65 
				page: pages.current
66 
			}
67 
		})
11025 stevensc 68 
	}, [search, dataLength, pages.current, currentVacancy])
10061 stevensc 69 
 
11024 stevensc 70 
	return (
71 
		<ContentTitle title='Preselección'>
72 
			<section className="content">
73 
				<div className="container-fluid">
74 
					<div className="row">
75 
						<div className="col-12">
76 
							<Card>
77 
								<Card.Header>
78 
									<div className="row" style={{ gap: '10px' }}>
79 
										<div className="form-group">
80 
											<label>Vacantes</label>
81 
											<select
82 
												className="form-control"
83 
												value={currentVacancy}
84 
												onChange={(e) => setCurrentVacancy(e.target.value)}
85 
												defaultValue={vacancies[0].uuid}
86 
											>
87 
												{
88 
													vacancies.map((vacancy) => (
89 
														<option key={vacancy.uuid} value={vacancy.uuid}>{vacancy.name}</option>
90 
													))
91 
												}
92 
											</select>
93 
										</div>
94 
									</div>
95 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
96 
										{
97 
											permisions.allowAdd
11059 stevensc 98 
											&&
99 
											<label
100 
												className='d-flex align-items-center'
101 
												onClick={() => setIsShowAddModal(true)}
102 
												style={{ cursor: 'pointer' }}
103 
											>
104 
												<i className="fa fa-plus mr-2" />
105 
												Agregar
106 
											</label>
11024 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' />
11059 stevensc 121 
											Actualizar
11024 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>
130 
									<Table data={data.items} headers={headers} setData={setData}>
131 
										{
132 
											data.items?.map((item, index) => (
133 
												<tr key={index}>
134 
													<td>{item.first_name}</td>
135 
													<td>{item.last_name}</td>
136 
													<td>{item.email}</td>
137 
													<td>
138 
														{
139 
															item.status === 'a'
140 
																? <i className='fa fa-check' style={{ color: '#5cb85c' }} />
141 
																: <i className='fa fa-close' style={{ color: 'red' }} />
142 
														}
143 
													</td>
144 
													<td className='d-flex' style={{ gap: '10px' }}>
145 
														{
146 
															permisions.allowEdit
11059 stevensc 147 
															&&
148 
															<i
149 
																className='fa fa-pencil'
150 
																style={{ cursor: 'pointer' }}
151 
																onClick={() => {
11061 stevensc 152 
																	setCurrentEditLink(item.actions.link_edit)
153 
																	setIsShowEditModal(true)
11059 stevensc 154 
																}}
155 
															/>
11024 stevensc 156 
														}
157 
														{
158 
															permisions.allowDelete
11059 stevensc 159 
															&&
160 
															<i
161 
																className='fa fa-trash'
162 
																onClick={() => {
163 
																	setShowDeleteModal(true)
164 
																	setActionLink(item.actions.link_delete)
165 
																}}
166 
																style={{ cursor: 'pointer' }}
167 
															/>
11024 stevensc 168 
														}
169 
													</td>
170 
												</tr>
171 
											))
172 
										}
173 
									</Table>
174 
									<div className='row justify-content-between align-items-center'>
175 
										<p className='mb-0'>
176 
											{`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`}
177 
										</p>
178 
										<TablePagination
11046 stevensc 179 
											onDecrement={() => setPages(prev => prev.current -= 1)}
180 
											onIncrement={() => setPages(prev => prev.current += 1)}
11024 stevensc 181 
											totalPages={pages.last}
182 
											currentPage={pages.current}
183 
										/>
184 
									</div>
185 
								</Card.Body>
186 
							</Card>
187 
						</div>
188 
					</div >
189 
				</div >
190 
			</section >
11049 stevensc 191 
			<AddModal
11046 stevensc 192 
				email_link={email_link}
11059 stevensc 193 
				add_link={add_link.replace('UUID_PLACEHOLDER', currentVacancy)}
11046 stevensc 194 
				closeModal={() => setIsShowAddModal(false)}
195 
				isOpen={isShowAddModal}
11049 stevensc 196 
			/>
11061 stevensc 197 
			<EditModal
198 
				edit_link={currentEditLink}
199 
				closeModal={() => setIsShowEditModal(false)}
200 
				isOpen={isShowEditModal}
201 
			/>
11024 stevensc 202 
			<DeleteModal
203 
				url={actionLink}
204 
				isOpen={showDeleteModal}
205 
				closeModal={() => setShowDeleteModal(false)}
206 
				title="Esta seguro de borrar esta vacante?"
207 
				onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== actionLink) })}
208 
				message="Vacante eliminada"
209 
			/>
210 
		</ContentTitle>
211 
	)
9954 stevensc 212 
}
213 
export default MainView