Merge branch 'develop' into 'devops-staging'
fixing Bug See merge request empatnusabangsa/ppob/ppob-frontend!46
This commit is contained in:
commit
b4641c47a2
|
|
@ -102,8 +102,8 @@ export const MembershipModal = ({
|
|||
},
|
||||
{
|
||||
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
|
||||
pattern: /^[\d]{2,12}$/,
|
||||
message: "Phone number should be less than 12 character",
|
||||
pattern: /^[\d]{10,12}$/,
|
||||
message: "Phone number should be 10 - 12 character",
|
||||
},
|
||||
]}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -234,9 +234,9 @@ export const Payback = observer(() => {
|
|||
const handleSubmitFilter = async () => {
|
||||
const data = form.getFieldsValue();
|
||||
//console.log(data);
|
||||
store.transaction.filterMembership = filterMembership;
|
||||
store.transaction.filterStart = data.start_date;
|
||||
store.transaction.filterEnd = data.end_date;
|
||||
store.payback.filterMembership = filterMembership;
|
||||
store.payback.filterStart = data.start_date;
|
||||
store.payback.filterEnd = data.end_date;
|
||||
modalLoader.setLoading(true);
|
||||
await store.payback.getDataConfirmation();
|
||||
modalLoader.setLoading(false);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,25 @@
|
|||
import React, { useContext, useEffect, useState } from "react";
|
||||
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Divider,
|
||||
Image,
|
||||
Input,
|
||||
List,
|
||||
message,
|
||||
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 { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
|
||||
import { PaybackModal } from "./PaybackModal";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
|
|
@ -13,7 +30,11 @@ import {PAYBACK_STATUS} from "../../constants/payback";
|
|||
const { Search } = Input;
|
||||
|
||||
export const PaybackCreated = observer(() => {
|
||||
const { Option } = Select;
|
||||
const { Title } = Typography;
|
||||
const [form] = Form.useForm();
|
||||
const store = useStore();
|
||||
const [filterMembership, setFilterMembership] = useState([]);
|
||||
const [initialData, setInitialData] = useState({});
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
|
||||
|
|
@ -47,7 +68,7 @@ export const PaybackCreated = observer(() => {
|
|||
render: (text, record) => (
|
||||
<Image
|
||||
src={`${appConfig.apiUrl}/config/image/${text}`}
|
||||
style={{width: '5vw'}}
|
||||
style={{ width: "5vw" }}
|
||||
alt={record.id}
|
||||
/>
|
||||
),
|
||||
|
|
@ -66,14 +87,15 @@ export const PaybackCreated = observer(() => {
|
|||
title: "Status",
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
width: '10%',
|
||||
render: (text) =>
|
||||
width: "10%",
|
||||
render: (text) => (
|
||||
<Tag
|
||||
color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
|
||||
style={{ color: "#4F566B" }}
|
||||
>
|
||||
{PAYBACK_STATUS[text]}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -87,6 +109,70 @@ export const PaybackCreated = observer(() => {
|
|||
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 (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
|
|
@ -95,7 +181,11 @@ export const PaybackCreated = observer(() => {
|
|||
<div>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
store.payback.visibleModalFilterCreate = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
|
|
@ -133,7 +223,7 @@ export const PaybackCreated = observer(() => {
|
|||
total: store.payback.totalDataCreated,
|
||||
current: store.payback.pageCreated + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
|
|
@ -208,10 +298,40 @@ export const PaybackCreated = observer(() => {
|
|||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<PaybackModal
|
||||
initialData={initialData}
|
||||
/>
|
||||
<Modal
|
||||
visible={store.payback.visibleModalFilterCreate}
|
||||
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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ export class Payback {
|
|||
filterMembership=null;
|
||||
filterStart=null;
|
||||
filterEnd=null;
|
||||
|
||||
//filter created
|
||||
visibleModalFilterCreate=false
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
makeAutoObservable(this);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user