Proyectos de Subversion LeadersLinked - Backend

import React, { useCallback, useState } from 'react'
import { useEffect } from 'react'

const sortData = ({ tableData, sortKey, reverse }) => {
        let sortedData

        if (!sortKey) return tableData

        if (sortKey !== 'name') {
                sortedData = tableData.sort((a, b) => {
                        return a[sortKey] - b[sortKey]
                })
        } else {
                sortedData = tableData.sort((a, b) => {
                        return a[sortKey] > b[sortKey] ? 1 : -1
                })
        }

        if (reverse) {
                return sortedData.reverse()
        }

        return sortedData
}

const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
        return (
                <button onClick={onClick} className="btn p-0">
                        {
                                (sortKey === columnKey) && (sortOrder === 'desc')
                                        ? <i className='fa fa-angle-up' />
                                        : <i className='fa fa-angle-down' />
                        }
                </button>
        )
}

export const Table = ({ data = [], headers, setData, children }) => {

        const [sortKey, setSortKey] = useState('name')
        const [sortOrder, setSortOrder] = useState('ascn')

        const sortedData = useCallback(
                () => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
                [data, sortKey, sortOrder]
        )

        const changeSort = (key) => {
                setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')

                setSortKey(key)
        }

        useEffect(() => {
                setData(sortedData())
        }, [sortKey, sortOrder])

        return (
                <table className="table table-hover my-table w-100">
                        <thead>
                                <tr>
                                        {
                                                headers.map((row) => (
                                                        <th key={row.key} className="text-vertical-middle">
                                                                {row.label}
                                                                {
                                                                        row.isSorteable
                                                                        &&
                                                                        <SortButton columnKey={row.key} onClick={() => changeSort(row.key)} {...{ sortOrder, sortKey, }} />
                                                                }
                                                        </th>
                                                ))
                                        }
                                </tr>
                        </thead>
                        <tbody>
                                {children}
                        </tbody>
                </table >
        )
}

export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {

        return (
                <ul className="pagination mb-0">
                        <li className={`paginate_button page-item previous ${currentPage === 1 ? 'disabled' : ''}`}>
                                <button
                                        type='button'
                                        className="page-link"
                                        disabled={currentPage === 1}
                                        onClick={onDecrement}
                                >
                                        <i className='fa fa-angle-left' />
                                </button>
                        </li>
                        <li className="paginate_button page-item">
                                <button className="page-link">
                                        {currentPage}
                                </button>
                        </li>
                        <li className={`paginate_button page-item next ${currentPage === totalPages ? 'disabled' : ''}`}>
                                <button
                                        type='button'
                                        className="page-link"
                                        disabled={currentPage === totalPages}
                                        onClick={onIncrement}
                                >
                                        <i className='fa fa-angle-right' />
                                </button>
                        </li>
                </ul>
        )
}

Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
        return (
                <div className="row">
                        <div className="col-sm-12 col-md-5">
                                <div className="dataTables_info" >
                                        {`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
                                </div>
                        </div>
                        <div className="col-sm-12 col-md-7">
                                <div className="d-flex justify-content-end">
                                        {children}
                                </div>
                        </div>
                </div>
        )
}

export function LengthFilter({ onChange }) {

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

        return (
                <label className='d-inline-flex'>
                        Mostrar
                        <select
                                className="custom-select custom-select-sm form-control form-control-sm"
                                onChange={onChange}
                        >
                                {
                                        lengthValues.map((value, index) => (
                                                <option key={index} value={value}>{value}</option>
                                        ))
                                }
                        </select>
                        registros
                </label>
        )
}

export function SearchInput({ onChange }) {

        return (
                <label className='d-inline-flex align-items-center'>
                        <i className='fa fa-search mr-2' />
                        <input
                                type="search"
                                className="form-control form-control-sm" placeholder=""
                                onChange={onChange}
                        />
                </label>
        )
}