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

Pages Config

Browse Source
This commit is contained in:
ajat91 2021-12-14 18:52:42 +07:00
parent f5903db03e
commit 558ca2a098
18 changed files with 421 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -5,6 +5,9 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.6.2", "@ant-design/icons": "^4.6.2",
"@babel/core": "7.14.5", "@babel/core": "7.14.5",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
"@fortawesome/react-fontawesome": "^0.1.16",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@svgr/webpack": "5.5.0", "@svgr/webpack": "5.5.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",

2
src/component/BreadcumbComponent.js
View File

@ -5,7 +5,7 @@ import {Link} from "react-router-dom";
export const BreadcumbComponent = (props) => { export const BreadcumbComponent = (props) => {
return ( return (
<div> <div>
<Breadcrumb style={{marginBottom: 10}}> <Breadcrumb>
{props.data.map((e, index) => ( {props.data.map((e, index) => (
<Breadcrumb.Item key={index}> <Breadcrumb.Item key={index}>
<Link to={e.route}> <Link to={e.route}>

30
src/component/CommisionComponent.js → src/component/CommissionComponent.js
View File

@ -7,7 +7,7 @@ import {capitalize} from "lodash";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
export const CommisionComponent = observer((props) => { export const CommissionComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const {Option} = Select;
@ -20,7 +20,7 @@ export const CommisionComponent = observer((props) => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.product.getDataSubCategories(); //await store.product.getDataSubCategories();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -38,7 +38,7 @@ export const CommisionComponent = observer((props) => {
address: data.address, address: data.address,
}); });
store.product.visibleModalProduct = true; store.commission.visibleModalCommission = true;
setIdData(data.id); setIdData(data.id);
} }
@ -92,7 +92,7 @@ export const CommisionComponent = observer((props) => {
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
await store.product.delete(id); await store.commission.delete(id);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT); history.push(LINKS.PRODUCT);
} catch (err) { } catch (err) {
@ -119,7 +119,7 @@ export const CommisionComponent = observer((props) => {
const handleCancel = () => { const handleCancel = () => {
setIdData('') setIdData('')
store.product.visibleModalProduct = false; store.commission.visibleModalCommission = false;
} }
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
@ -127,26 +127,26 @@ export const CommisionComponent = observer((props) => {
if (idData !== '') { if (idData !== '') {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.product.update(idData, data) await store.commission.update(idData, data)
message.success("Success Update Data Member") message.success("Success Update Data Member")
} catch (e) { } catch (e) {
message.error("Failed Update Data Member") message.error("Failed Update Data Member")
} }
setConfirmLoading(false); setConfirmLoading(false);
store.product.visibleModalProduct = false; store.commission.visibleModalCommission = false;
setIdData(''); setIdData('');
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.partner.create(data) await store.commission.create(data)
message.success("Success Add New Member") message.success("Success Add New Member")
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya")
message.error("Failed Add Member") message.error("Failed Add Member")
} }
setConfirmLoading(false); setConfirmLoading(false);
store.product.visibleModalProduct = false; store.commission.visibleModalCommission = false;
setIdData(''); setIdData('');
form.resetFields(); form.resetFields();
} }
@ -157,7 +157,7 @@ export const CommisionComponent = observer((props) => {
<Table <Table
style={{textAlign: "center"}} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.partner.data} dataSource={store.commission.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.product.pageSize,
@ -168,17 +168,17 @@ export const CommisionComponent = observer((props) => {
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSize = page.pageSize; store.commission.pageSize = page.pageSize;
store.product.page = pageNumber - 1; store.commission.page = pageNumber - 1;
// store.membership.isLoading = true; // store.membership.isLoading = true;
await store.product.getData(); await store.commission.getData();
// store.membership.isLoading = false; // store.membership.isLoading = false;
}} }}
/> />
<Modal <Modal
visible={store.product.visibleModalProduct} visible={store.commission.visibleModalCommission}
title={idData ? "Edit Product" : "Create a new Product"} title={idData ? "Edit Commission" : "Create a new commission"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {

126
src/component/PartnerComponent.js
View File

@ -1,5 +1,15 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd"; import {
Button,
Form,
Input,
message,
Modal,
Select,
Space,
Table,
Tag,
} from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -12,7 +22,7 @@ export const PartnerComponent = observer((props) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Option } = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(''); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -20,7 +30,7 @@ export const PartnerComponent = observer((props) => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.partner.getDataSubCategories(); await store.partner.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -31,16 +41,15 @@ export const PartnerComponent = observer((props) => {
}, []); }, []);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data") console.log(data, "isi data");
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name,
npwp: data.npwp, npwp: data.npwp,
address: data.address, address: data.address,
}); });
store.partner.visibleModalPartner = true; store.partner.visibleModalPartner = true;
setIdData(data.id); setIdData(data.id);
} };
const columns = [ const columns = [
{ {
@ -63,12 +72,9 @@ export const PartnerComponent = observer((props) => {
dataIndex: "status", dataIndex: "status",
key: "status", key: "status",
render: (text, record) => ( render: (text, record) => (
<Tag <Button type={record?.status === true ? "primary" : "danger"}>
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"} {record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag> </Button>
), ),
}, },
{ {
@ -76,31 +82,38 @@ export const PartnerComponent = observer((props) => {
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button <Button onClick={() => handleEditButton(record)}>Edit</Button>
onClick={() => handleEditButton(record)} <Button onClick={() => handleDelete(record.id)}>Delete</Button>
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
</Space> </Space>
), ),
}, },
]; ];
// const handleEditStatus = async (id)=>{
// try {
// console.log(id);
// await store.partner.delete(id);
// message.success("Data Berhasil Dihapus");
// history.push(LINKS.PARTNER);
// } catch (err) {
// console.log("error", err);
// message.error("Gagal menghapus");
// }
// }
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
await store.product.delete(id); await store.partner.delete(id);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT); history.push(LINKS.PARTNER);
} catch (err) { } catch (err) {
console.log("error", err); console.log("error", err);
message.error("Gagal menghapus"); message.error("Gagal menghapus");
} }
}; };
const handleDelete = (id) => { const handleDelete = (id) => {
Modal.confirm({ Modal.confirm({
title: "Are you sure delete this record?", title: "Are you sure delete this record?",
@ -118,40 +131,41 @@ export const PartnerComponent = observer((props) => {
}; };
const handleCancel = () => { const handleCancel = () => {
setIdData('') setIdData("");
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;
} };
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2") console.log(data, "isi data2");
if (idData !== '') { if (idData !== "") {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.partner.update(idData, data) await store.partner.update(idData, data);
message.success("Success Update Data Member") message.success("Success Update Data Partner");
//await store.partner.getData()
} catch (e) { } catch (e) {
message.error("Failed Update Data Member") message.error("Failed Update Data Partner");
} }
setConfirmLoading(false); setConfirmLoading(false);
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.partner.create(data) await store.partner.create(data);
message.success("Success Add New Member") message.success("Success Add New Partner");
//await store.partner.getData()
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya");
message.error("Failed Add Member") message.error("Failed Add Partner");
} }
setConfirmLoading(false); setConfirmLoading(false);
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} }
} };
return ( return (
<div> <div>
<Table <Table
@ -164,7 +178,7 @@ export const PartnerComponent = observer((props) => {
total: store.partner.total_data, total: store.partner.total_data,
current: store.partner.page + 1, current: store.partner.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
@ -178,7 +192,7 @@ export const PartnerComponent = observer((props) => {
<Modal <Modal
visible={store.partner.visibleModalPartner} visible={store.partner.visibleModalPartner}
title={idData ? "Edit Product" : "Create a new Product"} title={idData ? "Edit Partner" : "Create a new partner"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
@ -189,7 +203,7 @@ export const PartnerComponent = observer((props) => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log(values, "isi form") console.log(values, "isi form");
handleSubmit(values); handleSubmit(values);
form.resetFields(); form.resetFields();
}) })
@ -198,42 +212,58 @@ export const PartnerComponent = observer((props) => {
}); });
}} }}
> >
<Form <Form form={form} layout="vertical">
form={form}
layout="vertical"
>
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{required: true, message: 'Please input name!'}]} rules={[
idData
? { required: false }
: { required: true, message: "Please input password name!" }]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="owner" name="owner"
label="Owner" label="Owner"
rules={[{required: true, message: 'Please input owner!'}]} rules={[
idData
? { required: false }
: { required: true, message: "Please input name!" }
]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="password_account" name="password_account"
label="Password Account" label="Password Account"
rules={[{required: true, message: 'Please input password account!'}]} rules={[
idData
? { required: false }
: { required: true, message: "Please input password account!" }
]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="npwp" name="npwp"
label="Npwp" label="Npwp"
rules={[{required: true, message: 'Please input npwp!'}]} rules={[
idData
? { required: false }
: { required: true, message: "Please input npwp!" }
]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="address" name="address"
label="address" label="address"
rules={[{required: true, message: 'Please input password!'}]} rules={[
idData
? { required: false }
: { required: true, message: "Please input password address!" }
]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>

4
src/component/SupplierComponent.js
View File

@ -30,7 +30,7 @@ export const SupplierComponent = observer((props) => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.product.getDataSubCategories(); await store.supplier.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -90,7 +90,7 @@ export const SupplierComponent = observer((props) => {
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
await store.product.delete(id); await store.supplier.delete(id);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT); history.push(LINKS.PRODUCT);
} catch (err) { } catch (err) {

3
src/index.css
View File

@ -63,3 +63,6 @@ code {
.ant-menu-submenu-arrow{ .ant-menu-submenu-arrow{
padding-right: 40px !important; padding-right: 40px !important;
} }
.ant-breadcrumb{
margin-bottom: 10px !important;
}

10
src/pages/App/DesktopLayout.js
View File

@ -133,13 +133,13 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.PARTNER}> <Link to={LINKS.COMMISION}>
<HomeOutlined /> <HomeOutlined />
<span>Commision</span> <span>Commision</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
<Link to={LINKS.PARTNER}> <Link to={LINKS.SUPPLIER}>
<HomeOutlined /> <HomeOutlined />
<span>Supplier</span> <span>Supplier</span>
</Link> </Link>
@ -168,12 +168,6 @@ export const DesktopLayout = observer(() => {
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider <Menu.Divider
style={{ background: "transparent", paddingTop: 15 }} style={{ background: "transparent", paddingTop: 15 }}
/> />

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

@ -9,7 +9,7 @@ import {
DatabaseOutlined, DatabaseOutlined,
MoneyCollectOutlined, MoneyCollectOutlined,
ProjectOutlined, ProjectOutlined,
FileProtectOutlined FileProtectOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
@ -57,7 +57,11 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config" style={{backgroundColor:'#e3e8ee'}}> <SubMenu
key="config"
icon={<MenuUnfoldOutlined />}
title="Config"
>
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<ProjectOutlined /> <ProjectOutlined />
@ -65,9 +69,9 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISION}> <Link to={LINKS.COMMISSION}>
<MoneyCollectOutlined /> <MoneyCollectOutlined />
<span>Commision</span> <span>Commission</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">

30
src/pages/Config/Commision.js → src/pages/Config/Commission.js
View File

@ -4,13 +4,13 @@ import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {CommisionComponent} from "../../component/CommisionComponent"; import {CommissionComponent} from "../../component/CommissionComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
const {TabPane} = Tabs; const {TabPane} = Tabs;
const {Search} = Input; const {Search} = Input;
export const Commision = observer(() => { export const Commission = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const store = useStore(); const store = useStore();
@ -18,8 +18,8 @@ export const Commision = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.partner.getDataCategories(); //await store.commission.getDataCategories();
await store.partner.getData(); await store.commission.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -29,10 +29,10 @@ export const Commision = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabPane = async (key) => { // const handleChangeTabPane = async (key) => {
store.product.filterCategory = key; // store.product.filterCategory = key;
console.log(key); // console.log(key);
}; // };
const routeData = [ const routeData = [
{ {
@ -40,8 +40,8 @@ export const Commision = observer(() => {
name: "Home", name: "Home",
}, },
{ {
route: LINKS.PARTNER, route: LINKS.COMMISSION,
name: <span style={{fontWeight: 'bold'}}>Partner</span>, name: <span style={{fontWeight: 'bold'}}>Commission</span>,
}, },
]; ];
@ -59,7 +59,11 @@ export const Commision = observer(() => {
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> />
<Button onClick={() => store.partner.visibleModalPartner = true}> <Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
@ -67,7 +71,7 @@ export const Commision = observer(() => {
</Col> </Col>
</Row> </Row>
<Tabs <Tabs
onChange={handleChangeTabPane} //onChange={handleChangeTabPane}
size="default" size="default"
tabBarGutter="50" tabBarGutter="50"
> >
@ -76,7 +80,7 @@ export const Commision = observer(() => {
tab="Commision" tab="Commision"
key="1" key="1"
> >
<CommisionComponent/> <CommissionComponent/>
</TabPane> </TabPane>
)) ))
</Tabs> </Tabs>

18
src/pages/Config/Partner.js
View File

@ -18,7 +18,7 @@ export const Partner = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.partner.getDataCategories(); //await store.partner.getDataCategories();
await store.partner.getData(); await store.partner.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
@ -29,10 +29,10 @@ export const Partner = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabPane = async (key) => { // const handleChangeTabPane = async (key) => {
store.product.filterCategory = key; // store.partner.filterCategory = key;
console.log(key); // console.log(key);
}; // };
const routeData = [ const routeData = [
{ {
@ -59,7 +59,11 @@ export const Partner = observer(() => {
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> />
<Button onClick={() => store.partner.visibleModalPartner = true}> <Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
@ -67,7 +71,7 @@ export const Partner = observer(() => {
</Col> </Col>
</Row> </Row>
<Tabs <Tabs
onChange={handleChangeTabPane} //onChange={handleChangeTabPane}
size="default" size="default"
tabBarGutter="50" tabBarGutter="50"
> >

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

@ -18,7 +18,7 @@ export const Supplier = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.supplier.getDataCategories(); //await store.supplier.getDataCategories();
await store.supplier.getData(); await store.supplier.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
@ -29,10 +29,10 @@ export const Supplier = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabPane = async (key) => { // const handleChangeTabPane = async (key) => {
store.product.filterCategory = key; // store.product.filterCategory = key;
console.log(key); // console.log(key);
}; // };
const routeData = [ const routeData = [
{ {
@ -59,7 +59,12 @@ export const Supplier = observer(() => {
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
onSearch={value => console.log(value)}
/> />
<Button onClick={() => store.supplier.visibleModalSupplier = true}> <Button onClick={() => store.supplier.visibleModalSupplier = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
@ -67,7 +72,7 @@ export const Supplier = observer(() => {
</Col> </Col>
</Row> </Row>
<Tabs <Tabs
onChange={handleChangeTabPane} //onChange={handleChangeTabPane}
size="default" size="default"
tabBarGutter="50" tabBarGutter="50"
> >

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

@ -59,7 +59,11 @@ export const Product = observer(() => {
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> />
<Button onClick={() => store.product.visibleModalProduct = true}> <Button onClick={() => store.product.visibleModalProduct = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New

8
src/routes/app.js
View File

@ -5,7 +5,7 @@ import {Membership} from "../pages/Membership/Membership";
import {Product} from "../pages/Product/Product"; import {Product} from "../pages/Product/Product";
import {Transaction} from "../pages/Transaction/Transaction"; import {Transaction} from "../pages/Transaction/Transaction";
import {Profile} from "../pages/Profile/Profile"; import {Profile} from "../pages/Profile/Profile";
import {Commision} from "../pages/Config/Commision"; import {Commission} from "../pages/Config/Commission";
import {Partner} from "../pages/Config/Partner"; import {Partner} from "../pages/Config/Partner";
import {Supplier} from "../pages/Config/Supplier"; import {Supplier} from "../pages/Config/Supplier";
@ -18,7 +18,7 @@ export const LINKS = {
TRANSACTION: "/app/transaction", TRANSACTION: "/app/transaction",
PROFILE: "/app/profile", PROFILE: "/app/profile",
PARTNER: "/app/partner", PARTNER: "/app/partner",
COMMISION: "/app/commision", COMMISSION: "/app/commission",
SUPPLIER: "/app/supplier", SUPPLIER: "/app/supplier",
}; };
@ -28,8 +28,8 @@ export const AppRoute = () => {
<Route path={LINKS.HOME}> <Route path={LINKS.HOME}>
<Home/> <Home/>
</Route> </Route>
<Route path={LINKS.COMMISION}> <Route path={LINKS.COMMISSION}>
<Commision/> <Commission/>
</Route> </Route>
<Route path={LINKS.SUPPLIER}> <Route path={LINKS.SUPPLIER}>
<Supplier/> <Supplier/>

0
src/store/commision.js
View File

52
src/store/commission.js Normal file
View File

@ -0,0 +1,52 @@
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Commission {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalSupplier = 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(`/config/commission?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response)
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
async create(data) {
const response = await http.post('/users/supplier').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;
}
}

4
src/store/index.js
View File

@ -5,7 +5,7 @@ import { Membership } from "./membership";
import { Product } from "./product"; import { Product } from "./product";
import { Partner } from "./partner"; import { Partner } from "./partner";
import { Supplier } from "./supplier"; import { Supplier } from "./supplier";
//import { Commision } from "./commision"; import { Commission } from "./commission";
import { Transaction } from "./transaction"; import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token"; import { TokenUtil } from "../utils/token";
import { Role } from "./role"; import { Role } from "./role";
@ -18,7 +18,7 @@ export class Store {
product = new Product(this); product = new Product(this);
partner = new Partner(this); partner = new Partner(this);
supplier = new Supplier(this); supplier = new Supplier(this);
//commision = new Commision(this); commission = new Commission(this);
transaction = new Transaction(this); transaction = new Transaction(this);
role = new Role(this); role = new Role(this);

32
src/store/partner.js
View File

@ -25,26 +25,10 @@ export class Partner {
} }
async getData() { async getData() {
const response = await http.get(`/users/partner?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data ?? [] this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0 //console.log(response.body,"ini dari store")
} this.total_data = response.body.count ?? 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) { async create(data) {
@ -54,16 +38,24 @@ export class Partner {
} }
async update(id, data) { async update(id, data) {
const response = await http.put(`/product/${id}`).send(data); const response = await http.put(`/users/partner/${id}`).send(data);
await this.getData(); await this.getData();
return response; return response;
} }
// async updateStatus(id, data) {
// const response = await http.put(`/users/partner/${id}`).send(data);
// await this.getData();
// return response;
// }
async delete(id) { async delete(id) {
const response = await http.del(`/product/${id}`); const response = await http.del(`/product/${id}`);
await this.getData(); await this.getData();
return response; return response;
} }
} }

22
src/store/supplier.js
View File

@ -25,26 +25,10 @@ export class Supplier {
} }
async getData() { async getData() {
const response = await http.get(`/users/supplier?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); const response = await http.get(`/users/supplier?page=${this.page}&pageSize=${this.pageSize}`);
//console.log(response)
this.data = response.body.data ?? [] this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0 this.total_data = response.body.count ?? 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) { async create(data) {