Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15243 | | 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 
					return (
15241 stevensc 88 
						<tr key={item.id} >
15244 stevensc 89 
							<td className="text-vertical-middle sorting_1 dtr-control">
90 
								{item.last_date_of_application}
91 
							</td>
92 
							<td className="text-vertical-middle sorting_1 dtr-control">
93 
								{item.title}
94 
							</td>
95 
							<td>
96 
								<ul style={{ listStyle: 'none' }}>
97 
									<li>{labels.STATUS}: {item?.details?.status}</li>
98 
									<li>{labels.EMPLOYMENT_TYPE}: {item?.details?.employment_type}</li>
99 
									<li>{labels.QTY_USERS_WHO_APPLIED}: {item?.details?.users_who_applied}</li>
100 
								</ul>
101 
							</td>
102 
							<td
103 
								className='d-flex flex-column py-2 px-15'
104 
								style={{ gap: '5px' }}>
105 
								{allowEdit === '1' &&
106 
									<button
107 
										className="btn btn-sm btn-block btn-primary btn-edit"
108 
										onClick={() => onEdit({
109 
											link: item.actions.link_edit,
110 
											name: item.title
111 
										})}
112 
									>
113 
										<i className="fa fa-pencil" />
114 
										{labels.EDIT}
115 
									</button>
15243 stevensc 116 
								}
15244 stevensc 117 
								{allowDelete === '1' &&
118 
									<button
119 
										className="btn btn-sm btn-danger btn-delete"
120 
										onClick={() => onDelete(item)}
121 
									>
122 
										<i className="fa fa-trash" />
123 
										{labels.DELETE}
124 
									</button>
15243 stevensc 125 
								}
15244 stevensc 126 
								{(allowUsersWhoApplied === '1' && item.actions?.link_users_who_applied)
127 
									&&
128 
									<button
129 
										className="btn btn-sm btn-primary btn-users-who-applied"
130 
										onClick={() => handleUserWhoApplied(item.actions.link_users_who_applied)}
131 
									>
132 
										<i className="fa fa-users" />
133 
										{labels.USERS_WHO_APPLIED}
134 
									</button>
15243 stevensc 135 
								}
15244 stevensc 136 
							</td>
11265 stevensc 137 
						</tr>
138 
					)
139 
				})}
140 
			</tbody>
141 
		</table >
142 
	)
6680 stevensc 143 
}
144 
 
11265 stevensc 145 
export default Table