Proyectos de Subversion LeadersLinked - Backend

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) => a[sortKey] - b[sortKey])
        }

        if (sortKey === 'name') {
                sortedData = tableData.sort((a, b) => 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,
        headers,
        onDelete,
        allowEdit,
        allowDelete,
        allowUsersWhoApplied,
        onEdit,
        handleUserWhoApplied,
        labels
}) => {

        const initialSortKey = Object.values(headers)[0]
        const [sortKey, setSortKey] = useState(initialSortKey)
        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] === 'details') {
                                                                        return (
                                                                                <td>
                                                                                        <ul style={{ listStyle: 'none' }}>
                                                                                                <li>{labels.STATUS}: {element[1]['status']}</li>
                                                                                                <li>{labels.EMPLOYMENT_TYPE}: {element[1]['employment_type']}</li>
                                                                                                <li>{labels.QTY_USERS_WHO_APPLIED}: {element[1]['users_who_applied']}</li>
                                                                                        </ul>
                                                                                </td>
                                                                        )
                                                                }

                                                                if (element[0] === 'actions') {
                                                                        return (
                                                                                <td
                                                                                        className='d-flex flex-column py-2 px-15'
                                                                                        style={{ gap: '5px' }}>
                                                                                        {allowEdit === '1' &&
                                                                                                <button
                                                                                                        className="btn btn-sm btn-block btn-primary btn-edit"
                                                                                                        onClick={() => onEdit({
                                                                                                                link: element[1]['link_edit'],
                                                                                                                name: element[0]
                                                                                                        })}
                                                                                                >
                                                                                                        <i className="fa fa-pencil" />
                                                                                                        {labels.EDIT}
                                                                                                </button>
                                                                                        }
                                                                                        {allowDelete === '1' &&
                                                                                                <button
                                                                                                        className="btn btn-sm btn-danger btn-delete"
                                                                                                        onClick={() => onDelete(item)}
                                                                                                >
                                                                                                        <i className="fa fa-trash" />
                                                                                                        {labels.DELETE}
                                                                                                </button>
                                                                                        }
                                                                                        {(allowUsersWhoApplied === '1' && element[1]['link_users_who_applied'])
                                                                                                &&
                                                                                                <button
                                                                                                        className="btn btn-sm btn-primary btn-users-who-applied"
                                                                                                        onClick={() => handleUserWhoApplied(element[1]['link_users_who_applied'])}
                                                                                                >
                                                                                                        <i className="fa fa-users" />
                                                                                                        {labels.USERS_WHO_APPLIED}
                                                                                                </button>
                                                                                        }
                                                                                </td>
                                                                        )
                                                                }

                                                                if (element[0] !== 'id') {
                                                                        return (
                                                                                <td className="text-vertical-middle sorting_1 dtr-control">
                                                                                        {element[1]}
                                                                                </td>
                                                                        )
                                                                }
                                                                
                                                        })}
                                                </tr>
                                        )
                                })}
                        </tbody>
                </table >
        )
}

export default Table