Proyectos de Subversion LeadersLinked - Backend

Rev

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