Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import { Card } from 'react-bootstrap'
import styled from 'styled-components'
import PaginationComponent from '../PaginationComponent'

const Filter = styled.div`
    position: relative !important; 
    top: inherit !important; 
    left: inherit !important; 
    transform: none !important; 
    display: inline-flex !important;
    flex-direction: row !important; 
    justify-content: inherit !important; 
    align-items: center; 
    z-index: inherit !important; 
`
const FilterContainer = styled.div`
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .5rem;
`
const CardBody = styled(Card.Body)`
        display: flex;
        flex-direction: column;
        gap: .5rem;
`

const TableFilters = ({
        data = { items: [], total: 0 },
        getData,
        onAdd,
        allowAdd,
        children
}) => {
        const lengthOptions = [10, 25, 50, 100]
        const [search, setSearch] = useState('')
        const [length, setLength] = useState(10)
        const [pages, setPages] = useState({ current: 1, last: 1 })
        const [viewedRegister, setViewedRegister] = useState({ start: 1, end: data.items?.length })

        const onSearch = (value) => {
                setSearch(value)
        }

        const changeLength = (value) => {
                setLength(value)
        }

        const changePage = (page) => {
                setPages(prevPages => ({ ...prevPages, current: page }))
        }

        useEffect(() => {
                getData({
                        search,
                        start: pages.current,
                        length
                })
        }, [search, length, pages.current])

        useEffect(() => {
                if (pages.current > 1) {
                        const start = length * (pages.current - 1) + 1
                        setViewedRegister({ ...viewedRegister, start: start, end: start + (data.items?.length - 1) })
                } else {
                        setViewedRegister({ start: 1, end: data.items?.length })
                }
        }, [pages.current, data])

        useEffect(() => {
                data.total && setPages(prevPages => ({ ...prevPages, last: Math.ceil(data.total / length) }))
        }, [data])

        return (
                <Card>
                        <CardBody>

                                <FilterContainer>
                                        <Filter>
                                                <label>Mostrar</label>
                                                <select className="custom-select custom-select-sm form-control form-control-sm" onChange={(e) => changeLength(e.target.value)}>
                                                        {lengthOptions.map((value) => {
                                                                return <option key={value} value={value}>{value}</option>
                                                        })}
                                                </select>
                                                <label>registros</label>
                                        </Filter>

                                        <Filter>
                                                <label>Buscar</label>
                                                <input
                                                        type="search"
                                                        className="form-control form-control-sm" placeholder=""
                                                        onChange={(e) => onSearch(e.target.value)}
                                                />
                                        </Filter>
                                </FilterContainer>


                                <div className="table-responsive">
                                        {children}
                                </div>

                                <div className="row">
                                        <div className="col-12 col-md-9">
                                                {data.items && <span>{`Mostrando registros del ${viewedRegister.start} al ${viewedRegister.end} de un total de ${data.total} registros`}</span>}
                                        </div>
                                        <div className="col-12 col-md-3">
                                                <PaginationComponent
                                                        currentActivePage={pages.current}
                                                        pages={pages.last}
                                                        onChangePage={changePage}
                                                />
                                        </div>
                                </div>

                                <div className='d-flex justify-content-end' style={{ gap: '10px' }}>
                                        <button type="button" className="btn btn-info" onClick={() => getData()}>
                                                <i className="fa fa-refresh" />
                        Recargar
                                        </button>
                                        {Boolean(Number(allowAdd)) &&
                        <button type="button" className="btn btn-primary btn-add" onClick={onAdd}>
                                <i className="fa fa-plus" />
                            Agregar
                        </button>
                                        }
                                </div>

                        </CardBody>
                </Card>
        )
}

export default TableFilters