create table product diary

package-lock.json

@@ -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",

package.json

@@ -56,6 +56,7 @@
     "moment": "2.24.0",
     "node-sass": "4.13.1",
     "nouislider": "14.1.1",
+    "qrcode.react": "^1.0.1",
     "react": "16.12.0",
     "react-datetime": "2.16.3",
     "react-dom": "16.12.0",

src/HomePage.js

@@ -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

-/*!
-
-=========================================================
-* 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";
+import { Container, Row, Col } from "reactstrap";
 
-class MainBanner extends React.Component {
-    render() {
+const MainBanner = () => {
   return (
     <>
       <div className="position-relative">
@@ -62,10 +25,10 @@ class MainBanner extends React.Component {
               <Row>
                 <Col lg="10">
                   <h1 className="display-3 text-white">
-                      Mạng xã hội sản phẩm và tiêu dùng
+                    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
+                    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>
@@ -92,7 +55,7 @@ class MainBanner extends React.Component {
       </div>
     </>
   );
-  }
+
 }
 
 export default MainBanner;

src/components/Profile/AddDiary.js

+import React from "react";
+
+const AddDiary = () => {
+  return (
+    <div></div>
+  );
+}
+
+export default AddDiary;
\ No newline at end of file

src/components/Profile/AddProduct.js

 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

@@ -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

@@ -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/data/index.json

@@ -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

@@ -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>
@@ -301,3 +301,129 @@ export const ProductTable = (props) => {
       : <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