Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 5371 | Rev 5436 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5371 Rev 5423
Línea 1... Línea 1...
1 
import axios from 'axios'
 1 
import axios from 'axios'
2 
import React, { useEffect, useState } from 'react'
 2 
import React, { useState } from 'react'
3 
import EditModal from './Modal';
 3 
import EditModal from './Modal';
4 
import Table from './Table';
 4 
import TableContainer from './TableContainer';
Línea 5... Línea 5...
5 
 
 5 
 
Línea 6... Línea 6...
6 
const defaultActionLink = '/settings/company-sizes/add'
 6 
const defaultActionLink = '/settings/company-sizes/add'
Línea 7... Línea 7...
7 
 
 7 
 
8 
const CompanySizesView = ({ urlsVar, title = '', headers = [] }) => {
 8 
const CompanySizesView = ({ urlsVar }) => {
9 
 
 9 
 
10 
    const { linkTable } = urlsVar
 10 
    const { linkTable } = urlsVar
11 
    const [companyData, setCompanyData] = useState({});
 11 
    const [companyData, setCompanyData] = useState({});
- 
 
 12 
    const [showModal, setShowModal] = useState(false);
- 
 
 13 
    const [selectItem, setSelectItem] = useState(null);
- 
 
 14 
    const [actionLink, setActionLink] = useState(defaultActionLink);
- 
 
 15 
    const headers = [
- 
 
 16 
        { key: "name", label: "Nombre", isSorteable: true },
- 
 
 17 
        { key: "minimum_no_of_employee", label: "Mínimo", isSorteable: true },
- 
 
 18 
        { key: "maximum_no_of_employee", label: "Máximo", isSorteable: true },
Línea 12... Línea -...
12 
    const [showModal, setShowModal] = useState(false);
 - 
 
13 
    const [selectItem, setSelectItem] = useState(null);
 - 
 
14 
    const [actionLink, setActionLink] = useState(defaultActionLink);
 - 
 
15 
 
 - 
 
16 
    // Filters States
 - 
 
17 
    const [search, setSearch] = useState('');
 - 
 
18 
    const [dataLength, setDataLength] = useState(10);
 - 
 
19 
    const [start, setStart] = useState(1);
 - 
 
20 
    const [pages, setPages] = useState({
 - 
 
21 
        current: 1,
 - 
 
22 
        last: companyData.total ? Math.ceil(companyData.total / dataLength) : 1
 19 
        { key: "status", label: "Activo", isSorteable: false },
23 
    });
 20 
        { key: "actions", label: "Acciones", isSorteable: false }
24 
    const lengthValues = ["10", "25", "50", "100"]
 21 
    ]
25 
 
 22 
 
26 
    const getData = () => {
 23 
    const getData = (search, start, length) => {
27 
        axios.get(
 24 
        axios.get(
28 
            linkTable,
 25 
            linkTable,
29 
            {
 26 
            {
30 
                params: {
 27 
                params: {
31 
                    search: search,
 28 
                    search: search,
32 
                    start: pages.current,
 29 
                    start: start,
33 
                    length: dataLength
 30 
                    length: length
34 
                }
 31 
                }
35 
            })
 - 
 
Línea 36... Línea 32...
36 
            .then(({ data }) => {
 32 
            })
37 
                if (data.success) {
 33 
            .then(({ data }) => {
38 
                    setCompanyData(data.data)
 34 
                if (data.success) {
39 
                    setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
 35 
                    setCompanyData(data.data)
Línea 60... Línea 56...
60 
        setSelectItem(null);
 56 
        setSelectItem(null);
61 
        setActionLink(defaultActionLink)
 57 
        setActionLink(defaultActionLink)
62 
        setShowModal(true);
 58 
        setShowModal(true);
63 
    }
 59 
    }
Línea 64... Línea -...
64 
 
 - 
 
65 
    useEffect(() => {
 - 
 
66 
        getData()
 - 
 
67 
    }, [search, dataLength, pages.current]);
 - 
 
68 
 
 60 
 
69 
    return (
 61 
    return (
70 
        <>
 62 
        <>
71 
            <section className="content">
 63 
            <section className="content">
72 
                <section className="content-header">
 64 
                <section className="content-header">
73 
                    <div className="container-fluid">
 65 
                    <div className="container-fluid">
74 
                        <div className="row mb-2">
 66 
                        <div className="row mb-2">
75 
                            <div className="col-sm-12">
 67 
                            <div className="col-sm-12">
76 
                                <h1>{title}</h1>
 - 
 
77 
                            </div>
 - 
 
78 
                        </div>
 - 
 
79 
                    </div>
 - 
 
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>
 - 
 
106 
                                                </div>
 - 
 
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>
 - 
 
119 
                                            </div>
 - 
 
120 
                                            <div className="row">
 - 
 
121 
                                                <div className="col-sm-12">
 - 
 
122 
                                                    {
 - 
 
123 
                                                        companyData.items
 - 
 
124 
                                                        &&
 - 
 
125 
                                                        <Table
 - 
 
126 
                                                            data={companyData.items}
 - 
 
127 
                                                            onEdit={editItem}
 - 
 
128 
                                                            headers={headers}
 - 
 
129 
                                                        />
 - 
 
130 
                                                    }
 - 
 
131 
                                                </div>
 - 
 
132 
                                            </div>
 - 
 
133 
                                            <div className="row">
 - 
 
134 
                                                <div className="col-sm-12 col-md-5">
 - 
 
135 
                                                    <div className="dataTables_info" >
 - 
 
136 
                                                        {
 - 
 
137 
                                                            companyData.items
 - 
 
138 
                                                            &&
 - 
 
139 
                                                            `Mostrando registros del ${start} al ${companyData.items.length} de un total de ${companyData.total} registros`
 - 
 
140 
                                                        }
 - 
 
141 
                                                    </div>
 - 
 
142 
                                                </div>
 - 
 
143 
                                                <div className="col-sm-12 col-md-7">
 - 
 
144 
                                                    <div className="dataTables_paginate paging_simple_numbers" id="gridTable_paginate">
 - 
 
145 
                                                        <ul className="pagination">
 - 
 
146 
                                                            <li
 - 
 
147 
                                                                className="paginate_button page-item previous"
 - 
 
148 
                                                            >
 - 
 
149 
                                                                <button
 - 
 
150 
                                                                    type='button'
 - 
 
151 
                                                                    className="page-link"
 - 
 
152 
                                                                    disabled={pages.current === 1}
 - 
 
153 
                                                                    onClick={() => setPages({ ...pages, current: pages.current - 1 })}
 - 
 
154 
                                                                >
 - 
 
155 
                                                                    Anterior
 - 
 
156 
                                                                </button>
 - 
 
157 
                                                            </li>
 - 
 
158 
                                                            <li className="paginate_button page-item active">
 - 
 
159 
                                                                <button
 - 
 
160 
                                                                    className="page-link"
 - 
 
161 
                                                                >
 - 
 
162 
                                                                    {pages.current}
 - 
 
163 
                                                                </button>
 - 
 
164 
                                                            </li>
 - 
 
165 
                                                            <li
 - 
 
166 
                                                                className="paginate_button page-item next"
 - 
 
167 
                                                            >
 - 
 
168 
                                                                <button
 - 
 
169 
                                                                    type='button'
 - 
 
170 
                                                                    className="page-link"
 - 
 
171 
                                                                    disabled={pages.current === pages.last}
 - 
 
172 
                                                                    onClick={() => setPages({ ...pages, current: pages.current + 1 })}
 - 
 
173 
                                                                >
 - 
 
174 
                                                                    Siguiente
 - 
 
175 
                                                                </button>
 - 
 
176 
                                                            </li>
 - 
 
177 
                                                        </ul>
 - 
 
178 
                                                    </div>
 - 
 
179 
                                                </div>
 - 
 
180 
                                            </div>
 - 
 
181 
                                        </div>
 - 
 
182 
                                    </div>
 - 
 
183 
                                    <div className="card-footer clearfix">
 - 
 
184 
                                        <div style={{
 - 
 
185 
                                            display: 'flex',
 - 
 
186 
                                            justifyContent: 'flex-end',
 - 
 
187 
                                            gap: '10px'
 - 
 
188 
                                        }}>
 - 
 
189 
                                            <button
 - 
 
190 
                                                type="button"
 - 
 
191 
                                                className="btn btn-info btn-refresh"
 - 
 
192 
                                                onClick={getData}
 - 
 
193 
                                            >
 - 
 
194 
                                                <i className="fa fa-refresh" />
 - 
 
195 
                                                Recargar
 - 
 
196 
                                            </button>
 - 
 
197 
                                            <button
 - 
 
198 
                                                type="button"
 - 
 
199 
                                                className="btn btn-primary btn-add"
 - 
 
200 
                                                onClick={addItem}
 - 
 
201 
                                            >
 - 
 
202 
                                                <i className="fa fa-plus" />
 - 
 
203 
                                                Agregar
 - 
 
204 
                                            </button>
 - 
 
205 
                                        </div>
 - 
 
206 
                                    </div>
 - 
 
207 
                                </div>
 68 
                                <h1>Tamaños de empresa</h1>
208 
                            </div>
 69 
                            </div>
209 
                        </div>
 70 
                        </div>
210 
                    </div>
 71 
                    </div>
- 
 
 72 
                </section>
- 
 
 73 
                <TableContainer
- 
 
 74 
                    data={companyData}
- 
 
 75 
                    getData={getData}
- 
 
 76 
                    onEdit={editItem}
- 
 
 77 
                    onAdd={addItem}
- 
 
 78 
                    headers={headers}
211 
                </section>
 79 
                />
212 
            </section>
 80 
            </section>
213 
            <EditModal
 81 
            <EditModal
214 
                isOpen={showModal}
 82 
                isOpen={showModal}
215 
                title='Tamaños de empresas'
 83 
                title='Tamaños de empresas'