Capitulo 28 del Módulo 7 Rol Client | Empresa

➜ EmpresaAll mostrar empresas

Componente empresaAll | Implementación del componente EmpresaAll para mostrar todos los registros de las empresas que estén relacionadas con el usuario que tiene el rol client

CRUD empresaAll

App.jsx

<Route path='empresa' element={<EmpresaAllClient/>} /> 

Config.jsx

    getEmpresaAllClient:()=>axios.get(`${base_api_url}/client/empresa`),

pageclient/EmpresaAll.jsx

import React, { useEffect, useState } from 'react'
import Config from '../Config';
import Sidebar from './Sidebar';
import { Link } from 'react-router-dom';

const EmpresaAll = () => {
    const [empresas, setEmpresas] = useState([])
    
    useEffect(()=>{
        _getEmpresaAll();
    },[]);

    const _getEmpresaAll = async ()=>{
        const response = await Config.getEmpresaAllClient()        
        setEmpresas(response.data)
    }  

  return (
    <div className="container bg-light">
        <div className='row'>
        <Sidebar/>
        <div className="col-sm-9 mt-3 mb-3">
            <div className="card">
                <div className="card-body"> 
                <Link to={'/client/empresa/create'} className='btn btn-primary'>Agregar Empresa</Link>
                   
                    <table className='table'>
                        <thead>
                            <tr>
                            <th>ORDEN</th><th>NAME</th><th>ACCIÓN</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                !empresas ? "...loading " : empresas.map(
                                    (empresa)=>{
                                        return(
                                            <tr key={empresa.id}>
                                                <td>{empresa.orden}</td>
                                                <td>{empresa.nombre}</td>
                                                <td>
                                                    <Link to={`/client/empresa/edit/${empresa.id}`} className='btn btn-primary'>Editar</Link>
                                                </td>
                                            </tr>
                                            
                                        )
                                    }
                                )
                            }                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
  )
}

export default EmpresaAll

 


937 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

¡Qué aprenderás?

tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú