Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 10260 Rev 11264
Línea 6... Línea 6...
6 
import { addNotification } from '../../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import { useDispatch } from 'react-redux'
 7 
import { useDispatch } from 'react-redux'
8 
import DeleteModal from '../../../shared/DeleteModal'
 8 
import DeleteModal from '../../../shared/DeleteModal'
Línea 9... Línea 9...
9 
 
 9 
 
10 
const headers = [
 10 
const headers = [
11 
  { key: "name", label: "Nombre", isSorteable: true },
 11 
	{ key: 'name', label: 'Nombre', isSorteable: true },
12 
  { key: "job_description", label: "Descripción de cargo", isSorteable: true },
 12 
	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },
13 
  { key: "actions", label: "Acciones", isSorteable: false }
 13 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
Línea 14... Línea 14...
14 
]
 14 
]
Línea 15... Línea 15...
15 
 
 15 
 
16 
const MainView = ({ table_link, setActionLink, permisions, add_link }) => {
 16 
const MainView = ({ table_link, setActionLink, permisions, add_link }) => {
17 
 
 17 
 
18 
  const history = useHistory()
 18 
	const history = useHistory()
19 
  const dispatch = useDispatch()
 19 
	const dispatch = useDispatch()
20 
  const [showDeleteModal, setShowDeleteModal] = useState(false)
 20 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
21 
  const [deleteLink, setDeleteLink] = useState('')
 21 
	const [deleteLink, setDeleteLink] = useState('')
22 
  const [data, setData] = useState({})
 22 
	const [data, setData] = useState({})
23 
  const [search, setSearch] = useState('')
 23 
	const [search, setSearch] = useState('')
24 
  const [dataLength, setDataLength] = useState(10);
 24 
	const [dataLength, setDataLength] = useState(10)
25 
  const [pages, setPages] = useState({
 25 
	const [pages, setPages] = useState({
26 
    current: 1,
 26 
		current: 1,
27 
    last: 1
 27 
		last: 1
28 
  });
 28 
	})
29 
 
 29 
 
30 
  const getData = ({ url = '', params = {} }) => {
 30 
	const getData = ({ url = '', params = {} }) => {
31 
 
 31 
 
32 
    axios.get(url, { params: { ...params } })
 32 
		axios.get(url, { params: { ...params } })
33 
      .then(({ data }) => {
 33 
			.then(({ data }) => {
34 
        if (!data.success) {
 34 
				if (!data.success) {
35 
          dispatch(addNotification({
 35 
					dispatch(addNotification({
36 
            style: "error",
 36 
						style: 'error',
37 
            msg: "Ha ocurrido un error"
 37 
						msg: 'Ha ocurrido un error'
38 
          }))
 38 
					}))
39 
        }
 39 
				}
40 
 
 40 
 
41 
        setData(data.data)
 41 
				setData(data.data)
42 
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
 42 
				setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
43 
      })
 43 
			})
44 
      .catch((err) => dispatch(addNotification({
 44 
			.catch(() => dispatch(addNotification({
45 
        style: "error",
 45 
				style: 'error',
46 
        msg: "Ha ocurrido un error"
 46 
				msg: 'Ha ocurrido un error'
47 
      })))
 47 
			})))
48 
  }
 48 
	}
49 
 
 49 
 
50 
  useEffect(() => {
 50 
	useEffect(() => {
51 
    getData({
 51 
		getData({
52 
      url: table_link,
 52 
			url: table_link,
53 
      params: {
 53 
			params: {
54 
        search: search,
 54 
				search: search,
55 
        length: dataLength,
 55 
				length: dataLength,
56 
        page: pages.current
 56 
				page: pages.current
57 
      }
 57 
			}
58 
    })
 58 
		})
59 
  }, [search, dataLength, pages.current])
 59 
	}, [search, dataLength, pages.current])
60 
 
 60 
 
61 
  return (
 61 
	return (
62 
    <>
 62 
		<>
63 
      <section className="content">
 63 
			<section className="content">
64 
        <div className="container-fluid">
 64 
				<div className="container-fluid">
65 
          <div className="row">
 65 
					<div className="row">
66 
            <div className="col-12">
 66 
						<div className="col-12">
67 
              <Card>
 67 
							<Card>
68 
                <Card.Header>
 68 
								<Card.Header>
69 
                  <div className="row justify-content-end" style={{ gap: '10px' }}>
 69 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
70 
                    {
 70 
										{
71 
                      permisions.allowAdd
 71 
											permisions.allowAdd
72 
                      &&
 72 
                      &&
73 
                      <label
 73 
                      <label
74 
                        className='d-flex align-items-center'
 74 
                      	className='d-flex align-items-center'
75 
                        onClick={() => {
 75 
                      	onClick={() => {
76 
                          setActionLink(add_link)
 76 
                      		setActionLink(add_link)
77 
                          history.push('/recruitment-and-selection/vacancies/add')
 77 
                      		history.push('/recruitment-and-selection/vacancies/add')
78 
                        }}
 78 
                      	}}
79 
                        style={{ cursor: 'pointer' }}
 79 
                      	style={{ cursor: 'pointer' }}
80 
                      >
 80 
                      >
81 
                        <i className="fa fa-plus mr-2" />
 81 
                      	<i className="fa fa-plus mr-2" />
82 
                        Agregar
 82 
                        Agregar
83 
                      </label>
 83 
                      </label>
84 
                    }
 84 
										}
85 
                    <label
 85 
										<label
86 
                      className='d-flex align-items-center'
 86 
											className='d-flex align-items-center'
87 
                      onClick={() => getData({
 87 
											onClick={() => getData({
88 
                        url: table_link,
 88 
												url: table_link,
89 
                        params: {
 89 
												params: {
90 
                          search: search,
 90 
													search: search,
91 
                          length: dataLength,
 91 
													length: dataLength,
92 
                          page: pages.current
 92 
													page: pages.current
93 
                        }
 93 
												}
94 
                      })}
 94 
											})}
95 
                      style={{ cursor: 'pointer' }}
 95 
											style={{ cursor: 'pointer' }}
96 
                    >
 96 
										>
97 
                      <i className='fa fa-refresh mr-2' />
 97 
											<i className='fa fa-refresh mr-2' />
98 
                      Actualizar
 98 
                      Actualizar
99 
                    </label>
 99 
										</label>
100 
                  </div>
 100 
									</div>
101 
                  <div className="row justify-content-between align-items-center">
 101 
									<div className="row justify-content-between align-items-center">
102 
                    <LengthFilter onChange={(e) => setDataLength(e.target.value)} />
 102 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
103 
                    <SearchInput onChange={(e) => setSearch(e.target.value)} />
 103 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
104 
                  </div>
 104 
									</div>
105 
                </Card.Header>
 105 
								</Card.Header>
106 
                <Card.Body>
 106 
								<Card.Body>
107 
                  <Table data={data.items} headers={headers} setData={setData}>
 107 
									<Table data={data.items} headers={headers} setData={setData}>
108 
                    {
 108 
										{
109 
                      data.items?.map((item, index) => (
 109 
											data.items?.map((item, index) => (
110 
                        <tr key={index}>
 110 
												<tr key={index}>
111 
                          <td>{item.name}</td>
 111 
													<td>{item.name}</td>
112 
                          <td>{item.job_description}</td>
 112 
													<td>{item.job_description}</td>
113 
                          <td className='d-flex' style={{ gap: '10px' }}>
 113 
													<td className='d-flex' style={{ gap: '10px' }}>
114 
                            {
 114 
														{
115 
                              permisions.allowEdit
 115 
															permisions.allowEdit
116 
                              &&
 116 
                              &&
117 
                              <i
 117 
                              <i
118 
                                className='fa fa-pencil'
 118 
                              	className='fa fa-pencil'
119 
                                onClick={() => {
 119 
                              	onClick={() => {
120 
                                  setActionLink(item.actions.link_edit)
 120 
                              		setActionLink(item.actions.link_edit)
121 
                                  history.push('/recruitment-and-selection/vacancies/edit')
 121 
                              		history.push('/recruitment-and-selection/vacancies/edit')
122 
                                }}
 122 
                              	}}
123 
                                style={{ cursor: 'pointer' }}
 123 
                              	style={{ cursor: 'pointer' }}
124 
                              />
 124 
                              />
125 
                            }
 125 
														}
126 
                            {
 126 
														{
127 
                              permisions.allowDelete
 127 
															permisions.allowDelete
128 
                              &&
 128 
                              &&
129 
                              <i
 129 
                              <i
130 
                                className='fa fa-trash'
 130 
                              	className='fa fa-trash'
131 
                                onClick={() => {
 131 
                              	onClick={() => {
132 
                                  setShowDeleteModal(true)
 132 
                              		setShowDeleteModal(true)
133 
                                  setDeleteLink(item.actions.link_delete)
 133 
                              		setDeleteLink(item.actions.link_delete)
134 
                                }}
 134 
                              	}}
135 
                                style={{ cursor: 'pointer' }}
 135 
                              	style={{ cursor: 'pointer' }}
136 
                              />
 136 
                              />
137 
                            }
 137 
														}
138 
                          </td>
 138 
													</td>
139 
                        </tr>
 139 
												</tr>
140 
                      ))
 140 
											))
141 
                    }
 141 
										}
142 
                  </Table>
 142 
									</Table>
143 
                  <div className='row justify-content-between align-items-center'>
 143 
									<div className='row justify-content-between align-items-center'>
144 
                    <p className='mb-0'>
 144 
										<p className='mb-0'>
145 
                      {`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`}
 145 
											{`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`}
146 
                    </p>
 146 
										</p>
147 
                    <TablePagination
 147 
										<TablePagination
148 
                      onDecrement={(e) => setPages(prev => prev.current -= 1)}
 148 
											onDecrement={(e) => setPages(prev => prev.current -= 1)}
149 
                      onIncrement={(e) => setPages(prev => prev.current += 1)}
 149 
											onIncrement={(e) => setPages(prev => prev.current += 1)}
150 
                      totalPages={pages.last}
 150 
											totalPages={pages.last}
151 
                      currentPage={pages.current}
 151 
											currentPage={pages.current}
152 
                    />
 152 
										/>
153 
                  </div>
 153 
									</div>
154 
                </Card.Body>
 154 
								</Card.Body>
155 
              </Card>
 155 
							</Card>
156 
            </div>
 156 
						</div>
157 
          </div >
 157 
					</div >
158 
        </div >
 158 
				</div >
159 
      </section >
 159 
			</section >
160 
      <DeleteModal
 160 
			<DeleteModal
161 
        url={deleteLink}
 161 
				url={deleteLink}
162 
        isOpen={showDeleteModal}
 162 
				isOpen={showDeleteModal}
163 
        closeModal={() => setShowDeleteModal(false)}
 163 
				closeModal={() => setShowDeleteModal(false)}
164 
        title="Esta seguro de borrar esta vacante?"
 164 
				title="Esta seguro de borrar esta vacante?"
165 
        onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== deleteLink) })}
 165 
				onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== deleteLink) })}
166 
        message="Vacante eliminada"
 166 
				message="Vacante eliminada"
167 
      />
 167 
			/>
168 
    </>
 168 
		</>
169 
  )
 169 
	)