Rev 12379 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable no-mixed-spaces-and-tabs */
import React, { useState, useEffect } from 'react'
import { Card } from 'react-bootstrap'
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
import { addNotification } from '../../../redux/notification/notification.actions'
import DeleteModal from '../../../shared/DeleteModal'
import axios from 'axios'
import { useDispatch } from 'react-redux'
const headers = [
{ key: 'name', label: 'Nombre', isSorteable: true },
{ key: 'job_description', label: 'Descripción', isSorteable: true },
{ key: 'status', label: 'Estatus', isSorteable: false },
{ key: 'actions', label: 'Acciones', isSorteable: false }
]
const TableView = ({
add_link,
table_link,
permisions,
actionLink,
setActionLink,
setAction }) => {
const dispatch = useDispatch()
const [modalToShow, setModalToShow] = useState('')
const [items, setItems] = useState([])
const [total, setTotal] = useState(0)
const [search, setSearch] = useState('')
const [dataLength, setDataLength] = useState(10)
const [startItem, setStartItem] = useState(1)
const [lastItem, setLastItem] = useState(10)
const [pages, setPages] = useState({
current: 1,
last: 1
})
const getData = ({ url = '', params = {} }) => {
axios.get(url, { params: { ...params } })
.then(({ data }) => {
if (!data.success) {
return dispatch(addNotification({
style: 'danger',
msg: 'Ha ocurrido un error'
}))
}
setItems(data.data.items)
setTotal(data.data.total)
setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
})
.catch(() => dispatch(addNotification({
style: 'danger',
msg: 'Ha ocurrido un error'
})))
}
useEffect(() => {
getData({
url: table_link,
params: {
search: search,
length: dataLength,
start: pages.current
}
})
}, [search, dataLength, pages.current])
useEffect(() => {
pages.current > 1
? setStartItem((dataLength * (pages.current - 1)) + 1)
: setStartItem(1)
}, [pages.current])
useEffect(() => {
if (items) {
startItem > 1
? setLastItem(startItem + (items.length - 1))
: setLastItem(items.length)
}
}, [items])
return (
<>
<section className="content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<Card>
<Card.Header>
<div className="row justify-content-end" style={{ gap: '10px' }}>
{permisions.allowAdd &&
<label
className='d-flex align-items-center'
onClick={() => {
setActionLink(add_link)
setAction('add')
}}
style={{ cursor: 'pointer' }}
>
<i className="fa fa-plus mr-2" />
Agregar
</label>
}
<label
className='d-flex align-items-center'
onClick={() => getData({
url: table_link,
params: {
search: search,
length: dataLength,
page: pages.current
}
})}
style={{ cursor: 'pointer' }}
>
<i className='fa fa-refresh mr-2' />
Actualizar
</label>
</div>
<div className="row justify-content-between align-items-center">
<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
<SearchInput onChange={(e) => setSearch(e.target.value)} />
</div>
</Card.Header>
<Card.Body>
<div className="table-responsive">
<Table data={items} headers={headers} setData={setItems}>
{!!items.length &&
items.map((item, index) => (
<tr key={index}>
<td className='text-vertical-middle'>{item.name}</td>
<td className='text-vertical-middle'>{item.job_description}</td>
<td className='text-vertical-middle'>
{item.status === 'a'
? 'Activo'
: 'Inactivo'
}
</td>
<td>
<div className="d-flex align-items-center" style={{ gap: '5px' }}>
{permisions.allowEdit &&
<i
className='fa fa-pencil'
onClick={() => {
setActionLink(item.actions.link_edit)
setAction('edit')
}}
style={{ cursor: 'pointer' }}
/>
}
{permisions.allowDelete &&
<i
className='fa fa-trash'
onClick={() => {
setActionLink(item.actions.link_delete)
setModalToShow('delete')
}}
style={{ cursor: 'pointer' }}
/>
}
{permisions.allowReport &&
<a href={item.actions.link_report} target='_blank' rel="noreferrer" >
<i className='fa fa-file' style={{ color: '#333' }} />
</a>
}
</div>
</td>
</tr>
))
}
</Table>
</div>
<div className='row justify-content-between align-items-center'>
<p className='mb-0'>
{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
</p>
<TablePagination
onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
totalPages={pages.last}
currentPage={pages.current}
/>
</div>
</Card.Body>
</Card>
</div>
</div >
</div >
</section >
<DeleteModal
url={actionLink}
isOpen={modalToShow === 'delete'}
closeModal={() => setModalToShow('')}
title="Esta seguro de borrar este formulario?"
onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
message="Registro borrado"
/>
</>
)
}
export default TableView