Proyectos de Subversion LeadersLinked - Backend

Rev

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