Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8063 | Rev 8153 | 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 
 
7774 stevensc 39 
const Table = ({ data, headers, onDelete, allowEdit, allowDelete, onEdit, allowUsersWhoApplied }) => {
6680 stevensc 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>
6848 stevensc 99 
                                                    <ul style={{ listStyle: 'none' }}>
6795 stevensc 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 (
8152 stevensc 110 
                                                <td
111 
                                                    className='d-flex flex-column py-2 px-15'
112 
                                                    style={{ gap: '5px' }}>
6680 stevensc 113 
                                                    {
114 
                                                        (allowEdit === "1")
115 
                                                        &&
116 
                                                        <Link
117 
                                                            to="/jobs/edit"
118 
                                                            style={{ textDecoration: 'none' }}
6848 stevensc 119 
                                                            onClick={() => onEdit(element[1]['link_edit'])}
6680 stevensc 120 
                                                        >
121 
                                                            <button
8152 stevensc 122 
                                                                className="btn btn-sm btn-block btn-primary btn-edit"
6680 stevensc 123 
                                                            >
124 
                                                                <i className="fa fa-pencil" />
125 
                                                                Editar
126 
                                                            </button>
127 
                                                        </Link>
128 
                                                    }
129 
                                                    {
130 
                                                        (allowDelete === "1")
131 
                                                        &&
132 
                                                        <button
8152 stevensc 133 
                                                            className="btn btn-sm btn-danger btn-delete"
6680 stevensc 134 
                                                            onClick={() => onDelete(item)}
135 
                                                        >
136 
                                                            <i className="fa fa-trash" />
137 
                                                            Borrar
138 
                                                        </button>
139 
                                                    }
7774 stevensc 140 
                                                    {
141 
                                                        (allowUsersWhoApplied === "1")
142 
                                                        &&
8152 stevensc 143 
                                                        <button className="btn btn-sm btn-primary btn-users-who-applied">
7774 stevensc 144 
                                                            <i className="fa fa-users" />
8042 stevensc 145 
                                                            Quien aplicó
7774 stevensc 146 
                                                        </button>
147 
                                                    }
6680 stevensc 148 
                                                </td>
149 
                                            )
150 
                                        }
151 
 
152 
                                        return (
153 
                                            <td
154 
                                                className="text-vertical-middle sorting_1 dtr-control">
155 
                                                {element[1]}
156 
                                            </td>
157 
                                        )
158 
                                    }
159 
                                })
160 
                            }
161 
                        </tr>
162 
                    );
163 
                })}
164 
            </tbody>
165 
        </table >
166 
    );
167 
}
168 
 
169 
export default Table;