Skip to content

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

create table product diary

parent a76888b1
Show whitespace changes
Inline Side-by-side
Showing with 411 additions and 566 deletions
package-lock.json
View file @ b04f6b72
......@@ -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",
......
src/HomePage.js
View file @ b04f6b72
......@@ -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
View file @ b04f6b72
/*!
=========================================================
* 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 0 → 100644
View file @ b04f6b72
import React from "react";
const AddDiary = () => {
return (
<div></div>
);
}
export default AddDiary;
\ No newline at end of file
src/components/Profile/AddProduct.js
View file @ b04f6b72
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
View file @ b04f6b72
......@@ -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
View file @ b04f6b72
......@@ -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/components/Profile/Tracecode.js
View file @ b04f6b72
/*!
=========================================================
* 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, { useState } from "react";
import { useHistory } from 'react-router-dom';
// nodejs library that concatenates classes
import classnames from "classnames";
// reactstrap components
import {
Badge,
Button,
Card,
CardBody,
CardImg,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
NavItem,
NavLink,
Nav,
TabContent,
TabPane,
Row,
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
import { Card, CardBody, CardImg, Container, NavItem, NavLink, Nav, TabContent, TabPane, Row, Col } from "reactstrap";
// core components
import MainBanner from "components/Generals/MainBanner.js";
import Sologan from "components/Generals/Sologan";
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import AmazingTeam from "components/Footers/AmazingTeam.js";
import { formatDateTime } from '../../constans/index.js';
import dummyData from '../../data/index.json';
// index page sections
import Download from "../../views/IndexSections/Download.js";
import Tabs from "../../views/IndexSections/Tabs.js";
const Tracecode = () => {
const [plainTabs, setPlainTabs] = useState(1);
// state = {
// plainTabs: 1
// };
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
const toggleNavs = (e, index) => {
e.preventDefault();
setPlainTabs(index);
// this.setState({
// [state]: index
// });
};
const history = useHistory();
let state = { ...history.location.state };
......@@ -192,14 +139,14 @@ const Tracecode = () => {
</TabPane>
<TabPane tabId="plainTabs3">
<div className="description">
{product.product_certification.map((certificate) => (
<Row>
{product.product_certification.map((certificate) => (
<Col xs={4}>
<img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
<div className="h5 mt-3 mb-3 font-weight-bold">{certificate.certification_information}</div>
</Col>
</Row>
))}
</Row>
</div>
</TabPane>
</TabContent>
......@@ -210,226 +157,23 @@ const Tracecode = () => {
</>
);
}
// render() {
return (
<>
<DemoNavbar />
<main>
<MainBanner/>
<MainBanner />
{renderProductInfo(product)}
<section className="section bg-gradient-warning">
<Container>
{renderTabs(product)}
</Container>
{/* SVG separator */}
{/* <div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div> */}
</section>
{/* <Sologan /> */}
{/* <section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section> */}
</main>
<SimpleFooter/>
<SimpleFooter />
</>
);
//}
}
export default Tracecode;
src/data/index.json
View file @ b04f6b72
......@@ -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
View file @ b04f6b72
......@@ -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
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