Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11555 | Ir a la última revisión | | 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)
32 
	const [pages, setPages] = useState({
33 
		current: 1,
34 
		last: 1
35 
	})
36 
 
37 
	const getData = ({ url = '', params = {} }) => {
38 
 
39 
		axios.get(url, { params: { ...params } })
40 
			.then(({ data }) => {
41 
				if (!data.success) {
42 
					return dispatch(addNotification({
43 
						style: 'danger',
44 
						msg: 'Ha ocurrido un error'
45 
					}))
46 
				}
47 
 
48 
				setItems(data.data.items)
49 
				setModule(data.data.module)
50 
				setTotal(data.data.total)
51 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
52 
			})
53 
			.catch(() => dispatch(addNotification({
54 
				style: 'danger',
55 
				msg: 'Ha ocurrido un error'
56 
			})))
57 
	}
58 
 
59 
	useEffect(() => {
60 
		getData({
61 
			url: table_link,
62 
			params: {
63 
				search: search,
64 
				length: dataLength,
65 
				page: pages.current
66 
			}
67 
		})
68 
	}, [search, dataLength, pages.current])
69 
 
70 
	return (
71 
		<ContentTitle title='Planificación - Objetivos y Metas'>
11429 stevensc 72 
			<div className="col-sm-12 d-flex flex-column  p-2">
73 
				<div className="m-2 d-flex">
74 
					<div>
75 
						<strong>Costo:</strong> <br /><span className="xd">{module.costModule}</span>
76 
					</div>
77 
					<div className="ml-5 ">
78 
						<strong>Progreso:</strong>
79 
						<br />
80 
						<div className="d-flex align-items-center">
81 
							<progress value={module.indicatorModule} max='100' /><span className="ml-2">{`${module.indicatorModule}%`}</span>
82 
						</div>
83 
					</div>
11546 stevensc 84 
					{
85 
						permisions.allowObjectiveReportAll
86 
						&&
87 
						<div className="ml-5 d-flex align-items-center">
88 
							<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/reportall">
89 
								<i className="fa fa-file-pdf-o mr-1" />
90 
								Ver PDF
91 
							</a>
92 
						</div>
93 
					}
94 
					{
95 
						permisions.allowObjectiveReportMatriz
96 
						&&
97 
						<div className="ml-5 d-flex align-items-center">
98 
							<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/matriz">
99 
								<i className="fa fa-file-pdf-o mr-1" />
100 
								Ver PDF Matriz
101 
							</a>
102 
						</div>
103 
					}
11429 stevensc 104 
				</div>
105 
			</div>
11379 stevensc 106 
			<section className="content">
107 
				<div className="container-fluid">
108 
					<div className="row">
109 
						<div className="col-12">
110 
							<Card>
111 
								<Card.Header>
112 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
113 
										{
114 
											permisions.allowAdd
11486 stevensc 115 
											&&
116 
											<label
117 
												className='d-flex align-items-center'
118 
												onClick={() => {
119 
													setModalToShow('add')
120 
													setActionLink(add_link)
121 
												}}
122 
												style={{ cursor: 'pointer' }}
123 
											>
124 
												<i className="fa fa-plus mr-2" />
125 
												Agregar
126 
											</label>
11379 stevensc 127 
										}
128 
										<label
129 
											className='d-flex align-items-center'
130 
											onClick={() => getData({
131 
												url: table_link,
132 
												params: {
133 
													search: search,
134 
													length: dataLength,
135 
													page: pages.current
136 
												}
137 
											})}
138 
											style={{ cursor: 'pointer' }}
139 
										>
140 
											<i className='fa fa-refresh mr-2' />
11486 stevensc 141 
											Actualizar
11379 stevensc 142 
										</label>
143 
									</div>
144 
									<div className="row justify-content-between align-items-center">
145 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
146 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
147 
									</div>
148 
								</Card.Header>
149 
								<Card.Body>
150 
									<div className="table-responsive">
11396 stevensc 151 
										<Table data={items} headers={headers} setData={setItems}>
11398 stevensc 152 
											{
11400 stevensc 153 
												items.length
11486 stevensc 154 
												&&
155 
												items.map((item, index) => (
156 
													<tr key={index}>
157 
														<td className='text-vertical-middle'>{item.title}</td>
158 
														<td className='text-vertical-middle'>{item.description}</td>
159 
														<td className='text-vertical-middle'>{item.date}</td>
11488 stevensc 160 
														<td className='text-vertical-middle'>
161 
															<div className="d-flex align-items-center">
162 
																{
163 
																	item.progress > 0
164 
																		?
165 
																		<>
166 
																			<progress value={item.progress} max='100' />
167 
																			<span className='ml-2'>{item.progress}</span>
168 
																		</>
169 
																		:
170 
																		'Sin metas'
171 
																}
172 
															</div>
11486 stevensc 173 
														</td>
11555 stevensc 174 
														<td className='text-vertical-middle'>{`$${item.cost}`}</td>
11486 stevensc 175 
														<td className='text-vertical-middle'>
176 
															{
177 
																item.status === 'a'
178 
																	? 'Activo'
179 
																	: 'Inactivo'
180 
															}
181 
														</td>
182 
														<td>
183 
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
184 
																{
185 
																	permisions.allowObjective
186 
																	&&
187 
																	<a href={item.actions.link_objective} style={{ color: '#333' }}>
188 
																		<i className='fa fa-level-down' />
189 
																	</a>
190 
																}
191 
																{
192 
																	permisions.allowEdit
193 
																	&&
194 
																	<i
195 
																		className='fa fa-pencil'
196 
																		onClick={() => {
197 
																			setActionLink(item.actions.link_edit)
198 
																			setModalToShow('edit')
199 
																		}}
200 
																		style={{ cursor: 'pointer' }}
201 
																	/>
202 
																}
203 
																{
204 
																	permisions.allowDelete
205 
																	&&
206 
																	<i
207 
																		className='fa fa-trash'
208 
																		onClick={() => {
209 
																			setActionLink(item.actions.link_delete)
210 
																			setModalToShow('delete')
211 
																		}}
212 
																		style={{ cursor: 'pointer' }}
213 
																	/>
214 
																}
215 
																{
216 
																	permisions.allowObjectiveReport
217 
																	&&
218 
																	<a href={item.actions.link_objective_report} target='_blank' rel="noreferrer" style={{ color: '#333' }}>
219 
																		<i className='fa fa-file' />
220 
																	</a>
221 
																}
222 
															</div>
223 
														</td>
224 
													</tr>
225 
												))
11398 stevensc 226 
											}
11396 stevensc 227 
										</Table>
11379 stevensc 228 
									</div>
229 
									<div className='row justify-content-between align-items-center'>
230 
										<p className='mb-0'>
231 
											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - total) || 0} de un total de ${total || 0} registros`}
232 
										</p>
233 
										<TablePagination
12326 stevensc 234 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
235 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
11379 stevensc 236 
											totalPages={pages.last}
237 
											currentPage={pages.current}
238 
										/>
239 
									</div>
240 
								</Card.Body>
241 
							</Card>
242 
						</div>
243 
					</div >
244 
				</div >
245 
			</section >
11436 stevensc 246 
			<EditAndAddModal
247 
				type={modalToShow}
11438 stevensc 248 
				closeModal={() => setModalToShow('')}
11436 stevensc 249 
				action_link={actionLink}
11486 stevensc 250 
				onComplete={() => getData({
251 
					url: table_link,
252 
					params: {
253 
						search: search,
254 
						length: dataLength,
255 
						page: pages.current
256 
					}
257 
				})}
11436 stevensc 258 
			/>
11379 stevensc 259 
			<DeleteModal
260 
				url={actionLink}
261 
				isOpen={modalToShow === 'delete'}
11438 stevensc 262 
				closeModal={() => setModalToShow('')}
11379 stevensc 263 
				title="Esta seguro de borrar este objetivo?"
264 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
265 
				message="Registro borrado"
266 
			/>
11429 stevensc 267 
		</ContentTitle >
11379 stevensc 268 
	)
269 
}
270 
 
271 
export default ObjectivesAndGoals