Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15314 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15314 Rev 16649
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from "react";
2 
import axios from 'axios'
 2 
import axios from "axios";
3 
import { Card } from 'react-bootstrap'
 3 
import { Card } from "react-bootstrap";
- 
 
 4 
import {
- 
 
 5 
  LengthFilter,
- 
 
 6 
  SearchInput,
- 
 
 7 
  TablePagination,
4 
import { LengthFilter, SearchInput, TablePagination } from '../../components/TableComponents'
 8 
} from "../../components/TableComponents";
5 
import { addNotification } from '../../../redux/notification/notification.actions'
 9 
import { addNotification } from "../../../redux/notification/notification.actions";
6 
import { useDispatch } from 'react-redux'
 10 
import { useDispatch } from "react-redux";
7 
import DeleteModal from '../../../shared/DeleteModal'
 11 
import DeleteModal from "../../../shared/DeleteModal";
8 
import Table from '../../../shared/content-table/Table'
 12 
import Table from "../../../shared/content-table/Table";
9 
import TableRow from '../../../shared/content-table/TableRow'
 13 
import TableRow from "../../../shared/content-table/TableRow";
Línea 10... Línea 14...
10 
 
 14 
 
11 
const headers = [
 15 
const headers = [
12 
	{ key: 'name', label: 'Nombre', isSorteable: true },
 16 
  { key: "name", label: "Nombre", isSorteable: true },
13 
	{ key: 'job_description', label: 'Descripción de cargo', isSorteable: true },
 17 
  { key: "job_description", label: "Descripción de cargo", isSorteable: true },
14 
	{ key: 'status', label: 'Estatus', isSorteable: true },
 18 
  { key: "status", label: "Estatus", isSorteable: true },
15 
	{ key: 'actions', label: 'Acciones', isSorteable: false }
 19 
  { key: "actions", label: "Acciones", isSorteable: false },
Línea 16... Línea 20...
16 
]
 20 
];
17 
 
 - 
 
18 
const MainView = ({
 - 
 
19 
	table_link,
 - 
 
20 
	setActionLink,
 - 
 
21 
	permisions,
 - 
 
22 
	add_link,
 - 
 
23 
	setAction }) => {
 - 
 
24 
 
 - 
 
25 
	const dispatch = useDispatch()
 - 
 
26 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
 - 
 
27 
	const [deleteLink, setDeleteLink] = useState('')
 - 
 
28 
	const [items, setItems] = useState([])
 - 
 
29 
	const [total, setTotal] = useState(0)
 - 
 
30 
	const [search, setSearch] = useState('')
 - 
 
31 
	const [startItem, setStartItem] = useState(1)
 - 
 
32 
	const [lastItem, setLastItem] = useState(10)
 - 
 
33 
	const [dataLength, setDataLength] = useState(10)
 - 
 
34 
	const [pages, setPages] = useState({
 - 
 
35 
		current: 1,
 - 
 
36 
		last: 1
 - 
 
37 
	})
 - 
 
38 
 
 - 
 
39 
	const getData = ({ url = '', params = {} }) => {
 - 
 
40 
 
 - 
 
41 
		axios.get(url, { params: { ...params } })
 - 
 
42 
			.then(({ data }) => {
 - 
 
43 
				if (!data.success) {
 - 
 
44 
					dispatch(addNotification({
 - 
 
45 
						style: 'danger',
 - 
 
46 
						msg: 'Ha ocurrido un error'
 - 
 
47 
					}))
 - 
 
48 
				}
 - 
 
49 
 
 - 
 
50 
				setItems(data.data.items)
 - 
 
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 
				start: pages.current
 - 
 
67 
			}
 - 
 
68 
		})
 - 
 
69 
	}, [search, dataLength, pages.current])
 - 
 
70 
 
 - 
 
71 
	useEffect(() => {
 - 
 
72 
		if (pages.current > 1) {
 - 
 
73 
			setStartItem((dataLength * (pages.current - 1)) + 1)
 - 
 
74 
		} else {
 - 
 
75 
			setStartItem(1)
 - 
 
76 
		}
 - 
 
77 
	}, [pages.current])
 - 
 
78 
 
 - 
 
79 
	useEffect(() => {
 - 
 
80 
		if (items) {
 - 
 
81 
			if (startItem > 1) {
 - 
 
82 
				setLastItem(startItem + (items.length - 1))
 - 
 
83 
			} else {
 - 
 
84 
				setLastItem(items.length)
 - 
 
85 
			}
 - 
 
86 
		}
 - 
 
87 
	}, [items])
 - 
 
88 
 
 - 
 
89 
 
 - 
 
90 
	const handleSort = (result) => setItems(result)
 - 
 
91 
 
 - 
 
92 
	const handleEdit = (url) => {
 - 
 
93 
		setActionLink(url)
 - 
 
94 
		setAction('edit')
 - 
 
95 
	}
 - 
 
96 
 
 - 
 
97 
	const handleDelete = (url) => {
 - 
 
98 
		setDeleteLink(url)
 - 
 
99 
		setShowDeleteModal(true)
 - 
 
100 
	}
 - 
 
101 
 
 - 
 
102 
	return (
 - 
 
103 
		<>
 - 
 
104 
			<section className="content">
 - 
 
105 
				<div className="container-fluid">
 - 
 
106 
					<div className="row">
 - 
 
107 
						<div className="col-12">
 - 
 
108 
							<Card>
 - 
 
109 
								<Card.Header>
 - 
 
110 
									<div className="row justify-content-end" style={{ gap: '10px' }}>
 - 
 
111 
										{permisions.allowAdd &&
 - 
 
112 
											<label
 - 
 
113 
												className='d-flex align-items-center'
 - 
 
114 
												onClick={() => {
 - 
 
115 
													setActionLink(add_link)
 - 
 
116 
													setAction('add')
 - 
 
117 
												}}
 - 
 
118 
												style={{ cursor: 'pointer' }}
 - 
 
119 
											>
 - 
 
120 
												<i className="fa fa-plus mr-2" />
 - 
 
121 
												Agregar
 - 
 
122 
											</label>
 - 
 
123 
										}
 - 
 
124 
										<label
 - 
 
125 
											className='d-flex align-items-center'
 - 
 
126 
											onClick={() => getData({
 - 
 
127 
												url: table_link,
 - 
 
128 
												params: {
 - 
 
129 
													search: search,
 - 
 
130 
													length: dataLength,
 - 
 
131 
													page: pages.current
 - 
 
132 
												}
 - 
 
133 
											})}
 - 
 
134 
											style={{ cursor: 'pointer' }}
 - 
 
135 
										>
 - 
 
136 
											<i className='fa fa-refresh mr-2' />
 - 
 
137 
											Actualizar
 - 
 
138 
										</label>
 - 
 
139 
									</div>
 - 
 
140 
									<div className="row justify-content-between align-items-center">
 - 
 
141 
										<LengthFilter onChange={(e) => setDataLength(e.target.value)} />
 - 
 
142 
										<SearchInput onChange={(e) => setSearch(e.target.value)} />
 - 
 
143 
									</div>
 - 
 
144 
								</Card.Header>
 - 
 
145 
								<Card.Body>
 - 
 
146 
									<div className="table-responsive">
 - 
 
147 
										<Table
 - 
 
148 
											data={items}
 - 
 
149 
											headers={headers}
 - 
 
150 
											setData={handleSort}
 - 
 
151 
										>
 - 
 
152 
											{() => items.map((item, index) =>
 - 
 
153 
												<TableRow
 - 
 
154 
													key={index}
 - 
 
155 
													item={item}
 - 
 
156 
													editOptions={{
 - 
 
157 
														permission: permisions.allowEdit,
 - 
 
158 
														icon: (value) => <i className='fa fa-pencil cursor-pointer' onClick={() => handleEdit(value)} />
 - 
 
159 
													}}
 - 
 
160 
													deleteOptions={{
 - 
 
161 
														permission: permisions.allowDelete,
 - 
 
162 
														icon: (value) => <i className='fa fa-trash  cursor-pointer' onClick={() => handleDelete(value)} />
 - 
 
163 
													}}
 - 
 
164 
												/>)}
 - 
 
165 
										</Table>
 - 
 
166 
									</div>
 - 
 
167 
									<div className='row justify-content-between align-items-center'>
 - 
 
168 
										<p className='mb-0'>
 - 
 
169 
											{`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
 - 
 
170 
										</p>
 - 
 
171 
										<TablePagination
 - 
 
172 
											onDecrement={() => setPages({ ...pages, current: pages.current - 1 })}
 - 
 
173 
											onIncrement={() => setPages({ ...pages, current: pages.current + 1 })}
 - 
 
174 
											totalPages={pages.last}
 - 
 
175 
											currentPage={pages.current}
 - 
 
176 
										/>
 - 
 
177 
									</div>
 - 
 
178 
								</Card.Body>
 - 
 
179 
							</Card>
 - 
 
180 
						</div>
 - 
 
181 
					</div >
 - 
 
182 
				</div >
 - 
 
183 
			</section >
 - 
 
184 
			<DeleteModal
 - 
 
185 
				url={deleteLink}
 - 
 
186 
				isOpen={showDeleteModal}
 - 
 
187 
				closeModal={() => setShowDeleteModal(false)}
 - 
 
188 
				title="Esta seguro de borrar esta vacante?"
 - 
 
189 
				onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== deleteLink))}
 - 
 
190 
				message="Vacante eliminada"
 - 
 
191 
			/>
 - 
 
192 
		</>
 - 
 
193 
	)
 - 
 
194 
}
 21 
 
- 
 
 22 
const MainView = ({
- 
 
 23 
  table_link,
- 
 
 24 
  setActionLink,
- 
 
 25 
  permisions,
- 
 
 26 
  add_link,
- 
 
 27 
  setAction,
- 
 
 28 
}) => {
- 
 
 29 
  const dispatch = useDispatch();
- 
 
 30 
  const [showDeleteModal, setShowDeleteModal] = useState(false);
- 
 
 31 
  const [deleteLink, setDeleteLink] = useState("");
- 
 
 32 
  const [items, setItems] = useState([]);
- 
 
 33 
  const [total, setTotal] = useState(0);
- 
 
 34 
  const [search, setSearch] = useState("");
- 
 
 35 
  const [startItem, setStartItem] = useState(1);
- 
 
 36 
  const [lastItem, setLastItem] = useState(10);
- 
 
 37 
  const [dataLength, setDataLength] = useState(10);
- 
 
 38 
  const [pages, setPages] = useState({
- 
 
 39 
    current: 1,
- 
 
 40 
    last: 1,
- 
 
 41 
  });
- 
 
 42 
 
- 
 
 43 
  const getData = ({ url = "", params = {} }) => {
- 
 
 44 
    axios
- 
 
 45 
      .get(url, { params: { ...params } })
- 
 
 46 
      .then(({ data }) => {
- 
 
 47 
        if (!data.success) {
- 
 
 48 
          dispatch(
- 
 
 49 
            addNotification({
- 
 
 50 
              style: "danger",
- 
 
 51 
              msg: "Ha ocurrido un error",
- 
 
 52 
            })
- 
 
 53 
          );
- 
 
 54 
        }
- 
 
 55 
 
- 
 
 56 
        setItems(data.data.items);
- 
 
 57 
        setTotal(data.data.total);
- 
 
 58 
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) });
- 
 
 59 
      })
- 
 
 60 
      .catch(() =>
- 
 
 61 
        dispatch(
- 
 
 62 
          addNotification({
- 
 
 63 
            style: "danger",
- 
 
 64 
            msg: "Ha ocurrido un error",
- 
 
 65 
          })
- 
 
 66 
        )
- 
 
 67 
      );
- 
 
 68 
  };
- 
 
 69 
 
- 
 
 70 
  useEffect(() => {
- 
 
 71 
    getData({
- 
 
 72 
      url: table_link,
- 
 
 73 
      params: {
- 
 
 74 
        search: search,
- 
 
 75 
        length: dataLength,
- 
 
 76 
        start: pages.current,
- 
 
 77 
      },
- 
 
 78 
    });
- 
 
 79 
  }, [search, dataLength, pages.current]);
- 
 
 80 
 
- 
 
 81 
  useEffect(() => {
- 
 
 82 
    if (pages.current > 1) {
- 
 
 83 
      setStartItem(dataLength * (pages.current - 1) + 1);
- 
 
 84 
    } else {
- 
 
 85 
      setStartItem(1);
- 
 
 86 
    }
- 
 
 87 
  }, [pages.current]);
- 
 
 88 
 
- 
 
 89 
  useEffect(() => {
- 
 
 90 
    if (items) {
- 
 
 91 
      if (startItem > 1) {
- 
 
 92 
        setLastItem(startItem + (items.length - 1));
- 
 
 93 
      } else {
- 
 
 94 
        setLastItem(items.length);
- 
 
 95 
      }
- 
 
 96 
    }
- 
 
 97 
  }, [items]);
- 
 
 98 
 
- 
 
 99 
  const handleSort = (result) => setItems(result);
- 
 
 100 
 
- 
 
 101 
  const handleEdit = (url) => {
- 
 
 102 
    setActionLink(url);
- 
 
 103 
    setAction("edit");
- 
 
 104 
  };
- 
 
 105 
 
- 
 
 106 
  const handleDelete = (url) => {
- 
 
 107 
    setDeleteLink(url);
- 
 
 108 
    setShowDeleteModal(true);
- 
 
 109 
  };
- 
 
 110 
 
- 
 
 111 
  return (
- 
 
 112 
    <>
- 
 
 113 
      <section className="content">
- 
 
 114 
        <div className="container-fluid">
- 
 
 115 
          <div className="row">
- 
 
 116 
            <div className="col-12">
- 
 
 117 
              <Card>
- 
 
 118 
                <Card.Header>
- 
 
 119 
                  <div
- 
 
 120 
                    className="row justify-content-end"
- 
 
 121 
                    style={{ gap: "10px" }}
- 
 
 122 
                  >
- 
 
 123 
                    {permisions.allowAdd && (
- 
 
 124 
                      <label
- 
 
 125 
                        className="d-flex align-items-center"
- 
 
 126 
                        onClick={() => {
- 
 
 127 
                          setActionLink(add_link);
- 
 
 128 
                          setAction("add");
- 
 
 129 
                        }}
- 
 
 130 
                        style={{ cursor: "pointer" }}
- 
 
 131 
                      >
- 
 
 132 
                        <i className="fa fa-plus mr-2" />
- 
 
 133 
                        Agregar
- 
 
 134 
                      </label>
- 
 
 135 
                    )}
- 
 
 136 
                    <label
- 
 
 137 
                      className="d-flex align-items-center"
- 
 
 138 
                      onClick={() =>
- 
 
 139 
                        getData({
- 
 
 140 
                          url: table_link,
- 
 
 141 
                          params: {
- 
 
 142 
                            search: search,
- 
 
 143 
                            length: dataLength,
- 
 
 144 
                            page: pages.current,
- 
 
 145 
                          },
- 
 
 146 
                        })
- 
 
 147 
                      }
- 
 
 148 
                      style={{ cursor: "pointer" }}
- 
 
 149 
                    >
- 
 
 150 
                      <i className="fa fa-refresh mr-2" />
- 
 
 151 
                      Actualizar
- 
 
 152 
                    </label>
- 
 
 153 
                  </div>
- 
 
 154 
                  <div className="row justify-content-between align-items-center">
- 
 
 155 
                    <LengthFilter
- 
 
 156 
                      onChange={(e) => setDataLength(e.target.value)}
- 
 
 157 
                    />
- 
 
 158 
                    <SearchInput onChange={(e) => setSearch(e.target.value)} />
- 
 
 159 
                  </div>
- 
 
 160 
                </Card.Header>
- 
 
 161 
                <Card.Body>
- 
 
 162 
                  <div className="table-responsive">
- 
 
 163 
                    <Table data={items} headers={headers} setData={handleSort}>
- 
 
 164 
                      {() =>
- 
 
 165 
                        items.map((item, index) => (
- 
 
 166 
                          <TableRow
- 
 
 167 
                            key={index}
- 
 
 168 
                            item={item}
- 
 
 169 
                            editOptions={{
- 
 
 170 
                              permission: permisions.allowEdit,
- 
 
 171 
                              icon: (value) => (
- 
 
 172 
                                <i
- 
 
 173 
                                  className="fa fa-pencil cursor-pointer"
- 
 
 174 
                                  onClick={() => handleEdit(value)}
- 
 
 175 
                                />
- 
 
 176 
                              ),
- 
 
 177 
                            }}
- 
 
 178 
                            deleteOptions={{
- 
 
 179 
                              permission: permisions.allowDelete,
- 
 
 180 
                              icon: (value) => (
- 
 
 181 
                                <i
- 
 
 182 
                                  className="fa fa-trash  cursor-pointer"
- 
 
 183 
                                  onClick={() => handleDelete(value)}
- 
 
 184 
                                />
- 
 
 185 
                              ),
- 
 
 186 
                            }}
- 
 
 187 
                          />
- 
 
 188 
                        ))
- 
 
 189 
                      }
- 
 
 190 
                    </Table>
- 
 
 191 
                  </div>
- 
 
 192 
                  <div className="row justify-content-between align-items-center">
- 
 
 193 
                    <p className="mb-0">
- 
 
 194 
                      {`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
- 
 
 195 
                    </p>
- 
 
 196 
                    <TablePagination
- 
 
 197 
                      onDecrement={() =>
- 
 
 198 
                        setPages({ ...pages, current: pages.current - 1 })
- 
 
 199 
                      }
- 
 
 200 
                      onIncrement={() =>
- 
 
 201 
                        setPages({ ...pages, current: pages.current + 1 })
- 
 
 202 
                      }
- 
 
 203 
                      totalPages={pages.last}
- 
 
 204 
                      currentPage={pages.current}
- 
 
 205 
                    />
- 
 
 206 
                  </div>
- 
 
 207 
                </Card.Body>
- 
 
 208 
              </Card>
- 
 
 209 
            </div>
- 
 
 210 
          </div>
- 
 
 211 
        </div>
- 
 
 212 
      </section>
- 
 
 213 
      <DeleteModal
- 
 
 214 
        url={deleteLink}
- 
 
 215 
        isOpen={showDeleteModal}
- 
 
 216 
        closeModal={() => setShowDeleteModal(false)}
- 
 
 217 
        title="¿Está seguro de borrar esta vacante?"
- 
 
 218 
        onComplete={() =>
- 
 
 219 
          setItems(
- 
 
 220 
            items.filter((item) => item.actions.link_delete !== deleteLink)
- 
 
 221 
          )
- 
 
 222 
        }
- 
 
 223 
        message="Vacante eliminada"
- 
 
 224 
      />
- 
 
 225 
    </>
- 
 
 226 
  );
- 
 
 227 
};