Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
4814 stevensc 1 
import axios from 'axios'
4841 stevensc 2 
import React, { useEffect, useState } from 'react'
5071 stevensc 3 
import Modal from './Modal';
4932 stevensc 4 
import Table from './Table';
4799 stevensc 5 
 
4827 stevensc 6 
const CompanySizesView = ({ urlsVar }) => {
4814 stevensc 7 
 
4841 stevensc 8 
    const { linkTable, linkAdd, linkEdit, linkDelete } = urlsVar
4905 stevensc 9 
    const [companyData, setCompanyData] = useState({});
5071 stevensc 10 
    const [showModal, setShowModal] = useState(false);
11 
    const [selectItem, setSelectItem] = useState(false);
12 
 
13 
    // Filters States
4881 stevensc 14 
    const [search, setSearch] = useState('');
15 
    const [dataLength, setDataLength] = useState(10);
16 
    const [page, setPage] = useState(1);
17 
    const lengthValues = ["10", "25", "50", "100"]
4827 stevensc 18 
 
4841 stevensc 19 
    const getData = () => {
4881 stevensc 20 
        axios.get(
21 
            linkTable,
22 
            {
23 
                params: {
4999 stevensc 24 
                    query: search,
4881 stevensc 25 
                    page: page,
4904 stevensc 26 
                    length: dataLength
4881 stevensc 27 
                }
28 
            })
4841 stevensc 29 
            .then(({ data }) => {
30 
                if (data.success) {
31 
                    setCompanyData(data.data)
4830 stevensc 32 
 
4841 stevensc 33 
                    return data.data
34 
                }
35 
            })
36 
            .catch((err) => console.log(err))
4814 stevensc 37 
    }
38 
 
5071 stevensc 39 
    const closeModal = () => {
40 
        setShowModal(false)
41 
    }
42 
 
4827 stevensc 43 
    useEffect(() => {
4841 stevensc 44 
        getData()
4881 stevensc 45 
    }, [search, dataLength, page]);
4814 stevensc 46 
 
4799 stevensc 47 
    return (
5071 stevensc 48 
        <>
49 
            <section className="content">
50 
                <section className="content-header">
51 
                    <div className="container-fluid">
52 
                        <div className="row mb-2">
53 
                            <div className="col-sm-12">
54 
                                <h1>Tamaños de empresa</h1>
55 
                            </div>
4881 stevensc 56 
                        </div>
57 
                    </div>
5071 stevensc 58 
                </section>
59 
                <section className="content">
60 
                    <div className="container-fluid">
61 
                        <div className="row">
62 
                            <div className="col-12">
63 
                                <div className="card">
64 
                                    <div className="card-body">
65 
                                        <div className="dataTables_wrapper dt-bootstrap4 no-footer">
66 
                                            <div className="row">
67 
                                                <div className="col-sm-12 col-md-6">
68 
                                                    <div className="dataTables_length" id="gridTable_length">
69 
                                                        <label>
70 
                                                            Mostrar
71 
                                                            <select
72 
                                                                className="custom-select custom-select-sm form-control form-control-sm"
73 
                                                                onChange={(e) => setDataLength(e.target.value)}
74 
                                                            >
75 
                                                                {
76 
                                                                    lengthValues.map((value, index) => (
77 
                                                                        <option key={index} value={value}>{value}</option>
78 
                                                                    ))
79 
                                                                }
80 
                                                            </select>
81 
                                                            registros
82 
                                                        </label>
83 
                                                    </div>
4881 stevensc 84 
                                                </div>
5071 stevensc 85 
                                                <div className="col-sm-12 col-md-6">
86 
                                                    <div className="dataTables_filter">
87 
                                                        <label>
88 
                                                            Buscar
89 
                                                            <input
90 
                                                                type="search"
91 
                                                                className="form-control form-control-sm" placeholder=""
92 
                                                                onChange={(e) => setSearch(e.target.value)}
93 
                                                            />
94 
                                                        </label>
95 
                                                    </div>
96 
                                                </div>
4881 stevensc 97 
                                            </div>
5071 stevensc 98 
                                            <div className="row">
99 
                                                <div className="col-sm-12">
100 
                                                    {
101 
                                                        companyData.items
102 
                                                        &&
103 
                                                        <Table
104 
                                                            data={companyData.items}
4881 stevensc 105 
                                                        />
5071 stevensc 106 
                                                    }
4881 stevensc 107 
                                                </div>
108 
                                            </div>
5071 stevensc 109 
                                            <div className="row">
110 
                                                <div className="col-sm-12 col-md-5">
111 
                                                    <div className="dataTables_info" >
112 
                                                        {`Mostrando registros del 1 al ${companyData.items?.length} de un total de ${companyData.total} registros`}
113 
                                                    </div>
4972 stevensc 114 
                                                </div>
5071 stevensc 115 
                                                <div className="col-sm-12 col-md-7">
116 
                                                    <div className="dataTables_paginate paging_simple_numbers" id="gridTable_paginate">
117 
                                                        <ul className="pagination">
118 
                                                            <li className="paginate_button page-item previous disabled">
119 
                                                                <button
120 
                                                                    type='button'
121 
                                                                    className="page-link"
122 
                                                                    disabled={page === 1}
123 
                                                                >
124 
                                                                    Anterior
125 
                                                                </button>
126 
                                                            </li>
127 
                                                            <li className="paginate_button page-item active">
128 
                                                                <button
129 
                                                                    className="page-link"
130 
                                                                >
131 
                                                                    1
132 
                                                                </button>
133 
                                                            </li>
134 
                                                            <li className="paginate_button page-item next disabled" id="gridTable_next">
135 
                                                                <button
136 
                                                                    type='button'
137 
                                                                    className="page-link"
138 
                                                                    disabled
139 
                                                                >
140 
                                                                    Siguiente
141 
                                                                </button>
142 
                                                            </li>
143 
                                                        </ul>
144 
                                                    </div>
4972 stevensc 145 
                                                </div>
146 
                                            </div>
147 
                                        </div>
4881 stevensc 148 
                                    </div>
5071 stevensc 149 
                                    <div className="card-footer clearfix">
150 
                                        <div>
151 
                                            <button
152 
                                                type="button"
153 
                                                className="btn btn-info btn-refresh">
154 
                                                <i className="fa fa-refresh" />
155 
                                                Recargar
156 
                                            </button>
157 
                                            <button
158 
                                                type="button"
159 
                                                className="btn btn-primary btn-add"
160 
                                                onClick={() => setShowModal(!showModal)}
161 
                                            >
162 
                                                <i className="fa fa-plus" />
163 
                                                Agregar
164 
                                            </button>
165 
                                        </div>
4972 stevensc 166 
                                    </div>
167 
                                </div>
4881 stevensc 168 
                            </div>
169 
                        </div>
170 
                    </div>
5071 stevensc 171 
                </section>
4881 stevensc 172 
            </section>
5071 stevensc 173 
            <Modal
174 
                isOpen={showModal}
175 
                title='Tamaños de empresas'
176 
                closeModal={closeModal}
177 
            />
178 
        </>
4799 stevensc 179 
    )
180 
}
181 
 
182 
export default CompanySizesView