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;