Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15300 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15300 Rev 15304
Línea 4... Línea 4...
4 
const sortData = ({ tableData, sortKey, reverse }) => {
 4 
const sortData = ({ tableData, sortKey, reverse }) => {
5 
	let sortedData
 5 
	let sortedData
Línea 6... Línea 6...
6 
 
 6 
 
Línea -... Línea 7...
- 
 
 7 
	if (!sortKey) return tableData
- 
 
 8 
 
- 
 
 9 
	if (sortKey !== 'name') {
- 
 
 10 
		sortedData = tableData.sort((a, b) => {
- 
 
 11 
			return a[sortKey] - b[sortKey]
7 
	if (!sortKey) return tableData
 12 
		})
- 
 
 13 
	} else {
- 
 
 14 
		sortedData = tableData.sort((a, b) => {
- 
 
 15 
			return a[sortKey] > b[sortKey] ? 1 : -1
Línea 8... Línea 16...
8 
 
 16 
		})
9 
	sortedData = tableData.sort((a, b) => a[sortKey].toLowerCase() < b[sortKey].toLowerCase() && -1)
 17 
	}
10 
 
 18 
 
Línea 11... Línea 19...
11 
	if (reverse) {
 19 
	if (reverse) {
12 
		sortedData.reverse()
 20 
		return sortedData.reverse()
Línea 13... Línea 21...
13 
	}
 21 
	}
14 
 
 22 
 
15 
	return sortedData
 23 
	return sortedData
- 
 
 24 
}
16 
}
 25 
 
17 
 
 26 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
18 
const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
 27 
	return (
19 
	return (
 28 
		<button onClick={onClick} className="btn p-0">
20 
		<button onClick={onClick} className="btn p-0 ml-2">
 29 
			{
21 
			{(sortKey === columnKey) && reverse
 30 
				(sortKey === columnKey) && (sortOrder === 'desc')
22 
				? <i className='fa fa-angle-up' />
 31 
					? <i className='fa fa-angle-up' />
Línea 23... Línea 32...
23 
				: <i className='fa fa-angle-down' />
 32 
					: <i className='fa fa-angle-down' />
Línea 24... Línea 33...
24 
			}
 33 
			}
25 
		</button>
 34 
		</button>
Línea -... Línea 35...
- 
 
 35 
	)
26 
	)
 36 
}
- 
 
 37 
 
- 
 
 38 
export const Table = ({ data = [], headers, setData, children }) => {
Línea 27... Línea 39...
27 
}
 39 
 
28 
 
 40 
	const [sortKey, setSortKey] = useState('name')
- 
 
 41 
	const [sortOrder, setSortOrder] = useState('ascn')
29 
export const Table = ({ data = [], headers, setData, children }) => {
 42 
 
30 
 
 43 
	const sortedData = useCallback(
Línea 31... Línea 44...
31 
	const [sortKey, setSortKey] = useState('name')
 44 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
32 
	const [reverse, setReverse] = useState(false)
 45 
		[data, sortKey, sortOrder]
33 
 
 - 
 
34 
	const sortedData = useCallback(() => sortData({ tableData: data, sortKey: sortKey, reverse: reverse }), [data, sortKey, reverse])
 46 
	)
Línea 35... Línea 47...
35 
 
 47 
 
36 
	const changeSort = (key) => {
 48 
	const changeSort = (key) => {
37 
		setReverse(!reverse)
 49 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
38 
		setSortKey(key)
 50 
 
- 
 
 51 
		setSortKey(key)
39 
	}
 52 
	}
40 
 
 53 
 
41 
	useEffect(() => {
 54 
	useEffect(() => {
42 
		setData(sortedData())
 55 
		setData(sortedData())
43 
		setReverse(reverse)
 56 
	}, [sortKey, sortOrder])
44 
	}, [sortKey, reverse])
 57 
 
45 
 
 58 
	return (
46 
	return (
 - 
 
47 
		<table className="table table-hover my-table w-100">
 - 
 
48 
			<thead>
 59 
		<table className="table table-hover my-table w-100">
49 
				<tr>
 60 
			<thead>
50 
					{headers.map((row) =>
 61 
				<tr>
51 
						<th key={row.key} className="text-vertical-middle">
 62 
					{
52 
							{row.label}
 63 
						headers.map((row) => (
53 
							{row.isSorteable &&
 64 
							<th key={row.key} className="text-vertical-middle">
54 
								<SortButton
 65 
								{row.label}
55 
									columnKey={row.key}
 66 
								{
56 
									onClick={() => changeSort(row.key)}
 67 
									row.isSorteable