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">
            {
                (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(prev => ({ ...prev, items: sortedData() }))
    }, [sortKey, sortOrder])

    return (
        <table className="table table-hover dataTable no-footer dtr-inline">
            <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">
                <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">
                <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>
    )
}