Proyectos de Subversion LeadersLinked - Backend

Rev

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