Proyectos de Subversion LeadersLinked - Backend

Rev

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