Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

import { Card } from 'react-bootstrap'

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

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

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

import { useDispatch } from 'react-redux'

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

import ContentTitle from '../../../shared/ContentTitle'

const headers = [

    { key: "first_name", label: "Nombre", isSorteable: true },

    { key: "last_name", label: "Apellido", isSorteable: true },

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

    { key: "status", label: "Estatus", isSorteable: false },

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

]

const MainView = ({ email_link, add_link, table_link, permisions }) => {

    const history = useHistory()

    const dispatch = useDispatch()

    const [showDeleteModal, setShowDeleteModal] = useState(false)

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

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

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

    const [dataLength, setDataLength] = useState(10);

    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((err) => dispatch(addNotification({

                style: "error",

                msg: "Ha ocurrido un error"

            })))

    }

    useEffect(() => {

        getData({

            url: table_link,

            params: {

                search: search,

                length: dataLength,

                page: pages.current

            }

        })

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

    return (

        <ContentTitle title='Preselección'>

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

                                                    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, index) => (

                                                <tr key={index}>

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

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

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

                                                    <td>

                                                        {

                                                            item.status === "a"

                                                                ? <i className='fa fa-check' style={{ color: '#5cb85c' }} />

                                                                : <i className='fa fa-close' style={{ color: 'red' }} />

                                                        }

                                                    </td>

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

                                                        {

                                                            permisions.allowEdit

                                                            &&

                                                            <i

                                                                className='fa fa-pencil'

                                                                onClick={() => {

                                                                    setActionLink(item.actions.link_edit)

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

                                                                }}

                                                                style={{ cursor: 'pointer' }}

                                                            />

                                                        }

                                                        {

                                                            permisions.allowDelete

                                                            &&

                                                            <i

                                                                className='fa fa-trash'

                                                                onClick={() => {

                                                                    setShowDeleteModal(true)

                                                                    setDeleteLink(item.actions.link_delete)

                                                                }}

                                                                style={{ cursor: 'pointer' }}

                                                            />

                                                        }

                                                    </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={(e) => setPages(prev => prev.current -= 1)}

                                            onIncrement={(e) => 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 vacante?"

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

                message="Vacante eliminada"

            />

        </ContentTitle>

    )

}

export default MainView