Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 9618 | Rev 9634 | 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'
9575 stevensc 4 
import { LengthFilter, SearchInput, Table, TablePagination } from '../components/TableComponents'
9622 stevensc 5 
import { useHistory } from 'react-router-dom'
9469 stevensc 6 
 
9543 stevensc 7 
const headers = [
8 
  { key: "name", label: "Nombre", isSorteable: true },
9 
  { key: "job_description", label: "Descripción de cargo", isSorteable: true },
10 
  { key: "actions", label: "Acciones", isSorteable: false }
11 
]
12 
 
9618 stevensc 13 
const MainView = ({ table_link, setActionLink }) => {
9502 stevensc 14 
 
9622 stevensc 15 
  const history = useHistory()
9502 stevensc 16 
  const [data, setData] = useState({})
9575 stevensc 17 
  const [search, setSearch] = useState('')
9512 stevensc 18 
  const [dataLength, setDataLength] = useState(10);
19 
  const [pages, setPages] = useState({
20 
    current: 1,
21 
    last: 1
22 
  });
9502 stevensc 23 
 
24 
  const getData = ({ url = '', params = {} }) => {
25 
 
26 
    axios.get(url, { params: { ...params } })
27 
      .then(({ data }) => {
9512 stevensc 28 
        if (!data.success) {
29 
          console.log('Ha ocurrido un error')
30 
        }
9502 stevensc 31 
 
9512 stevensc 32 
        setData(data.data)
9521 stevensc 33 
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
9502 stevensc 34 
      })
35 
      .catch((err) => console.log(err))
36 
  }
37 
 
38 
  useEffect(() => {
9575 stevensc 39 
    getData({
40 
      url: table_link,
41 
      params: {
42 
        search: search,
43 
        length: dataLength,
44 
        page: pages.current
45 
      }
46 
    })
47 
  }, [search, dataLength, pages.current])
9502 stevensc 48 
 
9469 stevensc 49 
  return (
9512 stevensc 50 
    <section className="content">
51 
      <div className="container-fluid">
52 
        <div className="row">
53 
          <div className="col-12">
54 
            <Card>
55 
              <Card.Header>
9575 stevensc 56 
                <div className="row justify-content-between">
57 
                  <div className="col-sm-12 col-md-6">
58 
                    <LengthFilter onChange={(e) => setDataLength(e.target.value)} />
59 
                  </div>
60 
                  <div className="col-sm-12 col-md-6">
61 
                    <SearchInput onChange={(e) => setSearch(e.target.value)} />
62 
                  </div>
63 
                </div>
9512 stevensc 64 
              </Card.Header>
65 
              <Card.Body>
9538 stevensc 66 
                <Table data={data.items} headers={headers} setData={setData}>
67 
                  {
68 
                    data.items?.map((item, index) => (
69 
                      <tr key={index}>
70 
                        <td>{item.name}</td>
71 
                        <td>{item.job_description}</td>
9622 stevensc 72 
                        <td className='d-flex' style={{ gap: '10px' }}>
9618 stevensc 73 
                          <i
9622 stevensc 74 
                            className='fa fa-pencil'
75 
                            onClick={() => {
76 
                              setActionLink(item.actions.link_edit)
77 
                              history.push('/edit')
78 
                            }}
79 
                            style={{ cursor: 'pointer' }}
80 
                          />
81 
                          <i
9618 stevensc 82 
                            className='fa fa-trash'
83 
                            onClick={() => setActionLink(item.actions.link_delete)}
84 
                            style={{ cursor: 'pointer' }}
85 
                          />
9538 stevensc 86 
                        </td>
87 
                      </tr>
88 
                    ))
89 
                  }
90 
                </Table>
91 
                <div className='row justify-content-between'>
9525 stevensc 92 
                  <div className="col-sm-12 col-md-5">
93 
                    <div className="d-flex justify-content-start" >
94 
                      {`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`}
95 
                    </div>
9512 stevensc 96 
                  </div>
9525 stevensc 97 
                  <div className="col-sm-12 col-md-5">
98 
                    <div className="d-flex justify-content-end" >
99 
                      <TablePagination
100 
                        onDecrement={(e) => setPages(prev => prev.current -= 1)}
101 
                        onIncrement={(e) => setPages(prev => prev.current += 1)}
102 
                        totalPages={pages.last}
103 
                        currentPage={pages.current}
104 
                      />
105 
                    </div>
9512 stevensc 106 
                  </div>
107 
                </div>
9525 stevensc 108 
              </Card.Body>
9512 stevensc 109 
            </Card>
110 
          </div>
111 
        </div >
112 
      </div >
113 
    </section >
9469 stevensc 114 
  )
9489 stevensc 115 
}
116 
export default MainView