Skip to content

A
Aqbits Trace Code
Commit 5d26dac1 authored by Trần Ngọc Nam Anh's avatar Trần Ngọc Nam Anh
Browse files
Options

Change Profile Detail UI

parent 0dccaeb8
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 83 deletions
src/components/Profile/DetailProfile.js
View file @ 5d26dac1
import React, { useState } from "react"; import React, { useState } from "react";
// reactstrap components // reactstrap components
import { Card, CardImg, Container, Row, Col } from "reactstrap"; import { Card, CardImg, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap";
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import QRCode from 'react-qr-code'; import QRCode from 'react-qr-code';
...@@ -13,93 +13,92 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js"; ...@@ -13,93 +13,92 @@ 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 dummyData from "data/index.json";
import './detail-profile.css';
const DetailProfile = () => { const DetailProfile = () => {
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 = dummyData.data.filter(item => item.code === code_name); const listData = dummyData.data.filter(item => item.code === code_name);
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
<main> <main>
<MainBanner /> <MainBanner />
<section className="section bg-secondary"> <section className="section bg-secondary">
{listData && listData.length > 0 ? {listData && listData.length > 0 ?
listData.map(data => { listData.map(data => {
return ( return (
<Container> <Container>
<Row className="row-grid align-items-center"> <Row className="row-grid align-items-center">
<Col md="6"> <Col md={6} >
<Card className="bg-default shadow border-0"> <div className="d-flex justify-content-center">
<CardImg <img
alt="..." className="px-auto shadow"
src={window.location.origin + data.logo} alt="..."
top src={window.location.origin + data.logo}
/> top
</Card> />
</Col> </div>
<Col md="6"> </Col>
<div className="pl-md-5"> <Col md={6}>
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5"> <div className="h2 mb-3">{data.name}</div>
<div className="mb-3">
<div className="h5 font-weight-bold">Số điện thoại</div>
<div className="h5">{data.phone_number}</div>
</div>
<div className="mb-3">
<div className="h5 font-weight-bold">Địa chỉ</div>
<div className="h5">{data.address}</div>
</div>
</Col>
</Row>
<Row>
<Col md={12}>
<div className="h5 font-weight-bold mt-5">Danh sách sản phẩm</div>
</Col>
</Row>
<Row className="row-grid">
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" /> <i className="ni ni-settings" />
</div> */} </div> */}
<div className="h2 mb-3">{data.name}</div> {data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
<div className="mb-3"> const onHandleTraceCode = () => {
<div className="h5 font-weight-bold">Số điện thoại</div> console.log("product", product);
<div className="h5">{data.phone_number}</div> console.log("click");
</div> history.push({
<div className="mb-3"> pathname: `/trace-code/${product.trace_code}`,
<div className="h5 font-weight-bold">Địa chỉ</div> state: { product }
<div className="h5">{data.address}</div> });
</div> }
<div className="mb-3"> return (
<div className="h5 font-weight-bold">Sản phẩm</div> <Col lg={6} md={12} className="my-3">
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => { <Card className="w-100 hover-shadow" onClick={onHandleTraceCode}>
const onHandleTraceCode = () => { <CardHeader className="h5 mb-3">{product.name}</CardHeader>
console.log("product", product); <CardBody>
console.log("click"); <div className="d-flex justify-content-around">
history.push({ <img className="mb-3" src={window.location.origin + product.image} alt="product"/>
pathname: `/trace-code/${product.trace_code}`, <QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} />
state: { product } </div>
}); <h5>Mô tả</h5>
} <CardText>{product.description}</CardText>
return ( </CardBody>
<> </Card>
<div className="h5 mb-3">{product.name}</div> </Col>
<div className="mb-3"> );
<Row> }) : null}
<Col> </Row>
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} /> </Container>
</Col> );
<Col> }) : <div className="h4 font-weight-bold">Not found profile</div>
<QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} /> }
</Col> </section>
</Row> <Sologan />
</div> </main>
<div> <SimpleFooter />
<div className="h5 font-weight-bold">Mô tả</div> </>
<div className="h5">{product.description}</div> );
</div>
</>
);
}) : null}</div>
</div>
</div>
</Col>
</Row>
</Container>
);
}) : <div className="h4 font-weight-bold">Not found profile</div>
}
</section>
<Sologan />
</main>
<SimpleFooter />
</>
);
//}
} }
export default DetailProfile; export default DetailProfile;
......
src/components/Profile/detail-profile.css 0 → 100644
View file @ 5d26dac1
.hover-shadow {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease-in-out;
}
.hover-shadow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
cursor: pointer;
}
\ No newline at end of file
src/data/index.json
View file @ 5d26dac1
...@@ -60,6 +60,108 @@ ...@@ -60,6 +60,108 @@
"date": 1624870109921 "date": 1624870109921
} }
] ]
},
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm càng xanh loại 2",
"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",
"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
}
]
},
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm càng xanh loại 3",
"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",
"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
}
]
} }
] ]
}, },
......
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