Capítulo 26 – EmpresaUpdate aprobar empresa – Curso ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel Directorio de Empresas

Capitulo 26 ➜ EmpresaUpdate aprobar empresa

Componente EmpresaUpdate

Implementación del componente EmpresaUpdate para aprobar el registro de una empresa por parte del rol admin.

CRUD EmpresaUpdate

App.jsx

<Route path='empresa/edit/:id' element={<EmpresaUpdate/>} />

Config.jsx

getEmpresaById:(id)=>axios.get(`${base_api_url}/admin/empresa/${id}`),
getEmpresaUpdate:(data,id)=>axios.put(`${base_api_url}/admin/empresa/${id}`,data),

pageadmin/EmpresaUpdate.jsx

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

const EmpresaUpdate = () => {
    const navigate = useNavigate()
    const { id } = useParams();
    const [nombre, setNombre] = useState("")    
    const [orden, setOrden] = useState("")
    const [publicado, setPublicado] = useState(false)

   useEffect(()=>{
    const _getEmpresaUpdate = async()=>{
        Config.getEmpresaById(id)
        .then(({data})=>{            
            setNombre(data.nombre)           
            setOrden(data.orden)        
            setPublicado(data.publicado)        
        })
    };
    _getEmpresaUpdate();
   },[])

   const submitUpdate = async (ev)=>{
    ev.preventDefault()
    await Config.getEmpresaUpdate({nombre,orden,publicado},id)
    navigate('/admin/empresa')
   }

  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">
                        <form onSubmit={submitUpdate}>
                            <div className='form-group row'>
                                <div className="mt-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" checked={publicado} onChange={(e)=>setPublicado(!publicado)} type="checkbox" role="switch" id="publicado"/>
                                        <label className="form-check-label" htmlFor='publicado'>Publicado?</label>
                                    </div>
                                </div>
                                <div className="col-sm-8">
                                    <label>Nombre</label>
                                    <input className='form-control' disabled value={nombre} onChange={(e) => setNombre(e.target.value)} type='text'/>
                                </div>
                                <div className="col-sm-4">
                                    <label>Orden</label>
                                    <input className='form-control' value={orden} onChange={(e) => setOrden(e.target.value)} type='number'/>
                                </div>
                            </div>                          
                            
                            <div className="btn-group mt-3">
                                <Link to={-1} className="btn btn-secondary" >← Back </Link>
                                <button type='submit' className="btn btn-primary">Actualizar Empresa</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default EmpresaUpdate

728 visitas

« Capítulo 25 – EmpresaAll mostrar empresas

Capítulo 27 – Panel Client »

{ Curso ReactJS y Laravel Directorio de Empresas }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

Indice

Puesta en escena

1 Presentación 2 Base de datos 3 Instalación de Laravel y React JS

API Rest | BackEnd

4 Modelos y relaciones 5 Rutas y Controladores 6 Roles de Usuarios admin | client 7 Registro de usuarios 8 Login de usuarios 9 Logout de usuarios 10 CRUD User 11 CRUD Categoría 12 CRUD Empresa

Autenticación en React Js

13 Rutas y Layouts 14 AuthUser - Token 15 Registro de usuarios 16 Login de usuarios 17 Logout de usuarios

Rol Admin | User

18 PanelAdmin 19 UserAll mostrar usuarios 20 UserUpdate Aprobación del usuario

Rol Admin | Categoria

21 CategoriaAll mostrar categorias 22 CategoriaStore Agregar una categoría 23 CategoriaUpdate Actualizar Categoría 24 CategoriaDelete Borrar categoría