Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 6794 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6680 stevensc 1 
import React, { useCallback, useState } from 'react'
2 
import { Link } from 'react-router-dom';
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 
 
20 
    if (reverse) {
21 
        return sortedData.reverse();
22 
    }
23 
 
24 
    return sortedData;
25 
}
26 
 
27 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
28 
    return (
29 
        <button onClick={onClick} className="btn">
30 
            {
31 
                (sortKey === columnKey) && (sortOrder === "desc")
32 
                    ? <i className='fa fa-angle-up' />
33 
                    : <i className='fa fa-angle-down' />
34 
            }
35 
        </button>
36 
    );
37 
}
38 
 
39 
const Table = ({ data, headers, onDelete, allowEdit, allowDelete }) => {
40 
 
41 
    const [sortKey, setSortKey] = useState("name");
42 
    const [sortOrder, setSortOrder] = useState("ascn");
43 
 
44 
    const sortedData = useCallback(
45 
        () => sortData({ tableData: data, sortKey, reverse: sortOrder === "desc" }),
46 
        [data, sortKey, sortOrder]
47 
    );
48 
 
49 
    const changeSort = (key) => {
50 
        setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
51 
 
52 
        setSortKey(key);
53 
    }
54 
 
55 
    return (
56 
        <table className="table table-hover dataTable no-footer dtr-inline">
57 
            <thead>
58 
                <tr>
59 
                    {headers.map((row) => {
60 
                        return (
61 
                            <th
62 
                                key={row.key}
63 
                                className="text-vertical-middle"
64 
                            >
65 
                                {row.label}
66 
                                {
67 
                                    row.isSorteable
68 
                                    &&
69 
                                    <SortButton
70 
                                        columnKey={row.key}
71 
                                        onClick={() => changeSort(row.key)}
72 
                                        {...{
73 
                                            sortOrder,
74 
                                            sortKey,
75 
                                        }}
76 
                                    />
77 
                                }
78 
                            </th>
79 
                        );
80 
                    })}
81 
                </tr>
82 
            </thead>
83 
 
84 
            <tbody>
85 
                {sortedData().map((item, index) => {
86 
                    const entries = Object.entries(item)
87 
 
88 
                    return (
89 
                        < tr key={item.id} >
90 
                            {
91 
                                entries.map((element) => {
92 
 
93 
                                    if (element[0] !== "id") {
94 
 
95 
                                        if (element[0] === "status") {
96 
                                            return (
97 
                                                <td className="text-center">
98 
                                                    {
99 
                                                        element[1] === 'a'
100 
                                                            ? <i className='fa fa-check' style={{ color: '#5cb85c' }} />
101 
                                                            : <i className='fa fa-close' style={{ color: 'red' }} />
102 
                                                    }
103 
                                                </td>
104 
                                            )
105 
                                        }
106 
 
107 
                                        if (element[0] === "actions") {
108 
                                            return (
109 
                                                <td style={{ display: 'flex', gap: '5px' }}>
110 
                                                    {
111 
                                                        (allowEdit === "1")
112 
                                                        &&
113 
                                                        <Link
114 
                                                            to="/jobs/edit"
115 
                                                            style={{ textDecoration: 'none' }}
116 
                                                        >
117 
                                                            <button
118 
                                                                className="btn btn-primary btn-edit"
119 
                                                            >
120 
                                                                <i className="fa fa-pencil" />
121 
                                                                Editar
122 
                                                            </button>
123 
                                                        </Link>
124 
                                                    }
125 
                                                    {
126 
                                                        (allowDelete === "1")
127 
                                                        &&
128 
                                                        <button
129 
                                                            className="btn btn-danger btn-delete"
130 
                                                            onClick={() => onDelete(item)}
131 
                                                        >
132 
                                                            <i className="fa fa-trash" />
133 
                                                            Borrar
134 
                                                        </button>
135 
                                                    }
136 
                                                </td>
137 
                                            )
138 
                                        }
139 
 
140 
                                        return (
141 
                                            <td
142 
                                                className="text-vertical-middle sorting_1 dtr-control">
143 
                                                {element[1]}
144 
                                            </td>
145 
                                        )
146 
                                    }
147 
                                })
148 
                            }
149 
                        </tr>
150 
                    );
151 
                })}
152 
            </tbody>
153 
        </table >
154 
    );
155 
}
156 
 
157 
export default Table;