Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11265 | | Comparar con el anterior | Ultima modificación | Ver Log |

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