Untitled
unknown
plain_text
a year ago
12 kB
6
Indexable
Never
import React, {ChangeEvent, useState} from 'react';
import {Button, Card, Col, Container, Form, Row} from 'react-bootstrap';
import {useNavigate} from 'react-router-dom';
import accountApiService from "../../util/services/AccountApiService";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const CreateAccount = () => {
document.title = "Create Account | Toner eCommerce + Admin React Template";
const [account_code, setAccountCode] = useState("");
const [first_name, setFirstName] = useState("");
const [last_name, setLastName] = useState("");
const [email, setEmail] = useState("");
const [company, setCompany] = useState("");
const [address, setAddress] = useState("");
const [country, setCountry] = useState("");
const [city, setCity] = useState("");
const [tel, setTel] = useState("");
const [status, setStatus] = useState("");
const [role_id, setRoleId] = useState("");
const [user_id, setUserId] = useState("");
const [lang, setLang] = useState("");
const [created_at, setCreatedat] = useState(new Date());
const [updated_at, setUpdatedat] = useState(new Date());
const [active, setActive] = useState("Y");
const [mobile, setMobile] = useState("");
const navigate = useNavigate();
const handleCancel = () => {
setAccountCode("");
setFirstName("");
setLastName("");
setEmail("");
navigate("/accounts");
};
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
console.log(e.target.value);
switch (name) {
case "account_code":
setAccountCode(value);
break;
case "first_name":
setFirstName(value);
break;
case "last_name":
setLastName(value);
break;
case "email":
setEmail(value);
break;
case "company":
setCompany(value);
break;
case "address":
setAddress(value);
break;
case "country":
setCountry(value);
break;
case "city":
setCity(value);
break;
case "tel":
setTel(value);
break;
case "status":
setStatus(value);
break;
case "role_id":
setRoleId(value);
break;
case "user_id":
setUserId(value);
break;
case "lang":
setLang(value);
break;
case "mobile":
setMobile(value);
break;
case "active":
setActive(value);
break;
default:
break;
}
};
const handleSubmit =() => {
const formData = {
account_code: account_code,
first_name: first_name,
last_name: last_name ,
email:email,
country: country,
address: address,
city: city ,
company:company,
tel: tel,
status: status,
role_id: 7 ,
user_id:10,
lang:lang,
created_at:created_at,
mobile:mobile,
updated_at:updated_at,
}
accountApiService.saveAccount(formData).then(res_acc => {
navigate("/accounts");
//console.log(res_acc.data)
}).catch(error => {
toast.error('an error has occured', {
position:"top-right",
autoClose: 500
})
console.error("an error has occured", error);
});
}
return (
<React.Fragment>-
<div className="page-content">
<Container fluid={true}>
<ToastContainer />
<Card>
<Card.Header>
<div className="d-flex">
<h5 className="card-title mb-1">Add Account</h5>
</div>
</Card.Header>
<Card.Body>
<form autoComplete="off" className="needs-validation createCategory-form" id="createCategory-form" noValidate onSubmit={handleSubmit}>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-name-input">Account Code</Form.Label>
<Form.Control type="text" id="manufacturer-name-input" name='account_code'
placeholder="Enter account code " onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input">First Name </Form.Label>
<Form.Control type="text" id="manufacturer-brand-input" name='first_name'
placeholder="Enter first name" onChange={handleInputChange}/>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-name-input"> Last Name</Form.Label>
<Form.Control type="text" id="manufacturer-name-input" name='last_name'
placeholder="Enter last name" onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> Email </Form.Label>
<Form.Control type="text" id="manufacturer-brand-input" name='email'
placeholder="Enter email" onChange={handleInputChange}/>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-name-input"> Company</Form.Label>
<Form.Control type="text" id="manufacturer-name-input" name='company'
placeholder="Enter company " onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> Address </Form.Label>
<Form.Control type="text" id="manufacturer-brand-input" name='address'
placeholder="Enter address" onChange={handleInputChange}/>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-name-input"> Country </Form.Label>
<Form.Control type="text" id="manufacturer-name-input" name='country'
placeholder="Enter country" onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> City </Form.Label>
<Form.Control type="text" id="manufacturer-brand-input" name='city'
placeholder="Enter city" onChange={handleInputChange}/>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-name-input">Status</Form.Label>
<Form.Control type="text" id="manufacturer-name-input" name='status'
placeholder="Enter last status" onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> Langue </Form.Label>
<Form.Control type="text" id="manufacturer-brand-input" name='lang'
placeholder="Enter lang" onChange={handleInputChange}/>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> tel </Form.Label>
<Form.Control type="number" id="manufacturer-brand-input" name='tel'
placeholder="Enter tel" onChange={handleInputChange}/>
</div>
</Col>
<Col lg={6}>
<div className="mb-3">
<Form.Label htmlFor="manufacturer-brand-input"> Mobile </Form.Label>
<Form.Control type="number" id="manufacturer-brand-input" name='mobile'
placeholder="Enter mobile" onChange={handleInputChange}/>
</div>
</Col>
</Row>
</form>
</Card.Body>
</Card>
<div className="text-end mb-3">
<Button variant='success' type="submit" className="w-sm" onClick={handleSubmit}>Submit</Button>
<Button variant='danger' type="reset" className="w-sm" onClick={handleCancel}>Reset</Button>
</div>
</Container>
</div>
</React.Fragment>
);
}
export default CreateAccount;