import React, { useState } from ‘react’;
import {Link, Redirect} from ‘react-router-dom’;
import Navbar from ‘…/Components/Navbar/navbar’;
import ‘./novocliente.css’;
import firebase from ‘…/Config/firebase’;
function NovoCliente(){
const [empresa, setEmpresa] = useState(‘’);
const [qlf, setQlf] = useState(‘’);
const [tag, setTag] = useState(‘’);
const [equipamento, setEquipamento] = useState(‘’);
const [sistema, setSistema] = useState(‘’);
const [versao, setVersao] = useState(‘’);
const [statu, setStatu] = useState(‘’);
const [mensagem, setMensagem] = useState('');
const [sucesso, setSucesso] = useState('N');
const db = firebase.firestore();
function CadastrarCliente(){
if (empresa.length === 0){
setMensagem('Informe a empresa');
}
else if (sistema.length === 0){
setMensagem('Informe o sistema');
}
else if (sistema === 0){
setMensagem('Informe o sistema');
}
else{
db.collection('clientes').add({
empresa: empresa,
qlf: qlf,
tag: tag,
equipamento: equipamento,
sistema: sistema,
versao: versao,
statu:statu,
}).then(() => {
setMensagem('');
setSucesso('S');
}).catch((erro) =>{
setMensagem(erro);
setSucesso('N');
})
}
}
return <div>
<Navbar/>
<div className="container-fluid titulo">
<div className="offset-lg-3 col-lg-6">
<h1>Novo Cliente</h1>
<form>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Empresa</label>
<input onChange={(e) => setEmpresa(e.target.value)} value={empresa} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">QLF-VSC</label>
<input onChange={(e) => setQlf(e.target.value)} value={qlf} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">tag</label>
<input onChange={(e) => setTag(e.target.value)} value={tag} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Equipamento</label>
<input onChange={(e) => setEquipamento(e.target.value)} value={equipamento} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Sistema</label>
<input onChange={(e) => setSistema(e.target.value)} value={sistema} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Versão</label>
<input onChange={(e) => setVersao(e.target.value)} value={versao} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Status</label>
<input onChange={(e) => setStatu(e.target.value)} value={statu} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="text-center">
<Link to="/app/home" className="btn btn-outline-primary btn-acao">Cancelar</Link>
<button onClick={CadastrarCliente} type="button" className="btn btn-primary btn-acao">Salvar</button>
</div>
{mensagem.length > 0 ? <div className="alert alert-danger mt-2" role="alert">{mensagem}</div> : null}
{sucesso === 'S' ? <Redirect to='/app/home' /> : null}
</form>
</div>
</div>
</div>;
}
export default NovoCliente;