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

        sortedData = tableData.sort((a, b) => a[sortKey].toLowerCase() < b[sortKey].toLowerCase() && -1)

        if (reverse) {
                sortedData.reverse()
        }

        return sortedData
}

const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
        return (
                <button onClick={onClick} className="btn p-0 ml-2">
                        {(sortKey === columnKey) && reverse
                                ? <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 [reverse, setReverse] = useState(false)

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

        const changeSort = (key) => {
                setReverse(!reverse)
                setSortKey(key)
        }

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

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