Proyectos de Subversion LeadersLinked - Backend

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