Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15311 | Rev 15313 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15311 Rev 15312
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState } from 'react'
2 
import axios from 'axios'
 - 
 
3 
import { Card } from 'react-bootstrap'
 2 
import { Card } from 'react-bootstrap'
4 
import { LengthFilter, SearchInput, TablePagination } from '../../components/TableComponents'
 3 
import { LengthFilter, SearchInput, TablePagination } from '../../components/TableComponents'
5 
import { addNotification } from '../../../redux/notification/notification.actions'
 - 
 
6 
import { useDispatch } from 'react-redux'
 - 
 
7 
import DeleteModal from '../../../shared/DeleteModal'
 4 
import DeleteModal from '../../../shared/DeleteModal'
8 
import Table from '../../../shared/content-table/Table'
 5 
import Table from '../../../shared/content-table/Table'
9 
import TableRow from '../../../shared/content-table/TableRow'
 6 
import TableRow from '../../../shared/content-table/TableRow'
- 
 
 7 
import useGetDataTable from '../../../shared/hooks/useGetDataTable'
Línea 10... Línea 8...
10 
 
 8 
 
11 
const headers = [
 9 
const headers = [
12 
	{ key: 'name', label: 'Nombre', isSorteable: true },
 10 
	{ key: 'name', label: 'Nombre', isSorteable: true },
13 
	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },
 11 
	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },
Línea 20... Línea 18...
20 
	setActionLink,
 18 
	setActionLink,
21 
	permisions,
 19 
	permisions,
22 
	add_link,
 20 
	add_link,
23 
	setAction }) => {
 21 
	setAction }) => {
Línea 24... Línea -...
24 
 
 - 
 
25 
	const dispatch = useDispatch()
 - 
 
26 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
 22 
 
27 
	const [deleteLink, setDeleteLink] = useState('')
 - 
 
28 
	const [items, setItems] = useState([])
 - 
 
29 
	const [total, setTotal] = useState(0)
 23 
	const [linkDelete, setLinkDelete] = useState('')
30 
	const [search, setSearch] = useState('')
 - 
 
31 
	const [startItem, setStartItem] = useState(1)
 - 
 
32 
	const [lastItem, setLastItem] = useState(10)
 24 
	const [search, setSearch] = useState('')
33 
	const [dataLength, setDataLength] = useState(10)
 25 
	const [dataLength, setDataLength] = useState(10)
34 
	const [pages, setPages] = useState({
 - 
 
35 
		current: 1,
 - 
 
36 
		last: 1
 - 
 
37 
	})
 - 
 
38 
 
 - 
 
39 
	const getData = ({ url = '', params = {} }) => {
 - 
 
40 
 
 - 
 
41 
		axios.get(url, { params: { ...params } })
 - 
 
42 
			.then(({ data }) => {
 - 
 
43 
				if (!data.success) {
 - 
 
44 
					dispatch(addNotification({
 - 
 
45 
						style: 'danger',
 - 
 
46 
						msg: 'Ha ocurrido un error'
 - 
 
47 
					}))
 - 
 
48 
				}
 26 
	const [currentPage, setCurrentPage] = useState(1)
49 
 
 - 
 
50 
				setItems(data.data.items)
 - 
 
51 
				setTotal(data.data.total)
 27
52 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
 - 
 
53 
			})
 - 
 
54 
			.catch(() => dispatch(addNotification({
 - 
 
55 
				style: 'danger',
 - 
 
56 
				msg: 'Ha ocurrido un error'
 - 
 
57 
			})))
 - 
 
58 
	}
 - 
 
59 
 
 - 
 
60 
	useEffect(() => {
 - 
 
61 
		getData({
 - 
 
62 
			url: table_link,
 - 
 
63 
			params: {
 - 
 
64 
				search: search,
 - 
 
65 
				length: dataLength,
 - 
 
66 
				start: pages.current
 - 
 
67 
			}
 - 
 
68 
		})
 - 
 
69 
	}, [search, dataLength, pages.current])
 - 
 
70 
 
 - 
 
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 (items) {
 - 
 
81 
			if (startItem > 1) {
 - 
 
82 
				setLastItem(startItem + (items.length - 1))
 - 
 
83 
			} else {
 - 
 
84 
				setLastItem(items.length)
 - 
 
85 
			}
 - 
 
86 
		}
 - 
 
87 
	}, [items])
 - 
 
Línea 88... Línea 28...
88 
 
 28 
	const { items: data, total, lastPage, startItem, lastItem } = useGetDataTable({ url: table_link, params: { search, length: dataLength, start: currentPage } })
Línea 89... Línea 29...
89 
 
 29 
 
90 
	const handleSort = (result) => setItems(result)
 30 
	const [items, setItems] = useState(data)
91 
 
 31 
 
92 
	const handleEdit = (url) => {
 32 
	const handleEdit = (url) => {
Línea 93... Línea 33...
93 
		setActionLink(url)
 33 
		setActionLink(url)
94 
		setAction('edit')
 - 
 
95 
	}
 - 
 
96 
 
 - 
 
Línea 97... Línea 34...
97 
	const handleDelete = (url) => {
 34 
		setAction('edit')
98 
		setDeleteLink(url)
 35 
	}
99 
		setShowDeleteModal(true)
 36 
 
100 
	}
 37 
	const handleDelete = (url) => setLinkDelete(url)
Línea 121... Línea 58...
121 
												Agregar
 58 
												Agregar
122 
											</label>
 59 
											</label>
123 
										}
 60 
										}
124 
										<label
 61 
										<label
125 
											className='d-flex align-items-center'
 62 
											className='d-flex align-items-center'
126 
											onClick={() => getData({
 63 
											onClick={() => window.location.reload()}
127 
												url: table_link,
 - 
 
128 
												params: {
 - 
 
129 
													search: search,
 - 
 
130 
													length: dataLength,
 - 
 
131 
													page: pages.current
 - 
 
132 
												}
 - 
 
133 
											})}
 - 
 
134 
											style={{ cursor: 'pointer' }}
 64 
											style={{ cursor: 'pointer' }}
135 
										>
 65 
										>
136 
											<i className='fa fa-refresh mr-2' />
 66 
											<i className='fa fa-refresh mr-2' />
137 
											Actualizar
 67 
											Actualizar
138 
										</label>
 68 
										</label>
Línea 142... Línea 72...
142 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
 72 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
143 
									</div>
 73 
									</div>
144 
								</Card.Header>
 74 
								</Card.Header>
145 
								<Card.Body>
 75 
								<Card.Body>
146 
									<div className="table-responsive">
 76 
									<div className="table-responsive">
147 
										<Table
 - 
 
148 
											data={items}
 - 
 
149 
											headers={headers}
 77 
										<Table headers={headers}>
150 
											setData={handleSort}
 - 
 
151 
										>
 - 
 
152 
											{() => items.map((item, index) =>
 78 
											{() => items.map((item, index) =>
153 
												<TableRow
 79 
												<TableRow
154 
													key={index}
 80 
													key={index}
155 
													item={item}
 81 
													item={item}
156 
													editOptions={{
 82 
													editOptions={{
Línea 167... Línea 93...
167 
									<div className='row justify-content-between align-items-center'>
 93 
									<div className='row justify-content-between align-items-center'>
168 
										<p className='mb-0'>
 94 
										<p className='mb-0'>
169 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
 95 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
170 
										</p>
 96 
										</p>
171 
										<TablePagination
 97 
										<TablePagination
172 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
 98 
											onDecrement={() => setCurrentPage(prev => prev - 1)}
173 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
 99 
											onIncrement={() => setCurrentPage(prev => prev + 1)}
174 
											totalPages={pages.last}
 100 
											totalPages={lastPage}
175 
											currentPage={pages.current}
 101 
											currentPage={currentPage}
176 
										/>
 102 
										/>
177 
									</div>
 103 
									</div>
178 
								</Card.Body>
 104 
								</Card.Body>
179 
							</Card>
 105 
							</Card>
180 
						</div>
 106 
						</div>
181 
					</div >
 107 
					</div >
182 
				</div >
 108 
				</div >
183 
			</section >
 109 
			</section >
184 
			<DeleteModal
 110 
			<DeleteModal
185 
				url={deleteLink}
 111 
				url={linkDelete}
186 
				isOpen={showDeleteModal}
 112 
				isOpen={linkDelete}
187 
				closeModal={() => setShowDeleteModal(false)}
 113 
				closeModal={() => setLinkDelete('')}
188 
				title="Esta seguro de borrar esta vacante?"
 114 
				title="Esta seguro de borrar esta vacante?"
189 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== deleteLink))}
 115 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== linkDelete))}
190 
				message="Vacante eliminada"
 116 
				message="Vacante eliminada"
191 
			/>
 117 
			/>
192 
		</>
 118 
		</>
193 
	)
 119 
	)
194 
}
 120 
}