Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10260 | Rev 11025 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 10260 Rev 11024
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable no-mixed-spaces-and-tabs */
1 
import React, { useState, useEffect } from 'react'
 2 
import React, { useState, useEffect } from 'react'
2 
import axios from 'axios'
 3 
import axios from 'axios'
3 
import { Card } from 'react-bootstrap'
 4 
import { Card } from 'react-bootstrap'
4 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
 5 
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
5 
import { useHistory } from 'react-router-dom'
 6 
import { useHistory } from 'react-router-dom'
Línea 7... Línea 8...
7 
import { useDispatch } from 'react-redux'
 8 
import { useDispatch } from 'react-redux'
8 
import DeleteModal from '../../../shared/DeleteModal'
 9 
import DeleteModal from '../../../shared/DeleteModal'
9 
import ContentTitle from '../../../shared/ContentTitle'
 10 
import ContentTitle from '../../../shared/ContentTitle'
Línea 10... Línea 11...
10 
 
 11 
 
11 
const headers = [
 12 
const headers = [
12 
    { key: "first_name", label: "Nombre", isSorteable: true },
 13 
	{ key: 'first_name', label: 'Nombre', isSorteable: true },
13 
    { key: "last_name", label: "Apellido", isSorteable: true },
 14 
	{ key: 'last_name', label: 'Apellido', isSorteable: true },
14 
    { key: "email", label: "Correo electrónico", isSorteable: true },
 15 
	{ key: 'email', label: 'Correo electrónico', isSorteable: true },
15 
    { key: "status", label: "Estatus", isSorteable: false },
 16 
	{ key: 'status', label: 'Estatus', isSorteable: false },
16 
    { key: "actions", label: "Acciones", isSorteable: false }
 17 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
Línea 17... Línea 18...
17 
]
 18 
]
Línea 18... Línea 19...
18 
 
 19 
 
19 
const MainView = ({ email_link, add_link, table_link, permisions }) => {
 20 
const MainView = ({ email_link, add_link, table_link, permisions, vacancies }) => {
20 
 
 21 
 
- 
 
 22 
	const history = useHistory()
21 
    const history = useHistory()
 23 
	const dispatch = useDispatch()
22 
    const dispatch = useDispatch()
 24 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
23 
    const [showDeleteModal, setShowDeleteModal] = useState(false)
 25 
	const [currentVacancy, setCurrentVacancy] = useState(vacancies[0].uuid || '')
24 
    const [actionLink, setActionLink] = useState('')
 26 
	const [actionLink, setActionLink] = useState('')
25 
    const [data, setData] = useState({})
 27 
	const [data, setData] = useState({})
26 
    const [search, setSearch] = useState('')
 28 
	const [search, setSearch] = useState('')
27 
    const [dataLength, setDataLength] = useState(10);
 29 
	const [dataLength, setDataLength] = useState(10)
28 
    const [pages, setPages] = useState({
 30 
	const [pages, setPages] = useState({
29 
        current: 1,
 31 
		current: 1,
30 
        last: 1
 32 
		last: 1
31 
    });
 33 
	})
32 
 
 34 
 
33 
    const getData = ({ url = '', params = {} }) => {
 35 
	const getData = ({ url = '', params = {} }) => {
34 
 
 36 
 
35 
        axios.get(url, { params: { ...params } })
 37 
		axios.get(`${url}/${currentVacancy}`, { params: { ...params } })
36 
            .then(({ data }) => {
 38 
			.then(({ data }) => {
37 
                if (!data.success) {
 39 
				if (!data.success) {
38 
                    dispatch(addNotification({
 40 
					dispatch(addNotification({
39 
                        style: "error",
 41 
						style: 'error',
40 
                        msg: "Ha ocurrido un error"
 42 
						msg: 'Ha ocurrido un error'
41 
                    }))
 43 
					}))
42 
                }
 44 
				}
43 
 
 45 
 
44 
                setData(data.data)
 46 
				setData(data.data)
45 
                setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
 47 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
46 
            })
 48 
			})
47 
            .catch((err) => dispatch(addNotification({
 49 
			.catch(() => dispatch(addNotification({
48 
                style: "error",
 50 
				style: 'error',
49 
                msg: "Ha ocurrido un error"
 51 
				msg: 'Ha ocurrido un error'
50 
            })))
 52 
			})))
51 
    }
 53 
	}
52 
 
 54 
 
53 
    useEffect(() => {
 55 
	useEffect(() => {
54 
        getData({
 56 
		getData({
55 
            url: table_link,
 57 
			url: table_link,
56 
            params: {
 58 
			params: {
57 
                search: search,
 59 
				search: search,
58 
                length: dataLength,
 60 
				length: dataLength,
59 
                page: pages.current
 61 
				page: pages.current
60 
            }
 62 
			}
61 
        })
 63 
		})
62 
    }, [search, dataLength, pages.current])
 64 
	}, [search, dataLength, pages.current])
63 
 
 65 
 
64 
    return (
 66 
	return (
65 
        <ContentTitle title='Preselección'>
 67 
		<ContentTitle title='Preselección'>
66 
            <section className="content">
 68 
			<section className="content">
67 
                <div className="container-fluid">
 69 
				<div className="container-fluid">
68 
                    <div className="row">
 70 
					<div className="row">
69 
                        <div className="col-12">
 71 
						<div className="col-12">
- 
 
 72 
							<Card>
- 
 
 73 
								<Card.Header>
- 
 
 74 
									<div className="row" style={{ gap: '10px' }}>
- 
 
 75 
										<div className="form-group">
- 
 
 76 
											<label>Vacantes</label>
- 
 
 77 
											<select
- 
 
 78 
												className="form-control"
- 
 
 79 
												value={currentVacancy}
- 
 
 80 
												onChange={(e) => setCurrentVacancy(e.target.value)}
70 
                            <Card>
 81 
												defaultValue={vacancies[0].uuid}
- 
 
 82 
											>
- 
 
 83 
												{
- 
 
 84 
													vacancies.map((vacancy) => (
- 
 
 85 
														<option key={vacancy.uuid} value={vacancy.uuid}>{vacancy.name}</option>
- 
 
 86 
													))
- 
 
 87 
												}
- 
 
 88 
											</select>
- 
 
 89 
										</div>
71 
                                <Card.Header>
 90 
									</div>
72 
                                    <div className="row justify-content-end" style={{ gap: '10px' }}>
 91 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
73 
                                        {
 92 
										{
74 
                                            permisions.allowAdd
 93 
											permisions.allowAdd
75 
                                            &&
 94 
                                            &&
76 
                                            <label
 95 
                                            <label
77 
                                                className='d-flex align-items-center'
 96 
                                            	className='d-flex align-items-center'
78 
                                                onClick={() => {
 97 
                                            	onClick={() => {
79 
                                                    setActionLink(add_link)
 98 
                                            		setActionLink(add_link)
80 
                                                }}
 99 
                                            	}}
81 
                                                style={{ cursor: 'pointer' }}
 100 
                                            	style={{ cursor: 'pointer' }}
82 
                                            >
 101 
                                            >
83 
                                                <i className="fa fa-plus mr-2" />
 102 
                                            	<i className="fa fa-plus mr-2" />
84 
                                                Agregar
 103 
                                                Agregar
85 
                                            </label>
 104 
                                            </label>
86 
                                        }
 105 
										}
87 
                                        <label
 106 
										<label
88 
                                            className='d-flex align-items-center'
 107 
											className='d-flex align-items-center'
89 
                                            onClick={() => getData({
 108 
											onClick={() => getData({
90 
                                                url: table_link,
 109 
												url: table_link,
91 
                                                params: {
 110 
												params: {
92 
                                                    search: search,
 111 
													search: search,
93 
                                                    length: dataLength,
 112 
													length: dataLength,
94 
                                                    page: pages.current
 113 
													page: pages.current
95 
                                                }
 114 
												}
96 
                                            })}
 115 
											})}
97 
                                            style={{ cursor: 'pointer' }}
 116 
											style={{ cursor: 'pointer' }}
98 
                                        >
 117 
										>
99 
                                            <i className='fa fa-refresh mr-2' />
 118 
											<i className='fa fa-refresh mr-2' />
100 
                                            Actualizar
 119 
                                            Actualizar
101 
                                        </label>
 120 
										</label>
102 
                                    </div>
 121 
									</div>
103 
                                    <div className="row justify-content-between align-items-center">
 122 
									<div className="row justify-content-between align-items-center">
104 
                                        <LengthFilter onChange={(e) => setDataLength(e.target.value)} />
 123 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
105 
                                        <SearchInput onChange={(e) => setSearch(e.target.value)} />
 124 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
106 
                                    </div>
 125 
									</div>
107 
                                </Card.Header>
 126 
								</Card.Header>
108 
                                <Card.Body>
 127 
								<Card.Body>
109 
                                    <Table data={data.items} headers={headers} setData={setData}>
 128 
									<Table data={data.items} headers={headers} setData={setData}>
110 
                                        {
 129 
										{
111 
                                            data.items?.map((item, index) => (
 130 
											data.items?.map((item, index) => (
112 
                                                <tr key={index}>
 131 
												<tr key={index}>
113 
                                                    <td>{item.first_name}</td>
 132 
													<td>{item.first_name}</td>
114 
                                                    <td>{item.last_name}</td>
 133 
													<td>{item.last_name}</td>
115 
                                                    <td>{item.email}</td>
 134 
													<td>{item.email}</td>
116 
                                                    <td>
 135 
													<td>
117 
                                                        {
 136 
														{
118 
                                                            item.status === "a"
 137 
															item.status === 'a'
119 
                                                                ? <i className='fa fa-check' style={{ color: '#5cb85c' }} />
 138 
																? <i className='fa fa-check' style={{ color: '#5cb85c' }} />
120 
                                                                : <i className='fa fa-close' style={{ color: 'red' }} />
 139 
																: <i className='fa fa-close' style={{ color: 'red' }} />
121 
                                                        }
 140 
														}
122 
                                                    </td>
 141 
													</td>
123 
                                                    <td className='d-flex' style={{ gap: '10px' }}>
 142 
													<td className='d-flex' style={{ gap: '10px' }}>
124 
                                                        {
 143 
														{
125 
                                                            permisions.allowEdit
 144 
															permisions.allowEdit
126 
                                                            &&
 145 
                                                            &&
127 
                                                            <i
 146 
                                                            <i
128 
                                                                className='fa fa-pencil'
 147 
                                                            	className='fa fa-pencil'
129 
                                                                onClick={() => {
 148 
                                                            	style={{ cursor: 'pointer' }}
130 
                                                                    setActionLink(item.actions.link_edit)
 149 
                                                            	onClick={() => {
131 
                                                                }}
 150 
                                                            		setActionLink(item.actions.link_edit)
132 
                                                                style={{ cursor: 'pointer' }}
 151 
                                                            	}}
133 
                                                            />
 152 
                                                            />
134 
                                                        }
 153 
														}
135 
                                                        {
 154 
														{
136 
                                                            permisions.allowDelete
 155 
															permisions.allowDelete
137 
                                                            &&
 156 
                                                            &&
138 
                                                            <i
 157 
                                                            <i
139 
                                                                className='fa fa-trash'
 158 
                                                            	className='fa fa-trash'
140 
                                                                onClick={() => {
 159 
                                                            	onClick={() => {
141 
                                                                    setShowDeleteModal(true)
 160 
                                                            		setShowDeleteModal(true)
142 
                                                                    setActionLink(item.actions.link_delete)
 161 
                                                            		setActionLink(item.actions.link_delete)
143 
                                                                }}
 162 
                                                            	}}
144 
                                                                style={{ cursor: 'pointer' }}
 163 
                                                            	style={{ cursor: 'pointer' }}
145 
                                                            />
 164 
                                                            />
146 
                                                        }
 165 
														}
147 
                                                    </td>
 166 
													</td>
148 
                                                </tr>
 167 
												</tr>
149 
                                            ))
 168 
											))
150 
                                        }
 169 
										}
151 
                                    </Table>
 170 
									</Table>
152 
                                    <div className='row justify-content-between align-items-center'>
 171 
									<div className='row justify-content-between align-items-center'>
153 
                                        <p className='mb-0'>
 172 
										<p className='mb-0'>
154 
                                            {`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - data.total) || 0} de un total de ${data.total || 0} registros`}
 173 
											{`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - data.total) || 0} de un total de ${data.total || 0} registros`}
155 
                                        </p>
 174 
										</p>
156 
                                        <TablePagination
 175 
										<TablePagination
157 
                                            onDecrement={(e) => setPages(prev => prev.current -= 1)}
 176 
											onDecrement={(e) => setPages(prev => prev.current -= 1)}
158 
                                            onIncrement={(e) => setPages(prev => prev.current += 1)}
 177 
											onIncrement={(e) => setPages(prev => prev.current += 1)}
159 
                                            totalPages={pages.last}
 178 
											totalPages={pages.last}
160 
                                            currentPage={pages.current}
 179 
											currentPage={pages.current}
161 
                                        />
 180 
										/>
162 
                                    </div>
 181 
									</div>
163 
                                </Card.Body>
 182 
								</Card.Body>
164 
                            </Card>
 183 
							</Card>
165 
                        </div>
 184 
						</div>
166 
                    </div >
 185 
					</div >
167 
                </div >
 186 
				</div >
168 
            </section >
 187 
			</section >
169 
            <DeleteModal
 188 
			<DeleteModal
170 
                url={actionLink}
 189 
				url={actionLink}
171 
                isOpen={showDeleteModal}
 190 
				isOpen={showDeleteModal}
172 
                closeModal={() => setShowDeleteModal(false)}
 191 
				closeModal={() => setShowDeleteModal(false)}
173 
                title="Esta seguro de borrar esta vacante?"
 192 
				title="Esta seguro de borrar esta vacante?"
174 
                onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== actionLink) })}
 193 
				onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== actionLink) })}
175 
                message="Vacante eliminada"
 194 
				message="Vacante eliminada"
176 
            />
 195 
			/>
177 
        </ContentTitle>
 196 
		</ContentTitle>
178 
    )
 197 
	)