create page add profile

package.json

@@ -58,10 +58,12 @@
     "react-datetime": "2.16.3",
     "react-dom": "16.12.0",
     "react-qr-code": "^1.1.1",
+    "react-redux": "^7.2.4",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-scripts": "3.3.1",
-    "reactstrap": "8.4.1"
+    "reactstrap": "8.4.1",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/googlemaps": "3.39.2",

src/components/Profile/AddProfile.js

 import React, { useState } from "react";
 import { useHistory } from "react-router";
-import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText } from "reactstrap";
+import { v4 as uuidv4 } from 'uuid';
+import { Container, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input, Button, Col, FormText, FormFeedback } from "reactstrap";
 
 // core components
 import MainBanner from "../Generals/MainBanner.js";
@@ -9,12 +10,14 @@ import SimpleFooter from "../Footers/SimpleFooter.js";
 import AmazingTeam from "../Footers/AmazingTeam.js";
 import dummyData from "../../data/index.json";
 
+import { validatePhoneNumber } from "constans/index.js";
+
 const AddProfile = () => {
   const [profileName, setProfileName] = useState("");
+  const [profileCode, setProfileCode] = useState("");
   const [logo, setLogo] = useState({});
   const [phoneNumber, setPhoneNumber] = useState("");
-  const [address, setAddress] = useState("");
-  const [productName, setProductName] = useState("");
+  const [profileAddress, setProfileAddress] = useState("");
   const [validPhoneNumber, setValidPhoneNumber] = useState(false);
 
   const history = useHistory();
@@ -23,14 +26,47 @@ const AddProfile = () => {
     history.push("/");
   }
 
+  const toBase64 = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+
+  const onHandleAddNewProfile = async (event) => {
+    event.preventDefault();
+    console.log("add new");
+    if(validatePhoneNumber(phoneNumber)){
+      const getTime = new Date().getTime();
+      const params = {
+        id: uuidv4(),
+        code: profileCode,
+        name: profileName,
+        logo: "",
+        phone_number: phoneNumber,
+        address: profileAddress,
+        created_at: getTime,
+        qr_code: ""
+      }
+      console.log("params", params);
+      dummyData.data.push(params);
+      history.push("/");
+      setValidPhoneNumber(false);
+    }else {
+      setValidPhoneNumber(true);
+    }
+  }
+
+  console.log("validPhoneNumber", validPhoneNumber);
+
   return (
     <>
       <DemoNavbar />
       <main>
         <MainBanner />
-        <section className="section pb-0 section-components">
+        <section className="section section-components">
           <Container>
-            <Form>
+            <Form onSubmit={onHandleAddNewProfile}>
               <FormGroup className="mb-4">
                 <Label for="profile_name" >Tên doanh nghiệp</Label>
                 <InputGroup className="mb-4">
@@ -40,6 +76,7 @@ const AddProfile = () => {
                     </InputGroupText>
                   </InputGroupAddon>
                   <Input
+                    required
                     placeholder="Tên doanh nghiệp"
                     type="text"
                     value={profileName}
@@ -48,8 +85,25 @@ const AddProfile = () => {
                 </InputGroup>
               </FormGroup>
               <FormGroup className="mb-4">
-                <Label for="phone_number" >Số điện thoại</Label>
+                <Label for="profile_name" >Mã code</Label>
                 <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="fa fa-codepen" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    required
+                    placeholder="Mã code"
+                    type="text"
+                    value={profileCode}
+                    onChange={(e) => setProfileCode(e.target.value)}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <FormGroup className="mb-4">
+                <Label for="phone_number" >Số điện thoại</Label>
+                <InputGroup className="input-group-alternative mb-4">
                   <InputGroupAddon addonType="prepend">
                     <InputGroupText>
                       <i className="fa fa-phone" />
@@ -57,10 +111,13 @@ const AddProfile = () => {
                   </InputGroupAddon>
                   <Input
                     placeholder="Số điện thoại"
-                    type="text"
+                    type="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>
                 </InputGroup>
               </FormGroup>
               <FormGroup className="mb-4">
@@ -74,12 +131,12 @@ const AddProfile = () => {
                   <Input
                     placeholder="Địa chỉ"
                     type="text"
-                    value={address}
-                    onChange={(e) => setAddress(e.target.value)}
+                    value={profileAddress}
+                    onChange={(e) => setProfileAddress(e.target.value)}
                   />
                 </InputGroup>
               </FormGroup>
-              <FormGroup className="mb-4">
+              {/* <FormGroup className="mb-4">
                 <Label for="address" >Tên sản phẩm</Label>
                 <InputGroup className="mb-4">
                   <InputGroupAddon addonType="prepend">
@@ -94,7 +151,7 @@ const AddProfile = () => {
                     onChange={(e) => setProductName(e.target.value)}
                   />
                 </InputGroup>
-              </FormGroup>
+              </FormGroup> */}
               <FormGroup row>
                 {/* <Col>
                   <Label for="file-logo" sm={2}>Logo</Label>
@@ -110,18 +167,18 @@ const AddProfile = () => {
                 <Button
                   color="info"
                   type="button"
-                  className="btn-1 w-20"
+                  className="btn-1"
                   onClick={onHandleBack}
                 >
-                  BACK
+                  Quay lại
                 </Button>
                 <Button
                   color="primary"
                   type="submit"
-                  className="btn-1 w-20"
+                  className="btn-1"
                 >
                   {/* {state.profileId ? "EDIT" : "ADD"} */}
-                  ADD
+                  Thêm mới
                 </Button>
               </div>
             </Form>

src/views/examples/DetailProfile.js → src/components/Profile/DetailProfile.js

@@ -47,7 +47,7 @@ import SimpleFooter from "components/Footers/SimpleFooter.js";
 import dummyData from "data/index.json";
 
 // index page sections
-import Download from "../IndexSections/Download.js";
+import Download from "../../views/IndexSections/Download.js";
 
 
 const DetailProfile = () => {

src/components/Profile/SearchProfile.js

+import React, { useState } from "react";
+import { useHistory } from 'react-router-dom';
+import { FormGroup, Input, InputGroupAddon, InputGroupText, InputGroup, Container, Button, Form } from "reactstrap";
+
+// core components
+import DemoNavbar from "components/Navbars/DemoNavbar.js";
+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";
+
+
+
+const SearchProfile = () => {
+  const [searchProfile, setSearchProfile] = useState("");
+  const history = useHistory();
+
+  const handleChangeSearch = (event) => {
+    setSearchProfile(event.target.value);
+  }
+
+  const onHandleSearch = (event) => {
+    event.preventDefault();
+    if (!searchProfile) return;
+    const nameCode = dummyData.data.map(item => item.code);
+    console.log("nameCode", nameCode);
+    const checkSearch = nameCode.indexOf(searchProfile);
+    console.log("checkSearch", checkSearch);
+    if (checkSearch !== -1) {
+      history.push({
+        pathname: `/profile/${searchProfile}`,
+        state: { code_name: searchProfile }
+      });
+    } else {
+      history.push("/not-found");
+    }
+  }
+
+  return (
+    <>
+      <DemoNavbar />
+      <main>
+        <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>
+            <Form className="justify-content-center" onSubmit={onHandleSearch}>
+              <FormGroup>
+                <InputGroup className="mb-4">
+                  <InputGroupAddon addonType="prepend">
+                    <InputGroupText>
+                      <i className="ni ni-zoom-split-in" />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    placeholder="Tìm kiếm"
+                    type="text"
+                    value={searchProfile}
+                    onChange={handleChangeSearch}
+                  />
+                </InputGroup>
+              </FormGroup>
+              <div className="text-center">
+                <Button className="btn-1" color="primary" type="submit">
+                  Tìm kiếm
+                </Button>
+              </div>
+            </Form>
+          </Container>
+        </section>
+        <section className="section">
+          <ProfileTable dummyData={dummyData.data} />
+        </section>
+        <Sologan />
+      </main>
+      <SimpleFooter />
+    </>
+  );
+}
+
+export default SearchProfile;

src/constans/index.js

@@ -4,3 +4,17 @@ export const formatDateTime = (timeDate) => {
   let newDate = moment(new Date(Number(timeDate))).format("DD/MM/YYYY");
   return newDate.toString();
 }
+
+export const profileFormatDateTime = (timeDate) => {
+  let newDate = moment(new Date(Number(timeDate))).format("YYYY/MM/DD HH:mm:ss");
+  return newDate.toString();
+}
+
+export const validatePhoneNumber = (phoneNumber) => {
+  const regExp = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+  if(phoneNumber.match(regExp)){
+    return true;
+  }else {
+    return false;
+  }
+}

src/data/index.json

@@ -60,6 +60,67 @@
           ]
         }
       ]
+    },
+    {
+      "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
+      "code": "FPT",
+      "name": "Tập đoàn FPT",
+      "logo": "/image/logo/kis-academy.jpg",
+      "address": "Khu công nghệ cao Láng Hòa Lạc",
+      "phone_number": "024 2222222",
+      "qr_code": "/image/qrcode/qr-code.png",
+      "created_at": 1624870109921,
+      "profile_product": [
+        {
+          "trace_code": "VNC12345678",
+          "product_id": "o00h3maq-fbb9-4dd3-af84-8247efe74a92",
+          "name": "Tôm càng xanh loại 1",
+          "cost": "Liên hệ",
+          "origin": "Việt Nam",
+          "image": "/image/product/tom-su.jpg",
+          "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": [
+            {
+              "company": "Công ty Vinashin",
+              "description": "Bắt đầu nuôi trồng",
+              "date": 1616300741111
+            },
+            {
+              "company": "Công ty Vinashin",
+              "description": "Thu hoạch",
+              "date": 1626841541222
+            },
+            {
+              "company": "Công ty Coopmart",
+              "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
+              "date": 1626841541222
+            },
+            {
+              "company": "Công ty Coopmart",
+              "description": "Trưng bày siêu thị",
+              "date": 1627014341333
+            },
+            {
+              "company": "Công ty Coopmart",
+              "description": "Bán cho người tiêu dùng",
+              "date": 1627619141213
+            }
+          ],
+          "product_certification": [
+            {
+              "certification_information": "Chứng nhận certificate 1",
+              "image": "/image/certificate/certificate.jpg",
+              "date": 1624870109921
+            },
+            {
+              "certification_information": "Chứng nhận certificate 2",
+              "image": "/image/certificate/certificate.jpg",
+              "date": 1624870109921
+            }
+          ]
+        }
+      ]
     }
   ]
 }

src/index.js

@@ -31,14 +31,15 @@ import Login from "views/examples/Login.js";
 import Profile from "views/examples/Profile.js";
 import Register from "views/examples/Register.js";
 import Tracecode from "views/examples/Tracecode.js"
-import DetailProfile from "views/examples/DetailProfile.js"
 import NotFound from "views/examples/NotFound.js"
+import DetailProfile from "./components/Profile/DetailProfile.js"
+import SearchProfile from "./components/Profile/SearchProfile.js";
 // import { Routes } from "./reoutes";
 
 ReactDOM.render(
   <BrowserRouter>
     <Switch>
-      <Route path="/" exact render={props => <Index {...props} />} />
+      <Route path="/" exact render={props => <SearchProfile {...props} />} />
       <Route
         path="/profile/add"
         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 { profileFormatDateTime } from "constans";
+
+export const ProfileTable = (props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const toggle = () => setDropdownOpen(prevState => !prevState);
+
+  const history = useHistory();
+  // const dispatch = useDispatch();
+
+  const onHandleClickAdd = () => {
+    history.push("/profile/add");
+  };
+
+  const onHandleClickEdit = async (profileId) => {
+    let detailProfile = props.dummyData.filter(item => item.id === profileId);
+    history.push({
+      // pathname: "Routes.DetailProfile.path",
+      state: { profileId, detailProfile }  
+    });
+  } 
+
+  const onHandleClickDelete = (profileId) => {
+    // dispatch(props.onDeleteProfile(profileId));
+  }
+
+  useEffect(() => {
+    // dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
+
+  }, []);
+
+  const items = [];
+  const totalItem = "123";
+  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}>
+        {number}
+      </PaginationItem>
+    );
+  }
+
+  const TableRow = (props) => {
+    const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
+    const productName = profile_product ? profile_product.map(item => item.name) : "";
+    return (
+      <tr>
+        <th scope="row">{""}</th>
+        <td>{name}</td>
+        <td>{logo}</td>
+        <td>{phone_number}</td>
+        <td>{address}</td>
+        <td>{productName}</td>
+        <td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
+        <td>{qr_code}</td>
+        <td key={id}>
+          <Dropdown size="sm" isOpen={dropdownOpen} toggle={toggle}>
+            <DropdownToggle caret>
+              Menu
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem >
+                <i className="fa fa-plus" />{"Thêm sản phẩm"}
+              </DropdownItem>
+              <DropdownItem onClick={() => onHandleClickEdit(id)} >
+                <i className="fa fa-pencil" />{"Sửa"}
+                {/* <FontAwesomeIcon icon={faEdit} className="me-2" /> {t('common.table.edit')} */}
+              </DropdownItem>
+              <DropdownItem className="text-danger" onClick={() => onHandleClickDelete(id)}>
+                <i className="fa fa-trash" />{"Xóa"}
+                {/* <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> {t('common.table.remove')} */}
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </td>
+      </tr>
+    );
+  };
+
+  console.log("props.dummyData", props.dummyData);
+
+  return (
+    props.dummyData && props.dummyData.length > 0 ?
+      <Card className="mx-5">
+        <CardHeader>
+          <Row className="align-items-center">
+            <Col>
+              <h5>{"Thông tin doanh nghiệp"}</h5>
+            </Col>
+            <Col className="text-right">
+              <Button className="btn-1 ml-1" color="success" size="sm" type="button" onClick={() => onHandleClickAdd()}>{"Tạo mới doanh nghiệp"}</Button>
+            </Col>
+          </Row>
+        </CardHeader>
+        <Table striped responsive>
+          <thead>
+            <tr >
+              <th>{"STT"}</th>
+              <th>{"Tên doanh nghiệp"}</th>
+              <th>{"Logo"}</th>
+              <th>{"Số điện thoại"}</th>
+              <th>{"Địa chỉ"}</th>
+              <th>{"Tên sản phẩm"}</th>
+              <th>{"Ngày tạo"}</th>
+              <th>{"QR code"}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.dummyData ? props.dummyData.map(profile => <TableRow key={`page-visit-${profile.id}`} {...profile} />) : []}
+          </tbody>
+        </Table>
+        {/* <Card.Footer>
+          <Nav>
+            <Pagination className="mb-2 mb-lg-0">
+              <Pagination.Prev disabled={props.currentPage === 1} onClick={onPrevItem}>
+                {t('common.table.previous')}
+              </Pagination.Prev>
+              {items}
+              <Pagination.Next disabled={props.currentPage === Math.ceil(pageSize)} onClick={() => onNextItem()}>
+                {t('common.table.next')}
+              </Pagination.Next>
+            </Pagination>
+          </Nav>
+          <small className="fw-bold">
+            {t('common.table.showing', {
+              'current': props.dummyData.length,
+              'total': totalItem
+            })}
+          </small>
+        </Card.Footer> */}
+      </Card> 
+      : <div></div>
+  );
+}
\ No newline at end of file