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";
// 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 QRCode from 'react-qr-code';
......@@ -13,93 +13,92 @@ 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 = () => {
const history = useHistory();
const state = { ...history.location.state };
const code_name = state.code_name;
const listData = dummyData.data.filter(item => item.code === code_name);
const history = useHistory();
const state = { ...history.location.state };
const code_name = state.code_name;
const listData = dummyData.data.filter(item => item.code === code_name);
return (
<>
<DemoNavbar />
<main>
<MainBanner />
<section className="section bg-secondary">
{listData && listData.length > 0 ?
listData.map(data => {
return (
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + data.logo}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
return (
<>
<DemoNavbar />
<main>
<MainBanner />
<section className="section bg-secondary">
{listData && listData.length > 0 ?
listData.map(data => {
return (
<Container>
<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
/>
</div>
</Col>
<Col md={6}>
<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" />
</div> */}
<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>
<div className="mb-3">
<div className="h5 font-weight-bold">Sản phẩm</div>
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => {
console.log("product", product);
console.log("click");
history.push({
pathname: `/trace-code/${product.trace_code}`,
state: { product }
});
}
return (
<>
<div className="h5 mb-3">{product.name}</div>
<div className="mb-3">
<Row>
<Col>
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
</Col>
<Col>
<QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} />
</Col>
</Row>
</div>
<div>
<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 />
</>
);
//}
{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => {
console.log("product", product);
console.log("click");
history.push({
pathname: `/trace-code/${product.trace_code}`,
state: { product }
});
}
return (
<Col lg={6} md={12} className="my-3">
<Card className="w-100 hover-shadow" onClick={onHandleTraceCode}>
<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} />
</div>
<h5>Mô tả</h5>
<CardText>{product.description}</CardText>
</CardBody>
</Card>
</Col>
);
}) : null}
</Row>
</Container>
);
}) : <div className="h4 font-weight-bold">Not found profile</div>
}
</section>
<Sologan />
</main>
<SimpleFooter />
</>
);
}
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 @@
"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