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 DeleteModal from '../../shared/DeleteModal'

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 = ({

	actionLink = '',

	import_link = '',

	add_link = '',

	table_link = '',

	permisions = '',

	setActionLink = function () { }

}) => {

	//Hooks

	const dispatch = useDispatch()

	const history = useHistory()

	//State

	const [isOpen, setIsOpen] = useState(false)

	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'

			})))

	}

	const getImport = () => {

		axios.post(import_link)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: data.data

					}))

				}

				dispatch(addNotification({

					style: 'success',

					msg: data.data

				}))

			})

	}

	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

												onClick={getImport}

												className='d-flex align-items-center btn-add'

												style={{ cursor: 'pointer' }}

											>

												<i className="fa fa-upload mr-2" />

												Importar

											</label>

										}

										{

											permisions.allowAdd

											&&

											<label

												onClick={() => {

													setActionLink(add_link)

													history.push('/settings/jobs-description/add')

												}}

												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

																		onClick={() => {

																			setActionLink(item.actions.link_edit)

																			history.push('/settings/jobs-description/edit')

																		}}

																		className='fa fa-pencil'

																		style={{ cursor: 'pointer' }}

																	/>

																}

																{

																	permisions.allowDelete

																	&&

																	<i

																		className='fa fa-trash'

																		onClick={() => {

																			setActionLink(item.actions.link_delete)

																			setIsOpen(true)

																		}}

																		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 >

			<DeleteModal

				url={actionLink}

				isOpen={isOpen}

				closeModal={() => setIsOpen(false)}

				title="Esta seguro de borrar este registro?"

				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}

				message="Registro eliminado"

			/>

		</>

	)

}

export default TableView