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 { useDispatch } from 'react-redux'
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
import { addNotification } from '../../../redux/notification/notification.actions'
import DeleteModal from '../../../shared/DeleteModal'
import AddModal from '../components/AddModal'

const headers = [
        { key: 'last_date', label: 'Último día', isSorteable: true },
        { key: 'form', label: 'Nombre del Formulario', isSorteable: true },
        { key: 'supervisor', label: 'Supervisor', isSorteable: true },
        { key: 'first_name', label: 'Evaluado', isSorteable: true },
        { key: 'actions', label: 'Acciones', isSorteable: false }
]

const TableView = ({
        add_link,
        table_link,
        permisions,
        actionLink,
        setActionLink,
        email_link,
        setAction
}) => {

        //Hooks
        const dispatch = useDispatch()

        //State
        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) {
                                        typeof data.data === 'string'
                                                ?
                                                dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: data.data
                                                }))
                                                : Object.entries(data.data).map(([key, value]) =>
                                                        value.map(err =>
                                                                dispatch(addNotification({
                                                                        style: 'danger',
                                                                        msg: `${key}: ${err}`
                                                                }))
                                                        )
                                                )
                                        return
                                }

                                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) {
                        if (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 btn-add'
                                                                                                /* onClick={() => {
                                                                                                        setActionLink(add_link)
                                                                                                        setModalToShow('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.last_date}</td>
                                                                                                                <td className='text-vertical-middle'>
                                                                                                                        {item.form}
                                                                                                                        <br />
                                                                                                                        {
                                                                                                                                item.actions.link_report_both
                                                                                                                                        ?
                                                                                                                                        <div>
                                                                                                                                                <a
                                                                                                                                                        className="btn btn-info btn-sm"
                                                                                                                                                        href={item.actions.link_report_both}
                                                                                                                                                        target="_blank" rel="noreferrer" >
                                                                                                                                                        <i className="fa fa-file-o" />
                                                                                                                                                        PDF de evaluacion conjunta
                                                                                                                                                </a>
                                                                                                                                        </div>
                                                                                                                                        :
                                                                                                                                        <button
                                                                                                                                                className="btn btn-info btn-sm"
                                                                                                                                                onClick={() => {
                                                                                                                                                        setActionLink(item.actions.link_both)
                                                                                                                                                        setAction('both')
                                                                                                                                                }}
                                                                                                                                        >
                                                                                                                                                <i className="fa fa-external-link" />
                                                                                                                                                Evaluacion en conjunto
                                                                                                                                        </button>
                                                                                                                        }

                                                                                                                </td>
                                                                                                                <td className='text-vertical-middle'>
                                                                                                                        {item.supervisor}
                                                                                                                        {item.actions.link_report_superviser
                                                                                                                                ? <div>
                                                                                                                                        <a
                                                                                                                                                className="btn btn-info btn-sm"
                                                                                                                                                href={item.actions.link_report_superviser}
                                                                                                                                                target="_blank" rel="noreferrer" >
                                                                                                                                                <i className="fa fa-file-o" />
                                                                                                                                                PDF de evaluacion del supervisor
                                                                                                                                        </a>
                                                                                                                                </div>
                                                                                                                                : <button
                                                                                                                                        className="btn btn-info btn-sm"
                                                                                                                                        onClick={() => {
                                                                                                                                                setActionLink(item.actions.link_superviser)
                                                                                                                                                setAction('superviser')
                                                                                                                                        }}>
                                                                                                                                        <i className="fa fa-external-link" />
                                                                                                                                        Evaluacion del supervisor
                                                                                                                                </button>
                                                                                                                        }
                                                                                                                </td>
                                                                                                                <td className='text-vertical-middle'>
                                                                                                                        {`${item.first_name} ${item.last_name}`}
                                                                                                                        {
                                                                                                                                item.actions.link_report_self
                                                                                                                                        ?
                                                                                                                                        <div>
                                                                                                                                                <a
                                                                                                                                                        className="btn btn-info btn-sm"
                                                                                                                                                        href={item.actions.link_report_self}
                                                                                                                                                        target="_blank" rel="noreferrer" >
                                                                                                                                                        <i className="fa fa-file-o" />
                                                                                                                                                        PDF de autoevaluación
                                                                                                                                                </a>
                                                                                                                                        </div>
                                                                                                                                        :
                                                                                                                                        <button
                                                                                                                                                className="btn btn-info btn-sm"
                                                                                                                                                onClick={() => {
                                                                                                                                                        setActionLink(item.actions.link_self)
                                                                                                                                                        setAction('self')
                                                                                                                                                }}
                                                                                                                                        >
                                                                                                                                                <i className="fa fa-external-link" />
                                                                                                                                                Autoevaluación
                                                                                                                                        </button>
                                                                                                                        }

                                                                                                                </td>
                                                                                                                <td>
                                                                                                                        <div className="d-flex align-items-center" style={{ gap: '5px' }}>
                                                                                                                                {
                                                                                                                                        permisions.allowDelete
                                                                                                                                        &&
                                                                                                                                        <i
                                                                                                                                                className='fa fa-trash'
                                                                                                                                                onClick={() => {
                                                                                                                                                        setActionLink(item.actions.link_delete)
                                                                                                                                                        setModalToShow('delete')
                                                                                                                                                }}
                                                                                                                                                style={{ cursor: 'pointer' }}
                                                                                                                                        />
                                                                                                                                }
                                                                                                                        </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 >
                        <AddModal
                                action_link={actionLink}
                                closeModal={() => setModalToShow('')}
                                isOpen={modalToShow === 'add'}
                                email_link={email_link}
                                onComplete={() => getData({
                                        url: table_link,
                                        params: {
                                                search: search,
                                                length: dataLength,
                                                page: pages.current
                                        }
                                })}
                        />
                        <DeleteModal
                                url={actionLink}
                                isOpen={modalToShow === 'delete'}
                                closeModal={() => setModalToShow('')}
                                title="Esta seguro de borrar esta evaluación?"
                                onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
                                message="Registro borrado"
                        />
                </>
        )
}

export default TableView