Proyectos de Subversion LeadersLinked - Backend

Rev

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