➜ EmpresaStore Agregar empresa
Componente EmpresaStore | Implementación del componente EmpresaStore que permita agregar una nueva empresa al usuario con el rol client.
EmpresaStore
...
import EmpresaStoreClient from './pageclient/EmpresaStore';
...
<Route path='empresa/create' element={<EmpresaStoreClient/>} />
...
Config.jsx
getEmpresaStoreClient:(data)=>axios.post(`${base_api_url}/client/empresa`,data),
pageclient/EmpresaStore.jsx
import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import Config from '../Config'
import Sidebar from './Sidebar'
import Select from '../components/Select'
const EmpresaStore = () => {
const [nombre, setNombre] = useState("")
const [email, setEmail] = useState("")
const [orden, setOrden] = useState(0)
const [descripcion, setDescripcion] = useState("")
const [telefono, setTelefono] = useState("")
const [direccion, setDireccion] = useState("")
const [website, setWebsite] = useState("")
const [facebook, setFacebook] = useState("")
const [youtube, setYoutube] = useState("")
const [tiktok, setTiktok] = useState("")
const [urlfoto, setUrlfoto] = useState("")
const [categoria_id, setCategoria_id] = useState()
const navigate = useNavigate()
const handleInputChange= async(e) =>{
let files = e.target.files
let reader = new FileReader();
reader.readAsDataURL(files[0])
reader.onload = (e)=>{
setUrlfoto(e.target.result)
}
}
const getCategoriaId = (v) =>{
setCategoria_id(v)
}
const submitStore = async(e) =>{
e.preventDefault();
await Config.getEmpresaStoreClient({nombre,email,telefono,direccion,website,facebook,youtube,tiktok,descripcion,orden,urlfoto,categoria_id})
navigate('/client/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={submitStore}>
<div className='form-group row'>
<div className="col-sm-6">
<label>Nombre</label>
<input className='form-control' value={nombre} onChange={(e) => setNombre(e.target.value)} type='text'/>
</div>
<div className="col-sm-3">
<label>Email</label>
<input className='form-control' value={email} onChange={(e) => setEmail(e.target.value)} type='email'/>
</div>
<div className="col-sm-3">
<label>Teléfono</label>
<input className='form-control' value={telefono} onChange={(e) => setTelefono(e.target.value)} type='tel'/>
</div>
</div>
<div className="form-group row mt-3">
<div className="col-sm-6">
<label>Dirección</label>
<input className='form-control' value={direccion} onChange={(e) => setDireccion(e.target.value)} type='text'/>
</div>
<div className="col-sm-3">
<label>Orden</label>
<input className='form-control' value={orden} onChange={(e) => setOrden(e.target.value)} type='number'/>
</div>
<div className="col-sm-3">
<label>Categoria</label>
<Select selected={getCategoriaId} />
</div>
</div>
<div className='form-group row mt-3'>
<div className="col-sm-3">
<label>Website</label>
<input className='form-control' value={website} onChange={(e) => setWebsite(e.target.value)} type='url'/>
</div>
<div className="col-sm-3">
<label>Facebook</label>
<input className='form-control' value={facebook} onChange={(e) => setFacebook(e.target.value)} type='url'/>
</div>
<div className="col-sm-3">
<label>Youtube</label>
<input className='form-control' value={youtube} onChange={(e) => setYoutube(e.target.value)} type='url'/>
</div>
<div className="col-sm-3">
<label>Tiktok</label>
<input className='form-control' value={tiktok} onChange={(e) => setTiktok(e.target.value)} type='url'/>
</div>
</div>
<div className='mt-3'>
<label>Descripción:</label>
<textarea className='form-control' value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
</div>
<div className='mt-3'>
<label>Imagen:</label>
<input className="form-control" type="file" onChange={(e) => handleInputChange(e)} />
</div>
<div className="btn-group mt-3">
<Link to={-1} className="btn btn-secondary" >← Back </Link>
<button type='submit' className="btn btn-primary">Crear empresa</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
export default EmpresaStore
1053 visitas
Capítulo 30 – EmpresaUpdate Actualizar Empresa »
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
