Skip to content

A
Aqbits Trace Code
Commit b984676d authored by Mai Thanh Cong's avatar Mai Thanh Cong
Browse files
Options

create page add profile

parent de20876e
Show whitespace changes
Inline Side-by-side
Showing with 394 additions and 21 deletions
src/components/Profile/AddProfile.js
View file @ b984676d
import React, { useState } from "react";
import { useHistory } from "react-router";
import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText } from "reactstrap";
import { v4 as uuidv4 } from 'uuid';
import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText, FormFeedback } from "reactstrap";
// core components
import MainBanner from "../Generals/MainBanner.js";
......@@ -9,12 +10,14 @@ import SimpleFooter from "../Footers/SimpleFooter.js";
import AmazingTeam from "../Footers/AmazingTeam.js";
import dummyData from "../../data/index.json";
import { validatePhoneNumber } from "constans/index.js";
const AddProfile = () => {
const [profileName, setProfileName] = useState("");
const [profileCode, setProfileCode] = useState("");
const [logo, setLogo] = useState({});
const [phoneNumber, setPhoneNumber] = useState("");
const [address, setAddress] = useState("");
const [productName, setProductName] = useState("");
const [profileAddress, setProfileAddress] = useState("");
const [validPhoneNumber, setValidPhoneNumber] = useState(false);
const history = useHistory();
......@@ -23,14 +26,47 @@ const AddProfile = () => {
history.push("/");
}
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
const onHandleAddNewProfile = async (event) => {
event.preventDefault();
console.log("add new");
if(validatePhoneNumber(phoneNumber)){
const getTime = new Date().getTime();
const params = {
id: uuidv4(),
code: profileCode,
name: profileName,
logo: "",
phone_number: phoneNumber,
address: profileAddress,
created_at: getTime,
qr_code: ""
}
console.log("params", params);
dummyData.data.push(params);
history.push("/");
setValidPhoneNumber(false);
}else {
setValidPhoneNumber(true);
}
}
console.log("validPhoneNumber", validPhoneNumber);
return (
<>
<DemoNavbar />
<main>
<MainBanner />
<section className="section pb-0 section-components">
<section className="section section-components">
<Container>
<Form>
<Form onSubmit={onHandleAddNewProfile}>
<FormGroup className="mb-4">
<Label for="profile_name" >Tên doanh nghiệp</Label>
<InputGroup className="mb-4">
......@@ -40,6 +76,7 @@ const AddProfile = () => {
</InputGroupText>
</InputGroupAddon>
<Input
required
placeholder="Tên doanh nghiệp"
type="text"
value={profileName}
......@@ -48,8 +85,25 @@ const AddProfile = () => {
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label for="phone_number" >Số điện thoại</Label>
<Label for="profile_name" >Mã code</Label>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-codepen" />
</InputGroupText>
</InputGroupAddon>
<Input
required
placeholder="Mã code"
type="text"
value={profileCode}
onChange={(e) => setProfileCode(e.target.value)}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label for="phone_number" >Số điện thoại</Label>
<InputGroup className="input-group-alternative mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-phone" />
......@@ -57,10 +111,13 @@ const AddProfile = () => {
</InputGroupAddon>
<Input
placeholder="Số điện thoại"
type="text"
type="number"
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
maxlenght={10}
invalid={validPhoneNumber === true}
/>
<FormFeedback invalid>{validPhoneNumber ? "Phải có 10 chữ số bắt đầu bằng chữ số 0" : false}</FormFeedback>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
......@@ -74,12 +131,12 @@ const AddProfile = () => {
<Input
placeholder="Địa chỉ"
type="text"
value={address}
onChange={(e) => setAddress(e.target.value)}
value={profileAddress}
onChange={(e) => setProfileAddress(e.target.value)}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
{/* <FormGroup className="mb-4">
<Label for="address" >Tên sản phẩm</Label>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
......@@ -94,7 +151,7 @@ const AddProfile = () => {
onChange={(e) => setProductName(e.target.value)}
/>
</InputGroup>
</FormGroup>
</FormGroup> */}
<FormGroup row>
{/* <Col>
<Label for="file-logo" sm={2}>Logo</Label>
......@@ -110,18 +167,18 @@ const AddProfile = () => {
<Button
color="info"
type="button"
className="btn-1 w-20"
className="btn-1"
onClick={onHandleBack}
>
BACK
Quay lại
</Button>
<Button
color="primary"
type="submit"
className="btn-1 w-20"
className="btn-1"
>
{/* {state.profileId ? "EDIT" : "ADD"} */}
ADD
Thêm mới
</Button>
</div>
</Form>
......
src/views/examples/DetailProfile.js → src/components/Profile/DetailProfile.js
View file @ b984676d
......@@ -47,7 +47,7 @@ import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "data/index.json";
// index page sections
import Download from "../IndexSections/Download.js";
import Download from "../../views/IndexSections/Download.js";
const DetailProfile = () => {
......
src/components/Profile/SearchProfile.js 0 → 100644
View file @ b984676d
import React, { useState } from "react";
import { useHistory } from 'react-router-dom';
import { FormGroup, Input, InputGroupAddon, InputGroupText, InputGroup, Container, Button, Form } from "reactstrap";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import MainBanner from "components/Generals/MainBanner.js";
import Sologan from "components/Generals/Sologan.js";
import SimpleFooter from "components/Footers/SimpleFooter";
import dummyData from "../../data/index.json";
import { ProfileTable } from "views/IndexSections/Table";
const SearchProfile = () => {
const [searchProfile, setSearchProfile] = useState("");
const history = useHistory();
const handleChangeSearch = (event) => {
setSearchProfile(event.target.value);
}
const onHandleSearch = (event) => {
event.preventDefault();
if (!searchProfile) return;
const nameCode = dummyData.data.map(item => item.code);
console.log("nameCode", nameCode);
const checkSearch = nameCode.indexOf(searchProfile);
console.log("checkSearch", checkSearch);
if (checkSearch !== -1) {
history.push({
pathname: `/profile/${searchProfile}`,
state: { code_name: searchProfile }
});
} else {
history.push("/not-found");
}
}
return (
<>
<DemoNavbar />
<main>
<MainBanner />
<section className="section pb-0 section-components">
<Container className="mb-5">
<h3 className="h4 text-success mb-4 font-weight-bold text-center">Tra cứu thông tin</h3>
<Form className="justify-content-center" onSubmit={onHandleSearch}>
<FormGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Tìm kiếm"
type="text"
value={searchProfile}
onChange={handleChangeSearch}
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button className="btn-1" color="primary" type="submit">
Tìm kiếm
</Button>
</div>
</Form>
</Container>
</section>
<section className="section">
<ProfileTable dummyData={dummyData.data} />
</section>
<Sologan />
</main>
<SimpleFooter />
</>
);
}
export default SearchProfile;
src/constans/index.js
View file @ b984676d
......@@ -4,3 +4,17 @@ export const formatDateTime = (timeDate) => {
let newDate = moment(new Date(Number(timeDate))).format("DD/MM/YYYY");
return newDate.toString();
}
export const profileFormatDateTime = (timeDate) => {
let newDate = moment(new Date(Number(timeDate))).format("YYYY/MM/DD HH:mm:ss");
return newDate.toString();
}
export const validatePhoneNumber = (phoneNumber) => {
const regExp = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phoneNumber.match(regExp)){
return true;
}else {
return false;
}
}
src/data/index.json
View file @ b984676d
......@@ -60,6 +60,67 @@
]
}
]
},
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"code": "FPT",
"name": "Tập đoàn FPT",
"logo": "/image/logo/kis-academy.jpg",
"address": "Khu công nghệ cao Láng Hòa Lạc",
"phone_number": "024 2222222",
"qr_code": "/image/qrcode/qr-code.png",
"created_at": 1624870109921,
"profile_product": [
{
"trace_code": "VNC12345678",
"product_id": "o00h3maq-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm càng xanh loại 1",
"cost": "Liên hệ",
"origin": "Việt Nam",
"image": "/image/product/tom-su.jpg",
"description": "Tôm càng xanh là loại thủy sản sống được cả ở vùng nước lợ và nước ngọt",
"growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
"product_chain_diary": [
{
"company": "Công ty Vinashin",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"company": "Công ty Vinashin",
"description": "Thu hoạch",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Thu mua, nhập kho đông lạnh Cần Thơ",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Trưng bày siêu thị",
"date": 1627014341333
},
{
"company": "Công ty Coopmart",
"description": "Bán cho người tiêu dùng",
"date": 1627619141213
}
],
"product_certification": [
{
"certification_information": "Chứng nhận certificate 1",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
},
{
"certification_information": "Chứng nhận certificate 2",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
}
]
}
]
}
]
}
src/index.js
View file @ b984676d
......@@ -31,14 +31,15 @@ import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js"
import DetailProfile from "views/examples/DetailProfile.js"
import NotFound from "views/examples/NotFound.js"
import DetailProfile from "./components/Profile/DetailProfile.js"
import SearchProfile from "./components/Profile/SearchProfile.js";
// import { Routes } from "./reoutes";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <Index {...props} />} />
<Route path="/" exact render={props => <SearchProfile {...props} />} />
<Route
path="/profile/add"
exact
......
src/views/IndexSections/Table.js 0 → 100644
View file @ b984676d
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
import { Table, Card, CardHeader, Row, Col, Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink } from "reactstrap";
import { profileFormatDateTime } from "constans";
export const ProfileTable = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const history = useHistory();
// const dispatch = useDispatch();
const onHandleClickAdd = () => {
history.push("/profile/add");
};
const onHandleClickEdit = async (profileId) => {
let detailProfile = props.dummyData.filter(item => item.id === profileId);
history.push({
// pathname: "Routes.DetailProfile.path",
state: { profileId, detailProfile }
});
}
const onHandleClickDelete = (profileId) => {
// dispatch(props.onDeleteProfile(profileId));
}
useEffect(() => {
// dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
}, []);
const items = [];
const totalItem = "123";
let pageSize = totalItem / 10;
const getPageItem = () => {
let number = 1;
if(pageSize > 1){
number = Math.ceil(pageSize);
}else {
number = 1;
}
return number;
}
for(let number=1; number <= getPageItem(); number++){
// const isItemActive = props.currentPage === number;
const handlePaginationChange = () => {
// dispatch(props.onLoadListProfile( { currentPage: number, limit: props.limit } ));
// dispatch(props.onLoadPreviousPage(number));
};
items.push(
<PaginationItem key={number} onClick={handlePaginationChange}>
{number}
</PaginationItem>
);
}
const TableRow = (props) => {
const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
const productName = profile_product ? profile_product.map(item => item.name) : "";
return (
<tr>
<th scope="row">{""}</th>
<td>{name}</td>
<td>{logo}</td>
<td>{phone_number}</td>
<td>{address}</td>
<td>{productName}</td>
<td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
<td>{qr_code}</td>
<td key={id}>
<Dropdown size="sm" isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Menu
</DropdownToggle>
<DropdownMenu>
<DropdownItem >
<i className="fa fa-plus" />{"Thêm sản phẩm"}
</DropdownItem>
<DropdownItem onClick={() => onHandleClickEdit(id)} >
<i className="fa fa-pencil" />{"Sửa"}
{/* <FontAwesomeIcon icon={faEdit} className="me-2" /> {t('common.table.edit')} */}
</DropdownItem>
<DropdownItem className="text-danger" onClick={() => onHandleClickDelete(id)}>
<i className="fa fa-trash" />{"Xóa"}
{/* <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> {t('common.table.remove')} */}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</td>
</tr>
);
};
console.log("props.dummyData", props.dummyData);
return (
props.dummyData && props.dummyData.length > 0 ?
<Card className="mx-5">
<CardHeader>
<Row className="align-items-center">
<Col>
<h5>{"Thông tin doanh nghiệp"}</h5>
</Col>
<Col className="text-right">
<Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => onHandleClickAdd()}>{"Tạo mới doanh nghiệp"}</Button>
</Col>
</Row>
</CardHeader>
<Table striped responsive>
<thead>
<tr >
<th>{"STT"}</th>
<th>{"Tên doanh nghiệp"}</th>
<th>{"Logo"}</th>
<th>{"Số điện thoại"}</th>
<th>{"Địa chỉ"}</th>
<th>{"Tên sản phẩm"}</th>
<th>{"Ngày tạo"}</th>
<th>{"QR code"}</th>
<th></th>
</tr>
</thead>
<tbody>
{props.dummyData ? props.dummyData.map(profile => <TableRow key={`page-visit-${profile.id}`} {...profile} />) : []}
</tbody>
</Table>
{/* <Card.Footer>
<Nav>
<Pagination className="mb-2 mb-lg-0">
<Pagination.Prev disabled={props.currentPage === 1} onClick={onPrevItem}>
{t('common.table.previous')}
</Pagination.Prev>
{items}
<Pagination.Next disabled={props.currentPage === Math.ceil(pageSize)} onClick={() => onNextItem()}>
{t('common.table.next')}
</Pagination.Next>
</Pagination>
</Nav>
<small className="fw-bold">
{t('common.table.showing', {
'current': props.dummyData.length,
'total': totalItem
})}
</small>
</Card.Footer> */}
</Card>
: <div></div>
);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment