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

stitching pulsa component

Browse Source
This commit is contained in:
buckyhelmsmash 2021-12-10 16:32:38 +07:00
parent c8faca652d
commit cae14036db
3 changed files with 149 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,25 +1,65 @@
import React from "react";
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 = () => {
function handleMenuClick(e) {
message.info("Click on menu item.");
console.log("click", e);
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([])
const [productFilter, setProductFilter] = useState("")
// useEffect(()=>{
// if(!productFilter){
// setProductData(store.transaction.data)
// }
// },[productFilter])
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getData();
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])
function handleMenuClick(item) {
message.info("⚡ Click on menu item.");
console.log("⚡ click", item);
setProductFilter(item.name)
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<UserOutlined/>}>
1st menu item
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined/>}>
2nd menu item
</Menu.Item>
<Menu.Item key="3" icon={<UserOutlined/>}>
3rd menu item
<Menu style={{
backgroundColor: 'white'
}}>
{store.transaction.dataSubCategories.map((item, index) => (
<Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
{item.name}
</Menu.Item>
))}
</Menu>
);
@ -29,49 +69,6 @@ export const Pulsa = () => {
});
}
const dataCard = [
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
]
return (
<div>
<Row>
@ -101,10 +98,10 @@ export const Pulsa = () => {
</span>
</Row>
<Row>
{dataCard.map((item, index) => (
{productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card onClick={success}>
<span style={{color: "black"}}>{item.title}</span>
<span style={{ color: "black" }}>{item.name}</span>
<br />
<span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
</Card>

2
src/store/index.js
View File

@ -3,6 +3,7 @@ import {Authentication} from "./authentication";
import { User } from "./user";
import { Membership } from "./membership";
import { Product } from "./product";
import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token";
import { Role } from "./role";
@ -12,6 +13,7 @@ export class Store {
user = new User(this);
membership = new Membership(this);
product = new Product(this);
transaction = new Transaction(this);
role = new Role(this);
constructor() {

69
src/store/transaction.js Normal file
View File

@ -0,0 +1,69 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
export class Transaction {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalProduct = false;
pageCategories = 0;
pageSizeCategories = 10
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0;
pageSizeSubCategories = 10
dataSubCategories = [];
total_dataSubCategories = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data ?? []
this.total_dataSubCategories = response.body.count ?? 0
}
async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
}
async create(data) {
const response = await http.post('/product').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`).send(data);
await this.getData();
return response;
}
async delete(id) {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
}
}