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 React, {useEffect, useState} from "react";
|
||||||
import { useStore } from "../../utils/useStore";
|
import {useStore} from "../../utils/useStore";
|
||||||
import { Button, Card, Col, Input, Row, Tabs } from "antd";
|
import {Card, Tabs} from "antd";
|
||||||
import { FilterOutlined, } from "@ant-design/icons";
|
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
import {Product} from "./Product";
|
||||||
import { Pulsa } from "./Pulsa";
|
import {LINKS} from "../../routes/app";
|
||||||
import { LINKS } from "../../routes/app";
|
import {observer} from "mobx-react-lite";
|
||||||
|
|
||||||
const { TabPane } = Tabs;
|
const {TabPane} = Tabs;
|
||||||
const { Search } = Input;
|
|
||||||
|
|
||||||
export const Transaction = () => {
|
|
||||||
|
|
||||||
|
export const Transaction = observer(() => {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
@ -35,9 +33,10 @@ export const Transaction = () => {
|
||||||
console.log('⚡ transaction category store', store.transaction.dataCategories)
|
console.log('⚡ transaction category store', store.transaction.dataCategories)
|
||||||
}, [store.transaction.dataCategories])
|
}, [store.transaction.dataCategories])
|
||||||
|
|
||||||
const callback = (key) => {
|
const handleChangeTabs = async (key) => {
|
||||||
console.log(key);
|
store.transaction.filterCategory = key;
|
||||||
};
|
};
|
||||||
|
|
||||||
const routeData = [
|
const routeData = [
|
||||||
{
|
{
|
||||||
route: LINKS.HOME,
|
route: LINKS.HOME,
|
||||||
|
|
@ -45,41 +44,27 @@ export const Transaction = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
route: LINKS.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>
|
return (
|
||||||
</Card>
|
<div className={["ppob-container"].join(" ")}>
|
||||||
</div>
|
<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
|
pageSize = 10
|
||||||
data = [];
|
data = [];
|
||||||
total_data = 0;
|
total_data = 0;
|
||||||
filterCategory = null;
|
filterSubCategory = null;
|
||||||
visibleModalProduct = false;
|
visibleModalProduct = false;
|
||||||
|
|
||||||
pageCategories = 0;
|
pageCategories = 0;
|
||||||
|
|
@ -18,6 +18,7 @@ export class Transaction {
|
||||||
pageSizeSubCategories = 10
|
pageSizeSubCategories = 10
|
||||||
dataSubCategories = [];
|
dataSubCategories = [];
|
||||||
total_dataSubCategories = 0;
|
total_dataSubCategories = 0;
|
||||||
|
filterSubCategory = null;
|
||||||
|
|
||||||
pageHistoryTransaction = 0;
|
pageHistoryTransaction = 0;
|
||||||
// pageSizeHistoryTransaction = 10
|
// pageSizeHistoryTransaction = 10
|
||||||
|
|
@ -31,7 +32,7 @@ export class Transaction {
|
||||||
|
|
||||||
async getData() {
|
async getData() {
|
||||||
try {
|
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.data = response.body.data ?? []
|
||||||
this.total_data = response.body.total_data ?? 0
|
this.total_data = response.body.total_data ?? 0
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
@ -41,7 +42,7 @@ export class Transaction {
|
||||||
|
|
||||||
async getDataSubCategories() {
|
async getDataSubCategories() {
|
||||||
try {
|
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.dataSubCategories = response.body.data ?? []
|
||||||
this.total_dataSubCategories = response.body.count ?? 0
|
this.total_dataSubCategories = response.body.count ?? 0
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user