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 }) => {

    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: 1

    });

    const lengthValues = ["10", "25", "50", "100"]

    const getData = () => {

        axios.get(

            linkTable,

            {

                params: {

                    search: search,

                    page: pages.current,

                    length: dataLength,

                    start: start

                }

            })

            .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]);

    return (

        <>

            <section className="content">

                <section className="content-header">

                    <div className="container-fluid">

                        <div className="row mb-2">

                            <div className="col-sm-12">

                                <h1>Tamaños de empresa</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}

                                                        />

                                                    }

                                                </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 disabled">

                                                                <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 disabled" id="gridTable_next">

                                                                <button

                                                                    type='button'

                                                                    className="page-link"

                                                                    disabled={pages.last}

                                                                    onClick={() => setPages({ ...pages, current: pages.current + 1 })}

                                                                >

                                                                    Siguiente

                                                                </button>

                                                            </li>

                                                        </ul>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div className="card-footer clearfix">

                                        <div>

                                            <button

                                                type="button"

                                                className="btn btn-info btn-refresh">

                                                <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}

            />

        </>

    )

}

export default CompanySizesView