Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
15499 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React, { useCallback, useState } from 'react'
3 
 
4 
const sortData = ({ tableData, sortKey, reverse }) => {
5 
	let sortedData
6 
 
7 
	if (!sortKey) return tableData
8 
 
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 
	}
18 
 
19 
	if (reverse) {
20 
		return sortedData.reverse()
21 
	}
22 
 
23 
	return sortedData
24 
}
25 
 
26 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
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 
	)
36 
}
37 
 
38 
const Table = ({ data, onEdit, headers, onDelete, allowEdit, allowDelete }) => {
39 
	const [sortKey, setSortKey] = useState('name')
40 
	const [sortOrder, setSortOrder] = useState('ascn')
41 
 
42 
	const sortedData = useCallback(() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }), [data, sortKey, sortOrder])
43 
 
44 
	const changeSort = (key) => {
45 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
46 
		setSortKey(key)
47 
	}
48 
 
49 
	return (
50 
		<table className="table table-hover dataTable no-footer dtr-inline w-100">
51 
			<thead>
52 
				<tr>
53 
					{headers.map((row) => {
54 
						return (
55 
							<th key={row.key} className="text-vertical-middle">
56 
								{row.label}
57 
								{row.isSorteable &&
58 
									<SortButton
59 
										columnKey={row.key}
60 
										onClick={() => changeSort(row.key)}
61 
										{...{ sortOrder, sortKey }}
62 
									/>
63 
								}
64 
							</th>
65 
						)
66 
					})}
67 
				</tr>
68 
			</thead>
69 
 
70 
			<tbody>
71 
				{sortedData().map((item) => {
72 
					const entries = Object.entries(item)
73 
 
74 
					return (
75 
						<tr key={item.id} >
76 
							{entries.map((element) => {
77 
								if (element[0] === 'id') return
78 
 
79 
								if (element[0] === 'status') {
80 
									return (
81 
										<td className="text-center">
15522 stevensc 82 
											<i className={`fa ${element[1] === 'a' ? 'fa-check' : 'fa-close'}`} style={{ color: element[1] === 'a' ? '#5cb85c' : 'red' }} />
15499 stevensc 83 
										</td>
84 
									)
85 
								}
86 
 
87 
								if (element[0] === 'actions') {
88 
									return (
15522 stevensc 89 
										<td>
90 
											<div className="d-inline-flex align-items-center" style={{gap: '.5rem'}}>
91 
												{Boolean(Number(allowEdit)) &&
15499 stevensc 92 
												<button
93 
													className="btn btn-primary btn-edit"
94 
													onClick={() => onEdit(item)}
95 
												>
96 
													<i className="fa fa-pencil" />
97 
													Editar
98 
												</button>
15522 stevensc 99 
												}
100 
												{Boolean(Number(allowDelete)) &&
15499 stevensc 101 
												<button
102 
													className="btn btn-danger btn-delete"
103 
													onClick={() => onDelete(item)}
104 
												>
105 
													<i className="fa fa-trash" />
106 
													Borrar
107 
												</button>
15522 stevensc 108 
												}
109 
											</div>
15499 stevensc 110 
										</td>
111 
									)
112 
								}
113 
 
114 
								return (
115 
									<td key={element[1]} className="text-vertical-middle sorting_1 dtr-control">
116 
										{element[1]}
117 
									</td>
118 
								)
15522 stevensc 119 
							})}
15499 stevensc 120 
						</tr>
121 
					)
122 
				})}
123 
			</tbody>
124 
		</table >
125 
	)
126 
}
127 
 
128 
export default Table