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);
}
};