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

Pages Product

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-17 17:36:13 +07:00
parent 9490fd23b2
commit 5069f63374
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/pages/Transaction/Product.js
View File

@ -1,11 +1,11 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {Button, Card, Col, Input, Row, Select} from "antd"; import { Button, Card, Col, Input, Row, Select, message } from "antd";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {BuyProductModal} from "../../component/BuyProductModal"; import { BuyProductModal } from "../../component/BuyProductModal";
const {Search} = Input; const { Search } = Input;
const {Option} = Select; const { Option } = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
@ -13,6 +13,8 @@ export const Product = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]); const [productData, setProductData] = useState([]);
const [data, setData] = useState({}); const [data, setData] = useState({});
const [kode, setKode] = useState({});
const [cardIndex, setCardIndex] = useState({});
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
@ -49,15 +51,20 @@ export const Product = observer(() => {
await store.transaction.getData(); await store.transaction.getData();
}; };
const handleBuyProduct = (data) => { const handleBuyProduct = async (kode) => {
setData(data); console.log(kode);
store.transaction.visibleModalTransaction = true; try {
await store.product.buyProduct({ productCode: kode });
message.success("Success Buy Product");
} catch (e) {
message.error("Failed Buy Product");
}
}; };
return ( return (
<div> <div>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category Sub Category
</span> </span>
</Row> </Row>
@ -100,12 +107,20 @@ export const Product = observer(() => {
{productData.map((item, index) => ( {productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card <Card
onClick={() => handleBuyProduct(item)} onClick={() => {
style={{cursor: "pointer"}} setKode(item.code);
setCardIndex(index);
}}
hoverable
style={{
cursor: "pointer",
borderColor: cardIndex === index ? "#2D9CDB" : "",
marginLeft: "10px",
}}
> >
<span style={{color: "black"}}>{item.name}</span> <span style={{ color: "black" }}>{item.name}</span>
<br/> <br />
<span style={{color: "grey", fontSize: 10}}> <span style={{ color: "grey", fontSize: 10 }}>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
@ -118,7 +133,10 @@ export const Product = observer(() => {
)} )}
{productData.length !== 0 && ( {productData.length !== 0 && (
<Col style={{ textAlign: "right" }}> <Col style={{ textAlign: "right" }}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button
style={{ backgroundColor: "#2D9CDB", color: "white" }}
onClick={() => handleBuyProduct(kode)}
>
Beli Sekarang Beli Sekarang
</Button> </Button>
</Col> </Col>