Proyectos de Subversion LeadersLinked - Backend

Rev

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