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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 566 deletions
package-lock.json
View file @ b04f6b72
...@@ -12330,6 +12330,16 @@ ...@@ -12330,6 +12330,16 @@
"resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
"integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=" "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": { "qs": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
......
src/HomePage.js
View file @ b04f6b72
...@@ -47,52 +47,5 @@ export default () => ( ...@@ -47,52 +47,5 @@ export default () => (
<RouteWithLoader exact path="/profile/:code" component={DetailProfile} /> <RouteWithLoader exact path="/profile/:code" component={DetailProfile} />
<RouteWithLoader exact path="/trace-code/:trace" component={Tracecode} /> <RouteWithLoader exact path="/trace-code/:trace" component={Tracecode} />
<RouteWithLoader exact path="/not-found" component={NotFound} /> <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> </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 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";
class MainBanner extends React.Component { // reactstrap components
render() { import { Container, Row, Col } from "reactstrap";
return (
<> const MainBanner = () => {
<div className="position-relative"> return (
{/* shape Hero */} <>
<section className="section section-lg section-shaped pb-100"> <div className="position-relative">
<div className="shape shape-style-1 shape-default"> {/* shape Hero */}
<span /> <section className="section section-lg section-shaped pb-100">
<span /> <div className="shape shape-style-1 shape-default">
<span /> <span />
<span /> <span />
<span /> <span />
<span /> <span />
<span /> <span />
<span /> <span />
<span /> <span />
</div> <span />
<Container className="py-lg-md d-flex"> <span />
<div className="col px-0">
<Row>
<Col lg="10">
<h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dù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
</p>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<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>
{/* 1st Hero Variation */}
</div> </div>
</> <Container className="py-lg-md d-flex">
); <div className="col px-0">
} <Row>
<Col lg="10">
<h1 className="display-3 text-white">
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
</p>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<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>
{/* 1st Hero Variation */}
</div>
</>
);
} }
export default MainBanner; 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 React, { useState } from "react";
import { useHistory } from "react-router"; import { useHistory } from "react-router";
import { v4 as uuidv4 } from 'uuid'; 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 // core components
import MainBanner from "../Generals/MainBanner.js"; import MainBanner from "../Generals/MainBanner.js";
import DemoNavbar from "../Navbars/DemoNavbar.js"; import DemoNavbar from "../Navbars/DemoNavbar.js";
import dummyData from "../../data/index.json"; import dummyData from "../../data/index.json";
import { ProductDiaryTable } from "../../views/IndexSections/Table.js";
const AddProduct = () => { const AddProduct = () => {
const history = useHistory(); const history = useHistory();
const state = { ...history.location.state }; const state = { ...history.location.state };
const profileId = state.profileId; const profileId = state.profileId;
const productId = state.productId; const productId = state.productId;
const detailProduct = productId ? state.detailProduct : {}; const detailProduct = productId ? state.detailProduct[0] : {};
console.log("detailProduct", detailProduct); console.log("detailProduct", detailProduct);
const [productName, setProductName] = useState(productId ? detailProduct[0].name : ""); const [productName, setProductName] = useState(productId ? detailProduct.name : "");
const [traceCode, setTraceCode] = useState(productId ? detailProduct[0].trace_code : ""); const [traceCode, setTraceCode] = useState(productId ? detailProduct.trace_code : "");
const [cost, setCost] = useState(productId ? detailProduct[0].cost : ""); const [cost, setCost] = useState(productId ? detailProduct.cost : "");
const [origin, setOrigin] = useState(productId ? detailProduct[0].origin : ""); const [origin, setOrigin] = useState(productId ? detailProduct.origin : "");
const [productImage, setProductImage] = useState(productId ? detailProduct[0].image : ""); const [productImage, setProductImage] = useState(productId ? detailProduct.image : "");
const [description, setDescription] = useState(productId ? detailProduct[0].description : ""); const [description, setDescription] = useState(productId ? detailProduct.description : "");
const [growingConditions, setGrowingConditions] = useState(productId ? detailProduct[0].growing_conditions : ""); const [growingConditions, setGrowingConditions] = useState(productId ? detailProduct.growing_conditions : "");
const onHandleBack = () => { const onHandleBack = () => {
history.push("/profile/add"); history.push("/profile/add");
...@@ -55,6 +56,13 @@ const AddProduct = () => { ...@@ -55,6 +56,13 @@ const AddProduct = () => {
history.push("/profile/add"); history.push("/profile/add");
} }
const onHandleClickAddProductDiary = () => {
history.push({
pathname: "/profile/add-product-diary",
state: { profileId }
});
}
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
...@@ -63,6 +71,14 @@ const AddProduct = () => { ...@@ -63,6 +71,14 @@ const AddProduct = () => {
<section className="section section-components"> <section className="section section-components">
<Container> <Container>
<Form onSubmit={onHandleAddProduct}> <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> <FormGroup>
<Label for="product-name">Tên sản phẩm</Label> <Label for="product-name">Tên sản phẩm</Label>
<InputGroup className="mb-4"> <InputGroup className="mb-4">
...@@ -167,7 +183,10 @@ const AddProduct = () => { ...@@ -167,7 +183,10 @@ const AddProduct = () => {
</FormText> </FormText>
</Col> </Col>
</FormGroup> </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 <Button
color="info" color="info"
type="button" type="button"
......
src/components/Profile/DetailProfile.js
View file @ b04f6b72
...@@ -3,7 +3,7 @@ import { connect, useDispatch } from "react-redux"; ...@@ -3,7 +3,7 @@ import { connect, useDispatch } from "react-redux";
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { Card, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap"; 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 // core components
...@@ -12,13 +12,15 @@ import Sologan from "components/Generals/Sologan"; ...@@ -12,13 +12,15 @@ import Sologan from "components/Generals/Sologan";
import DemoNavbar from "components/Navbars/DemoNavbar.js"; import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js"; import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "../../data/index.json";
import './detail-profile.css'; import './detail-profile.css';
const DetailProfile = (props) => { const DetailProfile = (props) => {
const history = useHistory(); const history = useHistory();
const state = { ...history.location.state }; const state = { ...history.location.state };
const code_name = state.code_name; 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 ( return (
<> <>
...@@ -33,11 +35,17 @@ const DetailProfile = (props) => { ...@@ -33,11 +35,17 @@ const DetailProfile = (props) => {
<Row className="row-grid align-items-center"> <Row className="row-grid align-items-center">
<Col md={6} > <Col md={6} >
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <QRCode
className="px-auto shadow" size={250}
alt="..." // fgColor="#7f0000"
src={window.location.origin + data.logo} includeMargin
top value={`http://trace.aqbits.net/trace-code/${data.qr_code}`}
imageSettings={{
width: 120,
height: 60,
src: window.location.origin + data.logo,
excavate: true,
}}
/> />
</div> </div>
</Col> </Col>
...@@ -77,8 +85,18 @@ const DetailProfile = (props) => { ...@@ -77,8 +85,18 @@ const DetailProfile = (props) => {
<CardHeader className="h5 mb-3">{product.name}</CardHeader> <CardHeader className="h5 mb-3">{product.name}</CardHeader>
<CardBody> <CardBody>
<div className="d-flex justify-content-around"> <div className="d-flex justify-content-around">
<img className="mb-3" src={window.location.origin + product.image} alt="product"/> <QRCode
<QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} /> 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> </div>
<h5>Mô tả</h5> <h5>Mô tả</h5>
<CardText>{product.description}</CardText> <CardText>{product.description}</CardText>
......
src/components/Profile/SearchProfile.js
View file @ b04f6b72
...@@ -13,6 +13,8 @@ import SimpleFooter from "components/Footers/SimpleFooter"; ...@@ -13,6 +13,8 @@ import SimpleFooter from "components/Footers/SimpleFooter";
import { listProfile, addProfile, deleteProfile, previousAction, nextAction } from "../../store/actions/ProfileAction"; import { listProfile, addProfile, deleteProfile, previousAction, nextAction } from "../../store/actions/ProfileAction";
import { ProfileTable } from "../../views/IndexSections/Table"; import { ProfileTable } from "../../views/IndexSections/Table";
import dummyData from "../../data/index.json";
const SearchProfile = (props) => { const SearchProfile = (props) => {
const [searchProfile, setSearchProfile] = useState(""); const [searchProfile, setSearchProfile] = useState("");
...@@ -26,7 +28,7 @@ const SearchProfile = (props) => { ...@@ -26,7 +28,7 @@ const SearchProfile = (props) => {
const onHandleSearch = (event) => { const onHandleSearch = (event) => {
event.preventDefault(); event.preventDefault();
if (!searchProfile) return; if (!searchProfile) return;
const nameCode = props.listProfile.map(item => item.code); const nameCode = dummyData.data.map(item => item.code);
const checkSearch = nameCode.indexOf(searchProfile); const checkSearch = nameCode.indexOf(searchProfile);
if (checkSearch !== -1) { if (checkSearch !== -1) {
history.push({ history.push({
...@@ -78,12 +80,12 @@ const SearchProfile = (props) => { ...@@ -78,12 +80,12 @@ const SearchProfile = (props) => {
</section> </section>
<section className="section"> <section className="section">
<ProfileTable <ProfileTable
listProfile={props.listProfile} listProfile={dummyData.data}
currentPage={props.currentPage} currentPage={props.currentPage}
limit={props.limit} limit={props.limit}
nextPage={props.nextPage} nextPage={props.nextPage}
previosPage={props.previosPage} previosPage={props.previosPage}
total={props.total} total={dummyData.data.length}
onLoadListProfile={props.onLoadListProfile} onLoadListProfile={props.onLoadListProfile}
onLoadPreviousPage={props.onLoadPreviousPage} onLoadPreviousPage={props.onLoadPreviousPage}
onLoadNextPage={props.onLoadNextPage} onLoadNextPage={props.onLoadNextPage}
......
src/components/Profile/Tracecode.js
View file @ b04f6b72
This diff is collapsed.
src/data/index.json
View file @ b04f6b72
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92", "id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
"code": "KIS", "code": "KIS",
"name": "Công ty TNHH sáng tạo 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", "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", "phone_number": "024 3795 521",
"qr_code": "/image/qrcode/qr-code.png", "qr_code": "/image/qrcode/qr-code.png",
...@@ -24,13 +24,13 @@ ...@@ -24,13 +24,13 @@
"product_chain_diary": [ "product_chain_diary": [
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng", "description": "Bắt đầu nuôi trồng",
"date": 1616300741111 "date": 1616300741111
}, },
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Thu hoạch", "description": "Thu hoạch",
"date": 1626841541222 "date": 1626841541222
}, },
...@@ -82,13 +82,13 @@ ...@@ -82,13 +82,13 @@
"product_chain_diary": [ "product_chain_diary": [
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng", "description": "Bắt đầu nuôi trồng",
"date": 1616300741111 "date": 1616300741111
}, },
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Thu hoạch", "description": "Thu hoạch",
"date": 1626841541222 "date": 1626841541222
}, },
...@@ -140,13 +140,13 @@ ...@@ -140,13 +140,13 @@
"product_chain_diary": [ "product_chain_diary": [
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng", "description": "Bắt đầu nuôi trồng",
"date": 1616300741111 "date": 1616300741111
}, },
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Thu hoạch", "description": "Thu hoạch",
"date": 1626841541222 "date": 1626841541222
}, },
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"code": "FPT", "code": "FPT",
"name": "Tập đoàn 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", "address": "Khu công nghệ cao Láng Hòa Lạc",
"phone_number": "0242222222", "phone_number": "0242222222",
"qr_code": "/image/qrcode/qr-code.png", "qr_code": "/image/qrcode/qr-code.png",
...@@ -209,13 +209,13 @@ ...@@ -209,13 +209,13 @@
"product_chain_diary": [ "product_chain_diary": [
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Bắt đầu nuôi trồng", "description": "Bắt đầu nuôi trồng",
"date": 1616300741111 "date": 1616300741111
}, },
{ {
"id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92", "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
"company": "Công ty Vinashin", "company": "Công ty Vinashrimp",
"description": "Thu hoạch", "description": "Thu hoạch",
"date": 1626841541222 "date": 1626841541222
}, },
......
src/views/IndexSections/Table.js
View file @ b04f6b72
...@@ -77,7 +77,7 @@ export const ProfileTable = (props) => { ...@@ -77,7 +77,7 @@ export const ProfileTable = (props) => {
<tr> <tr>
<th scope="row">{""}</th> <th scope="row">{""}</th>
<td>{name}</td> <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>{phone_number}</td>
<td>{address}</td> <td>{address}</td>
<td dangerouslySetInnerHTML={{__html: listProductName}}></td> <td dangerouslySetInnerHTML={{__html: listProductName}}></td>
...@@ -300,4 +300,130 @@ export const ProductTable = (props) => { ...@@ -300,4 +300,130 @@ export const ProductTable = (props) => {
</Card> </Card>
: <div></div> : <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