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

21
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, { useContext, useState } from "react";
import React, {useContext, useState} from "react";
import {
Button,
Col,
@ -15,19 +15,19 @@ import {
Tag,
Typography,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
import { ModalLoaderContext } from "../utils/modal";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
const { Title, Text } = Typography;
const {Title, Text} = Typography;
export const ProductComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const { Option } = Select;
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]);
@ -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

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>

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);
}