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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into devops-staging

Browse Source
This commit is contained in:
Muhammad Fadli 2023-08-23 12:03:36 +07:00
commit 5840741108
1 changed files with 188 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,39 +57,39 @@ export const ProductDetail = observer(() => {
dataIndex: "mark_up_price", dataIndex: "mark_up_price",
key: "mark_up_price", key: "mark_up_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Price", title: "Price",
dataIndex: "price", dataIndex: "price",
key: "price", key: "price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Biaya Admin", title: "Biaya Admin",
dataIndex: "admin_price", dataIndex: "admin_price",
key: "admin_price", key: "admin_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, { }, {
title: "Partner fee", title: "Partner fee",
dataIndex: "partner_fee", dataIndex: "partner_fee",
key: "partner_fee", key: "partner_fee",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Tanggal Berlaku", title: "Tanggal Berlaku",
@ -97,7 +97,7 @@ export const ProductDetail = observer(() => {
key: "startDate", key: "startDate",
render: (text) => { render: (text) => {
return ( return (
<Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text> <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
); );
}, },
}, },
@ -107,174 +107,178 @@ export const ProductDetail = observer(() => {
key: "endDate", key: "endDate",
render: (text) => { render: (text) => {
return ( return (
<Text> <Text>
{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"} {text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}
</Text> </Text>
); );
}, },
}, },
]; ];
if (store.authentication.userData.role === "Admin Partner") delete columns[0];
if (store.authentication.userData.role === "Admin Partner") delete columns[3];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? { ? {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
} }
: { fontSize: "0.75rem" }; : { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop const styleSaldoContent = store.ui.mediaQuery.isDesktop
? { ? {
fontSize: "1.25rem", fontSize: "1.25rem",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
} }
: null; : null;
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Title strong>Product Detail</Title> <Title strong>Product Detail</Title>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}> <Col lg={12} xs={24}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Text strong>Kode</Text> <Text strong>Kode</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.product?.dataDetailProduct?.code}</Text> <Text>{store.product?.dataDetailProduct?.code}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Nama Produk</Text> <Text strong>Nama Produk</Text>
</Col> </Col>
<Col span={10}> <Col span={10}>
<Text>{store.product?.dataDetailProduct?.name}</Text> <Text>{store.product?.dataDetailProduct?.name}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Supplier</Text> <Text strong>Supplier</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.product?.dataDetailProduct?.supplier?.name}</Text> <Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Status</Text> <Text strong>Status</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.product?.dataDetailProduct?.status}</Text> <Text>{store.product?.dataDetailProduct?.status}</Text>
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <div>
<Title strong level={3}> <Title strong level={3}>
Product Price History Product Price History
</Title> </Title>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
columns={columns} columns={columns}
dataSource={store.product.dataPriceHistory} dataSource={store.product.dataPriceHistory}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSizePriceHistory, pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory, total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1, current: store.product.pagePriceHistory + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSizePriceHistory = page.pageSize; store.product.pageSizePriceHistory = page.pageSize;
store.product.pagePriceHistory = pageNumber - 1; store.product.pagePriceHistory = pageNumber - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id); await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)} )}
{store.ui.mediaQuery.isMobile && ( {store.ui.mediaQuery.isMobile && (
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page, pageSize) => { onChange: async (page, pageSize) => {
store.product.pageSizePriceHistory = pageSize; store.product.pageSizePriceHistory = pageSize;
store.product.pagePriceHistory = page - 1; store.product.pagePriceHistory = page - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id); await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.product.pageSizePriceHistory, pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory, total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1, current: store.product.pagePriceHistory + 1,
style: { marginBottom: "1rem", marginRight: "1rem" }, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.product.dataPriceHistory} dataSource={store.product.dataPriceHistory}
style={{ padding: 0 }} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
<List.Item <List.Item
key={item.id} key={item.id}
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<List.Item.Meta <List.Item.Meta
className={[""].join(" ")} className={[""].join(" ")}
//title={item.mark_up_price} //title={item.mark_up_price}
description={ description={
<div style={{}}> <div style={{}}>
<p> <p>
<small> {store.authentication.userData.role === "Admin" ?
`<small>
Markup Price :{" "} Markup Price :{" "}
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(item.mark_up_price)} }).format(item.mark_up_price)}
</small>{" "} </small>{" "}` : ''}
<br /> <br />
<small> <small>
Price:{" "} Price:{" "}
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(item.price)} }).format(item.price)}
</small>{" "} </small>{" "}
<br /> <br />
<small> <small>
{" "} {" "}
Tanggal Berlaku : Tanggal Berlaku :
{item.startDate {item.startDate
? format( ? format(
parseISO(item.startDate), parseISO(item.startDate),
"dd MMMM yyyy" "dd MMMM yyyy"
) )
: "-"} : "-"}
</small>{" "} </small>{" "}
<br /> <br />
<small> <small>
Tanggal Berakhir :{" "} Tanggal Berakhir :{" "}
{item.endDate {item.endDate
? format( ? format(
parseISO(item.endDate), parseISO(item.endDate),
"dd MMMM yyyy" "dd MMMM yyyy"
) )
: "Sampai Sekarang"} : "Sampai Sekarang"}
</small>{" "} </small>{" "}
<br /> <br />
</p> </p>
<p></p> <p></p>
</div> </div>
} }
/> />
{/* <div style={{ marginRight: 16 }}> {/* <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -295,18 +299,18 @@ export const ProductDetail = observer(() => {
</Tag> </Tag>
</p> </p>
</div> */} </div> */}
</List.Item> </List.Item>
<Divider plain style={{ margin: 0 }} /> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}
/> />
)} )}
</div> </div>
</Col> </Col>
</Row> </Row>
<div /> <div />
</Card> </Card>
</div> </div>
); );
}); });