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

feat: add modal loader for each API request

Browse Source
This commit is contained in:
Hasta Ragil Saputra
2021-12-21 09:00:31 +07:00
parent 178d52f5cc
commit 47578366a8
21 changed files with 1094 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/Config/Commission.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, 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";
@@ -6,23 +6,24 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { CommissionComponent } from "../../component/CommissionComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input;
export const Commission = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
//await store.commission.getDataCategories();
await store.commission.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@@ -66,7 +67,7 @@ export const Commission = observer(() => {
</Col>
</Row> */}
<div style={{marginTop:20}}> <CommissionComponent/></div>
</Card>
</div>
);

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

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, 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";
@@ -6,72 +6,66 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input;
export const Partner = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.partner.getDataCategories();
await store.partner.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.partner.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
}
};
init();
}, []);
init();
}, []);
// const handleChangeTabPane = async (key) => {
// store.partner.filterCategory = key;
// console.log(key);
// };
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
},
];
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
{/* <Button>
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.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<PartnerComponent />
</Card>
</div>
);
</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.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<PartnerComponent/>
</Card>
</div>
);
});

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, useEffect, useState} from "react";
import {
Button,
Card,
@@ -21,26 +21,22 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;
export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.supplier.getDataCategories();
modalLoader.setLoading(true);
await store.supplier.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

155
src/pages/Login/Login.js
View File

@@ -1,86 +1,91 @@
import React from "react";
import React, {useContext} from "react";
import {observer} from 'mobx-react-lite';
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
export const Login = observer(() => {
const store = useStore();
let history = useHistory();
const [form] = Form.useForm();
const store = useStore();
let history = useHistory();
const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const handleLogin = async (params) => {
try {
await store.authentication.login({
username: params.username,
password: params.password,
});
history.push(LINKS.HOME);
} catch (e) {
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
const handleLogin = async (params) => {
try {
modalLoader.setLoading(true);
await store.authentication.login({
username: params.username,
password: params.password,
});
modalLoader.setLoading(false);
history.push(LINKS.HOME);
} catch (e) {
modalLoader.setLoading(true);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
}
return (
<div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
<Row justify={'center'}>
<Col>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
marginTop: '5vh',
flexDirection: 'column',
alignItems: 'center',
}}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
<Typography.Paragraph
style={{
margin: 0,
padding: 0,
fontSize: 20,
marginLeft: 5,
fontWeight: 600,
color: "#413d3e",
}}
>
Boilerplate
</Typography.Paragraph>
</div>
<Card
style={{width: 320, textAlign: 'center'}}
headStyle={{fontSize: 13, fontWeight: 200}}
className={"shadow"}
bordered={true}
title={'Sign in to your account'}
>
<Form
layout={"vertical"}
form={form}
onFinish={handleLogin}
className={"w-9/12"}
>
<Form.Item label="Username" name="username"
rules={[{required: true, message: 'Please input your username!'}]}>
<Input/>
</Form.Item>
<Form.Item label="Password" name="password"
rules={[{required: true, message: 'Please input your password!'}]}>
<Input.Password/>
</Form.Item>
<div className={"flex flex-row justify-between content-center"}>
<Button type="primary" htmlType="submit"
loading={store.authentication.isLoginLoading}>Submit</Button>
</div>
</Form>
</Card>
</div>
</Col>
</Row>
</div>
);
return (
<div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
<Row justify={'center'}>
<Col>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
marginTop: '5vh',
flexDirection: 'column',
alignItems: 'center',
}}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
<Typography.Paragraph
style={{
margin: 0,
padding: 0,
fontSize: 20,
marginLeft: 5,
fontWeight: 600,
color: "#413d3e",
}}
>
Boilerplate
</Typography.Paragraph>
</div>
<Card
style={{width: 320, textAlign: 'center'}}
headStyle={{fontSize: 13, fontWeight: 200}}
className={"shadow"}
bordered={true}
title={'Sign in to your account'}
>
<Form
layout={"vertical"}
form={form}
onFinish={handleLogin}
className={"w-9/12"}
>
<Form.Item label="Username" name="username"
rules={[{required: true, message: 'Please input your username!'}]}>
<Input/>
</Form.Item>
<Form.Item label="Password" name="password"
rules={[{required: true, message: 'Please input your password!'}]}>
<Input.Password/>
</Form.Item>
<div className={"flex flex-row justify-between content-center"}>
<Button type="primary" htmlType="submit"
loading={store.authentication.isLoginLoading}>Submit</Button>
</div>
</Form>
</Card>
</div>
</Col>
</Row>
</div>
);
});

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, useEffect, useState} from "react";
import {
Button,
Card,
@@ -15,20 +15,21 @@ import {
Form,
Select,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {
ExclamationCircleOutlined,
FilterOutlined,
PlusSquareOutlined,
DownloadOutlined,
} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
const { Option } = Select;
const {Search} = Input;
const {Option} = Select;
export const Membership = observer(() => {
const [form] = Form.useForm();
const store = useStore();
@@ -37,55 +38,57 @@ export const Membership = observer(() => {
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin";
await getData();
await store.role.getData(isAdmin);
await store.supplier.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
console.error(e);
modalLoader.setLoading(false);
}
};
init();
}, []);
const getData = () => {
const getData = async () => {
store.authentication.userData.role === "Admin"
? store.membership.getData()
: store.membership.getDataBySuperior();
? await store.membership.getData()
: await store.membership.getDataBySuperior();
};
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
console.log(status);
try {
modalLoader.setLoading(true);
const response = await store.membership.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`);
} catch (err) {
console.log("error", err);
modalLoader.setLoading(false);
message.error(`Failed ${status2} Membership`);
}
};
const handleCancelTransaction = () => {
setIsVisibleTopUpModal(false);
setDestination(null);
};
const handleSubmitTransaction = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
data.destination = destination;
if (data.amount) {
@@ -99,9 +102,11 @@ export const Membership = observer(() => {
? store.transaction.distributeAdmin(data)
: store.transaction.distribute(data);
message.success("Success Top Up");
modalLoader.setLoading(false);
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
modalLoader.setLoading(false);
message.error("Failed Top Up");
}
setConfirmLoading(false);
@@ -124,8 +129,8 @@ export const Membership = observer(() => {
},
{
title: "Saldo",
dataIndex: ["coa","amount"],
key: ["coa","amount"],
dataIndex: ["coa", "amount"],
key: ["coa", "amount"],
},
{
title: "Status",
@@ -134,7 +139,7 @@ export const Membership = observer(() => {
render: (text, record) => (
<Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
style={{color: "#4F566B"}}
>
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag>
@@ -158,7 +163,7 @@ export const Membership = observer(() => {
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
<DownloadOutlined/> Top Up Saldo
</Button>
<Button
onClick={() => {
@@ -209,7 +214,7 @@ export const Membership = observer(() => {
},
{
route: "/app/membership",
name: <span style={{ fontWeight: "bold" }}>Membership</span>,
name: <span style={{fontWeight: "bold"}}>Membership</span>,
},
];
@@ -218,6 +223,7 @@ export const Membership = observer(() => {
if (initialData.id) {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.update(initialData.id, data);
message.success(
@@ -226,7 +232,9 @@ export const Membership = observer(() => {
: "Success Update Data Member"
);
await getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(true);
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
@@ -237,6 +245,7 @@ export const Membership = observer(() => {
setVisibleModal(false);
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.create(data);
message.success("Success Add New Member");
@@ -245,6 +254,7 @@ export const Membership = observer(() => {
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
modalLoader.setLoading(false);
setConfirmLoading(false);
setVisibleModal(false);
setInitialData({});
@@ -254,7 +264,7 @@ export const Membership = observer(() => {
const handleDelete = (record) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />,
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
@@ -276,17 +286,17 @@ export const Membership = observer(() => {
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<BreadcumbComponent data={routeData}/>
<Card>
<div>
<Row style={{ marginBottom: 20 }}>
<Row style={{marginBottom: 20}}>
<Col span={12}>
{/* <Button>
<FilterOutlined />
Filter
</Button> */}
</Col>
<Col span={12} style={{ textAlign: "right" }}>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{
@@ -301,7 +311,7 @@ export const Membership = observer(() => {
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
@@ -323,9 +333,9 @@ export const Membership = observer(() => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>
)}
@@ -335,18 +345,20 @@ export const Membership = observer(() => {
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: (page) => {
onChange: async (page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
getData();
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
},
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page,
style: { marginBottom: "1rem", marginRight: "1rem" },
style: {marginBottom: "1rem", marginRight: "1rem"},
}}
dataSource={store.membership.data}
style={{ padding: 0 }}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
@@ -368,12 +380,12 @@ export const Membership = observer(() => {
description={
<div style={{}}>
<p>
<small>Username : {item.username}</small> <br />
<small>Username : {item.username}</small> <br/>
</p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
@@ -384,7 +396,7 @@ export const Membership = observer(() => {
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
<Divider plain style={{margin: 0}}/>
</div>
);
}}
@@ -415,25 +427,25 @@ export const Membership = observer(() => {
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="supplier"
label="Supplier"
rules={[{ required: true, message: "Please input supplier!" }]}
>
<Select placeholder="Select Code Supplier" allowClear>
{store.supplier.data.map((item) => (
<Option value={item.code} key={item.code}>
{item.code}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="supplier"
label="Supplier"
rules={[{required: true, message: "Please input supplier!"}]}
>
<Select placeholder="Select Code Supplier" allowClear>
{store.supplier.data.map((item) => (
<Option value={item.code} key={item.code}>
{item.code}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="amount"
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
rules={[{required: true, message: "Please input amount!"}]}
>
<Input />
<Input/>
</Form.Item>
</Form>
</Modal>

1
src/pages/Membership/MembershipModal.js
View File

@@ -11,7 +11,6 @@ export const MembershipModal = ({
}) => {
const [form] = Form.useForm();
const { Option } = Select;
const dataStatus = ["true", "false"];
const store = useStore();
return (

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

@@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Card,
@@ -12,42 +12,37 @@ import {
Space,
Table,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
const {Search} = Input;
export const Payback = observer(() => {
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.payback.getDataUser();
//await store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
const init = async () => {
try {
modalLoader.setLoading(true);
await store.payback.getDataUser();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
}
};
init();
}, []);
@@ -64,7 +59,7 @@ export const Payback = observer(() => {
render: (text, record) => (
<Image
src={record.picture}
style={{ width: 50, height: 50 }}
style={{width: 50, height: 50}}
shape="circle"
alt="avatar"
/>
@@ -85,7 +80,7 @@ export const Payback = observer(() => {
onClick={async () => {
await handleAction(record, "accept");
}}
icon={<CheckCircleOutlined />}
icon={<CheckCircleOutlined/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
@@ -98,7 +93,7 @@ export const Payback = observer(() => {
onClick={async () => {
await handleAction(record, "reject");
}}
icon={<CloseOutlined />}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
@@ -112,7 +107,7 @@ export const Payback = observer(() => {
},
];
if(store.authentication.userData.role === "Retail") columns.pop();
if (store.authentication.userData.role === "Retail") columns.pop();
const routeData = [
{
@@ -121,12 +116,12 @@ export const Payback = observer(() => {
},
{
route: LINKS.PAYBACK,
name: <span style={{ fontWeight: "bold" }}>Payback</span>,
name: <span style={{fontWeight: "bold"}}>Payback</span>,
},
];
const onSubmit = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
@@ -135,25 +130,25 @@ export const Payback = observer(() => {
console.error(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
setVisibleModal(false);
modalLoader.setLoading(false);
};
const handleAction = async (record, type) => {};
const handleAction = async (record, type) => {
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<BreadcumbComponent data={routeData}/>
<Card>
<div>
<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={{
@@ -215,7 +210,7 @@ export const Payback = observer(() => {
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
dataSource={store.payback.data}
style={{ padding: 0 }}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
@@ -236,11 +231,11 @@ export const Payback = observer(() => {
title={item.name}
description={
<div style={{}}>
<Image src={item.picture} preview={false} />
<Image src={item.picture} preview={false}/>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
@@ -251,7 +246,7 @@ export const Payback = observer(() => {
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
<Divider plain style={{margin: 0}}/>
</div>
);
}}

124
src/pages/Payback/PaybackFromUser.js
View File

@@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Card,
@@ -12,42 +12,40 @@ import {
Space,
Table,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
const {Search} = Input;
export const PaybackFromUser = observer(() => {
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.payback.getData();
//await store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
const init = async () => {
try {
modalLoader.setLoading(true);
await store.payback.getData();
await store.authentication.getProfile();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
}
};
init();
}, []);
@@ -59,7 +57,7 @@ export const PaybackFromUser = observer(() => {
render: (text, record) => (
<Image
src={record.image_prove}
style={{ width: 50, height: 50 }}
style={{width: 50, height: 50}}
shape="circle"
alt="avatar"
/>
@@ -80,7 +78,7 @@ export const PaybackFromUser = observer(() => {
onClick={async () => {
await handleAction(record, "accept");
}}
icon={<CheckCircleOutlined />}
icon={<CheckCircleOutlined/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
@@ -93,7 +91,7 @@ export const PaybackFromUser = observer(() => {
onClick={async () => {
await handleAction(record, "reject");
}}
icon={<CloseOutlined />}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
@@ -149,12 +147,12 @@ export const PaybackFromUser = observer(() => {
},
{
route: LINKS.PAYBACKFROMUSER,
name: <span style={{ fontWeight: "bold" }}>Payback User</span>,
name: <span style={{fontWeight: "bold"}}>Payback User</span>,
},
];
const onSubmit = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
@@ -163,25 +161,26 @@ export const PaybackFromUser = observer(() => {
console.error(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
setVisibleModal(false);
};
const handleAction = async (record, type) => {};
const handleAction = async (record, type) => {
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<BreadcumbComponent data={routeData}/>
<Card>
<div>
<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={{
@@ -197,7 +196,7 @@ export const PaybackFromUser = observer(() => {
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
<PlusSquareOutlined/> New
</Button>
)}
</Col>
@@ -210,19 +209,19 @@ export const PaybackFromUser = observer(() => {
dataSource={store.payback.data}
bordered
pagination={{
pageSize: store.payback.pageSize,
total: store.payback.total_data,
current: store.payback.page + 1,
showSizeChanger: true,
simple: false
pageSize: store.payback.pageSize,
total: store.payback.total_data,
current: store.payback.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.payback.pageSize = page.pageSize;
store.payback.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.payback.getData();
// store.membership.isLoading = false;
let pageNumber = page.current;
store.payback.pageSize = page.pageSize;
store.payback.page = pageNumber - 1;
modalLoader.setLoading(true);
await store.payback.getData();
modalLoader.setLoading(false);
}}
/>
)}
@@ -231,19 +230,21 @@ export const PaybackFromUser = observer(() => {
<List
itemLayout="horizontal"
position={"top"}
// pagination={{
// onChange: (page) => {
// store.membership.pageSize = page.pageSize;
// store.membership.page = page.current;
// store.membership.getData();
// },
// pageSize: store.membership.pageSize,
// total: store.membership.total_data,
// current: store.membership.page,
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
pagination={{
onChange: async (page) => {
store.payback.pageSize = page.pageSize;
store.payback.page = page.current;
modalLoader.setLoading(true);
await store.payback.getData();
modalLoader.setLoading(false);
},
pageSize: store.payback.pageSize,
total: store.payback.total_data,
current: store.payback.page,
style: {marginBottom: "1rem", marginRight: "1rem"},
}}
dataSource={store.payback.data}
style={{ padding: 0 }}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
@@ -264,11 +265,11 @@ export const PaybackFromUser = observer(() => {
title={item.name}
description={
<div style={{}}>
<Image src={item.image_prove} preview={false} />
<Image src={item.image_prove} preview={false}/>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
@@ -279,7 +280,7 @@ export const PaybackFromUser = observer(() => {
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
<Divider plain style={{margin: 0}}/>
</div>
);
}}
@@ -290,7 +291,6 @@ export const PaybackFromUser = observer(() => {
<PaybackModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
await onSubmit(data);

52
src/pages/Payback/PaybackModal.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Form,
@@ -8,37 +8,22 @@ import {
Modal,
Upload,
} from "antd";
import { useStore } from "../../utils/useStore";
import { appConfig } from "../../config/app";
import { LoadingOutlined, UploadOutlined } from "@ant-design/icons";
import {useStore} from "../../utils/useStore";
import {appConfig} from "../../config/app";
import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
const [form] = Form.useForm();
const store = useStore();
const [fileList, setFileList] = useState([]);
const [previewTitle, setPreviewTitle] = useState("");
const [previewImage, setPreviewImage] = useState("");
const [loading, setLoading] = useState(false);
const [fileUrl, setFileUrl] = useState("");
const firstIndexFileList = fileList[0];
const [isLoading, setIsLoading] = useState(false);
const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.membership.getData();
//await store.role.getData();
await store.authentication.getProfile();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const beforeUpload = (file) => {
let isPdf, isLt2M;
let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
@@ -59,7 +44,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
};
const handleChange = ({ fileList }) => {
const handleChange = ({fileList}) => {
setFileList(fileList);
if (fileList.length && fileList[0].status === "done") {
form.setFieldsValue({
@@ -75,9 +60,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const uploadButton = (
<div>
{loading ? (
<LoadingOutlined />
<LoadingOutlined/>
) : (
<Button icon={<UploadOutlined />}>Click to Upload</Button>
<Button icon={<UploadOutlined/>}>Click to Upload</Button>
)}
</div>
);
@@ -93,15 +78,16 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2");
try {
modalLoader.setLoading(true);
await store.payback.create(data);
modalLoader.setLoading(false);
message.success("Success Add Payback");
await store.payback.getData();
} catch (e) {
modalLoader.setLoading(false);
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
//store.payback.visibleModalPayback = false;
form.resetFields();
};
@@ -137,10 +123,10 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<Form.Item
name="destination"
label="destination"
rules={[{ required: true, message: "Please input Name!" }]}
rules={[{required: true, message: "Please input Name!"}]}
initialValue={store.authentication.profileData.superior?.id}
>
<Input />
<Input/>
</Form.Item>
<Form.Item
label="Upload Picture"
@@ -182,7 +168,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<img
src={previewImage}
alt="preview"
style={{ width: "100%" }}
style={{width: "100%"}}
/>
</div>
<h5>{previewTitle}</h5>
@@ -196,9 +182,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<Form.Item
name="amount"
label="amount"
rules={[{ required: true, message: "Please input Amount!" }]}
rules={[{required: true, message: "Please input Amount!"}]}
>
<Input />
<Input/>
</Form.Item>
</Form>
</Modal>

11
src/pages/Product/Category.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, 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";
@@ -6,22 +6,23 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app";
import {CategoryComponent} from "../../component/CategoryComponent";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input;
export const Category = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
await store.category.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

25
src/pages/Product/Subcategory.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row} from "antd";
import {PlusSquareOutlined} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -6,21 +6,22 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app";
import {SubcategoryComponent} from "../../component/Subcategory";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
export const Subcategory = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
getData();
setIsLoading(false);
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@@ -39,22 +40,22 @@ export const Subcategory = observer(() => {
},
{
route: LINKS.SUBCATEGORY,
name: <span style={{ fontWeight: "bold" }}>Sub Category</span>,
name: <span style={{fontWeight: "bold"}}>Sub Category</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 />
Filter
</Button> */}
</Col>
<Col span={12} style={{ textAlign: "right" }}>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{
@@ -66,11 +67,11 @@ export const Subcategory = observer(() => {
<Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)}
>
<PlusSquareOutlined /> New
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<SubcategoryComponent />
<SubcategoryComponent/>
</Card>
</div>
);

257
src/pages/Profile/Profile.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect} from "react";
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Row, Table, Typography} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
@@ -6,138 +6,143 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {FilterOutlined} from "@ant-design/icons";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
const {Title, Text} = Typography;
export const Profile = observer(() => {
const store = useStore();
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PROFILE,
name: <span style={{fontWeight: 'bold'}}>Profile</span>,
},
];
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
(async () => {
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
})()
}, []);
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PROFILE,
name: <span style={{fontWeight: 'bold'}}>Profile</span>,
},
];
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
modalLoader.setLoading(false);
})()
}, []);
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
display: "flex",
justifyContent: "center"
} : {fontSize: "0.75rem"};
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
fontSize: '1.25rem',
display: "flex",
justifyContent: "center"
} : null;
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Title strong>Profile</Title>
<Row style={{marginBottom: 20}}>
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text>
</Col>
</Row>
</Col>
<Col lg={12} xs={24}>
<Row justify={"center"}>
<Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
display: "flex",
justifyContent: "center"
} : {fontSize: "0.75rem"};
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
fontSize: '1.25rem',
display: "flex",
justifyContent: "center"
} : null;
<Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter')
}}>
<FilterOutlined/>
Filter
</Button>
<Table
columns={columns}
dataSource={store.transaction.dataHistoryTransaction}
bordered
/>
</div>
</Col>
</Row>
<div/>
</Card>
</div>
)
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Title strong>Profile</Title>
<Row style={{marginBottom: 20}}>
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text>
</Col>
</Row>
</Col>
<Col lg={12} xs={24}>
<Row justify={"center"}>
<Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter')
}}>
<FilterOutlined/>
Filter
</Button>
<Table
columns={columns}
dataSource={store.transaction.dataHistoryTransaction}
bordered
/>
</div>
</Col>
</Row>
<div/>
</Card>
</div>
)
});

221
src/pages/Transaction/Product.js
View File

@@ -1,8 +1,9 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite";
import {MoneyCollectOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
const {Option} = Select;
@@ -10,133 +11,139 @@ const {Option} = Select;
export const Product = observer(() => {
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getDataCategories();
setIsLoading(false);
modalLoader.setLoading(true);
await Promise.allSettled([
store.transaction.getDataSubCategories(),
store.transaction.getDataCategories()
])
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
init();
init();
}, []);
// data
useEffect(() => {
console.log("⚡ transaction data store", store.transaction.data);
setProductData(store.transaction.data);
}, [store.transaction.data]);
// 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]);
// Subcategory
useEffect(() => {
console.log(
"⚡ transaction subcategory store",
store.transaction.dataSubCategories
);
}, [store.transaction.dataSubCategories]);
const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item;
await store.transaction.getData();
};
const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item;
modalLoader.setLoading(true);
await store.transaction.getData();
modalLoader.setLoading(false);
};
const handleBuyProduct = async (data) => {
try {
const response = await store.transaction.buyProduct({productCode: data});
// if (response.status === 200) {
message.success("Success Buy Product");
// } else {
//message.error("Failed Buy Product");
//}
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Buy Product");
}
};
const handleBuyProduct = async (data) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({productCode: data});
// if (response.status === 200) {
message.success("Success Buy Product");
// } else {
//message.error("Failed Buy Product");
//}
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Buy Product");
}
modalLoader.setLoading(false);
};
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) => {
if (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={() => {
Modal.confirm({
title: `Are you sure buy ${item.name}?`,
icon: <MoneyCollectOutlined/>,
okText: "Confirm",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleBuyProduct(item.code)
},
onCancel() {
console.log("Cancel");
},
});
}}
style={{cursor: "pointer"}}
>
<span style={{color: "black"}}>{item.name}</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>
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) => {
if (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={() => {
Modal.confirm({
title: `Are you sure buy ${item.name}?`,
icon: <MoneyCollectOutlined/>,
okText: "Confirm",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleBuyProduct(item.code)
},
onCancel() {
console.log("Cancel");
},
});
}}
style={{cursor: "pointer"}}
>
<span style={{color: "black"}}>{item.name}</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
style: "currency",
currency: "IDR",
}).format(item?.currentPrice?.mark_up_price)}
</span>
</Card>
</Col>
))}
</Card>
</Col>
))}
</Row>
)}
{productData.length !== 0 && (
<Col style={{ textAlign: "right" }}>
<Col style={{textAlign: "right"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang
</Button>

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

@@ -1,27 +1,28 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Product} from "./Product";
import {LINKS} from "../../routes/app";
import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
export const Transaction = observer(() => {
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
// Init
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
await store.transaction.getDataCategories();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@@ -35,7 +36,9 @@ export const Transaction = observer(() => {
const handleChangeTabs = async (key) => {
store.transaction.filterCategory = key;
modalLoader.setLoading(true);
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
};
const routeData = [
@@ -50,22 +53,22 @@ export const Transaction = observer(() => {
];
return (
<div className={["ppob-container"].join(" ")}>
<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>
))}
<div className={["ppob-container"].join(" ")}>
<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>
</Tabs>
</Card>
</div>
);
});