Proyectos de Subversion LeadersLinked - Backend

Rev

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

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