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

fix: product page

Browse Source
This commit is contained in:
caturbgs 2021-12-21 16:28:09 +07:00
parent 90d862a47d
commit 69efeca588
2 changed files with 37 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState} from "react"; import React, {useContext, useEffect} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd"; import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
@ -10,8 +10,6 @@ const {Option} = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
const [productData, setProductData] = useState([]);
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
@ -36,20 +34,6 @@ export const Product = observer(() => {
init(); init();
}, []); }, []);
// 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) => { const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item; store.transaction.filterSubCategory = item;
modalLoader.setLoading(true); modalLoader.setLoading(true);
@ -111,47 +95,47 @@ export const Product = observer(() => {
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{width: 200, marginRight: 10}} style={{width: 200, marginRight: 10}}
/> />
</Col> </Col>
</Row> </Row>
{productData.length != 0 && ( {store.transaction.data.length != 0 && (
<Row> <Row>
{productData.map((item, index) => ( {store.transaction.data.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card <Card
onClick={() => { onClick={() => {
Modal.confirm({ Modal.confirm({
title: `Are you sure buy ${item.name}?`, title: `Are you sure buy ${item.name}?`,
icon: <MoneyCollectOutlined/>, icon: <MoneyCollectOutlined/>,
okText: "Confirm", okText: "Confirm",
cancelText: "Cancel", cancelText: "Cancel",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleBuyProduct(item.code) handleBuyProduct(item.code)
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Cancel");
}, },
}); });
}} }}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
> >
<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",
}).format(item?.currentPrice?.mark_up_price)} }).format(item?.currentPrice?.mark_up_price)}
</span> </span>
</Card> </Card>
</Col> </Col>
))} ))}
</Row> </Row>
)} )}
{productData.length !== 0 && ( {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right", marginTop: "1em"}}> <Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang Beli Sekarang

12
src/pages/Transaction/Transaction.js
View File

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState,message} from "react"; import React, {message, useContext, useEffect} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd"; import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -14,7 +14,6 @@ export const Transaction = observer(() => {
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
// Init
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
@ -34,14 +33,11 @@ export const Transaction = observer(() => {
init(); init();
}, []); }, []);
// Category
useEffect(() => {
console.log('⚡ transaction category store', store.transaction.dataCategories)
}, [store.transaction.dataCategories])
const handleChangeTabs = async (key) => { const handleChangeTabs = async (key) => {
store.transaction.filterCategory = key; store.transaction.dataSubCategories = [];
store.transaction.data = [];
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.transaction.filterCategory = key;
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };