Skip to content

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

init code base

parent 528d8199
Pipeline #59 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 15631 additions and 17 deletions
      package-lock.json 0 → 100644
      View file @ 9b470bcf
      This source diff could not be displayed because it is too large. You can view the blob instead.
      src/App.js
      View file @ 9b470bcf
      import logo from './logo.svg'; import React from 'react';
      import './App.css'; import './App.css';
      import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
      import { Routes } from "./routes";
      import Profile from "./components/Profile/index";
      import TraceCode from "./components/TraceCode/index";
      function App() { function App() {
      return ( return (
      <div className="App"> <Router>
      <header className="App-header"> <Switch>
      <img src={logo} className="App-logo" alt="logo" /> <Route path={Routes.Profile.path}>
      <p> <Profile />
      Edit <code>src/App.js</code> and save to reload. </Route>
      </p> <Route path={Routes.TraceCode.path}>
      <a <TraceCode />
      className="App-link" </Route>
      href="https://reactjs.org" </Switch>
      target="_blank" </Router>
      rel="noopener noreferrer"
      >
      Learn React
      </a>
      </header>
      </div>
      ); );
      } }
      ......
      src/components/Profile/index.js 0 → 100644
      View file @ 9b470bcf
      import React from 'react';
      import { Card, Row, Col } from 'react-bootstrap';
      import { useHistory } from 'react-router-dom';
      import dummyData from '../../data/index.json';
      import { Routes } from '../../routes';
      const Profile = () => {
      const history = useHistory();
      return (
      dummyData.data && dummyData.data.length > 0 ?
      dummyData.data.map((data, key) => {
      return (
      <Card className="px-0 px-md-4 py-0 border-0">
      <Card.Header>
      <Row className="mb-2">
      <Col xs={6}>
      <h5 className="text-primary fw-bold">{data.name}</h5>
      </Col>
      <Col xs={6}>
      {/* <h5 className="text-primary fw-bold">{data.logo}</h5> */}
      </Col>
      <Col xs={6} className="text-right">
      {/* <img src={data.qr_code} /> */}
      </Col>
      </Row>
      </Card.Header>
      <Card.Body>
      <Col>
      <div className="mb-3">
      <div className="h5">Số điện thoại</div>
      <div>{data.phone_number}</div>
      </div>
      <div className="mb-3">
      <div className="h5">Địa chỉ</div>
      <div>{data.address}</div>
      </div>
      <div className="mb-3">
      <div className="h5">Sản phẩm</div>
      <div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
      const onHandleTraceCode = () => {
      history.push({
      pathname: Routes.TraceCode.path,
      state: { product }
      });
      }
      return (
      <>
      <div className="mb-3">{product.name}</div>
      <img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
      <div>
      <div className="h5">Mô tả</div>
      <div>{product.description}</div>
      </div>
      </>
      );
      }) : null}</div>
      </div>
      </Col>
      </Card.Body>
      </Card>
      );
      }) : <div></div>
      );
      }
      export default Profile;
      src/components/TraceCode/index.js 0 → 100644
      View file @ 9b470bcf
      import React from 'react';
      import { useHistory } from 'react-router-dom';
      import { Card, Row, Col, Tab, Nav } from 'react-bootstrap';
      const TraceCode = () => {
      const history = useHistory();
      let state = { ...history.location.state };
      const product = state.product;
      console.log("product", product);
      return (
      <Card className="px-0 px-md-4 py-0 border-0">
      <Card.Header>
      <div className="text-center">
      <img className="mb-3" src={window.location.origin + product.image} alt="product" />
      <div className="h4 font-weight-bold mb-3">{product.name}</div>
      <div className="h4 mb-3">Giá: {product.cost}</div>
      <hr />
      <div className="mb-3">Mã sản phẩm {product.trace_code}</div>
      <div className="mb-3">Xuất xứ {product.origin}</div>
      </div>
      </Card.Header>
      <Card.Body>
      <div className="text-center">
      <Row className="wrapper-search py-4">
      <Tab.Container defaultActiveKey="general-information">
      <Row>
      <Col xs={12}>
      <Nav className="nav-tabs">
      <Nav.Item>
      <Nav.Link eventKey="general-information" className="mb-sm-3 mb-md-0">
      Thông tin chung
      </Nav.Link>
      </Nav.Item>
      <Nav.Item>
      <Nav.Link eventKey="product-chain-diary" className="mb-sm-3 mb-md-0">
      Nhật kí chuỗi
      </Nav.Link>
      </Nav.Item>
      <Nav.Item>
      <Nav.Link eventKey="product-certification" className="mb-sm-3 mb-md-0">
      Chứng nhận
      </Nav.Link>
      </Nav.Item>
      </Nav>
      </Col>
      <Col xs={12}>
      <Tab.Content>
      <Tab.Pane eventKey="general-information">
      <div>
      </div>
      </Tab.Pane>
      <Tab.Pane eventKey="product-chain-diary">
      </Tab.Pane>
      <Tab.Pane eventKey="product-certification">
      </Tab.Pane>
      </Tab.Content>
      </Col>
      </Row>
      </Tab.Container>
      </Row>
      </div>
      </Card.Body>
      </Card>
      );
      }
      export default TraceCode;
      src/data/index.json 0 → 100644
      View file @ 9b470bcf
      {
      "data": [
      {
      "id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
      "code": "KIS",
      "name": "Công ty TNHH sáng tạo KIS",
      "logo": "/image/logo/kis-logo.jpg",
      "address": "Ha Noi",
      "phone_number": "0978549632",
      "qr_code": "/image/qrcode/qr-code.png",
      "created_at": 1624870109921,
      "profile_product": [
      {
      "trace_code": "VNC12345678",
      "product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
      "name": "Tôm",
      "cost": "Liên hệ",
      "origin": "Việt Nam",
      "image": "/image/product/tom-su.jpg",
      "description": "Tôm sú nước ngọt",
      "product_chain_diary": [
      {
      "company": "Cty Vinashrimp",
      "description": "Bắt đầu nuôi trồng",
      "date": 1624870109921
      },
      {
      "company": "Cty Vinashrimp",
      "description": "Thu hoach",
      "date": 1624870109921
      },
      {
      "company": "Cty Coopmart",
      "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
      "date": 1624870109921
      },
      {
      "company": "Cty Coopmart",
      "description": "Trưng bày siêu thị",
      "date": 1624870109921
      },
      {
      "company": "Cty Coopmart",
      "description": "Bán cho người tiêu dùng",
      "date": 1624870109921
      }
      ],
      "product_certification": [
      {
      "certification_information": "Chứng nhận certificate",
      "image": "publish/image/certificate/certificate.jpg",
      "date": 1624870109921
      },
      {
      "certification_information": "Chứng nhận certificate",
      "image": "publish/image/certificate/certificate.jpg",
      "date": 1624870109921
      }
      ]
      }
      ]
      }
      ]
      }
      src/index.js
      View file @ 9b470bcf
      ...@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; ...@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
      import './index.css'; import './index.css';
      import App from './App'; import App from './App';
      import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
      import 'bootstrap/dist/css/bootstrap.min.css';
      ReactDOM.render( ReactDOM.render(
      <React.StrictMode> <React.StrictMode>
      ......
      src/routes.js 0 → 100644
      View file @ 9b470bcf
      export const Routes = {
      Profile: { path: "/profile" },
      TraceCode: { path: "/trace-code" }
      };
      \ 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