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(prev => ({ ...prev, items: 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 }) => {

	const maxPages = 5 > totalPages ? totalPages : 5

	const [pages, setPages] = useState([])

	let nextPage = currentPage + 1

	let previousPage = currentPage - 1

	useEffect(() => {

		while (pages.length < maxPages) {

			const pagesArray = [currentPage]

			if (previousPage > 0) {

				pagesArray.unshift(previousPage)

			}

			if (nextPage <= totalPages) {

				pagesArray.push(nextPage)

			}

			return setPages(pagesArray)

		}

	}, [currentPage, totalPages])

	return (

		<ul className="pagination mb-0">

			<li className="paginate_button page-item previous disabled">

				<button

					type='button'

					className="page-link"

					disabled={currentPage === 1}

					onClick={onDecrement}

				>

					<i className='fa fa-angle-left' />

				</button>

			</li>

			{

				pages.length > 0

				&&

				pages.map((page, index) => (

					<li key={index} className="paginate_button page-item">

						<button className="page-link">

							{page}

						</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>

	)

}