Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12326 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11546 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React, { useState, useEffect } from 'react'
3 
import { Card } from 'react-bootstrap'
4 
import { useDispatch } from 'react-redux'
5 
import axios from 'axios'
6 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import ContentTitle from '../../../shared/ContentTitle'
9 
import DeleteModal from '../../../shared/DeleteModal'
11659 stevensc 10 
import EditAndAddModal from '../components/EditAndAddModal'
11546 stevensc 11 
 
12 
const headers = [
13 
	{ key: 'title', label: 'Nombre', isSorteable: true },
14 
	{ key: 'description', label: 'Descripción', isSorteable: true },
15 
	{ key: 'progress', label: 'Progreso', isSorteable: true },
16 
	{ key: 'cost', label: 'Costo', isSorteable: true },
17 
	{ key: 'status', label: 'Estatus', isSorteable: true },
18 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
19 
]
20 
 
21 
const TableView = ({ add_link, table_link, goBack_link, permisions }) => {
22 
 
23 
	const dispatch = useDispatch()
24 
	const [modalToShow, setModalToShow] = useState('')
25 
	const [actionLink, setActionLink] = useState(add_link)
26 
	const [items, setItems] = useState([])
27 
	const [goals, setGoals] = useState({})
28 
	const [total, setTotal] = useState(0)
12375 stevensc 29 
	const [startItem, setStartItem] = useState(1)
30 
	const [lastItem, setLastItem] = useState(10)
11546 stevensc 31 
	const [search, setSearch] = useState('')
32 
	const [dataLength, setDataLength] = useState(10)
33 
	const [pages, setPages] = useState({
34 
		current: 1,
35 
		last: 1
36 
	})
37 
 
38 
	const getData = ({ url = '', params = {} }) => {
39 
 
40 
		axios.get(url, { params: { ...params } })
41 
			.then(({ data }) => {
42 
				if (!data.success) {
43 
					return dispatch(addNotification({
44 
						style: 'danger',
45 
						msg: 'Ha ocurrido un error'
46 
					}))
47 
				}
48 
 
49 
				setItems(data.data.items)
50 
				setGoals(data.data.goals)
51 
				setTotal(data.data.total)
52 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
53 
			})
54 
			.catch(() => dispatch(addNotification({
55 
				style: 'danger',
56 
				msg: 'Ha ocurrido un error'
57 
			})))
58 
	}
59 
 
60 
	useEffect(() => {
61 
		getData({
62 
			url: table_link,
63 
			params: {
64 
				search: search,
65 
				length: dataLength,
12375 stevensc 66 
				start: pages.current
11546 stevensc 67 
			}
68 
		})
69 
	}, [search, dataLength, pages.current])
70 
 
12375 stevensc 71 
	useEffect(() => {
72 
		if (pages.current > 1) {
73 
			setStartItem((dataLength * (pages.current - 1)) + 1)
74 
		} else {
75 
			setStartItem(1)
76 
		}
77 
	}, [pages.current])
78 
 
79 
	useEffect(() => {
80 
		if (items) {
81 
			if (startItem > 1) {
82 
				setLastItem(startItem + (items.length - 1))
83 
			} else {
84 
				setLastItem(items.length)
85 
			}
86 
		}
87 
	}, [items])
88 
 
11546 stevensc 89 
	return (
90 
		<ContentTitle title={`Tareas de la meta: ${goals.titleGoals || ''}`}>
91 
			<div className="col-sm-12 d-flex flex-column  p-2">
92 
				<div className="m-2">
93 
					<strong>Descripción:</strong>
94 
					<br />
95 
					<span className="xd">{goals.descriptionGoals}</span>
96 
				</div>
97 
				<div className="m-2 d-flex">
98 
					<div>
99 
						<strong>Estatus:</strong>
100 
						<br />
101 
						<span className="xd">{goals.statusGoals}</span>
102 
					</div>
103 
					<div className="ml-5">
104 
						<strong>Costo:</strong>
105 
						<br />
106 
						<span className="xd">{goals.costGoals}</span>
107 
					</div>
108 
					<div className="ml-5 ">
109 
						<strong>Progreso:</strong>
110 
						<br />
111 
						{
112 
							goals.indicatorGoals > 0
113 
								?
114 
								<div className="d-flex align-items-center">
11549 stevensc 115 
									<progress value={goals.indicatorGoals || 0} max='100' />
116 
									<span className="ml-2">{`${goals.indicatorGoals}%`}</span>
11546 stevensc 117 
								</div>
118 
								:
119 
								'Sin tareas'
120 
						}
121 
					</div>
122 
				</div>
123 
				<div className="col-sm-12 mt-3">
124 
					<a href={goBack_link} className="btn btn-primary">
125 
						<i className="fa fa-arrow-left mr-1" />
126 
						Ir atras
127 
					</a>
128 
				</div>
129 
			</div>
130 
			<section className="content">
131 
				<div className="container-fluid">
132 
					<div className="row">
133 
						<div className="col-12">
134 
							<Card>
135 
								<Card.Header>
136 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
137 
										{
138 
											permisions.allowAdd
139 
											&&
140 
											<label
141 
												className='d-flex align-items-center'
142 
												onClick={() => {
143 
													setActionLink(add_link)
144 
													setModalToShow('add')
145 
												}}
146 
												style={{ cursor: 'pointer' }}
147 
											>
148 
												<i className="fa fa-plus mr-2" />
149 
												Agregar
150 
											</label>
151 
										}
152 
										<label
153 
											className='d-flex align-items-center'
154 
											onClick={() => getData({
155 
												url: table_link,
156 
												params: {
157 
													search: search,
158 
													length: dataLength,
159 
													page: pages.current
160 
												}
161 
											})}
162 
											style={{ cursor: 'pointer' }}
163 
										>
164 
											<i className='fa fa-refresh mr-2' />
165 
											Actualizar
166 
										</label>
167 
									</div>
168 
									<div className="row justify-content-between align-items-center">
169 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
170 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
171 
									</div>
172 
								</Card.Header>
173 
								<Card.Body>
174 
									<div className="table-responsive">
175 
										<Table data={items} headers={headers} setData={setItems}>
176 
											{
177 
												items.length
178 
												&&
179 
												items.map((item, index) => (
180 
													<tr key={index}>
181 
														<td className='text-vertical-middle'>{item.title}</td>
182 
														<td className='text-vertical-middle'>{item.description}</td>
183 
														<td className='d-flex align-items-center'>
184 
															{
185 
																item.progress > 0
186 
																	?
187 
																	<>
188 
																		<progress value={item.progress} max='100' />
189 
																		<span className='ml-2'>{item.progress}</span>
190 
																	</>
191 
																	:
192 
																	'Sin progreso'
193 
															}
194 
														</td>
11555 stevensc 195 
														<td className='text-vertical-middle'>{`$${item.cost}`}</td>
11546 stevensc 196 
														<td className='text-vertical-middle'>
197 
															{
198 
																item.status === 'a'
199 
																	? 'Activo'
200 
																	: 'Inactivo'
201 
															}
202 
														</td>
203 
														<td>
204 
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
205 
																{
206 
																	permisions.allowEdit
207 
																	&&
208 
																	<i
209 
																		className='fa fa-pencil'
210 
																		onClick={() => {
211 
																			setActionLink(item.actions.link_edit)
212 
																			setModalToShow('edit')
213 
																		}}
214 
																		style={{ cursor: 'pointer' }}
215 
																	/>
216 
																}
217 
																{
218 
																	permisions.allowDelete
219 
																	&&
220 
																	<i
221 
																		className='fa fa-trash'
222 
																		onClick={() => {
223 
																			setActionLink(item.actions.link_delete)
224 
																			setModalToShow('delete')
225 
																		}}
226 
																		style={{ cursor: 'pointer' }}
227 
																	/>
228 
																}
229 
															</div>
230 
														</td>
231 
													</tr>
232 
												))
233 
											}
234 
										</Table>
235 
									</div>
236 
									<div className='row justify-content-between align-items-center'>
237 
										<p className='mb-0'>
12375 stevensc 238 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
11546 stevensc 239 
										</p>
240 
										<TablePagination
12326 stevensc 241 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
242 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11546 stevensc 243 
											totalPages={pages.last}
244 
											currentPage={pages.current}
245 
										/>
246 
									</div>
247 
								</Card.Body>
248 
							</Card>
249 
						</div>
250 
					</div >
251 
				</div >
252 
			</section >
11659 stevensc 253 
			<EditAndAddModal
254 
				action_link={actionLink}
255 
				type={modalToShow}
256 
				closeModal={() => setModalToShow('')}
257 
				onComplete={() => getData({
258 
					url: table_link,
259 
					params: {
260 
						search: search,
261 
						length: dataLength,
262 
						page: pages.current
263 
					}
264 
				})}
265 
			/>
11546 stevensc 266 
			<DeleteModal
267 
				url={actionLink}
268 
				isOpen={modalToShow === 'delete'}
269 
				closeModal={() => setModalToShow('')}
11683 stevensc 270 
				title="Esta seguro de borrar esta tarea?"
11546 stevensc 271 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
272 
				message="Registro borrado"
273 
			/>
274 
		</ContentTitle >
275 
	)
276 
}
277 
 
278 
export default TableView