Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15052 | Rev 15243 | 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 
 
3 
const sortData = ({ tableData, sortKey, reverse }) => {
11265 stevensc 4 
	let sortedData
6680 stevensc 5 
 
11265 stevensc 6 
	if (!sortKey) return tableData
6680 stevensc 7 
 
11265 stevensc 8 
	if (sortKey !== 'name') {
15241 stevensc 9 
		sortedData = tableData.sort((a, b) => a[sortKey] - b[sortKey])
11265 stevensc 10 
	}
6680 stevensc 11 
 
15241 stevensc 12 
	if (sortKey === 'name') {
13 
		sortedData = tableData.sort((a, b) => a[sortKey] > b[sortKey] ? 1 : -1)
11265 stevensc 14 
	}
6680 stevensc 15 
 
15241 stevensc 16 
	if (reverse) return sortedData.reverse()
17 
 
11265 stevensc 18 
	return sortedData
6680 stevensc 19 
}
20 
 
21 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
11265 stevensc 22 
	return (
23 
		<button onClick={onClick} className="btn">
24 
			{
15241 stevensc 25 
				(sortKey === columnKey && sortOrder === 'desc')
11265 stevensc 26 
					? <i className='fa fa-angle-up' />
27 
					: <i className='fa fa-angle-down' />
28 
			}
29 
		</button>
30 
	)
6680 stevensc 31 
}
32 
 
15241 stevensc 33 
const Table = ({
34 
	data,
35 
	headers,
36 
	onDelete,
37 
	allowEdit,
38 
	allowDelete,
39 
	allowUsersWhoApplied,
40 
	onEdit,
41 
	handleUserWhoApplied,
42 
	labels
43 
}) => {
6680 stevensc 44 
 
11265 stevensc 45 
	const initialSortKey = Object.values(headers)[0]
46 
	const [sortKey, setSortKey] = useState(initialSortKey)
47 
	const [sortOrder, setSortOrder] = useState('ascn')
6680 stevensc 48 
 
11265 stevensc 49 
	const sortedData = useCallback(
50 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
51 
		[data, sortKey, sortOrder]
52 
	)
6680 stevensc 53 
 
11265 stevensc 54 
	const changeSort = (key) => {
55 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
56 
		setSortKey(key)
57 
	}
6680 stevensc 58 
 
11265 stevensc 59 
	return (
60 
		<table className="table table-hover dataTable no-footer dtr-inline w-100">
61 
			<thead>
62 
				<tr>
63 
					{headers.map((row) => {
64 
						return (
65 
							<th
66 
								key={row.key}
67 
								className="text-vertical-middle"
68 
							>
69 
								{row.label}
15241 stevensc 70 
								{row.isSorteable &&
11268 stevensc 71 
									<SortButton
72 
										columnKey={row.key}
73 
										onClick={() => changeSort(row.key)}
74 
										{...{
75 
											sortOrder,
76 
											sortKey,
77 
										}}
78 
									/>
11265 stevensc 79 
								}
80 
							</th>
81 
						)
82 
					})}
83 
				</tr>
84 
			</thead>
85 
			<tbody>
14879 stevensc 86 
				{sortedData().map((item) => {
11265 stevensc 87 
					const entries = Object.entries(item)
88 
					return (
15241 stevensc 89 
						<tr key={item.id} >
11265 stevensc 90 
							{
91 
								entries.map((element) => {
6680 stevensc 92 
 
11265 stevensc 93 
									if (element[0] !== 'id') {
6680 stevensc 94 
 
11265 stevensc 95 
										if (element[0] === 'details') {
96 
											return (
97 
												<td>
98 
													<ul style={{ listStyle: 'none' }}>
15052 stevensc 99 
														<li>{labels.STATUS}: {element[1]['status']}</li>
100 
														<li>{labels.EMPLOYMENT_TYPE}: {element[1]['employment_type']}</li>
101 
														<li>{labels.QTY_USERS_WHO_APPLIED}: {element[1]['users_who_applied']}</li>
11265 stevensc 102 
													</ul>
103 
												</td>
104 
											)
105 
										}
6680 stevensc 106 
 
11265 stevensc 107 
										if (element[0] === 'actions') {
108 
											return (
109 
												<td
110 
													className='d-flex flex-column py-2 px-15'
111 
													style={{ gap: '5px' }}>
112 
													{
113 
														(allowEdit === '1')
11268 stevensc 114 
														&&
15241 stevensc 115 
														<button
116 
															className="btn btn-sm btn-block btn-primary btn-edit"
11268 stevensc 117 
															onClick={() => onEdit(element[1]['link_edit'])}
118 
														>
15241 stevensc 119 
															<i className="fa fa-pencil" />
120 
															{labels.EDIT}
121 
														</button>
11265 stevensc 122 
													}
15241 stevensc 123 
													{(allowDelete === '1')
11268 stevensc 124 
														&&
125 
														<button
126 
															className="btn btn-sm btn-danger btn-delete"
127 
															onClick={() => onDelete(item)}
128 
														>
129 
															<i className="fa fa-trash" />
15052 stevensc 130 
															{labels.DELETE}
11268 stevensc 131 
														</button>
11265 stevensc 132 
													}
15241 stevensc 133 
													{(allowUsersWhoApplied === '1' && element[1]['link_users_who_applied'])
14879 stevensc 134 
														&&
135 
														<button
136 
															className="btn btn-sm btn-primary btn-users-who-applied"
137 
															onClick={() => handleUserWhoApplied(element[1]['link_users_who_applied'])}
138 
														>
139 
															<i className="fa fa-users" />
15052 stevensc 140 
															{labels.USERS_WHO_APPLIED}
14879 stevensc 141 
														</button>
142 
													}
11265 stevensc 143 
												</td>
144 
											)
145 
										}
6680 stevensc 146 
 
11265 stevensc 147 
										return (
15241 stevensc 148 
											<td className="text-vertical-middle sorting_1 dtr-control">
11265 stevensc 149 
												{element[1]}
150 
											</td>
151 
										)
152 
									}
153 
								})
154 
							}
155 
						</tr>
156 
					)
157 
				})}
158 
			</tbody>
159 
		</table >
160 
	)
6680 stevensc 161 
}
162 
 
11265 stevensc 163 
export default Table