Skip to content

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

create table product diary

parent a76888b1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 566 deletions
package-lock.json
View file @ b04f6b72
......@@ -12330,6 +12330,16 @@
"resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
"integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
},
"qrcode.react": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.1.tgz",
"integrity": "sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==",
"requires": {
"loose-envify": "^1.4.0",
"prop-types": "^15.6.0",
"qr.js": "0.0.0"
}
},
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
......
src/HomePage.js
View file @ b04f6b72
......@@ -47,52 +47,5 @@ export default () => (
<RouteWithLoader exact path="/profile/:code" component={DetailProfile} />
<RouteWithLoader exact path="/trace-code/:trace" component={Tracecode} />
<RouteWithLoader exact path="/not-found" component={NotFound} />
{/* <Route path="/profile" exact render={props => <SearchProfile {...props} />} />
<Route
path="/profile/add"
exact
render={props => <AddProfile {...props} />}
/>
<Route
path="/profile/add-product"
exact
render={props => <AddProduct {...props} />}
/>
<Route
path="/trace-code/:trace"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path="/profile/:code"
exact
render={props => <DetailProfile {...props} />}
/>
<Route
path="/not-found"
exact
render={props => <NotFound {...props} />}
/>
<Route
path="/landing-page"
exact
render={props => <Landing {...props} />}
/>
<Route
path="/signin"
exact
render={props => <Signin {...props} />} />
<Route
path="/profile-page"
exact
render={props => <Profile {...props} />}
/>
<Route
path="/signup"
exact
render={props => <Signup {...props} />}
/>
<Redirect to="/" /> */}
</Switch>
);
src/components/Generals/MainBanner.js
View file @ b04f6b72
/*!
=========================================================
* Argon Design System React - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
import { Link } from "react-router-dom";
// JavaScript plugin that hides or shows a component based on your scroll
import Headroom from "headroom.js";
// reactstrap components
import {
Button,
UncontrolledCollapse,
DropdownMenu,
DropdownItem,
DropdownToggle,
UncontrolledDropdown,
Media,
NavbarBrand,
Navbar,
NavItem,
NavLink,
Nav,
Container,
Row,
Col,
UncontrolledTooltip
} from "reactstrap";
class MainBanner extends React.Component {
render() {
return (
<>
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-100">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="10">
<h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dùng
</h1>
<p className="lead text-white">
Chúng tôi là công ty công nghệ cung cấp các giải pháp số hóa sản phẩm, dịch vụ cho doanh nghiệp dựa trên mã Barcode và QR code<br/> Được tin dùng bởi nhiều tổ chức và doanh nghiệp
</p>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
{/* 1st Hero Variation */}
// reactstrap components
import { Container, Row, Col } from "reactstrap";
const MainBanner = () => {
return (
<>
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-100">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
</>
);
}
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="10">
<h1 className="display-3 text-white">
Mạng truy xuất sản phẩm và cung ứng
</h1>
<p className="lead text-white">
Chúng tôi là công ty công nghệ cung cấp các giải pháp số hóa sản phẩm, dịch vụ cho doanh nghiệp dựa trên mã Barcode và QR code<br /> Được tin dùng bởi nhiều tổ chức và doanh nghiệp
</p>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
{/* 1st Hero Variation */}
</div>
</>
);
}
export default MainBanner;
src/components/Profile/AddDiary.js 0 → 100644
View file @ b04f6b72
import React from "react";
const AddDiary = () => {
return (
<div></div>
);
}
export default AddDiary;
\ No newline at end of file
src/components/Profile/AddProduct.js
View file @ b04f6b72
import React, { useState } from "react";
import { useHistory } from "react-router";
import { v4 as uuidv4 } from 'uuid';
import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText } from "reactstrap";
import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Row, Col, FormText } from "reactstrap";
// core components
import MainBanner from "../Generals/MainBanner.js";
import DemoNavbar from "../Navbars/DemoNavbar.js";
import dummyData from "../../data/index.json";
import { ProductDiaryTable } from "../../views/IndexSections/Table.js";
const AddProduct = () => {
const history = useHistory();
const state = { ...history.location.state };
const profileId = state.profileId;
const productId = state.productId;
const detailProduct = productId ? state.detailProduct : {};
const detailProduct = productId ? state.detailProduct[0] : {};
console.log("detailProduct", detailProduct);
const [productName, setProductName] = useState(productId ? detailProduct[0].name : "");
const [traceCode, setTraceCode] = useState(productId ? detailProduct[0].trace_code : "");
const [cost, setCost] = useState(productId ? detailProduct[0].cost : "");
const [origin, setOrigin] = useState(productId ? detailProduct[0].origin : "");
const [productImage, setProductImage] = useState(productId ? detailProduct[0].image : "");
const [description, setDescription] = useState(productId ? detailProduct[0].description : "");
const [growingConditions, setGrowingConditions] = useState(productId ? detailProduct[0].growing_conditions : "");
const [productName, setProductName] = useState(productId ? detailProduct.name : "");
const [traceCode, setTraceCode] = useState(productId ? detailProduct.trace_code : "");
const [cost, setCost] = useState(productId ? detailProduct.cost : "");
const [origin, setOrigin] = useState(productId ? detailProduct.origin : "");
const [productImage, setProductImage] = useState(productId ? detailProduct.image : "");
const [description, setDescription] = useState(productId ? detailProduct.description : "");
const [growingConditions, setGrowingConditions] = useState(productId ? detailProduct.growing_conditions : "");
const onHandleBack = () => {
history.push("/profile/add");
......@@ -55,6 +56,13 @@ const AddProduct = () => {
history.push("/profile/add");
}
const onHandleClickAddProductDiary = () => {
history.push({
pathname: "/profile/add-product-diary",
state: { profileId }
});
}
return (
<>
<DemoNavbar />
......@@ -63,6 +71,14 @@ const AddProduct = () => {
<section className="section section-components">
<Container>
<Form onSubmit={onHandleAddProduct}>
<Row className="align-items-center">
<Col>
<h5 className="mb-3">{productId ? "Sửa thông tin sản phẩm" : "Thêm mới sản phẩm"}</h5>
</Col>
<Col className="text-right">
<Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => onHandleClickAddProductDiary()}>{"Thêm nhật kí sản phẩm"}</Button>
</Col>
</Row>
<FormGroup>
<Label for="product-name">Tên sản phẩm</Label>
<InputGroup className="mb-4">
......@@ -167,7 +183,10 @@ const AddProduct = () => {
</FormText>
</Col>
</FormGroup>
<div className="d-flex justify-content-between">
<div className="mt-3">
<ProductDiaryTable listProductDiary={detailProduct.product_chain_diary} />
</div>
<div className="d-flex justify-content-between mt-3">
<Button
color="info"
type="button"
......
src/components/Profile/DetailProfile.js
View file @ b04f6b72
......@@ -3,7 +3,7 @@ import { connect, useDispatch } from "react-redux";
import { useHistory } from 'react-router-dom';
import { Card, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap";
import QRCode from 'react-qr-code';
import QRCode from 'qrcode.react';
// core components
......@@ -12,13 +12,15 @@ import Sologan from "components/Generals/Sologan";
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "../../data/index.json";
import './detail-profile.css';
const DetailProfile = (props) => {
const history = useHistory();
const state = { ...history.location.state };
const code_name = state.code_name;
const listData = props.listProfile.filter(item => item.code === code_name);
const listData = dummyData.data.filter(item => item.code === code_name);
return (
<>
......@@ -33,11 +35,17 @@ const DetailProfile = (props) => {
<Row className="row-grid align-items-center">
<Col md={6} >
<div className="d-flex justify-content-center">
<img
className="px-auto shadow"
alt="..."
src={window.location.origin + data.logo}
top
<QRCode
size={250}
// fgColor="#7f0000"
includeMargin
value={`http://trace.aqbits.net/trace-code/${data.qr_code}`}
imageSettings={{
width: 120,
height: 60,
src: window.location.origin + data.logo,
excavate: true,
}}
/>
</div>
</Col>
......@@ -77,8 +85,18 @@ const DetailProfile = (props) => {
<CardHeader className="h5 mb-3">{product.name}</CardHeader>
<CardBody>
<div className="d-flex justify-content-around">
<img className="mb-3" src={window.location.origin + product.image} alt="product"/>
<QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} />
<QRCode
size={250}
// fgColor="#7f0000"
includeMargin
value={`http://trace.aqbits.net/trace-code/${product.trace_code}`}
imageSettings={{
width: 120,
height: 80,
src: window.location.origin + product.image,
excavate: true,
}}
/>
</div>
<h5>Mô tả</h5>
<CardText>{product.description}</CardText>
......
src/components/Profile/SearchProfile.js
View file @ b04f6b72
......@@ -13,6 +13,8 @@ import SimpleFooter from "components/Footers/SimpleFooter";
import { listProfile, addProfile, deleteProfile, previousAction, nextAction } from "../../store/actions/ProfileAction";
import { ProfileTable } from "../../views/IndexSections/Table";
import dummyData from "../../data/index.json";
const SearchProfile = (props) => {
const [searchProfile, setSearchProfile] = useState("");
......@@ -26,7 +28,7 @@ const SearchProfile = (props) => {
const onHandleSearch = (event) => {
event.preventDefault();
if (!searchProfile) return;
const nameCode = props.listProfile.map(item => item.code);
const nameCode = dummyData.data.map(item => item.code);
const checkSearch = nameCode.indexOf(searchProfile);
if (checkSearch !== -1) {
history.push({
......@@ -78,12 +80,12 @@ const SearchProfile = (props) => {
</section>
<section className="section">
<ProfileTable
listProfile={props.listProfile}
listProfile={dummyData.data}
currentPage={props.currentPage}
limit={props.limit}
nextPage={props.nextPage}
previosPage={props.previosPage}
total={props.total}
total={dummyData.data.length}
onLoadListProfile={props.onLoadListProfile}
onLoadPreviousPage={props.onLoadPreviousPage}
onLoadNextPage={props.onLoadNextPage}
......
src/components/Profile/Tracecode.js
View file @ b04f6b72
This diff is collapsed.
src/data/index.json
View file @ b04f6b72
......@@ -4,7 +4,7 @@
"id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
"code": "KIS",
"name": "Công ty TNHH sáng tạo KIS",
"logo": "/image/logo/kis-academy.jpg",
"logo": "/image/logo/full_Logo.png",
"address": "Tầng 5 - Technosoft Số 8 ngõ 15 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội",
"phone_number": "024 3795 521",
"qr_code": "/image/qrcode/qr-code.png",
......@@ -24,13 +24,13 @@
"product_chain_diary": [
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Thu hoạch",
"date": 1626841541222
},
......@@ -82,13 +82,13 @@
"product_chain_diary": [
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Thu hoạch",
"date": 1626841541222
},
......@@ -140,13 +140,13 @@
"product_chain_diary": [
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Thu hoạch",
"date": 1626841541222
},
......@@ -190,7 +190,7 @@
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"code": "FPT",
"name": "Tập đoàn FPT",
"logo": "/image/logo/kis-academy.jpg",
"logo": "/image/logo/full_Logo.png",
"address": "Khu công nghệ cao Láng Hòa Lạc",
"phone_number": "0242222222",
"qr_code": "/image/qrcode/qr-code.png",
......@@ -209,13 +209,13 @@
"product_chain_diary": [
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin",
"company": "Công ty Vinashrimp",
"description": "Thu hoạch",
"date": 1626841541222
},
......
src/views/IndexSections/Table.js
View file @ b04f6b72
......@@ -77,7 +77,7 @@ export const ProfileTable = (props) => {
<tr>
<th scope="row">{""}</th>
<td>{name}</td>
<td><img src={window.location.origin + logo} alt="logo" width={50} height={50} /></td>
<td><img src={window.location.origin + logo} alt="logo" width={100} height={50} /></td>
<td>{phone_number}</td>
<td>{address}</td>
<td dangerouslySetInnerHTML={{__html: listProductName}}></td>
......@@ -300,4 +300,130 @@ export const ProductTable = (props) => {
</Card>
: <div></div>
);
}
export const ProductDiaryTable = (props) => {
const history = useHistory();
// const dispatch = useDispatch();
console.log("props", props);
const onHandleClickAdd = () => {
history.push("/profile/add");
};
const onHandleClickEdit = (id) => {
console.log("id", id);
let detailProductDiary = props.listProductDiary.filter(item => item.id === id);
history.push({
// pathname: "/profile/add-product",
state: { id, detailProductDiary }
});
}
const onHandleClickDelete = (profileId) => {
// dispatch(props.onDeleteProfile(profileId));
}
const items = [];
const totalItem = props.listProductDiary ? props.listProductDiary.length : 1;
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}>
<PaginationLink>{number}</PaginationLink>
</PaginationItem>
);
}
const TableRow = (props) => {
const { id, company, description, date } = props;
return (
<tr>
<th scope="row">{""}</th>
<td>{company}</td>
<td>{description}</td>
<td>{date ? profileFormatDateTime(date) : ""}</td>
<td key={id}>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="fa fa-ellipsis-h" />
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => onHandleClickEdit(id)} >
<i className="fa fa-pencil mr-3" />{"Sửa"}
</DropdownItem>
<DropdownItem className="text-danger" onClick={() => console.log('This will fire!')}>
<i className="fa fa-trash mr-3" />{"Xóa"}
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
);
};
return (
props.listProductDiary && props.listProductDiary.length > 0 ?
<Card>
<Table striped responsive>
<thead>
<tr >
<th>{"STT"}</th>
<th>{"Tên công ty"}</th>
<th>{"Mô tả"}</th>
<th>{"Ngày tháng"}</th>
<th></th>
</tr>
</thead>
<tbody>
{props.listProductDiary ? props.listProductDiary.map(productDiary => <TableRow key={`page-visit-${productDiary.id}`} {...productDiary} />) : []}
</tbody>
</Table>
<Row className="mx-3 my-2">
<Col>
<nav>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
{items}
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
</nav>
</Col>
<Col className="text-right">
<h6 className="font-weight-bold">
{('Hiển thị ' + props.listProductDiary.length + "/" + totalItem)}
</h6>
</Col>
</Row>
</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