Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11477 | Rev 11481 | 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 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'
10 
 
11 
const headers = [
12 
	{ key: 'title', label: 'Nombre', isSorteable: true },
13 
	{ key: 'description', label: 'Descripción', isSorteable: true },
14 
	{ key: 'progress', label: 'Progreso', isSorteable: true },
15 
	{ key: 'cost', label: 'Costo', isSorteable: true },
16 
	{ key: 'status', label: 'Estatus', isSorteable: true },
17 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
18 
]
19 
 
11471 stevensc 20 
const TableView = ({ add_link, table_link, permisions }) => {
11467 stevensc 21 
 
22 
	const dispatch = useDispatch()
23 
	const [modalToShow, setModalToShow] = useState('')
24 
	const [actionLink, setActionLink] = useState(add_link)
25 
	const [items, setItems] = useState([])
26 
	const [objetive, setObjetive] = useState({})
27 
	const [total, setTotal] = useState(0)
28 
	const [search, setSearch] = useState('')
29 
	const [dataLength, setDataLength] = useState(10)
30 
	const [pages, setPages] = useState({
31 
		current: 1,
32 
		last: 1
33 
	})
34 
 
35 
	const getData = ({ url = '', params = {} }) => {
36 
 
37 
		axios.get(url, { params: { ...params } })
38 
			.then(({ data }) => {
39 
				if (!data.success) {
40 
					return dispatch(addNotification({
41 
						style: 'danger',
42 
						msg: 'Ha ocurrido un error'
43 
					}))
44 
				}
45 
 
46 
				setItems(data.data.items)
11474 stevensc 47 
				setObjetive(data.data.objective)
11467 stevensc 48 
				setTotal(data.data.total)
49 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
50 
			})
51 
			.catch(() => dispatch(addNotification({
52 
				style: 'danger',
53 
				msg: 'Ha ocurrido un error'
54 
			})))
55 
	}
56 
 
57 
	useEffect(() => {
58 
		getData({
59 
			url: table_link,
60 
			params: {
61 
				search: search,
62 
				length: dataLength,
63 
				page: pages.current
64 
			}
65 
		})
66 
	}, [search, dataLength, pages.current])
67 
 
68 
	return (
11477 stevensc 69 
		<ContentTitle title={`Metas del objetivo: ${objetive.titleObjective}`}>
70 
			<div className="col-sm-12 d-flex flex-column  p-2">
71 
				<div className="m-2">
72 
					<strong>Descripción:</strong>
73 
					<br />
74 
					<span className="xd">{objetive.descriptionObjective}</span>
75 
				</div>
11478 stevensc 76 
				<div className="m-2 d-flex">
77 
					<div>
78 
						<strong>Estatus:</strong>
79 
						<br />
80 
						<span className="xd">{objetive.statusObjective}</span>
81 
					</div>
82 
					<div className="ml-5">
83 
						<strong>Fecha:</strong>
84 
						<br />
85 
						<span className="xd">{objetive.dateObjective}</span>
86 
					</div>
87 
					<div className="ml-5">
88 
						<strong>Costo:</strong>
89 
						<br />
90 
						<span className="xd">{objetive.costObjective}</span>
91 
					</div>
92 
				</div>
11477 stevensc 93 
				<div className="col-sm-12 mt-3">
94 
					<a href="/planning-objectives-and-goals/objectives" className="btn btn-primary">
95 
						<i className="fa fa-arrow-left mr-1" />
96 
                        Ir atras
97 
					</a>
98 
				</div>
99 
			</div>
11472 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={() => {
113 
                                            		setActionLink(add_link)
114 
                                            		setModalToShow('add')
115 
                                            	}}
116 
                                            	style={{ cursor: 'pointer' }}
117 
                                            >
118 
                                            	<i className="fa fa-plus mr-2" />
119 
                                                Agregar
120 
                                            </label>
121 
										}
122 
										<label
123 
											className='d-flex align-items-center'
124 
											onClick={() => getData({
125 
												url: table_link,
126 
												params: {
127 
													search: search,
128 
													length: dataLength,
129 
													page: pages.current
130 
												}
131 
											})}
132 
											style={{ cursor: 'pointer' }}
133 
										>
134 
											<i className='fa fa-refresh mr-2' />
135 
                                            Actualizar
136 
										</label>
137 
									</div>
138 
									<div className="row justify-content-between align-items-center">
139 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
140 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
141 
									</div>
142 
								</Card.Header>
143 
								<Card.Body>
144 
									<div className="table-responsive">
145 
										<Table data={items} headers={headers} setData={setItems}>
146 
											{
147 
												items.length
148 
                                                &&
149 
                                                items.map((item, index) => (
150 
                                                	<tr key={index}>
151 
                                                		<td className='text-vertical-middle'>{item.title}</td>
152 
                                                		<td className='text-vertical-middle'>{item.description}</td>
153 
                                                		<td className='text-vertical-middle'>{item.date}</td>
154 
                                                		<td className='d-flex align-items-center'>
155 
                                                			{
156 
                                                				item.progress > 0
157 
                                                					?
158 
                                                					<>
159 
                                                						<progress value={item.progress} max='100' />
160 
                                                						<span className='ml-2'>{item.progress}</span>
161 
                                                					</>
162 
                                                					:
163 
                                                					'Sin metas'
164 
                                                			}
165 
                                                		</td>
166 
                                                		<td className='text-vertical-middle'>{item.cost}</td>
167 
                                                		<td className='text-vertical-middle'>
168 
                                                			{
169 
                                                				item.status === 'a'
170 
                                                					? 'Activo'
171 
                                                					: 'Inactivo'
172 
                                                			}
173 
                                                		</td>
174 
                                                		<td>
175 
                                                			<div className="d-flex align-items-center" style={{ gap: '5px' }}>
176 
                                                				{
177 
                                                					permisions.allowEdit
178 
                                                                    &&
179 
                                                                    <i
180 
                                                                    	className='fa fa-pencil'
181 
                                                                    	onClick={() => {
182 
                                                                    		setActionLink(item.actions.link_edit)
183 
                                                                    		setModalToShow('edit')
184 
                                                                    	}}
185 
                                                                    	style={{ cursor: 'pointer' }}
186 
                                                                    />
187 
                                                				}
188 
                                                				{
189 
                                                					permisions.allowDelete
190 
                                                                    &&
191 
                                                                    <i
192 
                                                                    	className='fa fa-trash'
193 
                                                                    	onClick={() => {
194 
                                                                    		setActionLink(item.actions.link_delete)
195 
                                                                    		setModalToShow('delete')
196 
                                                                    	}}
197 
                                                                    	style={{ cursor: 'pointer' }}
198 
                                                                    />
199 
                                                				}
200 
                                                			</div>
201 
                                                		</td>
202 
                                                	</tr>
203 
                                                ))
204 
											}
205 
										</Table>
206 
									</div>
207 
									<div className='row justify-content-between align-items-center'>
208 
										<p className='mb-0'>
209 
											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - total) || 0} de un total de ${total || 0} registros`}
210 
										</p>
211 
										<TablePagination
212 
											onDecrement={() => setPages(prev => prev.current -= 1)}
213 
											onIncrement={() => setPages(prev => prev.current += 1)}
214 
											totalPages={pages.last}
215 
											currentPage={pages.current}
216 
										/>
217 
									</div>
218 
								</Card.Body>
219 
							</Card>
220 
						</div>
221 
					</div >
222 
				</div >
223 
			</section >
224 
			<DeleteModal
225 
				url={actionLink}
226 
				isOpen={modalToShow === 'delete'}
227 
				closeModal={() => setModalToShow('')}
228 
				title="Esta seguro de borrar este objetivo?"
229 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== actionLink))}
230 
				message="Registro borrado"
231 
			/>
11467 stevensc 232 
		</ContentTitle >
233 
	)
234 
}
235 
 
236 
export default TableView