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 [actionLink, setActionLink] = 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)
                                                }}
                                                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)
                                                                }}
                                                                style={{ cursor: 'pointer' }}
                                                            />
                                                        }
                                                        {
                                                            permisions.allowDelete
                                                            &&
                                                            <i
                                                                className='fa fa-trash'
                                                                onClick={() => {
                                                                    setShowDeleteModal(true)
                                                                    setActionLink(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={actionLink}
                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