Proyectos de Subversion LeadersLinked - Backend

/* 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