Rev 15499 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable no-mixed-spaces-and-tabs */
import React, { useCallback, useState } from 'react'
const sortData = ({ tableData, sortKey, reverse }) => {
let sortedData
if (!sortKey) return tableData
if (sortKey !== 'name') {
sortedData = tableData.sort((a, b) => {
return a[sortKey] - b[sortKey]
})
} else {
sortedData = tableData.sort((a, b) => {
return a[sortKey] > b[sortKey] ? 1 : -1
})
}
if (reverse) {
return sortedData.reverse()
}
return sortedData
}
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
return (
<button onClick={onClick} className="btn">
{
(sortKey === columnKey) && (sortOrder === 'desc')
? <i className='fa fa-angle-up' />
: <i className='fa fa-angle-down' />
}
</button>
)
}
const Table = ({ data, onEdit, headers, onDelete, allowEdit, allowDelete }) => {
const [sortKey, setSortKey] = useState('name')
const [sortOrder, setSortOrder] = useState('ascn')
const sortedData = useCallback(() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }), [data, sortKey, sortOrder])
const changeSort = (key) => {
setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
setSortKey(key)
}
return (
<table className="table table-hover dataTable no-footer dtr-inline w-100">
<thead>
<tr>
{headers.map((row) => {
return (
<th key={row.key} className="text-vertical-middle">
{row.label}
{row.isSorteable &&
<SortButton
columnKey={row.key}
onClick={() => changeSort(row.key)}
{...{ sortOrder, sortKey }}
/>
}
</th>
)
})}
</tr>
</thead>
<tbody>
{sortedData().map((item) => {
const entries = Object.entries(item)
return (
<tr key={item.id} >
{entries.map((element) => {
if (element[0] === 'id') return
if (element[0] === 'status') {
return (
<td className="text-center">
<i className={`fa ${element[1] === 'a' ? 'fa-check' : 'fa-close'}`} style={{ color: element[1] === 'a' ? '#5cb85c' : 'red' }} />
</td>
)
}
if (element[0] === 'actions') {
return (
<td>
<div className="d-inline-flex align-items-center" style={{gap: '.5rem'}}>
{Boolean(Number(allowEdit)) &&
<button
className="btn btn-primary btn-edit"
onClick={() => onEdit(item)}
>
<i className="fa fa-pencil" />
Editar
</button>
}
{Boolean(Number(allowDelete)) &&
<button
className="btn btn-danger btn-delete"
onClick={() => onDelete(item)}
>
<i className="fa fa-trash" />
Borrar
</button>
}
</div>
</td>
)
}
return (
<td key={element[1]} className="text-vertical-middle sorting_1 dtr-control">
{element[1]}
</td>
)
})}
</tr>
)
})}
</tbody>
</table >
)
}
export default Table