Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import PaginationComponent from '../../shared/PaginationComponent'
import Table from './Table'

const TableFilters = ({
        data,
        getData,
        onAdd,
        headers,
        onDelete,
        onEdit,
        allowAdd,
        allowEdit,
        allowDelete,
        allowUsersWhoApplied,
        handleUserWhoApplied,
        labels
}) => {

        const [search, setSearch] = useState('')
        const [dataLength, setDataLength] = useState(10)
        const [startItem, setStartItem] = useState(1)
        const [lastItem, setLastItem] = useState(10)
        const [pages, setPages] = useState({
                current: 1,
                last: 1
        })
        const lengthValues = ['10', '25', '50', '100']

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

        useEffect(() => {
                setPages({ ...pages, last: Math.ceil(data.total / dataLength) })
        }, [data.total])

        useEffect(() => {
                if (pages.current > 1) {
                        setStartItem((dataLength * (pages.current - 1)) + 1)
                } else {
                        setStartItem(1)
                }
        }, [pages.current])

        useEffect(() => {
                if (data.items) {
                        if (startItem > 1) {
                                setLastItem(startItem + (data.items.length - 1))
                        } else {
                                setLastItem(data.items.length)
                        }
                }
        }, [data])

        return (
                <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 justify-content-between align-items-center">
                                                                                <div className="col-sm-12 col-md-6">
                                                                                        <div className="dataTables_length" id="gridTable_length">
                                                                                                <label className='d-inline-flex'>
                                                                                                        {labels.SHOW}
                                                                                                        <select
                                                                                                                className="custom-select mx-1 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>
                                                                                                        {labels.REGISTER}
                                                                                                </label>
                                                                                        </div>
                                                                                </div>
                                                                                <div className="col-sm-12 col-md-6 d-flex justify-content-end">
                                                                                        <div className="dataTables_filter">
                                                                                                <label>
                                                                                                        {labels.SEARCH}
                                                                                                        <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 table-responsive">
                                                                                        {
                                                                                                data.items
                                                                                                &&
                                                                                                <Table
                                                                                                        data={data.items}
                                                                                                        onEdit={onEdit}
                                                                                                        onDelete={onDelete}
                                                                                                        headers={headers}
                                                                                                        allowEdit={allowEdit}
                                                                                                        allowDelete={allowDelete}
                                                                                                        allowUsersWhoApplied={allowUsersWhoApplied}
                                                                                                        handleUserWhoApplied={handleUserWhoApplied}
                                                                                                        labels={labels}
                                                                                                />
                                                                                        }
                                                                                </div>
                                                                        </div>
                                                                        <div className="row">
                                                                                <div className="col-sm-12 col-md-5">
                                                                                        <div className="dataTables_info" >
                                                                                                {
                                                                                                        data.items
                                                                                                        &&
                                                                                                        labels.DATATABLE_SINFO.replace('_START_', startItem).replace('_END_', lastItem).replace('_TOTAL_', data.total)
                                                                                                }
                                                                                        </div>
                                                                                </div>
                                                                                <div className="col-sm-12 col-md-7">
                                                                                        <div className='d-flex align-items-center justify-content-end'>
                                                                                                {
                                                                                                        pages.last > 1
                                                                                                        &&
                                                                                                        <PaginationComponent
                                                                                                                pages={pages.last}
                                                                                                                currentActivePage={pages.current}
                                                                                                                onChangePage={(page) => setPages({ ...pages, current: page })}
                                                                                                        />
                                                                                                }
                                                                                        </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"
                                                                                onClick={() => getData()}
                                                                        >
                                                                                <i className="fa fa-refresh" />
                                                                                {labels.REFRESH}
                                                                        </button>
                                                                        {
                                                                                (allowAdd === '1')
                                                                                &&
                                                                                <button
                                                                                        type="button"
                                                                                        className="btn btn-primary btn-add"
                                                                                        onClick={onAdd}
                                                                                >
                                                                                        <i className="fa fa-plus" />
                                                                                        {labels.ADD}
                                                                                </button>
                                                                        }
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </section>
        )
}

export default TableFilters