feat: adjust flow to display transaction
This commit is contained in:
caturbgs
parent
c1513c9e78
commit
b8c407bf11
107
src/pages/Transaction/Product.js
Normal file
107
src/pages/Transaction/Product.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {Button, Card, Col, Input, Modal, Row, Select} from "antd";
|
||||
import {observer} from "mobx-react-lite";
|
||||
|
||||
const {Search} = Input;
|
||||
const {Option} = Select;
|
||||
|
||||
export const Product = observer(() => {
|
||||
const store = useStore();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [productData, setProductData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.transaction.getDataSubCategories();
|
||||
await store.transaction.getDataCategories();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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) => {
|
||||
console.log('item', item);
|
||||
store.transaction.filterSubCategory = item;
|
||||
await store.transaction.getData();
|
||||
}
|
||||
|
||||
const success = () => {
|
||||
Modal.success({
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
||||
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) => {
|
||||
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={success}>
|
||||
<span style={{color: "black"}}>{item.name}</span>
|
||||
<br/>
|
||||
<span style={{color: "grey", fontSize: 10}}>{item.price}</span>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>}
|
||||
{productData.length != 0 && <Col style={{textAlign: "right"}}>
|
||||
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
|
||||
Beli Sekarang
|
||||
</Button>
|
||||
</Col>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
|
||||
import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
|
||||
|
||||
export const Pulsa = () => {
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [productData, setProductData] = useState([])
|
||||
const [productFilter, setProductFilter] = useState("")
|
||||
useEffect(() => {
|
||||
if (!productFilter) {
|
||||
console.log('⚡ filter is null', productFilter)
|
||||
setProductData(store.transaction.data)
|
||||
} else {
|
||||
console.log('⚡ filter is not null', productFilter)
|
||||
setProductData(store.transaction.data.filter(function (product) {
|
||||
return product.sub_categories.name === productFilter
|
||||
}))
|
||||
}
|
||||
}, [productFilter])
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.transaction.getDataSubCategories();
|
||||
await store.transaction.getData();
|
||||
await store.transaction.getDataCategories();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
setProductFilter("")
|
||||
}, []);
|
||||
|
||||
// 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])
|
||||
|
||||
|
||||
function handleMenuClick(item) {
|
||||
message.info("⚡ Click on menu item.");
|
||||
console.log("⚡ click", item);
|
||||
setProductFilter(item.name)
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu style={{
|
||||
backgroundColor: 'white'
|
||||
}}>
|
||||
{store.transaction.dataSubCategories.map((item, index) => (
|
||||
<Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
||||
</Menu>
|
||||
);
|
||||
|
||||
function success() {
|
||||
Modal.success({
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
|
||||
Sub-Category
|
||||
</span>
|
||||
</Row>
|
||||
<Row>
|
||||
<Space wrap>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: "20px",
|
||||
color: "grey",
|
||||
}}
|
||||
>
|
||||
<TabletOutlined />
|
||||
Select sub-Category
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Row>
|
||||
<Row>
|
||||
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
|
||||
Produk & Nominal
|
||||
</span>
|
||||
</Row>
|
||||
<Row>
|
||||
{productData.map((item, index) => (
|
||||
<Col key={index} xs={24} md={16} lg={8}>
|
||||
<Card onClick={success}>
|
||||
<span style={{ color: "black" }}>{item.name}</span>
|
||||
<br />
|
||||
<span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
<Col style={{ textAlign: "right" }}>
|
||||
<Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
|
||||
Beli Sekarang
|
||||
</Button>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { Button, Card, Col, Input, Row, Tabs } from "antd";
|
||||
import { FilterOutlined, } from "@ant-design/icons";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { Pulsa } from "./Pulsa";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {Card, Tabs} from "antd";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {Product} from "./Product";
|
||||
import {LINKS} from "../../routes/app";
|
||||
import {observer} from "mobx-react-lite";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { Search } = Input;
|
||||
|
||||
export const Transaction = () => {
|
||||
const {TabPane} = Tabs;
|
||||
|
||||
export const Transaction = observer(() => {
|
||||
const store = useStore();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
|
@ -35,9 +33,10 @@ export const Transaction = () => {
|
|||
console.log('⚡ transaction category store', store.transaction.dataCategories)
|
||||
}, [store.transaction.dataCategories])
|
||||
|
||||
const callback = (key) => {
|
||||
console.log(key);
|
||||
const handleChangeTabs = async (key) => {
|
||||
store.transaction.filterCategory = key;
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
|
|
@ -45,41 +44,27 @@ export const Transaction = () => {
|
|||
},
|
||||
{
|
||||
route: LINKS.TRANSACTION,
|
||||
name: <span style={{ fontWeight: 'bold' }}>Transaction</span>,
|
||||
name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} text="" />
|
||||
<Card>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{ width: 200, marginRight: 10 }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs
|
||||
defaultActiveKey="1"
|
||||
onChange={callback}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
{store.transaction.dataCategories.map((item, index) => (
|
||||
<TabPane tab={item.name} key={index}>
|
||||
<Pulsa />
|
||||
</TabPane>
|
||||
))}
|
||||
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} text=""/>
|
||||
<Card>
|
||||
<Tabs
|
||||
onChange={handleChangeTabs}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
{store.transaction.dataCategories.map((item, index) => (
|
||||
<TabPane tab={item.name} key={item.id}>
|
||||
<Product/>
|
||||
</TabPane>
|
||||
))}
|
||||
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export class Transaction {
|
|||
pageSize = 10
|
||||
data = [];
|
||||
total_data = 0;
|
||||
filterCategory = null;
|
||||
filterSubCategory = null;
|
||||
visibleModalProduct = false;
|
||||
|
||||
pageCategories = 0;
|
||||
|
|
@ -18,6 +18,7 @@ export class Transaction {
|
|||
pageSizeSubCategories = 10
|
||||
dataSubCategories = [];
|
||||
total_dataSubCategories = 0;
|
||||
filterSubCategory = null;
|
||||
|
||||
pageHistoryTransaction = 0;
|
||||
// pageSizeHistoryTransaction = 10
|
||||
|
|
@ -31,7 +32,7 @@ export class Transaction {
|
|||
|
||||
async getData() {
|
||||
try {
|
||||
const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
|
||||
const response = await http.get(`/product/by-categories-all?subCategories=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
|
||||
this.data = response.body.data ?? []
|
||||
this.total_data = response.body.total_data ?? 0
|
||||
} catch (e) {
|
||||
|
|
@ -41,7 +42,7 @@ export class Transaction {
|
|||
|
||||
async getDataSubCategories() {
|
||||
try {
|
||||
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
|
||||
const response = await http.get(`/product/sub-categories?categories=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
|
||||
this.dataSubCategories = response.body.data ?? []
|
||||
this.total_dataSubCategories = response.body.count ?? 0
|
||||
} catch (e) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user