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

fixing Bug

Browse Source
This commit is contained in:
ajat91.sudrajat 2022-01-05 11:35:26 +07:00
parent 2cb4f9319c
commit d47f838dc1
4 changed files with 193 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,8 +102,8 @@ export const MembershipModal = ({
}, },
{ {
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
pattern: /^[\d]{2,12}$/, pattern: /^[\d]{10,12}$/,
message: "Phone number should be less than 12 character", message: "Phone number should be 10 - 12 character",
}, },
]} ]}
> >

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

@ -234,9 +234,9 @@ export const Payback = observer(() => {
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
const data = form.getFieldsValue(); const data = form.getFieldsValue();
//console.log(data); //console.log(data);
store.transaction.filterMembership = filterMembership; store.payback.filterMembership = filterMembership;
store.transaction.filterStart = data.start_date; store.payback.filterStart = data.start_date;
store.transaction.filterEnd = data.end_date; store.payback.filterEnd = data.end_date;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);

250
src/pages/Payback/PaybackCreated.js
View File

@ -1,19 +1,40 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; Col,
import {PaybackModal} from "./PaybackModal"; Divider,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Image,
import {LINKS} from "../../routes/app"; Input,
import {ModalLoaderContext} from "../../utils/modal"; List,
import {appConfig} from "../../config/app"; message,
import {PAYBACK_STATUS} from "../../constants/payback"; DatePicker,
Row,
Table,
Tag,
Typography,
Select,
Form,
Modal,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { PAYBACK_STATUS } from "../../constants/payback";
const {Search} = Input; const { Search } = Input;
export const PaybackCreated = observer(() => { export const PaybackCreated = observer(() => {
const { Option } = Select;
const { Title } = Typography;
const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const [filterMembership, setFilterMembership] = useState([]);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
@ -45,11 +66,11 @@ export const PaybackCreated = observer(() => {
dataIndex: "image_prove", dataIndex: "image_prove",
key: "image_prove", key: "image_prove",
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={`${appConfig.apiUrl}/config/image/${text}`} src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}} style={{ width: "5vw" }}
alt={record.id} alt={record.id}
/> />
), ),
}, },
{ {
@ -57,23 +78,24 @@ export const PaybackCreated = observer(() => {
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Status", title: "Status",
dataIndex: "status", dataIndex: "status",
key: "status", key: "status",
width: '10%', width: "10%",
render: (text) => render: (text) => (
<Tag <Tag
color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"} color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
style={{color: "#4F566B"}} style={{ color: "#4F566B" }}
> >
{PAYBACK_STATUS[text]} {PAYBACK_STATUS[text]}
</Tag> </Tag>
),
}, },
]; ];
@ -84,23 +106,91 @@ export const PaybackCreated = observer(() => {
}, },
{ {
route: LINKS.PAYBACK_CREATED, route: LINKS.PAYBACK_CREATED,
name: <span style={{fontWeight: "bold"}}>Buat Pembayaran</span>, name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
}, },
]; ];
const handleRemoveFilter = async () => {
store.payback.filterStart = null;
store.payback.filterEnd = null;
form.resetFields();
await store.payback.getDataCreated();
store.payback.visibleModalFilterCreate = false;
};
const handleCancelFilter = async () => {
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterCreate = false;
await store.payback.getDataCreated();
};
const handleSubmitFilter = async () => {
const data = form.getFieldsValue();
//console.log(data);
//store.payback.filterMembership = filterMembership;
store.payback.filterStart = data.start_date;
store.payback.filterEnd = data.end_date;
modalLoader.setLoading(true);
await store.payback.getDataCreated();
modalLoader.setLoading(false);
// form.resetFields();
// setFilterMembership([]);
store.payback.visibleModalFilterCreate = false;
};
// const handleFilterCategory = async (value) => {
// if (value) {
// store.product.filterCategory = value;
// await store.product.getDataSubCategories();
// } else {
// store.product.filterCategory = null;
// await store.product.getDataSubCategories();
// }
// };
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> <Button
<FilterOutlined/> onClick={() => {
store.payback.visibleModalFilterCreate = true;
}}
>
<FilterOutlined />
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{ textAlign: "right" }}>
{/* <Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -116,33 +206,33 @@ export const PaybackCreated = observer(() => {
store.payback.visibleModalPayback = true; store.payback.visibleModalPayback = true;
}} }}
> >
<PlusSquareOutlined/> New <PlusSquareOutlined /> New
</Button> </Button>
)} )}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
key="1" key="1"
hasEmpty hasEmpty
columns={columns} columns={columns}
dataSource={store.payback.dataCreated} dataSource={store.payback.dataCreated}
bordered bordered
pagination={{ pagination={{
pageSize: store.payback.pageSizeCreated, pageSize: store.payback.pageSizeCreated,
total: store.payback.totalDataCreated, total: store.payback.totalDataCreated,
current: store.payback.pageCreated + 1, current: store.payback.pageCreated + 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.pageSizeCreated = page.pageSize; store.payback.pageSizeCreated = page.pageSize;
store.payback.pageCreated = pageNumber - 1; store.payback.pageCreated = pageNumber - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataCreated(); await store.payback.getDataCreated();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)} )}
@ -161,10 +251,10 @@ export const PaybackCreated = observer(() => {
pageSize: store.payback.pageSizeCreated, pageSize: store.payback.pageSizeCreated,
total: store.payback.totalDataCreated, total: store.payback.totalDataCreated,
current: store.payback.pageCreated + 1, current: store.payback.pageCreated + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.payback.dataCreated} dataSource={store.payback.dataCreated}
style={{padding: 0}} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -185,11 +275,11 @@ export const PaybackCreated = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.image_prove} preview={false}/> <Image src={item.image_prove} preview={false} />
</div> </div>
} }
/> />
<div style={{marginRight: 16}}> <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -200,7 +290,7 @@ export const PaybackCreated = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{margin: 0}}/> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}
@ -208,10 +298,40 @@ export const PaybackCreated = observer(() => {
)} )}
</div> </div>
</Card> </Card>
<Modal
<PaybackModal visible={store.payback.visibleModalFilterCreate}
initialData={initialData} title={"Filter"}
/> footer={footerLayoutFilter}
onCancel={async() => {
//form.resetFields();
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterCreate = false;
await store.payback.getDataCreated();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={form}>
<Form.Item
name="start_date"
label="Dari"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
<PaybackModal initialData={initialData} />
</div> </div>
); );
}); });

3
src/store/payback.js
View File

@ -20,6 +20,9 @@ export class Payback {
filterMembership=null; filterMembership=null;
filterStart=null; filterStart=null;
filterEnd=null; filterEnd=null;
//filter created
visibleModalFilterCreate=false
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
makeAutoObservable(this); makeAutoObservable(this);