Proyectos de Subversion LeadersLinked - Backend

Rev

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