create modal add diary

src/components/Profile/AddProduct.js

@@ -71,14 +71,7 @@ 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">

src/components/Profile/AddProfile.js

@@ -63,13 +63,6 @@ const AddProfile = () => {
     }
   }
 
-  const onHandleClickAddProduct = () => {
-    history.push({
-      pathname: "/profile/add-product",
-      state: { profileId }
-    });
-  }
-
   return (
     <>
       <DemoNavbar />
@@ -78,14 +71,7 @@ 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">
@@ -165,10 +151,10 @@ const AddProfile = () => {
                   </FormText>
                 </Col>
               </FormGroup>
-              <div className="mt-5">
+              <div className="mt-3">
                 <ProductTable listProduct={detailProfile.profile_product} />
               </div>
-              <div className="d-flex justify-content-between mt-5">
+              <div className="d-flex justify-content-between mt-3">
                 <Button
                   color="info"
                   type="button"

src/components/Profile/SearchProfile.js

@@ -40,9 +40,9 @@ const SearchProfile = (props) => {
     }
   }
 
-  useEffect(() => {
-    dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
-  }, []);
+  // useEffect(() => {
+  //   dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
+  // }, []);
 
 
 
@@ -59,7 +59,7 @@ const SearchProfile = (props) => {
                 <InputGroup className="mb-4">
                   <InputGroupAddon addonType="prepend">
                     <InputGroupText>
-                      <i className="ni ni-zoom-split-in" />
+                      <i className="fa fa-search"></i>
                     </InputGroupText>
                   </InputGroupAddon>
                   <Input

src/data/index.json

@@ -29,25 +29,25 @@
               "date": 1616300741111
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "hgythxc4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "akiun692-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "13sdab64-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "afdr45ht-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -55,13 +55,13 @@
           ],
           "product_certification": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "lpweredf-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "vcxdserw-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -70,7 +70,7 @@
         },
         {
           "trace_code": "VNC12345678",
-          "product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
+          "product_id": "gyhj89jy-fbb9-4dd3-af84-8247efe74a92",
           "name": "Tôm càng xanh loại 2",
           "cost": "Liên hệ",
           "origin": "Việt Nam",
@@ -81,31 +81,31 @@
           "created_at": 1624870109921,
           "product_chain_diary": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "jytgrfe4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "mnhjytr4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "fgder4e4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "dghytrt5-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "bvfdret4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -113,13 +113,13 @@
           ],
           "product_certification": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "hgfre435-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "vfdr4353-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -128,7 +128,7 @@
         },
         {
           "trace_code": "VNC12345678",
-          "product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
+          "product_id": "cadw21dg-fbb9-4dd3-af84-8247efe74a92",
           "name": "Tôm càng xanh loại 3",
           "cost": "Liên hệ",
           "origin": "Việt Nam",
@@ -139,31 +139,31 @@
           "created_at": 1624870109921,
           "product_chain_diary": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "nhg43fd4-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "daqwa32s-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "nhg65f4f-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "dswadfd3-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "csadwqe2-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -171,13 +171,13 @@
           ],
           "product_certification": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "dsacsfjy-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "vfsdrty3-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -187,7 +187,7 @@
       ]
     },
     {
-      "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+      "id": "hkyuiye3-fbb9-4dd3-af84-8247efe74a92",
       "code": "FPT",
       "name": "Tập đoàn FPT",
       "logo": "/image/logo/full_Logo.png",
@@ -208,31 +208,31 @@
           "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": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "ngftryt5-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "dg434543-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashrimp",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "sfewrwe3-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "shuyu75a-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "cloiahu7-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -240,13 +240,13 @@
           ],
           "product_certification": [
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "fko098sd-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
-              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+              "id": "kius93js-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921

src/views/IndexSections/Table.js

-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useDispatch } from "react-redux";
-import { Table, Card, CardHeader, Row, Col, Button, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import {
+  Table, Card, CardHeader, Row, Col, Button,
+  UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink,
+  Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input
+} from "reactstrap";
 import { profileFormatDateTime } from "constans";
 
 export const ProfileTable = (props) => {
@@ -187,6 +191,13 @@ export const ProductTable = (props) => {
     // dispatch(props.onDeleteProfile(profileId));
   }
 
+  const onHandleClickAddProduct = () => {
+    history.push({
+      pathname: "/profile/add-product",
+      // state: { profileId }
+    });
+  }
+
   const items = [];
   const totalItem = props.listProduct ? props.listProduct.length : 1;
   let pageSize = totalItem / 10;
@@ -251,6 +262,16 @@ export const ProductTable = (props) => {
   return (
     props.listProduct && props.listProduct.length > 0 ?
       <Card>
+        <CardHeader>
+          <Row className="align-items-center">
+            <Col>
+              <h5 className="mb-3">{"Danh sách sản phẩm"}</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>
+        </CardHeader>
         <Table striped responsive>
           <thead>
             <tr >
@@ -303,14 +324,15 @@ export const ProductTable = (props) => {
 }
 
 export const ProductDiaryTable = (props) => {
+  const [modal, setModal] = useState(false);
+  const [company, setCompany] = useState("");
+  const [description, setDescription] = useState("");
+
   const history = useHistory();
   // const dispatch = useDispatch();
-  console.log("props", props);
   
-
-  const onHandleClickAdd = () => {
-    history.push("/profile/add");
-  };
+  console.log("props", props);
+  const toggle = () => setModal(!modal);
 
   const onHandleClickEdit = (id) => {
     console.log("id", id);
@@ -367,7 +389,7 @@ export const ProductDiaryTable = (props) => {
               <i className="fa fa-ellipsis-h" />
             </DropdownToggle>
             <DropdownMenu>
-              <DropdownItem onClick={() => onHandleClickEdit(id)} >
+              <DropdownItem onClick={() => toggle()} >
                 <i className="fa fa-pencil mr-3" />{"Sửa"}
               </DropdownItem>
               <DropdownItem className="text-danger" onClick={() => console.log('This will fire!')}>
@@ -383,6 +405,61 @@ export const ProductDiaryTable = (props) => {
   return (
     props.listProductDiary && props.listProductDiary.length > 0 ?
       <Card>
+        <CardHeader>
+          <Row className="align-items-center">
+            <Col>
+              <h5>{"Nhật kí sản phẩm"}</h5>
+            </Col>
+            <Col className="text-right">
+              <div>
+                <Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => toggle()}>{"Tạo mới nhật kí"}</Button>
+                <Modal isOpen={modal} toggle={toggle}>
+                  <ModalHeader toggle={toggle}>Thêm nhật kí</ModalHeader>
+                  <ModalBody>
+                    <Form>
+                      <FormGroup>
+                        <Label for="company-name">Tên công ty</Label>
+                        <InputGroup className="mb-4">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="fa fa-building" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input
+                            placeholder="Tên công ty"
+                            type="text"
+                            value={company}
+                            onChange={(e) => setCompany(e.target.value)}
+                          />
+                        </InputGroup>
+                      </FormGroup>
+                      <FormGroup>
+                        <Label for="diary-description">Mô tả</Label>
+                        <InputGroup className="mb-4">
+                          {/* <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="fa fa-book" />
+                            </InputGroupText>
+                          </InputGroupAddon> */}
+                          <Input
+                            placeholder="Mô tả"
+                            type="textarea"
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                          />
+                        </InputGroup>
+                      </FormGroup>
+                    </Form>
+                  </ModalBody>
+                  <ModalFooter>
+                    <Button color="primary" onClick={toggle}>Thêm</Button>
+                    {/* <Button color="secondary" onClick={toggle}>Quay lại</Button> */}
+                  </ModalFooter>
+                </Modal>
+              </div>
+            </Col>
+          </Row>
+        </CardHeader>
         <Table striped responsive>
           <thead>
             <tr >