Proyectos de Subversion LeadersLinked - Backend

Rev

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