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

Merge branch 'develop' of gitlab.com:empatnusabangsa/ppob/ppob-frontend into develop

Browse Source
This commit is contained in:
rarsyansyahr 2021-12-15 15:40:59 +07:00
commit 6b00b4bb13
17 changed files with 672 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/component/CategoryComponent.js Normal file
View File

@ -0,0 +1,217 @@
import React, {useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const CategoryComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category)
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data")
form.setFieldsValue({
name: data.name,
});
store.category.visibleModalCategory = true;
setIdData(data.id);
}
const columns = [
{
title: "Product Name",
dataIndex: "name",
key: "name",
},
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
// {
// title: "Tersedia",
// dataIndex: "tersedia",
// key: "tersedia",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
// </Tag>
// ),
// },
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => handleEditButton(record)}
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.category.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleCancel = () => {
setIdData('')
store.category.visibleModalCategory = false;
}
const handleSubmit = async (data) => {
console.log(data, "isi data2")
if (idData !== '') {
setConfirmLoading(true);
try {
await store.category.update(idData, data)
message.success("Success Update Data Category")
} catch (e) {
message.error("Failed Update Data Category")
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData('');
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.category.create(data)
message.success("Success Add New Category")
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Category")
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData('');
form.resetFields();
}
}
return (
<div>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={store.category.data}
bordered
pagination={{
pageSize: store.product.pageSize,
total: store.product.total_data,
current: store.product.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.product.getData();
// store.membership.isLoading = false;
}}
/>
<Modal
visible={store.category.visibleModalCategory}
title={idData ? "Edit Category" : "Create a new Category"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form")
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: "Please input name category!"}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
</div>
);
});

2
src/component/PartnerComponent.js
View File

@ -72,7 +72,7 @@ export const PartnerComponent = observer((props) => {
dataIndex: "status",
key: "status",
render: (text, record) => (
<Button type={record?.status === true ? "primary" : "danger"}>
<Button size="small" type={record?.status === true ? "primary" : "danger"}>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Button>
),

5
src/component/ProductComponent.js
View File

@ -20,6 +20,7 @@ export const ProductComponent = observer((props) => {
const init = async () => {
try {
setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category)
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
@ -71,7 +72,7 @@ export const ProductComponent = observer((props) => {
key: "status",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{capitalize(record?.status)}
@ -84,7 +85,7 @@ export const ProductComponent = observer((props) => {
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status === "ACTIVE" ? " Ya" : "Tidak"}

60
src/component/SupplierComponent.js
View File

@ -125,6 +125,9 @@ export const SupplierComponent = observer((props) => {
setIdData("");
store.supplier.visibleModalSupplier = false;
};
const handleCancelTransaction= () => {
store.supplier.visibleModalTransaction = false;
};
const handleSubmit = async (data) => {
console.log(data, "isi data2");
@ -157,6 +160,24 @@ export const SupplierComponent = observer((props) => {
}
};
const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
setConfirmLoading(true);
try {
await store.supplier.createTransaction(data);
message.success("Success Top Up");
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Top Up");
}
setConfirmLoading(false);
store.supplier.visibleModalTransaction = false;
form.resetFields();
};
return (
<div>
<Table
@ -220,6 +241,45 @@ export const SupplierComponent = observer((props) => {
</Form.Item>
</Form>
</Modal>
<Modal
visible={store.supplier.visibleModalTransaction}
title="Top Up Saldo"
okText="Top Up"
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancelTransaction();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmitTransaction(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="supplier"
label="Supplier"
rules={[{ required: true, message: "Please input supplier!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="amount"
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
);
});

39
src/pages/App/MenuList.js
View File

@ -4,10 +4,13 @@ import {Link} from "react-router-dom";
import {
AppstoreOutlined,
DatabaseOutlined,
FileAddOutlined,
FileProtectOutlined,
FileSyncOutlined,
HomeOutlined,
MenuUnfoldOutlined,
MoneyCollectOutlined,
ProfileOutlined,
ProjectOutlined,
UserOutlined,
} from "@ant-design/icons";
@ -83,6 +86,40 @@ export const MenuList = observer((props) => {
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role !== "Retail" && (
<SubMenu
key="product"
icon={<ProfileOutlined />}
title="Product"
>
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
</Link>
</Menu.Item>
<Menu.Item key="product">
<Link to={LINKS.CATEGORY}>
<FileAddOutlined />
<span>Category</span>
</Link>
</Menu.Item>
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<FileSyncOutlined />
<span>Sub Category</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role === ("Retail" || "Admin") && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
@ -117,7 +154,7 @@ export const MenuList = observer((props) => {
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu>
);
});

54
src/pages/Config/Supplier.js
View File

@ -1,14 +1,14 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {SupplierComponent} from "../../component/SupplierComponent";
import {LINKS} from "../../routes/app";
import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
const { TabPane } = Tabs;
const { Search } = Input;
export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false);
@ -41,22 +41,22 @@ export const Supplier = observer(() => {
},
{
route: LINKS.SUPPLIER,
name: <span style={{fontWeight: 'bold'}}>Supplier</span>,
name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{marginBottom: 20}}>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined/>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Col span={12} style={{ textAlign: "right" }}>
<Search
placeholder="input search text"
style={{
@ -64,24 +64,30 @@ export const Supplier = observer(() => {
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
onSearch={value => console.log(value)}
onSearch={(value) => console.log(value)}
/>
<Button onClick={() => store.supplier.visibleModalSupplier = true}>
<PlusSquareOutlined/> New
<Button
//style={{ marginLeft: "10px" }}
onClick={() => (store.supplier.visibleModalSupplier = true)}
>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<Col span={24} style={{ textAlign: "right" }}>
<Button
onClick={() => (store.supplier.visibleModalTransaction = true)}
>
<DownloadOutlined /> Top Up Saldo
</Button>
</Col>
<Tabs
//onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<TabPane
tab="Supplier"
key="1"
>
<SupplierComponent/>
<TabPane tab="Supplier" key="1">
<SupplierComponent />
</TabPane>
))
</Tabs>

2
src/pages/Membership/Membership.js
View File

@ -48,7 +48,7 @@ export const Membership = observer(() => {
key: "status",
render: (text, record) => (
<Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"}
color={record?.isActive === true ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}

2
src/pages/Payback/Payback.js
View File

@ -53,7 +53,7 @@ export const Payback = observer(() => {
amount: "Rp. 1.000.000",
},
{
key: '4',Z
key: '4',
id: 1,
name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",

83
src/pages/Product/Category.js Normal file
View File

@ -0,0 +1,83 @@
import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { LINKS } from "../../routes/app";
import { CategoryComponent } from "../../component/CategoryComponent";
const { TabPane } = Tabs;
const { Search } = Input;
export const Category = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.product.getDataCategories();
await store.category.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
};
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.CATEGORY,
name: <span style={{ fontWeight: "bold" }}>Category</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
<Button onClick={() => (store.category.visibleModalCategory = true)}>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
<TabPane tab="Category" key="1">
<CategoryComponent/>
</TabPane>
))}
</Tabs>
</Card>
</div>
);
});

51
src/pages/Product/Product.js
View File

@ -1,14 +1,14 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ProductComponent} from "../../component/ProductComponent";
import {LINKS} from "../../routes/app";
import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { ProductComponent } from "../../component/ProductComponent";
import { LINKS } from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
const { TabPane } = Tabs;
const { Search } = Input;
export const Product = observer(() => {
const [isLoading, setIsLoading] = useState(false);
@ -32,7 +32,7 @@ export const Product = observer(() => {
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
await store.product.getData()
await store.product.getData();
};
const routeData = [
@ -42,22 +42,22 @@ export const Product = observer(() => {
},
{
route: LINKS.PRODUCT,
name: <span style={{fontWeight: 'bold'}}>Product</span>,
name: <span style={{ fontWeight: "bold" }}>Product</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{marginBottom: 20}}>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined/>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Col span={12} style={{ textAlign: "right" }}>
<Search
placeholder="input search text"
style={{
@ -66,22 +66,17 @@ export const Product = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
<Button onClick={() => store.product.visibleModalProduct = true}>
<PlusSquareOutlined/> New
<Button onClick={() => (store.product.visibleModalProduct = true)}>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<Tabs
onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
{store.product.dataCategories.map((item) => (
<TabPane
tab={item.name}
key={item.id}
>
<ProductComponent/>
<TabPane tab={item.name} key={item.id}>
{/* <ProductComponent category={item.name} /> */}
<ProductComponent />
</TabPane>
))}
</Tabs>

0
src/pages/Product/Subcategory.js Normal file
View File

5
src/routes/app.js
View File

@ -8,6 +8,7 @@ import {Profile} from "../pages/Profile/Profile";
import {Commission} from "../pages/Config/Commission";
import {Partner} from "../pages/Config/Partner";
import {Supplier} from "../pages/Config/Supplier";
import {Category} from "../pages/Product/Category";
import {Payback} from "../pages/Payback/Payback";
@ -21,6 +22,7 @@ export const LINKS = {
PARTNER: "/app/partner",
COMMISSION: "/app/commission",
SUPPLIER: "/app/supplier",
CATEGORY: "/app/category",
PAYBACK: "/app/payback",
};
@ -33,6 +35,9 @@ export const AppRoute = () => {
<Route path={LINKS.COMMISSION}>
<Commission/>
</Route>
<Route path={LINKS.CATEGORY}>
<Category/>
</Route>
<Route path={LINKS.SUPPLIER}>
<Supplier/>
</Route>

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

@ -0,0 +1,69 @@
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Category {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalCategory = 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/categories?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response)
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/categories').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/categories/${id}`).send(data);
await this.getData();
return response;
}
async delete(id) {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
}
}

3
src/store/index.js
View File

@ -8,6 +8,8 @@ import { Supplier } from "./supplier";
import { Commission } from "./commission";
import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token";
import { Category } from "./category";
import { Role } from "./role";
export class Store {
@ -19,6 +21,7 @@ export class Store {
partner = new Partner(this);
supplier = new Supplier(this);
commission = new Commission(this);
category = new Category(this);
transaction = new Transaction(this);
role = new Role(this);

8
src/store/membership.js
View File

@ -14,10 +14,16 @@ export class Membership {
@action
async getData() {
const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response)
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
// async getData() {
// const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
// this.data = response.body.data ?? []
// this.total_data = response.body.total_data ?? 0
// }
@action
async create(data) {

0
src/store/subcategory.js Normal file
View File

8
src/store/supplier.js
View File

@ -8,6 +8,7 @@ export class Supplier {
total_data = 0;
filterCategory = null;
visibleModalSupplier = false;
visibleModalTransaction=false;
pageCategories = 0;
pageSizeCategories = 10
@ -36,9 +37,14 @@ export class Supplier {
await this.getData();
return response;
}
async createTransaction(data) {
const response = await http.post('/transaction/add-saldo-supplier').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`).send(data);
const response = await http.put(`/users/supplier/${id}`).send(data);
await this.getData();
return response;
}