Proyectos de Subversion LeadersLinked - Backend

Rev

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