Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import EditModal from './Modal';
import Table from './Table';

const defaultActionLink = '/settings/company-sizes/add'

const CompanySizesView = ({ urlsVar, title = '', headers = [] }) => {

    const { linkTable } = urlsVar
    const [companyData, setCompanyData] = useState({});
    const [showModal, setShowModal] = useState(false);
    const [selectItem, setSelectItem] = useState(null);
    const [actionLink, setActionLink] = useState(defaultActionLink);

    // Filters States
    const [search, setSearch] = useState('');
    const [dataLength, setDataLength] = useState(10);
    const [start, setStart] = useState(1);
    const [pages, setPages] = useState({
        current: 1,
        last: companyData.total ? Math.ceil(companyData.total / dataLength) : 1
    });
    const lengthValues = ["10", "25", "50", "100"]

    const getData = () => {
        axios.get(
            linkTable,
            {
                params: {
                    search: search,
                    start: pages.current,
                    length: dataLength
                }
            })
            .then(({ data }) => {
                if (data.success) {
                    setCompanyData(data.data)
                    setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })

                    return data.data
                }
            })
            .catch((err) => console.log(err))
    }

    const closeModal = () => {
        setShowModal(false)
        setSelectItem(null)
        setActionLink(defaultActionLink)
    }

    const editItem = (item) => {
        setSelectItem(item);
        setActionLink(item.actions.link_edit);
        setShowModal(true);
    }

    const addItem = () => {
        setSelectItem(null);
        setActionLink(defaultActionLink)
        setShowModal(true);
    }

    useEffect(() => {
        getData()
    }, [search, dataLength, pages.current]);

    return (
        <>
            <section className="content">
                <section className="content-header">
                    <div className="container-fluid">
                        <div className="row mb-2">
                            <div className="col-sm-12">
                                <h1>{title}</h1>
                            </div>
                        </div>
                    </div>
                </section>
                <section className="content">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-12">
                                <div className="card">
                                    <div className="card-body">
                                        <div className="dataTables_wrapper dt-bootstrap4 no-footer">
                                            <div className="row">
                                                <div className="col-sm-12 col-md-6">
                                                    <div className="dataTables_length" id="gridTable_length">
                                                        <label>
                                                            Mostrar
                                                            <select
                                                                className="custom-select custom-select-sm form-control form-control-sm"
                                                                onChange={(e) => setDataLength(e.target.value)}
                                                            >
                                                                {
                                                                    lengthValues.map((value, index) => (
                                                                        <option key={index} value={value}>{value}</option>
                                                                    ))
                                                                }
                                                            </select>
                                                            registros
                                                        </label>
                                                    </div>
                                                </div>
                                                <div className="col-sm-12 col-md-6">
                                                    <div className="dataTables_filter">
                                                        <label>
                                                            Buscar
                                                            <input
                                                                type="search"
                                                                className="form-control form-control-sm" placeholder=""
                                                                onChange={(e) => setSearch(e.target.value)}
                                                            />
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="row">
                                                <div className="col-sm-12">
                                                    {
                                                        companyData.items
                                                        &&
                                                        <Table
                                                            data={companyData.items}
                                                            onEdit={editItem}
                                                            headers={headers}
                                                        />
                                                    }
                                                </div>
                                            </div>
                                            <div className="row">
                                                <div className="col-sm-12 col-md-5">
                                                    <div className="dataTables_info" >
                                                        {
                                                            companyData.items
                                                            &&
                                                            `Mostrando registros del ${start} al ${companyData.items.length} de un total de ${companyData.total} registros`
                                                        }
                                                    </div>
                                                </div>
                                                <div className="col-sm-12 col-md-7">
                                                    <div className="dataTables_paginate paging_simple_numbers" id="gridTable_paginate">
                                                        <ul className="pagination">
                                                            <li
                                                                className="paginate_button page-item previous"
                                                            >
                                                                <button
                                                                    type='button'
                                                                    className="page-link"
                                                                    disabled={pages.current === 1}
                                                                    onClick={() => setPages({ ...pages, current: pages.current - 1 })}
                                                                >
                                                                    Anterior
                                                                </button>
                                                            </li>
                                                            <li className="paginate_button page-item active">
                                                                <button
                                                                    className="page-link"
                                                                >
                                                                    {pages.current}
                                                                </button>
                                                            </li>
                                                            <li
                                                                className="paginate_button page-item next"
                                                            >
                                                                <button
                                                                    type='button'
                                                                    className="page-link"
                                                                    disabled={pages.current === pages.last}
                                                                    onClick={() => setPages({ ...pages, current: pages.current + 1 })}
                                                                >
                                                                    Siguiente
                                                                </button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="card-footer clearfix">
                                        <div style={{
                                            display: 'flex',
                                            justifyContent: 'flex-end',
                                            gap: '10px'
                                        }}>
                                            <button
                                                type="button"
                                                className="btn btn-info btn-refresh"
                                                onClick={getData}
                                            >
                                                <i className="fa fa-refresh" />
                                                Recargar
                                            </button>
                                            <button
                                                type="button"
                                                className="btn btn-primary btn-add"
                                                onClick={addItem}
                                            >
                                                <i className="fa fa-plus" />
                                                Agregar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <EditModal
                isOpen={showModal}
                title='Tamaños de empresas'
                closeModal={closeModal}
                isEdit={actionLink !== defaultActionLink}
                url={actionLink}
                currentItem={selectItem}
                action={getData}
            />
        </>
    )
}

export default CompanySizesView