Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 5240 | Rev 5245 | 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);
5231 stevensc 19
    const [start, setStart] = useState(1);
5240 stevensc 20
    const [pages, setPages] = useState({
21
        current: 1,
22
        last: Math.ceil(companyData.total / dataLength)
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,
5241 stevensc 32
                    page: pages.current,
5231 stevensc 33
                    length: dataLength,
34
                    start: start
4881 stevensc 35
                }
36
            })
4841 stevensc 37
            .then(({ data }) => {
38
                if (data.success) {
39
                    setCompanyData(data.data)
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()
5240 stevensc 67
    }, [search, dataLength, pages]);
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">
76
                                <h1>Tamaños de empresa</h1>
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}
4881 stevensc 128
                                                        />
5071 stevensc 129
                                                    }
4881 stevensc 130
                                                </div>
131
                                            </div>
5071 stevensc 132
                                            <div className="row">
133
                                                <div className="col-sm-12 col-md-5">
134
                                                    <div className="dataTables_info" >
5240 stevensc 135
                                                        {
136
                                                            companyData.item
137
                                                            &&
138
                                                            `Mostrando registros del ${start} al ${companyData.items.length} de un total de ${companyData.total} registros`
139
                                                        }
5071 stevensc 140
                                                    </div>
4972 stevensc 141
                                                </div>
5071 stevensc 142
                                                <div className="col-sm-12 col-md-7">
143
                                                    <div className="dataTables_paginate paging_simple_numbers" id="gridTable_paginate">
144
                                                        <ul className="pagination">
145
                                                            <li className="paginate_button page-item previous disabled">
146
                                                                <button
147
                                                                    type='button'
148
                                                                    className="page-link"
5240 stevensc 149
                                                                    disabled={pages.current === 1}
150
                                                                    onClick={() => setPages({ ...pages, current: pages.current - 1 })}
5071 stevensc 151
                                                                >
152
                                                                    Anterior
153
                                                                </button>
154
                                                            </li>
155
                                                            <li className="paginate_button page-item active">
156
                                                                <button
157
                                                                    className="page-link"
158
                                                                >
5240 stevensc 159
                                                                    {pages.current}
5071 stevensc 160
                                                                </button>
161
                                                            </li>
162
                                                            <li className="paginate_button page-item next disabled" id="gridTable_next">
163
                                                                <button
164
                                                                    type='button'
165
                                                                    className="page-link"
5240 stevensc 166
                                                                    disabled={pages.last}
167
                                                                    onClick={() => setPages({ ...pages, current: pages.current + 1 })}
5071 stevensc 168
                                                                >
169
                                                                    Siguiente
170
                                                                </button>
171
                                                            </li>
172
                                                        </ul>
173
                                                    </div>
4972 stevensc 174
                                                </div>
175
                                            </div>
176
                                        </div>
4881 stevensc 177
                                    </div>
5071 stevensc 178
                                    <div className="card-footer clearfix">
179
                                        <div>
180
                                            <button
181
                                                type="button"
182
                                                className="btn btn-info btn-refresh">
183
                                                <i className="fa fa-refresh" />
184
                                                Recargar
185
                                            </button>
186
                                            <button
187
                                                type="button"
188
                                                className="btn btn-primary btn-add"
5078 stevensc 189
                                                onClick={addItem}
5071 stevensc 190
                                            >
191
                                                <i className="fa fa-plus" />
192
                                                Agregar
193
                                            </button>
194
                                        </div>
4972 stevensc 195
                                    </div>
196
                                </div>
4881 stevensc 197
                            </div>
198
                        </div>
199
                    </div>
5071 stevensc 200
                </section>
4881 stevensc 201
            </section>
5072 stevensc 202
            <EditModal
5071 stevensc 203
                isOpen={showModal}
204
                title='Tamaños de empresas'
205
                closeModal={closeModal}
5101 stevensc 206
                isEdit={actionLink !== defaultActionLink}
5078 stevensc 207
                url={actionLink}
208
                currentItem={selectItem}
5071 stevensc 209
            />
210
        </>
4799 stevensc 211
    )
212
}
213
 
214
export default CompanySizesView