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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/component/ProductComponent.js
View File

@ -109,10 +109,7 @@ export const ProductComponent = observer((props) => {
render: (text, record) => (
<Button
onClick={async () => {
await store.product.getDetail(record.product_id);
await store.product.getDetailProduct(record.product_id);
history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
//console.log(record.product_id);
}}
>
Detail

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

@ -1,10 +1,9 @@
import React, {useContext, useEffect} from "react";
import { Button, Card, Col, Row, Table, Typography } from "antd";
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 { FilterOutlined } from "@ant-design/icons";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
import {useParams} from "react-router-dom";
@ -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>
@ -175,8 +158,23 @@ export const ProductDetail = observer(() => {
</Button> */}
<Table
columns={columns}
dataSource={store.product.dataDetail}
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>

25
src/store/product.js
View File

@ -13,7 +13,7 @@ export class Product {
uploadBtnProduct = false;
pageCategories = 0;
pageSizeCategories = 10
pageSizeCategories = 100;
dataCategories = [];
total_dataCategories = 0;
@ -22,11 +22,13 @@ export class Product {
dataSubCategories = [];
total_dataSubCategories = 0;
filterCategory = null;
dataDetail=[]
dataDetailProduct=[]
pageGetDetail=0
supplier=null
dataPriceHistory = [];
totalDataPriceHistory = 0;
pagePriceHistory = 0;
pageSizePriceHistory = 10
dataDetailProduct = {};
constructor(ctx) {
this.ctx = ctx;
@ -72,22 +74,21 @@ export class Product {
console.error(e);
}
}
async getDetail(id) {
async getPriceHistoryByProduct(id) {
try {
const response = await http.get(`/product/price-history/${id}?page=${this.pageGetDetail}&supplier=${this.supplier}`);
//console.log(response,' Detail')
this.dataDetail = response.body.data
this.total_data = response?.body?.count ?? 0
const response = await http.get(`/product/price-history/${id}?page=${this.pagePriceHistory}&pageSize${this.pageSizePriceHistory}`);
this.dataPriceHistory = response.body.data
this.totalDataPriceHistory = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
}
async getDetailProduct(id) {
try {
const response = await http.get(`/product/${id}`);
//console.log(response,' Detail Product')
this.dataDetailProduct = response.body.data
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}