Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 6794 | Rev 6848 | Ir a la última revisión | | Comparar con el anterior | 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 
 
6794 stevensc 41 
    const initialSortKey = Object.values(headers)[0]
42 
    const [sortKey, setSortKey] = useState(initialSortKey);
6680 stevensc 43 
    const [sortOrder, setSortOrder] = useState("ascn");
44 
 
45 
    const sortedData = useCallback(
46 
        () => sortData({ tableData: data, sortKey, reverse: sortOrder === "desc" }),
47 
        [data, sortKey, sortOrder]
48 
    );
49 
 
50 
    const changeSort = (key) => {
51 
        setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
52 
 
53 
        setSortKey(key);
54 
    }
55 
 
56 
    return (
57 
        <table className="table table-hover dataTable no-footer dtr-inline">
58 
            <thead>
59 
                <tr>
60 
                    {headers.map((row) => {
61 
                        return (
62 
                            <th
63 
                                key={row.key}
64 
                                className="text-vertical-middle"
65 
                            >
66 
                                {row.label}
67 
                                {
68 
                                    row.isSorteable
69 
                                    &&
70 
                                    <SortButton
71 
                                        columnKey={row.key}
72 
                                        onClick={() => changeSort(row.key)}
73 
                                        {...{
74 
                                            sortOrder,
75 
                                            sortKey,
76 
                                        }}
77 
                                    />
78 
                                }
79 
                            </th>
80 
                        );
81 
                    })}
82 
                </tr>
83 
            </thead>
84 
 
85 
            <tbody>
86 
                {sortedData().map((item, index) => {
87 
                    const entries = Object.entries(item)
88 
 
89 
                    return (
90 
                        < tr key={item.id} >
91 
                            {
92 
                                entries.map((element) => {
93 
 
94 
                                    if (element[0] !== "id") {
95 
 
6794 stevensc 96 
                                        if (element[0] === "details") {
6680 stevensc 97 
                                            return (
6795 stevensc 98 
                                                <td>
99 
                                                    <ul style={{listStyle: 'none'}}>
100 
                                                        <li>Estatus: {element[1]["status"]}</li>
101 
                                                        <li>Tipo de empleo: {element[1]["employment_type"]}</li>
102 
                                                        <li>Aplicantes: {element[1]["users_who_applied"]}</li>
103 
                                                    </ul>
6680 stevensc 104 
                                                </td>
105 
                                            )
106 
                                        }
107 
 
108 
                                        if (element[0] === "actions") {
109 
                                            return (
110 
                                                <td style={{ display: 'flex', gap: '5px' }}>
111 
                                                    {
112 
                                                        (allowEdit === "1")
113 
                                                        &&
114 
                                                        <Link
115 
                                                            to="/jobs/edit"
116 
                                                            style={{ textDecoration: 'none' }}
117 
                                                        >
118 
                                                            <button
119 
                                                                className="btn btn-primary btn-edit"
120 
                                                            >
121 
                                                                <i className="fa fa-pencil" />
122 
                                                                Editar
123 
                                                            </button>
124 
                                                        </Link>
125 
                                                    }
126 
                                                    {
127 
                                                        (allowDelete === "1")
128 
                                                        &&
129 
                                                        <button
130 
                                                            className="btn btn-danger btn-delete"
131 
                                                            onClick={() => onDelete(item)}
132 
                                                        >
133 
                                                            <i className="fa fa-trash" />
134 
                                                            Borrar
135 
                                                        </button>
136 
                                                    }
137 
                                                </td>
138 
                                            )
139 
                                        }
140 
 
141 
                                        return (
142 
                                            <td
143 
                                                className="text-vertical-middle sorting_1 dtr-control">
144 
                                                {element[1]}
145 
                                            </td>
146 
                                        )
147 
                                    }
148 
                                })
149 
                            }
150 
                        </tr>
151 
                    );
152 
                })}
153 
            </tbody>
154 
        </table >
155 
    );
156 
}
157 
 
158 
export default Table;