Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15290 | 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())
15289 stevensc 43 
	}, [sortKey, reverse])
10061 stevensc 44 
 
10545 stevensc 45 
	return (
11442 stevensc 46 
		<table className="table table-hover my-table w-100">
10545 stevensc 47 
			<thead>
48 
				<tr>
15289 stevensc 49 
					{headers.map((row) =>
50 
						<th key={row.key} className="text-vertical-middle">
51 
							{row.label}
52 
							{row.isSorteable &&
53 
								<SortButton
54 
									columnKey={row.key}
55 
									onClick={() => changeSort(row.key)}
56 
									sortKey={sortKey}
57 
									reverse={reverse}
58 
								/>
59 
							}
60 
						</th>
61 
					)}
10545 stevensc 62 
				</tr>
63 
			</thead>
64 
			<tbody>
65 
				{children}
66 
			</tbody>
67 
		</table >
68 
	)
10061 stevensc 69 
}
70 
 
71 
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
12395 stevensc 72 
 
10545 stevensc 73 
	return (
74 
		<ul className="pagination mb-0">
12711 stevensc 75 
			<li className={`paginate_button page-item previous ${currentPage === 1 ? 'disabled' : ''}`}>
10545 stevensc 76 
				<button
77 
					type='button'
78 
					className="page-link"
79 
					disabled={currentPage === 1}
80 
					onClick={onDecrement}
81 
				>
82 
					<i className='fa fa-angle-left' />
83 
				</button>
84 
			</li>
12475 stevensc 85 
			<li className="paginate_button page-item">
86 
				<button className="page-link">
87 
					{currentPage}
88 
				</button>
89 
			</li>
12711 stevensc 90 
			<li className={`paginate_button page-item next ${currentPage === totalPages ? 'disabled' : ''}`}>
10545 stevensc 91 
				<button
92 
					type='button'
93 
					className="page-link"
94 
					disabled={currentPage === totalPages}
95 
					onClick={onIncrement}
96 
				>
97 
					<i className='fa fa-angle-right' />
98 
				</button>
99 
			</li>
100 
		</ul>
101 
	)
10061 stevensc 102 
}
103 
 
104 
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
10545 stevensc 105 
	return (
106 
		<div className="row">
107 
			<div className="col-sm-12 col-md-5">
108 
				<div className="dataTables_info" >
109 
					{`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
110 
				</div>
111 
			</div>
112 
			<div className="col-sm-12 col-md-7">
113 
				<div className="d-flex justify-content-end">
114 
					{children}
115 
				</div>
116 
			</div>
117 
		</div>
118 
	)
10061 stevensc 119 
}
120 
 
121 
export function LengthFilter({ onChange }) {
122 
 
10545 stevensc 123 
	const lengthValues = ['10', '25', '50', '100']
10061 stevensc 124 
 
10545 stevensc 125 
	return (
126 
		<label className='d-inline-flex'>
11418 stevensc 127 
			Mostrar
10545 stevensc 128 
			<select
129 
				className="custom-select custom-select-sm form-control form-control-sm"
130 
				onChange={onChange}
131 
			>
132 
				{
133 
					lengthValues.map((value, index) => (
134 
						<option key={index} value={value}>{value}</option>
135 
					))
136 
				}
137 
			</select>
11418 stevensc 138 
			registros
10545 stevensc 139 
		</label>
140 
	)
10061 stevensc 141 
}
142 
 
143 
export function SearchInput({ onChange }) {
144 
 
10545 stevensc 145 
	return (
146 
		<label className='d-inline-flex align-items-center'>
147 
			<i className='fa fa-search mr-2' />
148 
			<input
149 
				type="search"
150 
				className="form-control form-control-sm" placeholder=""
151 
				onChange={onChange}
152 
			/>
153 
		</label>
154 
	)
10061 stevensc 155 
}