Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15295 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
10061 stevensc 1 
import React, { useCallback, useState } from 'react'
10545 stevensc 2 
import { useEffect } from 'react'
10061 stevensc 3 
 
4 
const sortData = ({ tableData, sortKey, reverse }) => {
10545 stevensc 5 
	let sortedData
10061 stevensc 6 
 
10545 stevensc 7 
	if (!sortKey) return tableData
10061 stevensc 8 
 
15290 stevensc 9 
	sortedData = tableData.sort((a, b) => a[sortKey].toLowerCase() < b[sortKey].toLowerCase() && -1)
15286 stevensc 10 
 
10545 stevensc 11 
	if (reverse) {
15286 stevensc 12 
		sortedData.reverse()
10545 stevensc 13 
	}
10061 stevensc 14 
 
10545 stevensc 15 
	return sortedData
10061 stevensc 16 
}
17 
 
15289 stevensc 18 
const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
10545 stevensc 19 
	return (
15289 stevensc 20 
		<button onClick={onClick} className="btn p-0 ml-2">
21 
			{(sortKey === columnKey) && reverse
22 
				? <i className='fa fa-angle-up' />
23 
				: <i className='fa fa-angle-down' />
10545 stevensc 24 
			}
25 
		</button>
26 
	)
10061 stevensc 27 
}
28 
 
29 
export const Table = ({ data = [], headers, setData, children }) => {
30 
 
10545 stevensc 31 
	const [sortKey, setSortKey] = useState('name')
15289 stevensc 32 
	const [reverse, setReverse] = useState(false)
10061 stevensc 33 
 
15289 stevensc 34 
	const sortedData = useCallback(() => sortData({ tableData: data, sortKey: sortKey, reverse: reverse }), [data, sortKey, reverse])
10061 stevensc 35 
 
10545 stevensc 36 
	const changeSort = (key) => {
15289 stevensc 37 
		setReverse(!reverse)
10545 stevensc 38 
		setSortKey(key)
39 
	}
10061 stevensc 40 
 
10545 stevensc 41 
	useEffect(() => {
12712 stevensc 42 
		setData(sortedData())
15295 stevensc 43 
		setReverse(reverse)
15289 stevensc 44 
	}, [sortKey, reverse])
10061 stevensc 45 
 
10545 stevensc 46 
	return (
11442 stevensc 47 
		<table className="table table-hover my-table w-100">
10545 stevensc 48 
			<thead>
49 
				<tr>
15289 stevensc 50 
					{headers.map((row) =>
51 
						<th key={row.key} className="text-vertical-middle">
52 
							{row.label}
53 
							{row.isSorteable &&
54 
								<SortButton
55 
									columnKey={row.key}
56 
									onClick={() => changeSort(row.key)}
57 
									sortKey={sortKey}
58 
									reverse={reverse}
59 
								/>
60 
							}
61 
						</th>
62 
					)}
10545 stevensc 63 
				</tr>
64 
			</thead>
65 
			<tbody>
15300 stevensc 66 
				{children}
10545 stevensc 67 
			</tbody>
68 
		</table >
69 
	)
10061 stevensc 70 
}
71 
 
72 
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
12395 stevensc 73 
 
10545 stevensc 74 
	return (
75 
		<ul className="pagination mb-0">
12711 stevensc 76 
			<li className={`paginate_button page-item previous ${currentPage === 1 ? 'disabled' : ''}`}>
10545 stevensc 77 
				<button
78 
					type='button'
79 
					className="page-link"
80 
					disabled={currentPage === 1}
81 
					onClick={onDecrement}
82 
				>
83 
					<i className='fa fa-angle-left' />
84 
				</button>
85 
			</li>
12475 stevensc 86 
			<li className="paginate_button page-item">
87 
				<button className="page-link">
88 
					{currentPage}
89 
				</button>
90 
			</li>
12711 stevensc 91 
			<li className={`paginate_button page-item next ${currentPage === totalPages ? 'disabled' : ''}`}>
10545 stevensc 92 
				<button
93 
					type='button'
94 
					className="page-link"
95 
					disabled={currentPage === totalPages}
96 
					onClick={onIncrement}
97 
				>
98 
					<i className='fa fa-angle-right' />
99 
				</button>
100 
			</li>
101 
		</ul>
102 
	)
10061 stevensc 103 
}
104 
 
105 
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
10545 stevensc 106 
	return (
107 
		<div className="row">
108 
			<div className="col-sm-12 col-md-5">
109 
				<div className="dataTables_info" >
110 
					{`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
111 
				</div>
112 
			</div>
113 
			<div className="col-sm-12 col-md-7">
114 
				<div className="d-flex justify-content-end">
115 
					{children}
116 
				</div>
117 
			</div>
118 
		</div>
119 
	)
10061 stevensc 120 
}
121 
 
122 
export function LengthFilter({ onChange }) {
123 
 
10545 stevensc 124 
	const lengthValues = ['10', '25', '50', '100']
10061 stevensc 125 
 
10545 stevensc 126 
	return (
127 
		<label className='d-inline-flex'>
11418 stevensc 128 
			Mostrar
10545 stevensc 129 
			<select
130 
				className="custom-select custom-select-sm form-control form-control-sm"
131 
				onChange={onChange}
132 
			>
133 
				{
134 
					lengthValues.map((value, index) => (
135 
						<option key={index} value={value}>{value}</option>
136 
					))
137 
				}
138 
			</select>
11418 stevensc 139 
			registros
10545 stevensc 140 
		</label>
141 
	)
10061 stevensc 142 
}
143 
 
144 
export function SearchInput({ onChange }) {
145 
 
10545 stevensc 146 
	return (
147 
		<label className='d-inline-flex align-items-center'>
148 
			<i className='fa fa-search mr-2' />
149 
			<input
150 
				type="search"
151 
				className="form-control form-control-sm" placeholder=""
152 
				onChange={onChange}
153 
			/>
154 
		</label>
155 
	)
10061 stevensc 156 
}