Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */

import axios from 'axios'

import React, { useEffect, useState } from 'react'

import { Card } from 'react-bootstrap'

import { useDispatch } from 'react-redux'

import { useHistory } from 'react-router-dom'

import { LengthFilter, SearchInput, Table } from '../../recruitment_and_selection/components/TableComponents'

import { addNotification } from '../../redux/notification/notification.actions'

import PaginationComponent from '../../shared/PaginationComponent'

const headers = [

	{ key: 'name', label: 'Nombre', isSorteable: true },

	{ key: 'status', label: 'Activo', isSorteable: false },

	{ key: 'actions', label: 'Acciones', isSorteable: false }

]

const TableView = ({

	add_link = '',

	table_link = '',

	permisions = '',

	setActionLink = function () { }

}) => {

	//Hooks

	const dispatch = useDispatch()

	const history = useHistory()

	//State

	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: typeof data.data === 'string'

							? data.data

							: '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(() => {

		if (pages.current > 1) {

			setStartItem((dataLength * (pages.current - 1)) + 1)

		} else {

			setStartItem(1)

		}

	}, [pages.current])

	useEffect(() => {

		if (items) {

			if (startItem > 1) {

				setLastItem(startItem + (items.length - 1))

			} else {

				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 btn-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.status === 'a'

                                            				? 'Activo'

                                            				: 'Inactivo'

                                            			}

                                            		</td>

                                            		<td>

                                            			<div className="d-flex align-items-center" style={{ gap: '.5rem' }}>

                                            				{

                                            					permisions.allowEdit

                                                                &&

                                                                <i

                                                                	className='fa fa-pencil'

                                                                	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={{ cursor: 'pointer' }}

                                                                	/>

                                                                </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>

									<PaginationComponent

										pages={pages.last}

										currentActivePage={pages.current}

										onChangePage={(page) => setPages({ ...pages, current: page })}

									/>

								</div>

							</Card.Body>

						</Card>

					</div>

				</div >

			</div >

		</section >

	)

}

export default TableView