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) => {
                                        return (
                                                <tr key={item.id} >
                                                        <td className="text-vertical-middle sorting_1 dtr-control">
                                                                {item.last_date_of_application}
                                                        </td>
                                                        <td className="text-vertical-middle sorting_1 dtr-control">
                                                                {item.title}
                                                        </td>
                                                        <td>
                                                                <ul style={{ listStyle: 'none' }}>
                                                                        <li>{labels.STATUS}: {item?.details?.status}</li>
                                                                        <li>{labels.EMPLOYMENT_TYPE}: {item?.details?.employment_type}</li>
                                                                        <li>{labels.QTY_USERS_WHO_APPLIED}: {item?.details?.users_who_applied}</li>
                                                                </ul>
                                                        </td>
                                                        <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: item.actions.link_edit,
                                                                                        name: item.title
                                                                                })}
                                                                        >
                                                                                <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' && item.actions?.link_users_who_applied)
                                                                        &&
                                                                        <button
                                                                                className="btn btn-sm btn-primary btn-users-who-applied"
                                                                                onClick={() => handleUserWhoApplied(item.actions.link_users_who_applied)}
                                                                        >
                                                                                <i className="fa fa-users" />
                                                                                {labels.USERS_WHO_APPLIED}
                                                                        </button>
                                                                }
                                                        </td>
                                                </tr>
                                        )
                                })}
                        </tbody>
                </table >
        )
}

export default Table