Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11379 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 { addNotification } from '../../../redux/notification/notification.actions'
7 
import ContentTitle from '../../../shared/ContentTitle'
8 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../../recruitment_and_selection/components/TableComponents'
9 
import DeleteModal from '../../../shared/DeleteModal'
11488 stevensc 10 
import EditAndAddModal from '../components/EditAndAddModal'
11379 stevensc 11 
 
12 
const headers = [
13 
	{ key: 'title', label: 'Nombre', isSorteable: true },
14 
	{ key: 'description', label: 'Descripción', isSorteable: true },
15 
	{ key: 'date', label: 'Fecha', isSorteable: true },
16 
	{ key: 'progress', label: 'Progreso', isSorteable: true },
17 
	{ key: 'cost', label: 'Costo', isSorteable: true },
18 
	{ key: 'status', label: 'Estatus', isSorteable: true },
19 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
20 
]
21 
 
11467 stevensc 22 
const ObjectivesAndGoals = ({ add_link, table_link, permisions }) => {
11379 stevensc 23 
 
24 
	const dispatch = useDispatch()
25 
	const [modalToShow, setModalToShow] = useState('')
26 
	const [actionLink, setActionLink] = useState(add_link)
27 
	const [items, setItems] = useState([])
28 
	const [module, setModule] = useState({})
29 
	const [total, setTotal] = useState(0)
30 
	const [search, setSearch] = useState('')
31 
	const [dataLength, setDataLength] = useState(10)
12379 stevensc 32 
	const [startItem, setStartItem] = useState(1)
33 
	const [lastItem, setLastItem] = useState(10)
11379 stevensc 34 
	const [pages, setPages] = useState({
35 
		current: 1,
36 
		last: 1
37 
	})
38 
 
39 
	const getData = ({ url = '', params = {} }) => {
40 
 
41 
		axios.get(url, { params: { ...params } })
42 
			.then(({ data }) => {
43 
				if (!data.success) {
44 
					return dispatch(addNotification({
45 
						style: 'danger',
46 
						msg: 'Ha ocurrido un error'
47 
					}))
48 
				}
49 
 
50 
				setItems(data.data.items)
51 
				setModule(data.data.module)
52 
				setTotal(data.data.total)
53 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
54 
			})
55 
			.catch(() => dispatch(addNotification({
56 
				style: 'danger',
57 
				msg: 'Ha ocurrido un error'
58 
			})))
59 
	}
60 
 
61 
	useEffect(() => {
62 
		getData({
63 
			url: table_link,
64 
			params: {
65 
				search: search,
66 
				length: dataLength,
12379 stevensc 67 
				start: pages.current
11379 stevensc 68 
			}
69 
		})
70 
	}, [search, dataLength, pages.current])
71 
 
12379 stevensc 72 
	useEffect(() => {
73 
		if (pages.current > 1) {
74 
			setStartItem((dataLength * (pages.current - 1)) + 1)
75 
		} else {
76 
			setStartItem(1)
77 
		}
78 
	}, [pages.current])
79 
 
80 
	useEffect(() => {
81 
		if (items) {
82 
			if (startItem > 1) {
83 
				setLastItem(startItem + (items.length - 1))
84 
			} else {
85 
				setLastItem(items.length)
86 
			}
87 
		}
88 
	}, [items])
89 
 
11379 stevensc 90 
	return (
91 
		<ContentTitle title='Planificación - Objetivos y Metas'>
11429 stevensc 92 
			<div className="col-sm-12 d-flex flex-column  p-2">
93 
				<div className="m-2 d-flex">
94 
					<div>
95 
						<strong>Costo:</strong> <br /><span className="xd">{module.costModule}</span>
96 
					</div>
97 
					<div className="ml-5 ">
98 
						<strong>Progreso:</strong>
99 
						<br />
100 
						<div className="d-flex align-items-center">
101 
							<progress value={module.indicatorModule} max='100' /><span className="ml-2">{`${module.indicatorModule}%`}</span>
102 
						</div>
103 
					</div>
11546 stevensc 104 
					{
105 
						permisions.allowObjectiveReportAll
106 
						&&
107 
						<div className="ml-5 d-flex align-items-center">
108 
							<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/reportall">
109 
								<i className="fa fa-file-pdf-o mr-1" />
110 
								Ver PDF
111 
							</a>
112 
						</div>
113 
					}
114 
					{
115 
						permisions.allowObjectiveReportMatriz
116 
						&&
117 
						<div className="ml-5 d-flex align-items-center">
118 
							<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/matriz">
119 
								<i className="fa fa-file-pdf-o mr-1" />
120 
								Ver PDF Matriz
121 
							</a>
122 
						</div>
123 
					}
11429 stevensc 124 
				</div>
125 
			</div>
11379 stevensc 126 
			<section className="content">
127 
				<div className="container-fluid">
128 
					<div className="row">
129 
						<div className="col-12">
130 
							<Card>
131 
								<Card.Header>
132 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
133 
										{
134 
											permisions.allowAdd
11486 stevensc 135 
											&&
136 
											<label
137 
												className='d-flex align-items-center'
138 
												onClick={() => {
139 
													setModalToShow('add')
140 
													setActionLink(add_link)
141 
												}}
142 
												style={{ cursor: 'pointer' }}
143 
											>
144 
												<i className="fa fa-plus mr-2" />
145 
												Agregar
146 
											</label>
11379 stevensc 147 
										}
148 
										<label
149 
											className='d-flex align-items-center'
150 
											onClick={() => getData({
151 
												url: table_link,
152 
												params: {
153 
													search: search,
154 
													length: dataLength,
155 
													page: pages.current
156 
												}
157 
											})}
158 
											style={{ cursor: 'pointer' }}
159 
										>
160 
											<i className='fa fa-refresh mr-2' />
11486 stevensc 161 
											Actualizar
11379 stevensc 162 
										</label>
163 
									</div>
164 
									<div className="row justify-content-between align-items-center">
165 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
166 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
167 
									</div>
168 
								</Card.Header>
169 
								<Card.Body>
170 
									<div className="table-responsive">
11396 stevensc 171 
										<Table data={items} headers={headers} setData={setItems}>
11398 stevensc 172 
											{
11400 stevensc 173 
												items.length
11486 stevensc 174 
												&&
175 
												items.map((item, index) => (
176 
													<tr key={index}>
177 
														<td className='text-vertical-middle'>{item.title}</td>
178 
														<td className='text-vertical-middle'>{item.description}</td>
179 
														<td className='text-vertical-middle'>{item.date}</td>
11488 stevensc 180 
														<td className='text-vertical-middle'>
181 
															<div className="d-flex align-items-center">
182 
																{
183 
																	item.progress > 0
184 
																		?
185 
																		<>
186 
																			<progress value={item.progress} max='100' />
187 
																			<span className='ml-2'>{item.progress}</span>
188 
																		</>
189 
																		:
190 
																		'Sin metas'
191 
																}
192 
															</div>
11486 stevensc 193 
														</td>
11555 stevensc 194 
														<td className='text-vertical-middle'>{`$${item.cost}`}</td>
11486 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.allowObjective
206 
																	&&
207 
																	<a href={item.actions.link_objective} 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 
																{
236 
																	permisions.allowObjectiveReport
237 
																	&&
238 
																	<a href={item.actions.link_objective_report} target='_blank' rel="noreferrer" style={{ color: '#333' }}>
239 
																		<i className='fa fa-file' />
240 
																	</a>
241 
																}
242 
															</div>
243 
														</td>
244 
													</tr>
245 
												))
11398 stevensc 246 
											}
11396 stevensc 247 
										</Table>
11379 stevensc 248 
									</div>
249 
									<div className='row justify-content-between align-items-center'>
250 
										<p className='mb-0'>
12379 stevensc 251 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
11379 stevensc 252 
										</p>
253 
										<TablePagination
12326 stevensc 254 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
255 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11379 stevensc 256 
											totalPages={pages.last}
257 
											currentPage={pages.current}
258 
										/>
259 
									</div>
260 
								</Card.Body>
261 
							</Card>
262 
						</div>
263 
					</div >
264 
				</div >
265 
			</section >
11436 stevensc 266 
			<EditAndAddModal
267 
				type={modalToShow}
11438 stevensc 268 
				closeModal={() => setModalToShow('')}
11436 stevensc 269 
				action_link={actionLink}
11486 stevensc 270 
				onComplete={() => getData({
271 
					url: table_link,
272 
					params: {
273 
						search: search,
274 
						length: dataLength,
275 
						page: pages.current
276 
					}
277 
				})}
11436 stevensc 278 
			/>
11379 stevensc 279 
			<DeleteModal
280 
				url={actionLink}
281 
				isOpen={modalToShow === 'delete'}
11438 stevensc 282 
				closeModal={() => setModalToShow('')}
11379 stevensc 283 
				title="Esta seguro de borrar este objetivo?"
284 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
285 
				message="Registro borrado"
286 
			/>
11429 stevensc 287 
		</ContentTitle >
11379 stevensc 288 
	)
289 
}
290 
 
291 
export default ObjectivesAndGoals