Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11659 | Rev 12326 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11546 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'
11659 stevensc 10 
import EditAndAddModal from '../components/EditAndAddModal'
11546 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 
 
21 
const TableView = ({ add_link, table_link, goBack_link, permisions }) => {
22 
 
23 
	const dispatch = useDispatch()
24 
	const [modalToShow, setModalToShow] = useState('')
25 
	const [actionLink, setActionLink] = useState(add_link)
26 
	const [items, setItems] = useState([])
27 
	const [goals, setGoals] = useState({})
28 
	const [total, setTotal] = useState(0)
29 
	const [search, setSearch] = useState('')
30 
	const [dataLength, setDataLength] = useState(10)
31 
	const [pages, setPages] = useState({
32 
		current: 1,
33 
		last: 1
34 
	})
35 
 
36 
	const getData = ({ url = '', params = {} }) => {
37 
 
38 
		axios.get(url, { params: { ...params } })
39 
			.then(({ data }) => {
40 
				if (!data.success) {
41 
					return dispatch(addNotification({
42 
						style: 'danger',
43 
						msg: 'Ha ocurrido un error'
44 
					}))
45 
				}
46 
 
47 
				setItems(data.data.items)
48 
				setGoals(data.data.goals)
49 
				setTotal(data.data.total)
50 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
51 
			})
52 
			.catch(() => dispatch(addNotification({
53 
				style: 'danger',
54 
				msg: 'Ha ocurrido un error'
55 
			})))
56 
	}
57 
 
58 
	useEffect(() => {
59 
		getData({
60 
			url: table_link,
61 
			params: {
62 
				search: search,
63 
				length: dataLength,
64 
				page: pages.current
65 
			}
66 
		})
67 
	}, [search, dataLength, pages.current])
68 
 
69 
	return (
70 
		<ContentTitle title={`Tareas de la meta: ${goals.titleGoals || ''}`}>
71 
			<div className="col-sm-12 d-flex flex-column  p-2">
72 
				<div className="m-2">
73 
					<strong>Descripción:</strong>
74 
					<br />
75 
					<span className="xd">{goals.descriptionGoals}</span>
76 
				</div>
77 
				<div className="m-2 d-flex">
78 
					<div>
79 
						<strong>Estatus:</strong>
80 
						<br />
81 
						<span className="xd">{goals.statusGoals}</span>
82 
					</div>
83 
					<div className="ml-5">
84 
						<strong>Costo:</strong>
85 
						<br />
86 
						<span className="xd">{goals.costGoals}</span>
87 
					</div>
88 
					<div className="ml-5 ">
89 
						<strong>Progreso:</strong>
90 
						<br />
91 
						{
92 
							goals.indicatorGoals > 0
93 
								?
94 
								<div className="d-flex align-items-center">
11549 stevensc 95 
									<progress value={goals.indicatorGoals || 0} max='100' />
96 
									<span className="ml-2">{`${goals.indicatorGoals}%`}</span>
11546 stevensc 97 
								</div>
98 
								:
99 
								'Sin tareas'
100 
						}
101 
					</div>
102 
				</div>
103 
				<div className="col-sm-12 mt-3">
104 
					<a href={goBack_link} className="btn btn-primary">
105 
						<i className="fa fa-arrow-left mr-1" />
106 
						Ir atras
107 
					</a>
108 
				</div>
109 
			</div>
110 
			<section className="content">
111 
				<div className="container-fluid">
112 
					<div className="row">
113 
						<div className="col-12">
114 
							<Card>
115 
								<Card.Header>
116 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
117 
										{
118 
											permisions.allowAdd
119 
											&&
120 
											<label
121 
												className='d-flex align-items-center'
122 
												onClick={() => {
123 
													setActionLink(add_link)
124 
													setModalToShow('add')
125 
												}}
126 
												style={{ cursor: 'pointer' }}
127 
											>
128 
												<i className="fa fa-plus mr-2" />
129 
												Agregar
130 
											</label>
131 
										}
132 
										<label
133 
											className='d-flex align-items-center'
134 
											onClick={() => getData({
135 
												url: table_link,
136 
												params: {
137 
													search: search,
138 
													length: dataLength,
139 
													page: pages.current
140 
												}
141 
											})}
142 
											style={{ cursor: 'pointer' }}
143 
										>
144 
											<i className='fa fa-refresh mr-2' />
145 
											Actualizar
146 
										</label>
147 
									</div>
148 
									<div className="row justify-content-between align-items-center">
149 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
150 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
151 
									</div>
152 
								</Card.Header>
153 
								<Card.Body>
154 
									<div className="table-responsive">
155 
										<Table data={items} headers={headers} setData={setItems}>
156 
											{
157 
												items.length
158 
												&&
159 
												items.map((item, index) => (
160 
													<tr key={index}>
161 
														<td className='text-vertical-middle'>{item.title}</td>
162 
														<td className='text-vertical-middle'>{item.description}</td>
163 
														<td className='d-flex align-items-center'>
164 
															{
165 
																item.progress > 0
166 
																	?
167 
																	<>
168 
																		<progress value={item.progress} max='100' />
169 
																		<span className='ml-2'>{item.progress}</span>
170 
																	</>
171 
																	:
172 
																	'Sin progreso'
173 
															}
174 
														</td>
11555 stevensc 175 
														<td className='text-vertical-middle'>{`$${item.cost}`}</td>
11546 stevensc 176 
														<td className='text-vertical-middle'>
177 
															{
178 
																item.status === 'a'
179 
																	? 'Activo'
180 
																	: 'Inactivo'
181 
															}
182 
														</td>
183 
														<td>
184 
															<div className="d-flex align-items-center" style={{ gap: '5px' }}>
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 
															</div>
210 
														</td>
211 
													</tr>
212 
												))
213 
											}
214 
										</Table>
215 
									</div>
216 
									<div className='row justify-content-between align-items-center'>
217 
										<p className='mb-0'>
218 
											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - total) || 0} de un total de ${total || 0} registros`}
219 
										</p>
220 
										<TablePagination
221 
											onDecrement={() => setPages(prev => prev.current -= 1)}
222 
											onIncrement={() => setPages(prev => prev.current += 1)}
223 
											totalPages={pages.last}
224 
											currentPage={pages.current}
225 
										/>
226 
									</div>
227 
								</Card.Body>
228 
							</Card>
229 
						</div>
230 
					</div >
231 
				</div >
232 
			</section >
11659 stevensc 233 
			<EditAndAddModal
234 
				action_link={actionLink}
235 
				type={modalToShow}
236 
				closeModal={() => setModalToShow('')}
237 
				onComplete={() => getData({
238 
					url: table_link,
239 
					params: {
240 
						search: search,
241 
						length: dataLength,
242 
						page: pages.current
243 
					}
244 
				})}
245 
			/>
11546 stevensc 246 
			<DeleteModal
247 
				url={actionLink}
248 
				isOpen={modalToShow === 'delete'}
249 
				closeModal={() => setModalToShow('')}
11683 stevensc 250 
				title="Esta seguro de borrar esta tarea?"
11546 stevensc 251 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
252 
				message="Registro borrado"
253 
			/>
254 
		</ContentTitle >
255 
	)
256 
}
257 
 
258 
export default TableView