Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 9538 | Rev 9575 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
9502 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import axios from 'axios'
9512 stevensc 3 
import { Card } from 'react-bootstrap'
9538 stevensc 4 
import { Table, TablePagination } from '../components/TableComponents'
9469 stevensc 5 
 
9543 stevensc 6 
const headers = [
7 
  { key: "name", label: "Nombre", isSorteable: true },
8 
  { key: "job_description", label: "Descripción de cargo", isSorteable: true },
9 
  { key: "actions", label: "Acciones", isSorteable: false }
10 
]
11 
 
9517 stevensc 12 
const MainView = ({ table_link }) => {
9502 stevensc 13 
 
14 
  const [data, setData] = useState({})
9512 stevensc 15 
  const [dataLength, setDataLength] = useState(10);
16 
  const [pages, setPages] = useState({
17 
    current: 1,
18 
    last: 1
19 
  });
9502 stevensc 20 
 
21 
  const getData = ({ url = '', params = {} }) => {
22 
 
23 
    axios.get(url, { params: { ...params } })
24 
      .then(({ data }) => {
9512 stevensc 25 
        if (!data.success) {
26 
          console.log('Ha ocurrido un error')
27 
        }
9502 stevensc 28 
 
9512 stevensc 29 
        setData(data.data)
9521 stevensc 30 
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
9502 stevensc 31 
      })
32 
      .catch((err) => console.log(err))
33 
  }
34 
 
35 
  useEffect(() => {
9512 stevensc 36 
    getData({ url: table_link })
37 
  }, [dataLength, pages.current])
9502 stevensc 38 
 
9469 stevensc 39 
  return (
9512 stevensc 40 
    <section className="content">
41 
      <div className="container-fluid">
42 
        <div className="row">
43 
          <div className="col-12">
44 
            <Card>
45 
              <Card.Header>
46 
 
47 
              </Card.Header>
48 
              <Card.Body>
9538 stevensc 49 
                <Table data={data.items} headers={headers} setData={setData}>
50 
                  {
51 
                    data.items?.map((item, index) => (
52 
                      <tr key={index}>
53 
                        <td>{item.name}</td>
54 
                        <td>{item.job_description}</td>
55 
                        <td>
56 
                          <i className='fa fa-pencil' />
57 
                          <i className='fa fa-trash' />
58 
                        </td>
59 
                      </tr>
60 
                    ))
61 
                  }
62 
                </Table>
63 
                <div className='row justify-content-between'>
9525 stevensc 64 
                  <div className="col-sm-12 col-md-5">
65 
                    <div className="d-flex justify-content-start" >
66 
                      {`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`}
67 
                    </div>
9512 stevensc 68 
                  </div>
9525 stevensc 69 
                  <div className="col-sm-12 col-md-5">
70 
                    <div className="d-flex justify-content-end" >
71 
                      <TablePagination
72 
                        onDecrement={(e) => setPages(prev => prev.current -= 1)}
73 
                        onIncrement={(e) => setPages(prev => prev.current += 1)}
74 
                        totalPages={pages.last}
75 
                        currentPage={pages.current}
76 
                      />
77 
                    </div>
9512 stevensc 78 
                  </div>
79 
                </div>
9525 stevensc 80 
              </Card.Body>
9512 stevensc 81 
            </Card>
82 
          </div>
83 
        </div >
84 
      </div >
85 
    </section >
9469 stevensc 86 
  )
9489 stevensc 87 
}
88 
export default MainView