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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into devops-staging

Browse Source
This commit is contained in:
Muhammad Fadli 2023-05-09 18:03:05 +07:00
commit 90078a1767
3 changed files with 237 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/Membership/DetailUser.js
View File

@ -15,7 +15,7 @@ import {
Image, Image,
Modal, Modal,
Form, Form,
DatePicker, DatePicker, Input,
} from "antd"; } from "antd";
import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons"; import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@ -36,6 +36,7 @@ export const DetailUser = observer(() => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [formExport] = Form.useForm(); const [formExport] = Form.useForm();
const [formFilterByTrxCode] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams(); const { id } = useParams();
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
@ -43,8 +44,10 @@ export const DetailUser = observer(() => {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [filterStart, setFilterStart] = useState([]); const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]); const [filterEnd, setFilterEnd] = useState([]);
const [filterTrxId, setFilterTrxId] = useState([]);
const [visibleHis, setVisibleHis] = useState(true); const [visibleHis, setVisibleHis] = useState(true);
const [actionFilter, setAction] = useState(false); const [actionFilter, setAction] = useState(false);
const [actionFilterByCode, setActionFilterByCode] = useState(false);
const [modalExport, setModalExport] = useState(false); const [modalExport, setModalExport] = useState(false);
useEffect(() => { useEffect(() => {
@ -389,6 +392,21 @@ export const DetailUser = observer(() => {
setAction(false); setAction(false);
}; };
const handleRemoveFilterByTrxId = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
formFilterByTrxCode.resetFields();
setFilterStart([]);
setFilterEnd([]);
setFilterTrxId([]);
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
};
const handleCancelFilter = async () => { const handleCancelFilter = async () => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
@ -404,6 +422,15 @@ export const DetailUser = observer(() => {
setAction(false); setAction(false);
}; };
const handleCancelFilterByTrxId = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
};
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
const data = form.getFieldsValue(); const data = form.getFieldsValue();
store.transaction.filterStart = moment(data.start_date).format( store.transaction.filterStart = moment(data.start_date).format(
@ -424,6 +451,20 @@ export const DetailUser = observer(() => {
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
setAction(false); setAction(false);
}; };
const handleSubmitFilterByTrxId = async (data) => {
store.transaction.filterStart = null
store.transaction.filterEnd = null
store.transaction.filterTrxId = data.trx_id
modalLoader.setLoading(true);
modalLoader.setLoading(false);
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
};
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
key={"remove"} key={"remove"}
@ -449,6 +490,39 @@ export const DetailUser = observer(() => {
Terapkan Terapkan
</Button>, </Button>,
]; ];
const footerLayoutFilterByTrxId = [
<Button
key={"remove"}
onClick={handleRemoveFilterByTrxId}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Hapus Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilterByTrxId}>
Batal
</Button>,
<Button
key={"submit"}
onClick={() => {
formFilterByTrxCode.validateFields().then((data) => {
handleSubmitFilterByTrxId(data)
}).catch((info) => {
console.error("Validate Failed:", info);
});
}}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Terapkan
</Button>,
];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent <BreadcumbComponent
@ -929,6 +1003,17 @@ export const DetailUser = observer(() => {
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> </Button>
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransactionByCode = true;
store.transaction.page = 0;
}}
>
<FilterOutlined />
Filter By Transaction Code
</Button>
<Table <Table
key="1" key="1"
hasEmpty hasEmpty
@ -1135,6 +1220,39 @@ export const DetailUser = observer(() => {
</Col> </Col>
</Row> </Row>
</Modal> </Modal>
<Modal
visible={store.transaction.visibleModalFilterTransactionByCode}
title={"Filter by transaction code"}
footer={footerLayoutFilterByTrxId}
onCancel={async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
store.transaction.visibleModalFilterTransactionByCode = false;
actionFilter === true
? await store.transaction.getDataHistoryTopUp(id)
: await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
//await store.transaction.getDetailHistoryTransaction();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={formFilterByTrxCode}>
<Form.Item
name="trx_id"
label="Kode Transaksi"
rules={[{ required: true, message: "Please input transaction code!" }]}
>
<Input />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
<Modal <Modal
visible={modalExport} visible={modalExport}
title={"Export"} title={"Export"}

114
src/pages/Profile/Profile.js
View File

@ -34,12 +34,15 @@ const { RangePicker } = DatePicker;
export const Profile = observer(() => { export const Profile = observer(() => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [formFilterByTrxCode] = Form.useForm();
const [formExport] = Form.useForm(); const [formExport] = Form.useForm();
const { id } = useParams(); const { id } = useParams();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [filterStart, setFilterStart] = useState([]); const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]); const [filterEnd, setFilterEnd] = useState([]);
const [filterTrxId, setFilterTrxId] = useState([]);
const [actionFilter, setAction] = useState(false); const [actionFilter, setAction] = useState(false);
const [actionFilterByCode, setActionFilterByCode] = useState(false);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [modalExport, setModalExport] = useState(false); const [modalExport, setModalExport] = useState(false);
@ -93,6 +96,19 @@ export const Profile = observer(() => {
setAction(false); setAction(false);
}; };
const handleRemoveFilterByTrxId = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
formFilterByTrxCode.resetFields();
setFilterStart([]);
setFilterEnd([]);
setFilterTrxId([]);
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
await store.transaction.getDataHistoryTransaction();
};
const handleCancelFilter = async () => { const handleCancelFilter = async () => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
//form.resetFields(); //form.resetFields();
@ -107,6 +123,15 @@ export const Profile = observer(() => {
//await store.transaction.getDataHistoryTransaction(); //await store.transaction.getDataHistoryTransaction();
}; };
const handleCancelFilterByTrxId = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
};
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
const data = form.getFieldsValue(); const data = form.getFieldsValue();
store.transaction.filterStart = moment(data.start_date).format( store.transaction.filterStart = moment(data.start_date).format(
@ -129,6 +154,18 @@ export const Profile = observer(() => {
setAction(false); setAction(false);
}; };
const handleSubmitFilterByTrxId = async (data) => {
store.transaction.filterStart = null
store.transaction.filterEnd = null
store.transaction.filterTrxId = data.trx_id
modalLoader.setLoading(true);
modalLoader.setLoading(false);
store.transaction.visibleModalFilterTransactionByCode = false;
setActionFilterByCode(false);
await store.transaction.getDataHistoryTransaction();
};
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
key={"remove"} key={"remove"}
@ -154,6 +191,39 @@ export const Profile = observer(() => {
Terapkan Terapkan
</Button>, </Button>,
]; ];
const footerLayoutFilterByTrxId = [
<Button
key={"remove"}
onClick={handleRemoveFilterByTrxId}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Hapus Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilterByTrxId}>
Batal
</Button>,
<Button
key={"submit"}
onClick={() => {
formFilterByTrxCode.validateFields().then((data) => {
handleSubmitFilterByTrxId(data)
}).catch((info) => {
console.error("Validate Failed:", info);
});
}}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Terapkan
</Button>,
];
const columns = [ const columns = [
{ {
title: "Nama Produk", title: "Nama Produk",
@ -705,6 +775,18 @@ export const Profile = observer(() => {
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> </Button>
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransactionByCode = true;
store.transaction.page = 0;
setActionFilterByCode(true);
}}
>
<FilterOutlined />
Filter By Transaction Code
</Button>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
columns={columns} columns={columns}
@ -982,6 +1064,38 @@ export const Profile = observer(() => {
</Row> </Row>
</Modal> </Modal>
<Modal
visible={store.transaction.visibleModalFilterTransactionByCode}
title={"Filter by transaction code"}
footer={footerLayoutFilterByTrxId}
onCancel={async () => {
//form.resetFields();
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.filterTrxId = null;
store.transaction.visibleModalFilterTransactionByCode = false;
actionFilterByCode === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={formFilterByTrxCode}>
<Form.Item
name="trx_id"
label="Kode Transaksi"
rules={[{ required: true, message: "Please input transaction code!" }]}
>
<Input />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
<Modal <Modal
visible={visible} visible={visible}
title={"Ganti Password"} title={"Ganti Password"}

6
src/store/transaction.js
View File

@ -64,8 +64,10 @@ export class Transaction {
//filter //filter
visibleModalFilterTransaction = false; visibleModalFilterTransaction = false;
visibleModalFilterTransactionByCode = false;
filterStart = null; filterStart = null;
filterEnd = null; filterEnd = null;
filterTrxId = null;
filterStartDetailUser = null; filterStartDetailUser = null;
filterEndDetailUser = null; filterEndDetailUser = null;
constructor(ctx) { constructor(ctx) {
@ -163,7 +165,7 @@ export class Transaction {
async getDataHistoryTransaction() { async getDataHistoryTransaction() {
try { try {
const response = await http.get( const response = await http.get(
`/transaction/history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}` `/transaction/history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}&trxId=${this.filterTrxId}`
); );
console.log(response); console.log(response);
this.dataHistoryTransaction = response.body.data ?? []; this.dataHistoryTransaction = response.body.data ?? [];
@ -175,7 +177,7 @@ export class Transaction {
async getDetailHistoryTransaction(id) { async getDetailHistoryTransaction(id) {
try { try {
const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`); const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}&trxId=${this.filterTrxId}`);
console.log(response, 'Data Trans'); console.log(response, 'Data Trans');
this.dataDetailHistoryTransactionDetailUser = response.body.data ?? []; this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
this.total_data = response?.body?.count ?? 0; this.total_data = response?.body?.count ?? 0;