Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import { Card } from 'react-bootstrap'

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

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

import Table from '../../../shared/content-table/Table'

import TableRow from '../../../shared/content-table/TableRow'

import useGetDataTable from '../../../shared/hooks/useGetDataTable'

const headers = [

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

	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },

	{ key: 'status', label: 'Estatus', isSorteable: true },

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

]

const MainView = ({

	table_link,

	setActionLink,

	permisions,

	add_link,

	setAction }) => {

	const [linkDelete, setLinkDelete] = useState('')

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

	const [dataLength, setDataLength] = useState(10)

	const [currentPage, setCurrentPage] = useState(1)

	const { items: data, total, lastPage, startItem, lastItem } = useGetDataTable({ url: table_link, params: { search, length: dataLength, start: currentPage } })

	const [items, setItems] = useState(data)

	const handleEdit = (url) => {

		setActionLink(url)

		setAction('edit')

	}

	const handleDelete = (url) => setLinkDelete(url)

	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={() => window.location.reload()}

											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 headers={headers}>

											{() => items.map((item, index) =>

												<TableRow

													key={index}

													item={item}

													editOptions={{

														permission: permisions.allowEdit,

														icon: (value) => <i className='fa fa-pencil cursor-pointer' onClick={() => handleEdit(value)} />

													}}

													deleteOptions={{

														permission: permisions.allowDelete,

														icon: (value) => <i className='fa fa-trash  cursor-pointer' onClick={() => handleDelete(value)} />

													}}

												/>)}

										</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={() => setCurrentPage(prev => prev - 1)}

											onIncrement={() => setCurrentPage(prev => prev + 1)}

											totalPages={lastPage}

											currentPage={currentPage}

										/>

									</div>

								</Card.Body>

							</Card>

						</div>

					</div >

				</div >

			</section >

			<DeleteModal

				url={linkDelete}

				isOpen={linkDelete}

				closeModal={() => setLinkDelete('')}

				title="Esta seguro de borrar esta vacante?"

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

				message="Vacante eliminada"

			/>

		</>

	)

}

export default MainView