Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11425 | Rev 11442 | 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 (
11426 stevensc 59 
		<table className="table table-hover 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 }) => {
10545 stevensc 84 
	return (
85 
		<ul className="pagination mb-0">
86 
			<li className="paginate_button page-item previous">
87 
				<button
88 
					type='button'
89 
					className="page-link"
90 
					disabled={currentPage === 1}
91 
					onClick={onDecrement}
92 
				>
93 
					<i className='fa fa-angle-left' />
94 
				</button>
95 
			</li>
96 
			<li className="paginate_button page-item">
97 
				<button className="page-link">
98 
					{currentPage}
99 
				</button>
100 
			</li>
101 
			<li className="paginate_button page-item next">
102 
				<button
103 
					type='button'
104 
					className="page-link"
105 
					disabled={currentPage === totalPages}
106 
					onClick={onIncrement}
107 
				>
108 
					<i className='fa fa-angle-right' />
109 
				</button>
110 
			</li>
111 
		</ul>
112 
	)
10061 stevensc 113 
}
114 
 
115 
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
10545 stevensc 116 
	return (
117 
		<div className="row">
118 
			<div className="col-sm-12 col-md-5">
119 
				<div className="dataTables_info" >
120 
					{`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
121 
				</div>
122 
			</div>
123 
			<div className="col-sm-12 col-md-7">
124 
				<div className="d-flex justify-content-end">
125 
					{children}
126 
				</div>
127 
			</div>
128 
		</div>
129 
	)
10061 stevensc 130 
}
131 
 
132 
export function LengthFilter({ onChange }) {
133 
 
10545 stevensc 134 
	const lengthValues = ['10', '25', '50', '100']
10061 stevensc 135 
 
10545 stevensc 136 
	return (
137 
		<label className='d-inline-flex'>
11418 stevensc 138 
			Mostrar
10545 stevensc 139 
			<select
140 
				className="custom-select custom-select-sm form-control form-control-sm"
141 
				onChange={onChange}
142 
			>
143 
				{
144 
					lengthValues.map((value, index) => (
145 
						<option key={index} value={value}>{value}</option>
146 
					))
147 
				}
148 
			</select>
11418 stevensc 149 
			registros
10545 stevensc 150 
		</label>
151 
	)
10061 stevensc 152 
}
153 
 
154 
export function SearchInput({ onChange }) {
155 
 
10545 stevensc 156 
	return (
157 
		<label className='d-inline-flex align-items-center'>
158 
			<i className='fa fa-search mr-2' />
159 
			<input
160 
				type="search"
161 
				className="form-control form-control-sm" placeholder=""
162 
				onChange={onChange}
163 
			/>
164 
		</label>
165 
	)
10061 stevensc 166 
}