Proyectos de Subversion LeadersLinked - Backend

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

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

import axios from 'axios'

import { Card } from 'react-bootstrap'

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

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

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

import { useDispatch } from 'react-redux'

import DeleteModal from '../../../shared/DeleteModal'

const headers = [

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

	{ key: 'email', label: 'Correo electrónico', isSorteable: true },

	{ key: 'type', label: 'Entrevistado por', isSorteable: true },

	{ key: 'vacancy', label: 'Vacantes', isSorteable: true },

	{ key: 'points', label: 'Evaluación', isSorteable: true },

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

]

const TableView = ({ table_link, permisions, vacancies, setActionLink }) => {

	const history = useHistory()

	const dispatch = useDispatch()

	const [showDeleteModal, setShowDeleteModal] = useState(false)

	const [currentVacancy, setCurrentVacancy] = useState(vacancies[0].uuid || '')

	const [deleteLink, setDeleteLink] = useState('')

	const [data, setData] = useState({})

	const [search, setSearch] = useState('')

	const [dataLength, setDataLength] = useState(10)

	const points = {

		0: '0%',

		1: '25%',

		2: '50%',

		3: '75%',

		4: '100%'

	}

	const [pages, setPages] = useState({

		current: 1,

		last: 1

	})

	const getData = ({ url = '', params = {} }) => {

		axios.get(url, { params: { ...params } })

			.then(({ data }) => {

				if (!data.success) {

					dispatch(addNotification({

						style: 'error',

						msg: 'Ha ocurrido un error'

					}))

				}

				setData(data.data)

				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })

			})

			.catch(() => dispatch(addNotification({

				style: 'error',

				msg: 'Ha ocurrido un error'

			})))

	}

	useEffect(() => {

		getData({

			url: `${table_link}/${currentVacancy}`,

			params: {

				search: search,

				length: dataLength,

				page: pages.current

			}

		})

	}, [search, dataLength, pages.current, currentVacancy])

	return (

		<>

			<section className="content">

				<div className="container-fluid">

					<div className="row">

						<div className="col-12">

							<Card>

								<Card.Header>

									<div className="row" style={{ gap: '10px' }}>

										<div className="form-group">

											<label>Vacantes</label>

											<select

												className="form-control"

												value={currentVacancy}

												onChange={(e) => setCurrentVacancy(e.target.value)}

												defaultValue={vacancies[0].uuid}

											>

												{

													vacancies.map((vacancy) => (

														<option key={vacancy.uuid} value={vacancy.uuid}>{vacancy.name}</option>

													))

												}

											</select>

										</div>

									</div>

									<div className="row justify-content-end" style={{ gap: '10px' }}>

										{

											permisions.allowAdd

											&&

											<label

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

												onClick={() => history.push('/recruitment-and-selection/vacancies/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>

									<Table data={data.items} headers={headers} setData={setData}>

										{

											data.items?.map((item) => (

												<tr key={item.uuid}>

													<td>{`${item.first_name} ${item.last_name}`}</td>

													<td>{item.email}</td>

													<td>

														{

															item.type === 'r'

																? 'Recursos Humanos'

																: 'Potencial superior'

														}

													</td>

													<td>{item.vacancy}</td>

													<td>

														{

															points[item.points]

														}

													</td>

													<td className='d-inline-flex align-items-center' style={{ gap: '10px' }}>

														{

															permisions.allowEdit

															&&

															<i

																className='fa fa-pencil'

																style={{ cursor: 'pointer' }}

																onClick={() => {

																	setActionLink(item.actions.link_edit)

																	history.push('/recruitment-and-selection/vacancies/edit')

																}}

															/>

														}

														{

															permisions.allowDelete

															&&

															<i

																className='fa fa-trash'

																onClick={() => {

																	setShowDeleteModal(true)

																	setDeleteLink(item.actions.link_delete)

																}}

																style={{ cursor: 'pointer' }}

															/>

														}

														{

															item.type === 'r'

															&&

															<Link to={`/recruitment-and-selection/interview/form/${item.uuid}/file`} className='btn p-0'>

																<i className='fa fa-external-link' style={{ cursor: 'pointer' }} />

															</Link>

														}

														{

															permisions.allowFile

															&&

															<a href={item.actions.link_report} target='_blank' className='btn p-0' rel="noreferrer">

																<i className='fa fa-file-o' style={{ cursor: 'pointer' }} />

															</a>

														}

													</td>

												</tr>

											))

										}

									</Table>

									<div className='row justify-content-between align-items-center'>

										<p className='mb-0'>

											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - data.total) || 0} de un total de ${data.total || 0} registros`}

										</p>

										<TablePagination

											onDecrement={() => setPages(prev => prev.current -= 1)}

											onIncrement={() => setPages(prev => prev.current += 1)}

											totalPages={pages.last}

											currentPage={pages.current}

										/>

									</div>

								</Card.Body>

							</Card>

						</div>

					</div >

				</div >

			</section >

			<DeleteModal

				url={deleteLink}

				isOpen={showDeleteModal}

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

				title="Esta seguro de borrar esta entrevista?"

				onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== deleteLink) })}

				message="Entrevista eliminada"

			/>

		</>

	)

}

export default TableView