Proyectos de Subversion LeadersLinked - Backend

Rev

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