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'

const headers = [

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

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

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

]

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

  const history = useHistory()

  const dispatch = useDispatch()

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

  const [showDeleteModal, setShowDeleteModal] = useState(false)

  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 (

    <>

      <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 === "1"

                      &&

                      <label

                        className='d-flex align-items-center'

                        onClick={() => {

                          setActionLink(add_link)

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

                        }}

                      >

                        <i className="fa fa-plus mr-2" />

                        Agregar

                      </label>

                    }

                    <label className='d-flex align-items-center' onClick={() => window.location.reload()}>

                      <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.name}</td>

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

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

                            {

                              permisions.allowEdit === '1'

                              &&

                              <i

                                className='fa fa-pencil'

                                onClick={() => {

                                  setActionLink(item.actions.link_edit)

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

                                }}

                                style={{ cursor: 'pointer' }}

                              />

                            }

                            {

                              permisions.allowDelete === '1'

                              &&

                              <i

                                className='fa fa-trash'

                                onClick={() => 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"

      />

    </>

  )

}

export default MainView