PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add separated column in date and add pagination on price history on product detail

Browse Source
This commit is contained in:
caturbgs
2021-12-23 23:16:47 +07:00
parent 097782d791
commit 98e7827247
3 changed files with 69 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/Product/ProductDetail.js
View File

@@ -1,19 +1,18 @@
import React, { useContext, useEffect } from "react";
import { Button, Card, Col, Row, Table, Typography } from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import React, {useContext, useEffect} from "react";
import {Card, Col, Row, Table, Typography} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
import {useParams} from "react-router-dom";
const { Title, Text } = Typography;
const {Title, Text} = Typography;
export const ProductDetail = observer(() => {
const store = useStore();
const { id } = useParams();
const {id} = useParams();
const modalLoader = useContext(ModalLoaderContext);
const routeData = [
@@ -35,21 +34,18 @@ export const ProductDetail = observer(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
//store.authentication.getProfile(),
store.product.getDetail(id),
store.product.getPriceHistoryByProduct(id),
store.product.getDetailProduct(id),
]);
modalLoader.setLoading(false);
})();
}, []);
//console.log(id)
const columns = [
{
title: "Markup Price",
dataIndex: "mark_up_price",
key: "mark_up_price",
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
@@ -60,7 +56,6 @@ export const ProductDetail = observer(() => {
title: "Price",
dataIndex: "price",
key: "price",
width: "50%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
@@ -68,12 +63,22 @@ export const ProductDetail = observer(() => {
}).format(text),
},
{
title: "Transaction Date",
title: "Tanggal Berlaku",
dataIndex: "startDate",
key: "startDate",
render: (text, record) => {
render: (text) => {
return (
<Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</Text>
<Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
);
},
},
{
title: "Tanggal Berakhir",
dataIndex: "endDate",
key: "endDate",
render: (text) => {
return (
<Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}</Text>
);
},
},
@@ -105,47 +110,25 @@ export const ProductDetail = observer(() => {
<Text strong>Kode</Text>
</Col>
<Col span={12}>
<Text>{store.product.dataDetailProduct.code}</Text>
<Text>{store.product?.dataDetailProduct?.code}</Text>
</Col>
<Col span={12}>
<Text strong>Nama Produk</Text>
</Col>
<Col span={10}>
<Text>{store.product.dataDetailProduct.name}</Text>
</Col>
<Col span={12}>
<Text strong>Harga Beli</Text>
</Col>
<Col span={12}>
<Text>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.product.dataDetailProduct.basePrice)}
</Text>
</Col>
<Col span={12}>
<Text strong>Harga Jual</Text>
</Col>
<Col span={12}>
<Text>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.product.dataDetailProduct.price)}
</Text>
<Text>{store.product?.dataDetailProduct?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Supplier</Text>
</Col>
<Col span={12}>
<Text>{store.product.dataDetailProduct.supplier.name}</Text>
<Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Status</Text>
</Col>
<Col span={12}>
<Text>{store.product.dataDetailProduct.status}</Text>
<Text>{store.product?.dataDetailProduct?.status}</Text>
</Col>
</Row>
</Col>
@@ -174,9 +157,24 @@ export const ProductDetail = observer(() => {
Filter
</Button> */}
<Table
columns={columns}
dataSource={store.product.dataDetail}
bordered
columns={columns}
dataSource={store.product.dataPriceHistory}
bordered
pagination={{
pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSizePriceHistory = page.pageSize;
store.product.pagePriceHistory = pageNumber - 1;
modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false);
}}
/>
</div>
</Col>