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

feat: change payback data page

Browse Source
This commit is contained in:
caturbgs 2021-12-21 12:03:15 +07:00
parent 2165c7a535
commit 89b890c888
3 changed files with 158 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,8 @@
import React, {useState, useEffect, useContext} from "react"; import React, {useContext, useEffect} from "react";
import { import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
Button,
Card,
Col,
Divider,
Image,
Input,
List,
message,
Row,
Space,
Table,
} from "antd";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/icons";
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
@ -35,7 +17,7 @@ export const Payback = observer(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataUser(); await store.payback.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
@ -52,11 +34,6 @@ export const Payback = observer(() => {
const columns = [ const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{ {
title: "Picture", title: "Picture",
dataIndex: "image_prove", dataIndex: "image_prove",
@ -77,8 +54,8 @@ export const Payback = observer(() => {
}, },
{ {
title: "Action", title: "Action",
dataIndex: "amount",
key: "action", key: "action",
width: 100,
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button <Button
@ -128,9 +105,9 @@ export const Payback = observer(() => {
const onSubmit = async (data) => { const onSubmit = async (data) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
// await store.membership.create(data); // await store.payback.create(data);
// message.success("Success Add New Member"); // message.success("Success Add New Member");
// await store.membership.getData(); // await store.payback.getData();
} catch (e) { } catch (e) {
console.error(e, "apa errornya"); console.error(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
@ -181,21 +158,21 @@ export const Payback = observer(() => {
columns={columns} columns={columns}
dataSource={store.payback.data} dataSource={store.payback.data}
bordered bordered
// pagination={{ pagination={{
// pageSize: store.membership.pageSize, pageSize: store.payback.page,
// total: store.membership.total_data, total: store.payback.total_data,
// current: store.membership.page + 1, current: store.payback.pageSize + 1,
// showSizeChanger: true, showSizeChanger: true,
// simple: false simple: false
// }} }}
// onChange={async (page) => { onChange={async (page) => {
// let pageNumber = page.current; let pageNumber = page.current;
// store.membership.pageSize = page.pageSize; store.payback.pageSize = page.pageSize;
// store.membership.page = pageNumber - 1; store.payback.page = pageNumber - 1;
// // store.membership.isLoading = true; modalLoader.setLoading(true);
// await store.membership.getData(); await store.payback.getData();
// // store.membership.isLoading = false; modalLoader.setLoading(false);
// }} }}
/> />
)} )}
@ -203,17 +180,19 @@ export const Payback = observer(() => {
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
// pagination={{ pagination={{
// onChange: (page) => { onChange: async (page) => {
// store.membership.pageSize = page.pageSize; store.payback.pageSize = page.pageSize;
// store.membership.page = page.current; store.payback.page = page.current;
// store.membership.getData(); modalLoader.setLoading(true);
// }, await store.payback.getData();
// pageSize: store.membership.pageSize, modalLoader.setLoading(false);
// total: store.membership.total_data, },
// current: store.membership.page, pageSize: store.payback.pageSize,
// style: {marginBottom: "1rem", marginRight: "1rem"}, total: store.payback.total_data,
// }} current: store.payback.page,
style: {marginBottom: "1rem", marginRight: "1rem"},
}}
dataSource={store.payback.data} dataSource={store.payback.data}
style={{padding: 0}} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {
@ -259,19 +238,6 @@ export const Payback = observer(() => {
)} )}
</div> </div>
</Card> </Card>
{/* <PaybackModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
await onSubmit(data);
}}
onCancel={() => {
setInitialData({});
setVisibleModal(false);
}}
/> */}
</div> </div>
); );
}); });

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

@ -1,25 +1,8 @@
import React, {useState, useEffect, useContext} from "react"; import React, {useContext, useEffect, useState} from "react";
import { import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table,} from "antd";
Button,
Card,
Col,
Divider,
Image,
Input,
List,
message,
Row,
Space,
Table,
} from "antd";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import {PaybackModal} from "./PaybackModal"; import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
@ -37,7 +20,7 @@ export const PaybackFromUser = observer(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getData(); await store.payback.getDataUser();
await store.authentication.getProfile(); await store.authentication.getProfile();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
@ -73,76 +56,6 @@ export const PaybackFromUser = observer(() => {
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
}, },
{
title: "Action",
dataIndex: "amount",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={async () => {
await handleAction(record, "accept");
}}
icon={<CheckCircleOutlined/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
await handleAction(record, "reject");
}}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
),
},
// {
// title: "Action",
// key: "action",
// width: 100,
// render: (text, record) => (
// <Space size="middle">
// <Button
// onClick={async () => {
// await handleAction(record, "accept");
// }}
// icon={<CheckCircleOutlined />}
// style={{
// backgroundColor: "#1bb91d",
// color: "#fff",
// borderColor: "#1bb91d",
// }}
// >
// Accept
// </Button>
// <Button
// onClick={async () => {
// await handleAction(record, "reject");
// }}
// icon={<CloseOutlined />}
// style={{
// backgroundColor: "#ff1c1c",
// color: "#fff",
// borderColor: "#ff1c1c",
// }}
// >
// Reject
// </Button>
// </Space>
// ),
// },
]; ];
const routeData = [ const routeData = [
@ -211,21 +124,21 @@ export const PaybackFromUser = observer(() => {
key="1" key="1"
hasEmpty hasEmpty
columns={columns} columns={columns}
dataSource={store.payback.data} dataSource={store.payback.dataPaybackUser}
bordered bordered
pagination={{ pagination={{
pageSize: store.payback.pageSize, pageSize: store.payback.pageSizePaybackUser,
total: store.payback.total_data, total: store.payback.total_dataPaybackUser,
current: store.payback.page + 1, current: store.payback.pageSizePaybackUser + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.payback.pageSize = page.pageSize; store.payback.pageSizePaybackUser = page.pageSize;
store.payback.page = pageNumber - 1; store.payback.pageSizePaybackUser = pageNumber - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getData(); await store.payback.getDataUser();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
@ -237,18 +150,18 @@ export const PaybackFromUser = observer(() => {
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page) => { onChange: async (page) => {
store.payback.pageSize = page.pageSize; store.payback.pageSizePaybackUser = page.pageSize;
store.payback.page = page.current; store.payback.pageSizePaybackUser = page.current;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getData(); await store.payback.getDataUser();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.payback.pageSize, pageSize: store.payback.pageSizePaybackUser,
total: store.payback.total_data, total: store.payback.total_dataPaybackUser,
current: store.payback.page, current: store.payback.pageSizePaybackUser,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: {marginBottom: "1rem", marginRight: "1rem"},
}} }}
dataSource={store.payback.data} dataSource={store.payback.dataPaybackUser}
style={{padding: 0}} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {
return ( return (

26
src/store/payback.js
View File

@ -9,15 +9,10 @@ export class Payback {
filterCategory = null; filterCategory = null;
visibleModalPayback = false; visibleModalPayback = false;
pagePayback = 0; pagePaybackUser = 0;
pageSizePayback = 10; pageSizePaybackUser = 10;
dataPayback = []; dataPaybackUser = [];
total_dataPayback = 0; total_dataPaybackUser = 0;
pageSubPayback = 0;
pageSizeSubPayback = 10;
dataSubPayback = [];
total_dataPayback = 0;
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
@ -29,9 +24,7 @@ export class Payback {
const response = await http.get( const response = await http.get(
`/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}` `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}`
); );
//console.log(response) this.data = response.body.data.map((item, idx) => {
this.data =
response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item; return item;
}) ?? []; }) ?? [];
@ -45,16 +38,14 @@ export class Payback {
async getDataUser() { async getDataUser() {
try { try {
const response = await http.get( const response = await http.get(
`/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}` `/transaction/deposit-return/confirmation?page=${this.pagePaybackUser}&pageSize=${this.pageSizePaybackUser}`
); );
//console.log(response); this.dataPaybackUser = response.body.data.map((item, idx) => {
this.data =
response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item; return item;
}) ?? []; }) ?? [];
this.total_data = response.body.count ?? 0; this.total_dataPaybackUser = response.body.count ?? 0;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
@ -79,6 +70,7 @@ export class Payback {
console.error(e); console.error(e);
} }
} }
async create(data) { async create(data) {
try { try {
console.log(data) console.log(data)