Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from "react";

import axios from "axios";

import { Card } from "react-bootstrap";

import {

  LengthFilter,

  SearchInput,

  TablePagination,

} from "../../components/TableComponents";

import { addNotification } from "../../../redux/notification/notification.actions";

import { useDispatch } from "react-redux";

import DeleteModal from "../../../shared/DeleteModal";

import Table from "../../../shared/content-table/Table";

import TableRow from "../../../shared/content-table/TableRow";

const headers = [

  { key: "name", label: "Nombre", isSorteable: true },

  { key: "job_description", label: "Descripción de cargo", isSorteable: true },

  { key: "status", label: "Estatus", isSorteable: true },

  { key: "actions", label: "Acciones", isSorteable: false },

];

const MainView = ({

  table_link,

  setActionLink,

  permisions,

  add_link,

  setAction,

}) => {

  const dispatch = useDispatch();

  const [showDeleteModal, setShowDeleteModal] = useState(false);

  const [deleteLink, setDeleteLink] = useState("");

  const [items, setItems] = useState([]);

  const [total, setTotal] = useState(0);

  const [search, setSearch] = useState("");

  const [startItem, setStartItem] = useState(1);

  const [lastItem, setLastItem] = useState(10);

  const [dataLength, setDataLength] = useState(10);

  const [pages, setPages] = useState({

    current: 1,

    last: 1,

  });

  const getData = ({ url = "", params = {} }) => {

    axios

      .get(url, { params: { ...params } })

      .then(({ data }) => {

        if (!data.success) {

          dispatch(

            addNotification({

              style: "danger",

              msg: "Ha ocurrido un error",

            })

          );

        }

        setItems(data.data.items);

        setTotal(data.data.total);

        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) });

      })

      .catch(() =>

        dispatch(

          addNotification({

            style: "danger",

            msg: "Ha ocurrido un error",

          })

        )

      );

  };

  useEffect(() => {

    getData({

      url: table_link,

      params: {

        search: search,

        length: dataLength,

        start: pages.current,

      },

    });

  }, [search, dataLength, pages.current]);

  useEffect(() => {

    if (pages.current > 1) {

      setStartItem(dataLength * (pages.current - 1) + 1);

    } else {

      setStartItem(1);

    }

  }, [pages.current]);

  useEffect(() => {

    if (items) {

      if (startItem > 1) {

        setLastItem(startItem + (items.length - 1));

      } else {

        setLastItem(items.length);

      }

    }

  }, [items]);

  const handleSort = (result) => setItems(result);

  const handleEdit = (url) => {

    setActionLink(url);

    setAction("edit");

  };

  const handleDelete = (url) => {

    setDeleteLink(url);

    setShowDeleteModal(true);

  };

  return (

    <>

      <section className="content">

        <div className="container-fluid">

          <div className="row">

            <div className="col-12">

              <Card>

                <Card.Header>

                  <div

                    className="row justify-content-end"

                    style={{ gap: "10px" }}

                  >

                    {permisions.allowAdd && (

                      <label

                        className="d-flex align-items-center"

                        onClick={() => {

                          setActionLink(add_link);

                          setAction("add");

                        }}

                        style={{ cursor: "pointer" }}

                      >

                        <i className="fa fa-plus mr-2" />

                        Agregar

                      </label>

                    )}

                    <label

                      className="d-flex align-items-center"

                      onClick={() =>

                        getData({

                          url: table_link,

                          params: {

                            search: search,

                            length: dataLength,

                            page: pages.current,

                          },

                        })

                      }

                      style={{ cursor: "pointer" }}

                    >

                      <i className="fa fa-refresh mr-2" />

                      Actualizar

                    </label>

                  </div>

                  <div className="row justify-content-between align-items-center">

                    <LengthFilter

                      onChange={(e) => setDataLength(e.target.value)}

                    />

                    <SearchInput onChange={(e) => setSearch(e.target.value)} />

                  </div>

                </Card.Header>

                <Card.Body>

                  <div className="table-responsive">

                    <Table data={items} headers={headers} setData={handleSort}>

                      {() =>

                        items.map((item, index) => (

                          <TableRow

                            key={index}

                            item={item}

                            editOptions={{

                              permission: permisions.allowEdit,

                              icon: (value) => (

                                <i

                                  className="fa fa-pencil cursor-pointer"

                                  onClick={() => handleEdit(value)}

                                />

                              ),

                            }}

                            deleteOptions={{

                              permission: permisions.allowDelete,

                              icon: (value) => (

                                <i

                                  className="fa fa-trash  cursor-pointer"

                                  onClick={() => handleDelete(value)}

                                />

                              ),

                            }}

                          />

                        ))

                      }

                    </Table>

                  </div>

                  <div className="row justify-content-between align-items-center">

                    <p className="mb-0">

                      {`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}

                    </p>

                    <TablePagination

                      onDecrement={() =>

                        setPages({ ...pages, current: pages.current - 1 })

                      }

                      onIncrement={() =>

                        setPages({ ...pages, current: pages.current + 1 })

                      }

                      totalPages={pages.last}

                      currentPage={pages.current}

                    />

                  </div>

                </Card.Body>

              </Card>

            </div>

          </div>

        </div>

      </section>

      <DeleteModal

        url={deleteLink}

        isOpen={showDeleteModal}

        closeModal={() => setShowDeleteModal(false)}

        title="¿Está seguro de borrar esta vacante?"

        onComplete={() =>

          setItems(

            items.filter((item) => item.actions.link_delete !== deleteLink)

          )

        }

        message="Vacante eliminada"

      />

    </>

  );

};

export default MainView;