Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11268 | Rev 15052 | 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'
11265 stevensc 2 
import { Link } from 'react-router-dom'
6680 stevensc 3 
 
4 
const sortData = ({ tableData, sortKey, reverse }) => {
11265 stevensc 5 
	let sortedData
6680 stevensc 6 
 
11265 stevensc 7 
	if (!sortKey) return tableData
6680 stevensc 8 
 
11265 stevensc 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 
	}
6680 stevensc 18 
 
19 
 
11265 stevensc 20 
	if (reverse) {
21 
		return sortedData.reverse()
22 
	}
6680 stevensc 23 
 
11265 stevensc 24 
	return sortedData
6680 stevensc 25 
}
26 
 
27 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
11265 stevensc 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 
	)
6680 stevensc 37 
}
38 
 
14879 stevensc 39 
const Table = ({ data, headers, onDelete, allowEdit, allowDelete, allowUsersWhoApplied, onEdit, handleUserWhoApplied }) => {
6680 stevensc 40 
 
11265 stevensc 41 
	const initialSortKey = Object.values(headers)[0]
42 
	const [sortKey, setSortKey] = useState(initialSortKey)
43 
	const [sortOrder, setSortOrder] = useState('ascn')
6680 stevensc 44 
 
11265 stevensc 45 
	const sortedData = useCallback(
46 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
47 
		[data, sortKey, sortOrder]
48 
	)
6680 stevensc 49 
 
11265 stevensc 50 
	const changeSort = (key) => {
51 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
6680 stevensc 52 
 
11265 stevensc 53 
		setSortKey(key)
54 
	}
6680 stevensc 55 
 
11265 stevensc 56 
	return (
57 
		<table className="table table-hover dataTable no-footer dtr-inline w-100">
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
11268 stevensc 69 
									&&
70 
									<SortButton
71 
										columnKey={row.key}
72 
										onClick={() => changeSort(row.key)}
73 
										{...{
74 
											sortOrder,
75 
											sortKey,
76 
										}}
77 
									/>
11265 stevensc 78 
								}
79 
							</th>
80 
						)
81 
					})}
82 
				</tr>
83 
			</thead>
6680 stevensc 84 
 
11265 stevensc 85 
			<tbody>
14879 stevensc 86 
				{sortedData().map((item) => {
11265 stevensc 87 
					const entries = Object.entries(item)
6680 stevensc 88 
 
11265 stevensc 89 
					return (
90 
						< tr key={item.id} >
91 
							{
92 
								entries.map((element) => {
6680 stevensc 93 
 
11265 stevensc 94 
									if (element[0] !== 'id') {
6680 stevensc 95 
 
11265 stevensc 96 
										if (element[0] === 'details') {
97 
											return (
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>
104 
												</td>
105 
											)
106 
										}
6680 stevensc 107 
 
11265 stevensc 108 
										if (element[0] === 'actions') {
109 
											return (
110 
												<td
111 
													className='d-flex flex-column py-2 px-15'
112 
													style={{ gap: '5px' }}>
113 
													{
114 
														(allowEdit === '1')
11268 stevensc 115 
														&&
116 
														<Link
117 
															to="/jobs/edit"
118 
															style={{ textDecoration: 'none' }}
119 
															onClick={() => onEdit(element[1]['link_edit'])}
120 
														>
121 
															<button
122 
																className="btn btn-sm btn-block btn-primary btn-edit"
123 
															>
124 
																<i className="fa fa-pencil" />
125 
																Editar
126 
															</button>
127 
														</Link>
11265 stevensc 128 
													}
129 
													{
130 
														(allowDelete === '1')
11268 stevensc 131 
														&&
132 
														<button
133 
															className="btn btn-sm btn-danger btn-delete"
134 
															onClick={() => onDelete(item)}
135 
														>
136 
															<i className="fa fa-trash" />
137 
															Borrar
138 
														</button>
11265 stevensc 139 
													}
14879 stevensc 140 
													{
141 
														(allowUsersWhoApplied === '1' && element[1]['link_users_who_applied'])
142 
														&&
143 
														<button
144 
															className="btn btn-sm btn-primary btn-users-who-applied"
145 
															onClick={() => handleUserWhoApplied(element[1]['link_users_who_applied'])}
146 
														>
147 
															<i className="fa fa-users" />
148 
															Quien aplicó
149 
														</button>
150 
													}
11265 stevensc 151 
												</td>
152 
											)
153 
										}
6680 stevensc 154 
 
11265 stevensc 155 
										return (
156 
											<td
157 
												className="text-vertical-middle sorting_1 dtr-control">
158 
												{element[1]}
159 
											</td>
160 
										)
161 
									}
162 
								})
163 
							}
164 
						</tr>
165 
					)
166 
				})}
167 
			</tbody>
168 
		</table >
169 
	)
6680 stevensc 170 
}
171 
 
11265 stevensc 172 
export default Table