Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11467 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'
11483 stevensc 10 
import EditAndAddModal from '../components/EditAndAddModal'
11467 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 
 
11471 stevensc 21 
const TableView = ({ add_link, table_link, permisions }) => {
11467 stevensc 22 
 
23 
	const dispatch = useDispatch()
24 
	const [modalToShow, setModalToShow] = useState('')
25 
	const [actionLink, setActionLink] = useState(add_link)
26 
	const [items, setItems] = useState([])
27 
	const [objetive, setObjetive] = useState({})
28 
	const [total, setTotal] = useState(0)
29 
	const [search, setSearch] = useState('')
12377 stevensc 30 
	const [startItem, setStartItem] = useState(1)
31 
	const [lastItem, setLastItem] = useState(10)
11467 stevensc 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)
11474 stevensc 50 
				setObjetive(data.data.objective)
11467 stevensc 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,
12377 stevensc 66 
				start: pages.current
11467 stevensc 67 
			}
68 
		})
69 
	}, [search, dataLength, pages.current])
70 
 
12377 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 
 
11467 stevensc 89 
	return (
11482 stevensc 90 
		<ContentTitle title={`Metas del objetivo: ${objetive.titleObjective || 0}`}>
11477 stevensc 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">{objetive.descriptionObjective}</span>
96 
				</div>
11478 stevensc 97 
				<div className="m-2 d-flex">
98 
					<div>
99 
						<strong>Estatus:</strong>
100 
						<br />
101 
						<span className="xd">{objetive.statusObjective}</span>
102 
					</div>
103 
					<div className="ml-5">
104 
						<strong>Fecha:</strong>
105 
						<br />
106 
						<span className="xd">{objetive.dateObjective}</span>
107 
					</div>
108 
					<div className="ml-5">
109 
						<strong>Costo:</strong>
110 
						<br />
111 
						<span className="xd">{objetive.costObjective}</span>
112 
					</div>
11481 stevensc 113 
					<div className="ml-5 ">
114 
						<strong>Progreso:</strong>
115 
						<br />
116 
						<div className="d-flex align-items-center">
117 
							<progress value={objetive.indicatorObjective || 0} max='100' />
118 
							<span className="ml-2">{`${objetive.indicatorObjective}%`}</span>
119 
						</div>
120 
					</div>
11478 stevensc 121 
				</div>
11477 stevensc 122 
				<div className="col-sm-12 mt-3">
123 
					<a href="/planning-objectives-and-goals/objectives" className="btn btn-primary">
124 
						<i className="fa fa-arrow-left mr-1" />
11484 stevensc 125 
						Ir atras
11477 stevensc 126 
					</a>
127 
				</div>
128 
			</div>
11472 stevensc 129 
			<section className="content">
130 
				<div className="container-fluid">
131 
					<div className="row">
132 
						<div className="col-12">
133 
							<Card>
134 
								<Card.Header>
135 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
136 
										{
137 
											permisions.allowAdd
11484 stevensc 138 
											&&
139 
											<label
140 
												className='d-flex align-items-center'
141 
												onClick={() => {
142 
													setActionLink(add_link)
143 
													setModalToShow('add')
144 
												}}
145 
												style={{ cursor: 'pointer' }}
146 
											>
147 
												<i className="fa fa-plus mr-2" />
148 
												Agregar
149 
											</label>
11472 stevensc 150 
										}
151 
										<label
152 
											className='d-flex align-items-center'
153 
											onClick={() => getData({
154 
												url: table_link,
155 
												params: {
156 
													search: search,
157 
													length: dataLength,
158 
													page: pages.current
159 
												}
160 
											})}
161 
											style={{ cursor: 'pointer' }}
162 
										>
163 
											<i className='fa fa-refresh mr-2' />
11484 stevensc 164 
											Actualizar
11472 stevensc 165 
										</label>
166 
									</div>
167 
									<div className="row justify-content-between align-items-center">
168 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
169 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
170 
									</div>
171 
								</Card.Header>
172 
								<Card.Body>
173 
									<div className="table-responsive">
174 
										<Table data={items} headers={headers} setData={setItems}>
175 
											{
176 
												items.length
11484 stevensc 177 
												&&
178 
												items.map((item, index) => (
179 
													<tr key={index}>
180 
														<td className='text-vertical-middle'>{item.title}</td>
181 
														<td className='text-vertical-middle'>{item.description}</td>
182 
														<td className='d-flex align-items-center'>
183 
															{
184 
																item.progress > 0
185 
																	?
186 
																	<>
187 
																		<progress value={item.progress} max='100' />
188 
																		<span className='ml-2'>{item.progress}</span>
189 
																	</>
190 
																	:
11546 stevensc 191 
																	'Sin tareas'
11484 stevensc 192 
															}
193 
														</td>
11555 stevensc 194 
														<td className='text-vertical-middle'>{`$${item.cost}`}</td>
11484 stevensc 195 
														<td className='text-vertical-middle'>
196 
															{
197 
																item.status === 'a'
198 
																	? 'Activo'
199 
																	: 'Inactivo'
200 
															}
201 
														</td>
202 
														<td>
203 
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
204 
																{
205 
																	permisions.allowGoals
206 
																	&&
207 
																	<a href={item.actions.link_goals} style={{ color: '#333' }}>
208 
																		<i className='fa fa-level-down' />
209 
																	</a>
210 
																}
211 
																{
212 
																	permisions.allowEdit
213 
																	&&
214 
																	<i
215 
																		className='fa fa-pencil'
216 
																		onClick={() => {
217 
																			setActionLink(item.actions.link_edit)
218 
																			setModalToShow('edit')
219 
																		}}
220 
																		style={{ cursor: 'pointer' }}
221 
																	/>
222 
																}
223 
																{
224 
																	permisions.allowDelete
225 
																	&&
226 
																	<i
227 
																		className='fa fa-trash'
228 
																		onClick={() => {
229 
																			setActionLink(item.actions.link_delete)
230 
																			setModalToShow('delete')
231 
																		}}
232 
																		style={{ cursor: 'pointer' }}
233 
																	/>
234 
																}
235 
															</div>
236 
														</td>
237 
													</tr>
238 
												))
11472 stevensc 239 
											}
240 
										</Table>
241 
									</div>
242 
									<div className='row justify-content-between align-items-center'>
243 
										<p className='mb-0'>
12377 stevensc 244 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
11472 stevensc 245 
										</p>
246 
										<TablePagination
12326 stevensc 247 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
248 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11472 stevensc 249 
											totalPages={pages.last}
250 
											currentPage={pages.current}
251 
										/>
252 
									</div>
253 
								</Card.Body>
254 
							</Card>
255 
						</div>
256 
					</div >
257 
				</div >
258 
			</section >
11483 stevensc 259 
			<EditAndAddModal
260 
				action_link={actionLink}
261 
				type={modalToShow}
262 
				closeModal={() => setModalToShow('')}
11485 stevensc 263 
				onComplete={() => getData({
11484 stevensc 264 
					url: table_link,
265 
					params: {
266 
						search: search,
267 
						length: dataLength,
268 
						page: pages.current
269 
					}
270 
				})}
11483 stevensc 271 
			/>
11472 stevensc 272 
			<DeleteModal
273 
				url={actionLink}
274 
				isOpen={modalToShow === 'delete'}
275 
				closeModal={() => setModalToShow('')}
11486 stevensc 276 
				title="Esta seguro de borrar esta meta?"
11472 stevensc 277 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
278 
				message="Registro borrado"
279 
			/>
11467 stevensc 280 
		</ContentTitle >
281 
	)
282 
}
283 
 
284 
export default TableView