PPOB/ppob-frontend
2
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

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>