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

fix: responsive tabs by data T[Transaction page]

Browse Source
This commit is contained in:
buckyhelmsmash 2021-12-10 17:59:41 +07:00
parent 1caed6d769
commit 9208bd5dd8
2 changed files with 79 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/Transaction/Pulsa.js
View File

@ -11,11 +11,17 @@ export const Pulsa = () => {
const [productData, setProductData] = useState([]) const [productData, setProductData] = useState([])
const [productFilter, setProductFilter] = useState("") const [productFilter, setProductFilter] = useState("")
// useEffect(()=>{ useEffect(() => {
// if(!productFilter){ if (!productFilter) {
// setProductData(store.transaction.data) console.log('⚡ filter is null', productFilter)
// } setProductData(store.transaction.data)
// },[productFilter]) } else {
console.log('⚡ filter is not null', productFilter)
setProductData(store.transaction.data.filter(function (product) {
return product.sub_categories.name === productFilter
}))
}
}, [productFilter])
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
@ -23,6 +29,7 @@ export const Pulsa = () => {
setIsLoading(true); setIsLoading(true);
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
await store.transaction.getData(); await store.transaction.getData();
await store.transaction.getDataCategories();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -30,6 +37,7 @@ export const Pulsa = () => {
}; };
init(); init();
setProductFilter("")
}, []); }, []);
// data // data

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

@ -1,14 +1,40 @@
import React from "react"; import React, { useEffect, useState } from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd"; import { useStore } from "../../utils/useStore";
import {FilterOutlined,} from "@ant-design/icons"; import { Button, Card, Col, Input, Row, Tabs } from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import { FilterOutlined, } from "@ant-design/icons";
import {Pulsa} from "./Pulsa"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import { Pulsa } from "./Pulsa";
import { LINKS } from "../../routes/app";
const {TabPane} = Tabs; const { TabPane } = Tabs;
const {Search} = Input; const { Search } = Input;
export const Transaction = () => { export const Transaction = () => {
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
// Init
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
// Category
useEffect(() => {
console.log('⚡ transaction category store', store.transaction.dataCategories)
}, [store.transaction.dataCategories])
const callback = (key) => { const callback = (key) => {
console.log(key); console.log(key);
}; };
@ -19,50 +45,41 @@ export const Transaction = () => {
}, },
{ {
route: LINKS.TRANSACTION, route: LINKS.TRANSACTION,
name: <span style={{fontWeight: 'bold'}}>Transaction</span>, name: <span style={{ fontWeight: 'bold' }}>Transaction</span>,
}, },
]; ];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} text=""/> <BreadcumbComponent data={routeData} text="" />
<Card> <Card>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined/> <FilterOutlined />
Filter Filter
</Button> </Button>
</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>
<Tabs <Tabs
defaultActiveKey="1" defaultActiveKey="1"
onChange={callback} onChange={callback}
size="default" size="default"
tabBarGutter="50" tabBarGutter="50"
> >
<TabPane tab="Pulsa" key="1"> {store.transaction.dataCategories.map((item, index) => (
<Pulsa/> <TabPane tab={item.name} key={index}>
<Pulsa />
</TabPane> </TabPane>
<TabPane tab="Game Voucher" key="2"> ))}
Game Voucher
</TabPane> </Tabs>
<TabPane tab="Product" key="3"> </Card>
Product </div>
</TabPane>
<TabPane tab="Prduct" key="4">
Product
</TabPane>
<TabPane tab="Prdct" key="5">
Product
</TabPane>
</Tabs>
</Card>
</div>
); );
}; };