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

fix: add membership owner

Browse Source
This commit is contained in:
rarsyansyahr
2021-12-17 06:01:12 +07:00
parent 068444fb07
commit 4f82f9d978
5 changed files with 173 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,111 +1,129 @@
import React, {useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, Row, Select} from "antd";
import {observer} from "mobx-react-lite";
import {BuyProductModal} from "../../component/BuyProductModal";
import React, { useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import { Button, Card, Col, Input, Row, Select } from "antd";
import { observer } from "mobx-react-lite";
import { BuyProductModal } from "../../component/BuyProductModal";
const {Search} = Input;
const {Option} = Select;
const { Search } = Input;
const { Option } = Select;
export const Product = observer(() => {
const store = useStore();
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]);
const [data, setData] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]);
const [data, setData] = useState({});
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getDataCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getDataCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
init();
}, []);
// data
useEffect(() => {
console.log('⚡ transaction data store', store.transaction.data)
setProductData(store.transaction.data)
}, [store.transaction.data])
// data
useEffect(() => {
console.log("⚡ transaction data store", store.transaction.data);
setProductData(store.transaction.data);
}, [store.transaction.data]);
// Subcategory
useEffect(() => {
console.log('⚡ transaction subcategory store', store.transaction.dataSubCategories)
}, [store.transaction.dataSubCategories])
const handleChangeSubcategory = async (item) => {
console.log('item', item);
store.transaction.filterSubCategory = item;
await store.transaction.getData();
}
const handleBuyProduct = (data) => {
setData(data);
store.transaction.visibleModalTransaction = true;
}
return (
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
Sub Category
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => {
if (val) {
handleChangeSubcategory(val)
}
}}
style={{marginBottom: "10px", width: "100%"}}>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
<Col span={12} style={{fontWeight: "bold", display: "flex", alignItems: "center"}}>
Produk & Nominal
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
</Col>
</Row>
{productData.length != 0 && <Row>
{productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card onClick={() => handleBuyProduct(item)} style={{cursor: "pointer"}}>
<span style={{color: "black"}}>{item.name}</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>{item?.currentPrice?.mark_up_price}</span>
</Card>
</Col>
))}
</Row>}
{productData.length != 0 && <Col style={{textAlign: "right"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang
</Button>
</Col>}
<BuyProductModal initialData={data}/>
</div>
// Subcategory
useEffect(() => {
console.log(
"⚡ transaction subcategory store",
store.transaction.dataSubCategories
);
}, [store.transaction.dataSubCategories]);
const handleChangeSubcategory = async (item) => {
console.log("item", item);
store.transaction.filterSubCategory = item;
await store.transaction.getData();
};
const handleBuyProduct = (data) => {
setData(data);
store.transaction.visibleModalTransaction = true;
};
return (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => {
if (val) {
handleChangeSubcategory(val);
}
}}
style={{ marginBottom: "10px", width: "100%" }}
>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
<Col
span={12}
style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
>
Produk & Nominal
</Col>
<Col span={12} style={{ textAlign: "right" }}>
<Search
placeholder="input search text"
style={{ width: 200, marginRight: 10 }}
/>
</Col>
</Row>
{productData.length != 0 && (
<Row>
{productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card
onClick={() => handleBuyProduct(item)}
style={{ cursor: "pointer" }}
>
<span style={{ color: "black" }}>{item.name}</span>
<br />
<span style={{ color: "grey", fontSize: 10 }}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item?.currentPrice?.mark_up_price)}
</span>
</Card>
</Col>
))}
</Row>
)}
{productData.length !== 0 && (
<Col style={{ textAlign: "right" }}>
<Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
Beli Sekarang
</Button>
</Col>
)}
<BuyProductModal initialData={data} />
</div>
);
});