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
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
/*!
=========================================================
* 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, { useState } from "react";
import { useHistory } from 'react-router-dom';
// nodejs library that concatenates classes
import classnames from "classnames";
// reactstrap components
import {
Badge,
Button,
Card,
CardBody,
CardImg,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
NavItem,
NavLink,
Nav,
TabContent,
TabPane,
Row,
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
import { Card, CardBody, CardImg, Container, NavItem, NavLink, Nav, TabContent, TabPane, Row, Col } from "reactstrap";
// core components
import MainBanner from "components/Generals/MainBanner.js";
import Sologan from "components/Generals/Sologan";
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import AmazingTeam from "components/Footers/AmazingTeam.js";
import { formatDateTime } from '../../constans/index.js';
import dummyData from '../../data/index.json';
// index page sections
import Download from "../../views/IndexSections/Download.js";
import Tabs from "../../views/IndexSections/Tabs.js";
const Tracecode = () => {
const [plainTabs, setPlainTabs] = useState(1);
// state = {
// plainTabs: 1
// };
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
const toggleNavs = (e, index) => {
e.preventDefault();
setPlainTabs(index);
// this.setState({
// [state]: index
// });
};
const history = useHistory();
let state = { ...history.location.state };
......@@ -84,352 +31,149 @@ const Tracecode = () => {
// product = product[0];
return (
<>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + product.image}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<div className="h3 font-weight-bold m3">{product.name}</div>
<div className="h5 mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="h5 mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</Col>
</Row>
</Container>
</section>
</>
<>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + product.image}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<div className="h3 font-weight-bold m3">{product.name}</div>
<div className="h5 mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="h5 mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
}
const renderTabs = (product) => {
return (
<>
<Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */}
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<NavItem>
<NavLink
aria-selected={plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 1
})}
onClick={e => toggleNavs(e, 1)}
href="#pablo"
role="tab"
>
Thông tin chung
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 2
})}
onClick={e => toggleNavs(e, 2)}
href="#pablo"
role="tab"
>
Nhật kí chuỗi
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 3
})}
onClick={e => toggleNavs(e, 3)}
href="#pablo"
role="tab"
>
Chứng nhận
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + plainTabs}>
<TabPane tabId="plainTabs1">
<div className="description">
<div className="h3 font-weight-bold mb-3">{product.name}</div>
<div className="h5 mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="h5 mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</TabPane>
<TabPane tabId="plainTabs2">
<div className="description">
{product.product_chain_diary.map(diary => (
<div>
<div className="h5 font-weight-bold mt-3">{diary.company}</div>
<Row className="h6 mb-3">
<Col xs={4}>{formatDateTime(diary.date)}</Col>
<Col xs={6}>{diary.description}</Col>
<Col></Col>
</Row>
</div>
))}
</div>
</TabPane>
<TabPane tabId="plainTabs3">
<div className="description">
{product.product_certification.map((certificate) => (
<Row>
<Col xs={4}>
<img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
<div className="h5 mt-3 mb-3 font-weight-bold">{certificate.certification_information}</div>
</Col>
</Row>
))}
</div>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</>
);
}
// render() {
return (
<>
<DemoNavbar />
<main>
<MainBanner/>
{renderProductInfo(product)}
<section className="section bg-gradient-warning">
<Container>
{renderTabs(product)}
</Container>
{/* SVG separator */}
{/* <div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
<Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */}
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div> */}
</section>
{/* <Sologan /> */}
{/* <section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
<NavItem>
<NavLink
aria-selected={plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 1
})}
onClick={e => toggleNavs(e, 1)}
href="#pablo"
role="tab"
>
Thông tin chung
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 2
})}
onClick={e => toggleNavs(e, 2)}
href="#pablo"
role="tab"
>
Nhật kí chuỗi
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: plainTabs === 3
})}
onClick={e => toggleNavs(e, 3)}
href="#pablo"
role="tab"
>
Chứng nhận
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + plainTabs}>
<TabPane tabId="plainTabs1">
<div className="description">
<div className="h3 font-weight-bold mb-3">{product.name}</div>
<div className="h5 mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="h5 mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</TabPane>
<TabPane tabId="plainTabs2">
<div className="description">
{product.product_chain_diary.map(diary => (
<div>
<div className="h5 font-weight-bold mt-3">{diary.company}</div>
<Row className="h6 mb-3">
<Col xs={4}>{formatDateTime(diary.date)}</Col>
<Col xs={6}>{diary.description}</Col>
<Col></Col>
</Row>
</div>
))}
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</TabPane>
<TabPane tabId="plainTabs3">
<div className="description">
<Row>
{product.product_certification.map((certificate) => (
<Col xs={4}>
<img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
<div className="h5 mt-3 mb-3 font-weight-bold">{certificate.certification_information}</div>
</Col>
))}
</Row>
</div>
</div>
</Col>
</Row>
</Container>
</section> */}
</main>
<SimpleFooter/>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</>
);
//}
}
return (
<>
<DemoNavbar />
<main>
<MainBanner />
{renderProductInfo(product)}
<section className="section bg-gradient-warning">
<Container>
{renderTabs(product)}
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
export default Tracecode;
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