Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

import React, { useState, lazy } from 'react'

import DeleteModal from '../../../shared/DeleteModal'

import Table from '../../../shared/table/Table'

import TableFilters from '../../../shared/table/TableFilters'

const EditModal = lazy(import('../../groups-types/view/EditModal'))

const SkillsView = ({ linkTable, addUrl, allowAdd, allowEdit, allowDelete }) => {

	const [skills, setSkills] = useState({})

	const [selectItem, setSelectItem] = useState(null)

	const [actionLink, setActionLink] = useState(addUrl)

	const [showModal, setShowModal] = useState(false)

	const [showDeleteModal, setShowDeleteModal] = useState(false)

	const headers = [

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

		{ key: 'status', label: 'Activo', isSorteable: false },

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

	]

	const getData = (params) => {

		axios.get(linkTable, { params: params })

			.then(({ data }) => {

				if (data.success) setSkills(data.data)

			})

			.catch((err) => console.log(err))

	}

	const closeModal = () => {

		setShowModal(false)

	}

	const closeDeleteModal = () => {

		setShowDeleteModal(false)

	}

	const editItem = (item) => {

		setSelectItem(item)

		setActionLink(item.actions.link_edit)

		setShowModal(true)

	}

	const deleteItem = (item) => {

		setActionLink(item.actions.link_delete)

		setShowDeleteModal(true)

	}

	const addItem = () => {

		setActionLink(addUrl)

		setShowModal(true)

	}

	return (

		<>

			<section className="content">

				<section className="content-header">

					<h1>Habilidades</h1>

				</section>

				<section className="container-fluid">

					<TableFilters data={skills} getData={getData} onAdd={addItem} allowAdd={allowAdd}>

						{skills.items &&

							function () {

								return (

									<Table

										data={skills.items}

										onEdit={editItem}

										onDelete={deleteItem}

										headers={headers}

										allowEdit={allowEdit}

										allowDelete={allowDelete}

									/>

								)

							}()}

					</TableFilters>

				</section>

			</section>

			{showModal &&

				<EditModal

					title='Habilidades'

					isOpen={showModal}

					currentItem={selectItem}

					url={actionLink}

					onComplete={() => getData()}

					onClose={() => {

						if (selectItem) setSelectItem(null)

						closeModal()

					}}

				/>}

			<DeleteModal

				isOpen={showDeleteModal}

				closeModal={closeDeleteModal}

				url={actionLink}

				onComplete={getData}

			/>

		</>

	)

}

export default SkillsView