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>

    )

}