Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11437 | Rev 11467 | 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'
11426 stevensc 10 
import { useHistory } from 'react-router-dom'
11436 stevensc 11 
import EditAndAddModal from '../components/objetives_and_goals/EditAndAddModal'
11379 stevensc 12 
 
13 
const headers = [
14 
	{ key: 'title', label: 'Nombre', isSorteable: true },
15 
	{ key: 'description', label: 'Descripción', isSorteable: true },
16 
	{ key: 'date', label: 'Fecha', isSorteable: true },
17 
	{ key: 'progress', label: 'Progreso', isSorteable: true },
18 
	{ key: 'cost', label: 'Costo', isSorteable: true },
19 
	{ key: 'status', label: 'Estatus', isSorteable: true },
20 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
21 
]
22 
 
11426 stevensc 23 
const ObjectivesAndGoals = ({ add_link, table_link, permisions, setExternalLink }) => {
11379 stevensc 24 
 
25 
	const dispatch = useDispatch()
11426 stevensc 26 
	const history = useHistory()
11379 stevensc 27 
	const [modalToShow, setModalToShow] = useState('')
28 
	const [actionLink, setActionLink] = useState(add_link)
29 
	const [items, setItems] = useState([])
30 
	const [module, setModule] = useState({})
31 
	const [total, setTotal] = useState(0)
32 
	const [search, setSearch] = useState('')
33 
	const [dataLength, setDataLength] = useState(10)
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,
67 
				page: pages.current
68 
			}
69 
		})
70 
	}, [search, dataLength, pages.current])
71 
 
72 
	return (
73 
		<ContentTitle title='Planificación - Objetivos y Metas'>
11429 stevensc 74 
			<div className="col-sm-12 d-flex flex-column  p-2">
75 
				<div className="m-2 d-flex">
76 
					<div>
77 
						<strong>Costo:</strong> <br /><span className="xd">{module.costModule}</span>
78 
					</div>
79 
					<div className="ml-5 ">
80 
						<strong>Progreso:</strong>
81 
						<br />
82 
						<div className="d-flex align-items-center">
83 
							<progress value={module.indicatorModule} max='100' /><span className="ml-2">{`${module.indicatorModule}%`}</span>
84 
						</div>
85 
					</div>
86 
					<div className="ml-5 d-flex align-items-center">
87 
						<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/reportall">
88 
							<i className="fa fa-file-pdf-o mr-1" />
89 
                            Ver PDF
90 
						</a>
91 
					</div>
92 
					<div className="ml-5 d-flex align-items-center">
93 
						<a className="btn btn-secondary btn-sm mt-3" target="_blank" href="objectives/matriz">
94 
							<i className="fa fa-file-pdf-o mr-1" />
95 
                            Ver PDF Matriz
96 
						</a>
97 
					</div>
98 
				</div>
99 
			</div>
11379 stevensc 100 
			<section className="content">
101 
				<div className="container-fluid">
102 
					<div className="row">
103 
						<div className="col-12">
104 
							<Card>
105 
								<Card.Header>
106 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
107 
										{
108 
											permisions.allowAdd
109 
                                            &&
110 
                                            <label
111 
                                            	className='d-flex align-items-center'
112 
                                            	onClick={() => setModalToShow('add')}
113 
                                            	style={{ cursor: 'pointer' }}
114 
                                            >
115 
                                            	<i className="fa fa-plus mr-2" />
116 
                                                Agregar
117 
                                            </label>
118 
										}
119 
										<label
120 
											className='d-flex align-items-center'
121 
											onClick={() => getData({
122 
												url: table_link,
123 
												params: {
124 
													search: search,
125 
													length: dataLength,
126 
													page: pages.current
127 
												}
128 
											})}
129 
											style={{ cursor: 'pointer' }}
130 
										>
131 
											<i className='fa fa-refresh mr-2' />
132 
                                            Actualizar
133 
										</label>
134 
									</div>
135 
									<div className="row justify-content-between align-items-center">
136 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
137 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
138 
									</div>
139 
								</Card.Header>
140 
								<Card.Body>
141 
									<div className="table-responsive">
11396 stevensc 142 
										<Table data={items} headers={headers} setData={setItems}>
11398 stevensc 143 
											{
11400 stevensc 144 
												items.length
145 
                                                &&
146 
                                                items.map((item, index) => (
147 
                                                	<tr key={index}>
11412 stevensc 148 
                                                		<td className='text-vertical-middle'>{item.title}</td>
149 
                                                		<td className='text-vertical-middle'>{item.description}</td>
150 
                                                		<td className='text-vertical-middle'>{item.date}</td>
11418 stevensc 151 
                                                		<td className='d-flex align-items-center'>
11416 stevensc 152 
                                                			{
11421 stevensc 153 
                                                				item.progress > 0
11416 stevensc 154 
                                                					?
155 
                                                					<>
156 
                                                						<progress value={item.progress} max='100' />
157 
                                                						<span className='ml-2'>{item.progress}</span>
158 
                                                					</>
159 
                                                					:
160 
                                                					'Sin metas'
161 
                                                			}
11400 stevensc 162 
                                                		</td>
11412 stevensc 163 
                                                		<td className='text-vertical-middle'>{item.cost}</td>
164 
                                                		<td className='text-vertical-middle'>
11400 stevensc 165 
                                                			{
166 
                                                				item.status === 'a'
167 
                                                					? 'Activo'
168 
                                                					: 'Inactivo'
169 
                                                			}
170 
                                                		</td>
11426 stevensc 171 
                                                		<td>
11429 stevensc 172 
                                                			<div className="d-flex align-items-center" style={{ gap: '5px' }}>
11426 stevensc 173 
                                                				{
174 
                                                					permisions.allowObjective
175 
                                                                    &&
176 
                                                                    <i
177 
                                                                    	className='fa fa-level-down'
178 
                                                                    	onClick={() => {
179 
                                                                    		setExternalLink(item.actions.link_objective)
180 
                                                                    		history.push('/goals')
181 
                                                                    	}}
182 
                                                                    	style={{ cursor: 'pointer' }}
183 
                                                                    />
184 
                                                				}
185 
                                                				{
186 
                                                					permisions.allowEdit
187 
                                                                    &&
188 
                                                                    <i
189 
                                                                    	className='fa fa-pencil'
190 
                                                                    	onClick={() => {
191 
                                                                    		setActionLink(item.actions.link_edit)
192 
                                                                    		setModalToShow('edit')
193 
                                                                    	}}
194 
                                                                    	style={{ cursor: 'pointer' }}
195 
                                                                    />
196 
                                                				}
197 
                                                				{
198 
                                                					permisions.allowDelete
199 
                                                                    &&
200 
                                                                    <i
201 
                                                                    	className='fa fa-trash'
202 
                                                                    	onClick={() => {
203 
                                                                    		setActionLink(item.actions.link_delete)
204 
                                                                    		setModalToShow('delete')
205 
                                                                    	}}
206 
                                                                    	style={{ cursor: 'pointer' }}
207 
                                                                    />
208 
                                                				}
209 
                                                				{
210 
                                                					permisions.allowObjectiveReport
211 
                                                                    &&
11429 stevensc 212 
                                                                    <a href={item.actions.link_objective_report} target='_blank' rel="noreferrer" style={{ color: '#333' }}>
213 
                                                                    	<i className='fa fa-file' />
11426 stevensc 214 
                                                                    </a>
215 
                                                				}
216 
                                                			</div>
11400 stevensc 217 
                                                		</td>
218 
                                                	</tr>
219 
                                                ))
11398 stevensc 220 
											}
11396 stevensc 221 
										</Table>
11379 stevensc 222 
									</div>
223 
									<div className='row justify-content-between align-items-center'>
224 
										<p className='mb-0'>
225 
											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - total) || 0} de un total de ${total || 0} registros`}
226 
										</p>
227 
										<TablePagination
228 
											onDecrement={() => setPages(prev => prev.current -= 1)}
229 
											onIncrement={() => setPages(prev => prev.current += 1)}
230 
											totalPages={pages.last}
231 
											currentPage={pages.current}
232 
										/>
233 
									</div>
234 
								</Card.Body>
235 
							</Card>
236 
						</div>
237 
					</div >
238 
				</div >
239 
			</section >
11436 stevensc 240 
			<EditAndAddModal
241 
				type={modalToShow}
11438 stevensc 242 
				closeModal={() => setModalToShow('')}
11436 stevensc 243 
				action_link={actionLink}
244 
			/>
11379 stevensc 245 
			<DeleteModal
246 
				url={actionLink}
247 
				isOpen={modalToShow === 'delete'}
11438 stevensc 248 
				closeModal={() => setModalToShow('')}
11379 stevensc 249 
				title="Esta seguro de borrar este objetivo?"
250 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
251 
				message="Registro borrado"
252 
			/>
11429 stevensc 253 
		</ContentTitle >
11379 stevensc 254 
	)
255 
}
256 
 
257 
export default ObjectivesAndGoals