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'

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

  const history = useHistory()

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

          console.log('Ha ocurrido un error')

        }

        setData(data.data)

        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })

      })

      .catch((err) => console.log(err))

  }

  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={() => history.push('/recruitment-and-selection/vacancies/add')}

                    >

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

                      Agregar

                    </label>

                  }

                  <label className='d-flex align-items-center'>

                    <i className='fa fa-refresh' />

                    Actualizar

                  </label>

                </div>

                <div className="row justify-content-between">

                  <div className="col-sm-12 col-md-6">

                    <LengthFilter onChange={(e) => setDataLength(e.target.value)} />

                  </div>

                  <div className="col-sm-12 col-md-6">

                    <SearchInput onChange={(e) => setSearch(e.target.value)} />

                  </div>

                </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'>

                  <div className="col-sm-12 col-md-5">

                    <div className="d-flex justify-content-start" >

                      {`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`}

                    </div>

                  </div>

                  <div className="col-sm-12 col-md-5">

                    <div className="d-flex justify-content-end" >

                      <TablePagination

                        onDecrement={(e) => setPages(prev => prev.current -= 1)}

                        onIncrement={(e) => setPages(prev => prev.current += 1)}

                        totalPages={pages.last}

                        currentPage={pages.current}

                      />

                    </div>

                  </div>

                </div>

              </Card.Body>

            </Card>

          </div>

        </div >

      </div >

    </section >

  )

}

export default MainView