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 { 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'
import AddModal from '../components/AddModal'

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, vacancies }) => {

        const dispatch = useDispatch()
        const [showDeleteModal, setShowDeleteModal] = useState(false)
        const [isShowAddModal, setIsShowAddModal] = useState(false)
        const [currentVacancy, setCurrentVacancy] = useState(vacancies[0].uuid || '')
        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}/${currentVacancy}`, { params: { ...params } })
                        .then(({ data }) => {
                                if (!data.success) {
                                        dispatch(addNotification({
                                                style: 'danger',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

                                setData(data.data)
                                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,
                                page: pages.current
                        }
                })
        }, [search, dataLength, pages.current, currentVacancy])

        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" 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={() => setIsShowAddModal(true)}
                                                                                                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'
                                                                                                                                style={{ cursor: 'pointer' }}
                                                                                                                                onClick={() => {
                                                                                                                                        setActionLink(item.actions.link_edit)
                                                                                                                                }}
                                                                                                                        />
                                                                                                                }
                                                                                                                {
                                                                                                                        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={() => 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 >
                        <AddModal
                                email_link={email_link}
                                add_link={add_link.replace('UUID_PLACEHOLDER', currentVacancy)}
                                closeModal={() => setIsShowAddModal(false)}
                                isOpen={isShowAddModal}
                        />
                        <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