create add product

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";
+
+// core components
+import MainBanner from "../Generals/MainBanner.js";
+import DemoNavbar from "../Navbars/DemoNavbar.js";
+import dummyData from "../../data/index.json";
+
+const AddProduct = () => {
+  const history = useHistory();
+  const state = { ...history.location.state };
+  const profileId = state.profileId;
+  const productId = state.productId;
+  const detailProduct = productId ? state.detailProduct : {};
+  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 onHandleBack = () => {
+    history.push("/profile/add");
+  }
+
+  const newData = dummyData.data.filter(item => item.id === profileId);
+  console.log("newData", newData);
+
+  const onHandleAddProduct = (event) => {
+    event.preventDefault();
+    debugger
+    const getTime = new Date().getTime();
+    const params = {
+      product_id: uuidv4(),
+      trace_code: traceCode,
+      name: productName,
+      image: "",
+      cost,
+      origin,
+      description,
+      growing_conditions: growingConditions,
+      created_at: getTime,
+      qr_code: ""
+    }
+    if(profileId){
+      const newData = dummyData.data.filter(item => item.id === profileId);
+      console.log("newData", newData);
+      newData.profile_product.push(params);
+      console.log("newData", newData);
+    }
+    history.push("/profile/add");
+  }
+
+  return (
+    <>
+      <DemoNavbar />
+      <main>
+        <MainBanner />
+        <section className="section section-components">
+          <Container>
+            <Form onSubmit={onHandleAddProduct}>
+              <FormGroup>
+                <Label for="product-name">Tên sản phẩm</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-product-hunt" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Tên sản phẩm"
+                    type="text"
+                    value={productName}
+                    onChange={(e) => setProductName(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Label for="product-name">Mã sản phẩm</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-codepen" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Mã sản phẩm"
+                    type="text"
+                    value={traceCode}
+                    onChange={(e) => setTraceCode(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Label for="product-name">Giá sản phẩm</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-usd" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Giá sản phẩm"
+                    type="text"
+                    value={cost}
+                    onChange={(e) => setCost(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Label for="product-name">Xuất xứ</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-wrench" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Xuất xứ"
+                    type="text"
+                    value={origin}
+                    onChange={(e) => setOrigin(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Label for="product-name">Mô tả</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-product-hunt" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Mô tả"
+                    type="text"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup>
+                <Label for="product-name">Điều kiện nuôi trồng</Label>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-product-hunt" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Điều kiện nuôi trồng"
+                    type="text"
+                    value={growingConditions}
+                    onChange={(e) => setGrowingConditions(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup row>
+                <Col sm={10}>
+                  <Input type="file" name="file" id="file-image" />
+                  <FormText color="muted">
+                    Lựa chọn ảnh sản phẩm
+                  </FormText>
+                </Col>
+              </FormGroup>
+              <div className="d-flex justify-content-between">
+                <Button
+                  color="info"
+                  type="button"
+                  className="btn-1"
+                  onClick={onHandleBack}
+                >
+                  Quay lại
+                </Button>
+                <Button
+                  color="primary"
+                  type="submit"
+                  className="btn-1"
+                >
+                  {productId ? "Sửa" : "Thêm mới"}
+                </Button>
+              </div>
+            </Form>
+          </Container>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default AddProduct;
\ No newline at end of file

src/components/Profile/AddProfile.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, FormFeedback } from "reactstrap";
+import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Row, Col, FormText, FormFeedback } from "reactstrap";
 
 // core components
 import MainBanner from "../Generals/MainBanner.js";
@@ -11,13 +11,14 @@ import AmazingTeam from "../Footers/AmazingTeam.js";
 import dummyData from "../../data/index.json";
 
 import { validatePhoneNumber } from "constans/index.js";
+import { ProductTable } from "../../views/IndexSections/Table.js";
 
 const AddProfile = () => {
   const history = useHistory();
   const state = { ...history.location.state };
   const profileId = state.profileId;
-  const detailProfile = dummyData.data ? dummyData.data.filter(item => item.id === profileId) : [];
-  console.log("list data", detailProfile);
+  const detailProfile = profileId ? state.detailProfile[0] : "";
+  console.log("detailProfile", detailProfile);
 
   const [profileName, setProfileName] = useState(profileId ? detailProfile.name : "");
   const [profileCode, setProfileCode] = useState(profileId ? detailProfile.code : "");
@@ -26,7 +27,7 @@ const AddProfile = () => {
   const [profileAddress, setProfileAddress] = useState(profileId ? detailProfile.address : "");
   const [validPhoneNumber, setValidPhoneNumber] = useState(false);
 
-  
+  console.log("phoneNumber", typeof(phoneNumber));
 
   const onHandleBack = () => {
     history.push("/");
@@ -41,7 +42,6 @@ const AddProfile = () => {
 
   const onHandleAddNewProfile = async (event) => {
     event.preventDefault();
-    console.log("add new");
     if(validatePhoneNumber(phoneNumber)){
       const getTime = new Date().getTime();
       const params = {
@@ -63,7 +63,12 @@ const AddProfile = () => {
     }
   }
 
-  console.log("validPhoneNumber", validPhoneNumber);
+  const onHandleClickAddProduct = () => {
+    history.push({
+      pathname: "/profile/add-product",
+      state: { profileId }
+    });
+  }
 
   return (
     <>
@@ -73,6 +78,14 @@ const AddProfile = () => {
         <section className="section section-components">
           <Container>
             <Form onSubmit={onHandleAddNewProfile}>
+              <Row className="align-items-center">
+                <Col>
+                  <h5 className="mb-3">{profileId ? "Sửa thông tin doanh nghiệp" : "Thêm mới doanh nghiệp"}</h5>
+                </Col>
+                <Col className="text-right">
+                  <Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => onHandleClickAddProduct()}>{"Thêm mới sản phẩm"}</Button>
+                </Col>
+              </Row>
               <FormGroup className="mb-4">
                 <Label for="profile_name" >Tên doanh nghiệp</Label>
                 <InputGroup className="mb-4">
@@ -117,10 +130,9 @@ const AddProfile = () => {
                   </InputGroupAddon>
                   <Input
                     placeholder="Số điện thoại"
-                    type="number"
+                    type={phoneNumber ? "text" : "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>
@@ -142,22 +154,6 @@ const AddProfile = () => {
                   />
                 </InputGroup>
               </FormGroup>
-              {/* <FormGroup className="mb-4">
-                <Label for="address" >Tên sản phẩm</Label>
-                <InputGroup className="mb-4">
-                  <InputGroupAddon addonType="prepend">
-                    <InputGroupText>
-                      <i className="fa fa-product-hunt" />
-                    </InputGroupText>
-                  </InputGroupAddon>
-                  <Input
-                    placeholder="Tên sản phẩm"
-                    type="text"
-                    value={productName}
-                    onChange={(e) => setProductName(e.target.value)}
-                  />
-                </InputGroup>
-              </FormGroup> */}
               <FormGroup row>
                 {/* <Col>
                   <Label for="file-logo" sm={2}>Logo</Label>
@@ -169,7 +165,10 @@ const AddProfile = () => {
                   </FormText>
                 </Col>
               </FormGroup>
-              <div className="d-flex justify-content-between">
+              <div className="mt-5">
+                <ProductTable listProduct={detailProfile.profile_product} />
+              </div>
+              <div className="d-flex justify-content-between mt-5">
                 <Button
                   color="info"
                   type="button"
@@ -183,8 +182,7 @@ const AddProfile = () => {
                   type="submit"
                   className="btn-1"
                 >
-                  {/* {state.profileId ? "EDIT" : "ADD"} */}
-                  Thêm mới
+                  {profileId ? "Sửa" : "Thêm mới"}
                 </Button>
               </div>
             </Form>

src/components/Profile/SearchProfile.js

@@ -8,7 +8,7 @@ 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";
+import { ProfileTable } from "../../views/IndexSections/Table";
 
 
 
@@ -42,7 +42,7 @@ const SearchProfile = () => {
         <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>
+            <h3 className="h4 text-success mb-4 font-weight-bold text-center">Tra cứu thông tin doanh nghiệp</h3>
             <Form className="justify-content-center" onSubmit={onHandleSearch}>
               <FormGroup>
                 <InputGroup className="mb-4">

src/data/index.json

@@ -17,8 +17,10 @@
           "cost": "Liên hệ",
           "origin": "Việt Nam",
           "image": "/image/product/tom-su.jpg",
+          "qr_code": "/image/qrcode/qr-code.png",
           "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",
+          "created_at": 1624870109921,
           "product_chain_diary": [
             {
               "company": "Công ty Vinashin",
@@ -78,6 +80,7 @@
           "cost": "Liên hệ",
           "origin": "Việt Nam",
           "image": "/image/product/tom-su.jpg",
+          "qr_code": "/image/qrcode/qr-code.png",
           "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": [

src/index.js

@@ -34,6 +34,7 @@ import NotFound from "views/examples/NotFound.js"
 import DetailProfile from "./components/Profile/DetailProfile.js"
 import SearchProfile from "./components/Profile/SearchProfile.js";
 import Tracecode from "./components/Profile/Tracecode.js"
+import AddProduct from "components/Profile/AddProduct";
 // import { Routes } from "./reoutes";
 
 ReactDOM.render(
@@ -45,6 +46,11 @@ ReactDOM.render(
         exact
         render={props => <AddProfile {...props} />}
       />
+      <Route
+        path="/profile/add-product"
+        exact
+        render={props => <AddProduct {...props} />}
+      />
       <Route
         path="/trace-code/:trace"
         exact

src/views/IndexSections/Table.js

 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 { Table, Card, CardHeader, Row, Col, Button, UncontrolledDropdown, 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();
 
@@ -17,7 +13,6 @@ export const ProfileTable = (props) => {
   };
 
   const onHandleClickEdit = (profileId) => {
-    console.log("profileId", profileId);
     let detailProfile = props.dummyData.filter(item => item.id === profileId);
     history.push({
       pathname: "/profile/add",
@@ -26,12 +21,12 @@ export const ProfileTable = (props) => {
   } 
 
   const onHandleClickDelete = (profileId) => {
+    return props.dummyData.filter(item => item.id !== profileId);
     // dispatch(props.onDeleteProfile(profileId));
   }
 
   useEffect(() => {
     // dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
-
   }, []);
 
   const items = [];
@@ -76,33 +71,24 @@ export const ProfileTable = (props) => {
         <td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
         <td><img src={window.location.origin + qr_code} alt="qr-code" width={50} height={50} /></td>
         <td key={id}>
-          <Dropdown size="sm" isOpen={dropdownOpen} toggle={toggle}>
-            <DropdownToggle caret>
-              Menu
+          <UncontrolledDropdown nav>
+            <DropdownToggle nav>
+              <i className="fa fa-ellipsis-h" />
             </DropdownToggle>
             <DropdownMenu>
-              <DropdownItem tag="a">
-                <i className="fa fa-plus" />{"Thêm sản phẩm"}
-              </DropdownItem>
-              <DropdownItem tag="b">
-                <div onClick={() => onHandleClickEdit(id)}>
-                  <i className="fa fa-pencil mr-3" />{"Sửa"}
-                </div>
+              <DropdownItem onClick={() => onHandleClickEdit(id)} >
+                <i className="fa fa-pencil mr-3" />{"Sửa"}
               </DropdownItem>
-              <DropdownItem tag="c" className="text-danger">
-                <div onClick={() => console.log('This will fire!')}>
-                  <i className="fa fa-trash mr-3" />{"Xóa"}
-                </div>
+              <DropdownItem className="text-danger" onClick={() => onHandleClickDelete(id)}>
+                <i className="fa fa-trash mr-3" />{"Xóa"}
               </DropdownItem>
             </DropdownMenu>
-          </Dropdown>
+          </UncontrolledDropdown>
         </td>
       </tr>
     );
   };
 
-  console.log("props.dummyData", props.dummyData);
-
   return (
     props.dummyData && props.dummyData.length > 0 ?
       <Card className="mx-5">
@@ -138,9 +124,6 @@ export const ProfileTable = (props) => {
           <Col>
             <nav>
               <Pagination aria-label="Page navigation example">
-                {/* <Pagination.Prev disabled={props.currentPage === 1} onClick={onPrevItem}>
-              {t('common.table.previous')}
-            </Pagination.Prev> */}
                 <PaginationItem>
                   <PaginationLink first href="#" />
                 </PaginationItem>
@@ -154,9 +137,6 @@ export const ProfileTable = (props) => {
                 <PaginationItem>
                   <PaginationLink last href="#" />
                 </PaginationItem>
-                {/* <Pagination.Next disabled={props.currentPage === Math.ceil(pageSize)} onClick={() => onNextItem()}>
-              {t('common.table.next')}
-            </Pagination.Next> */}
               </Pagination>
             </nav>
           </Col>
@@ -169,4 +149,147 @@ export const ProfileTable = (props) => {
       </Card> 
       : <div></div>
   );
+}
+
+export const ProductTable = (props) => {
+  const history = useHistory();
+  // const dispatch = useDispatch();
+
+  console.log("listProduct", props.listProduct);
+
+  const onHandleClickAdd = () => {
+    history.push("/profile/add");
+  };
+
+  const onHandleClickEdit = (productId) => {
+    console.log("productId", productId);
+    let detailProduct = props.listProduct.filter(item => item.product_id === productId);
+    history.push({
+      pathname: "/profile/add-product",
+      state: { productId, detailProduct }  
+    });
+  } 
+
+  const onHandleClickDelete = (profileId) => {
+    // dispatch(props.onDeleteProfile(profileId));
+  }
+
+  useEffect(() => {
+    // dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
+
+  }, []);
+
+  const items = [];
+  const totalItem = "15";
+  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 { product_id, name, trace_code, cost, origin, image, growing_conditions, description, created_at, qr_code } = props;
+    
+    return (
+      <tr>
+        <th scope="row">{""}</th>
+        <td>{name}</td>
+        <td>{trace_code}</td>
+        <td>{cost}</td>
+        <td>{origin}</td>
+        <td>{description}</td>
+        <td>{growing_conditions}</td>
+        <td><img src={window.location.origin + image} alt="product" width={50} height={50} /></td>
+        <td><img src={window.location.origin + qr_code} alt="qr-code" width={50} height={50} /></td>
+        <td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
+        <td key={product_id}>
+          <UncontrolledDropdown nav>
+            <DropdownToggle nav>
+              <i className="fa fa-ellipsis-h" />
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => onHandleClickEdit(product_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.listProduct && props.listProduct.length > 0 ?
+      <Card>
+        <Table striped responsive>
+          <thead>
+            <tr >
+              <th>{"STT"}</th>
+              <th>{"Tên sản phẩm"}</th>
+              <th>{"Mã sản phẩm"}</th>
+              <th>{"Giá sản phẩm"}</th>
+              <th>{"Xuất xứ"}</th>
+              <th>{"Mô tả"}</th>
+              <th>{"Điều kiện nuôi trồng"}</th>
+              <th>{"Ảnh"}</th>
+              <th>{"QR code"}</th>
+              <th>{"Ngày tạo"}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.listProduct ? props.listProduct.map(product => <TableRow key={`page-visit-${product.product_id}`} {...product} />) : []}
+          </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.listProduct.length + "/" + totalItem)}
+            </h6>
+          </Col>
+        </Row>
+      </Card> 
+      : <div></div>
+  );
 }
\ No newline at end of file