Merge branch 'main' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into devops-production
This commit is contained in:
commit
1c64f889fb
|
|
@ -15,7 +15,7 @@ import {
|
|||
Image,
|
||||
Modal,
|
||||
Form,
|
||||
DatePicker,
|
||||
DatePicker, Input,
|
||||
} from "antd";
|
||||
import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
|
|
@ -36,6 +36,7 @@ export const DetailUser = observer(() => {
|
|||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const [formExport] = Form.useForm();
|
||||
const [formFilterByTrxCode] = Form.useForm();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const { id } = useParams();
|
||||
const [visibleModal, setVisibleModal] = useState(false);
|
||||
|
|
@ -43,8 +44,10 @@ export const DetailUser = observer(() => {
|
|||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [filterStart, setFilterStart] = useState([]);
|
||||
const [filterEnd, setFilterEnd] = useState([]);
|
||||
const [filterTrxId, setFilterTrxId] = useState([]);
|
||||
const [visibleHis, setVisibleHis] = useState(true);
|
||||
const [actionFilter, setAction] = useState(false);
|
||||
const [actionFilterByCode, setActionFilterByCode] = useState(false);
|
||||
const [modalExport, setModalExport] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -389,6 +392,21 @@ export const DetailUser = observer(() => {
|
|||
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 () => {
|
||||
store.transaction.filterStart = null;
|
||||
store.transaction.filterEnd = null;
|
||||
|
|
@ -404,6 +422,15 @@ export const DetailUser = observer(() => {
|
|||
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 data = form.getFieldsValue();
|
||||
store.transaction.filterStart = moment(data.start_date).format(
|
||||
|
|
@ -424,6 +451,20 @@ export const DetailUser = observer(() => {
|
|||
store.transaction.visibleModalFilterTransaction = 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 = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
|
|
@ -449,6 +490,39 @@ export const DetailUser = observer(() => {
|
|||
Terapkan
|
||||
</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 (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent
|
||||
|
|
@ -929,6 +1003,17 @@ export const DetailUser = observer(() => {
|
|||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{ marginBottom: "1rem", marginLeft: 5 }}
|
||||
onClick={() => {
|
||||
store.transaction.visibleModalFilterTransactionByCode = true;
|
||||
store.transaction.page = 0;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter By Transaction Code
|
||||
</Button>
|
||||
<Table
|
||||
key="1"
|
||||
hasEmpty
|
||||
|
|
@ -1135,6 +1220,39 @@ export const DetailUser = observer(() => {
|
|||
</Col>
|
||||
</Row>
|
||||
</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
|
||||
visible={modalExport}
|
||||
title={"Export"}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,15 @@ const { RangePicker } = DatePicker;
|
|||
export const Profile = observer(() => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const [formFilterByTrxCode] = Form.useForm();
|
||||
const [formExport] = Form.useForm();
|
||||
const { id } = useParams();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [filterStart, setFilterStart] = useState([]);
|
||||
const [filterEnd, setFilterEnd] = useState([]);
|
||||
const [filterTrxId, setFilterTrxId] = useState([]);
|
||||
const [actionFilter, setAction] = useState(false);
|
||||
const [actionFilterByCode, setActionFilterByCode] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [modalExport, setModalExport] = useState(false);
|
||||
|
||||
|
|
@ -93,6 +96,19 @@ export const Profile = observer(() => {
|
|||
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 () => {
|
||||
store.transaction.filterStart = null;
|
||||
//form.resetFields();
|
||||
|
|
@ -107,6 +123,15 @@ export const Profile = observer(() => {
|
|||
//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 data = form.getFieldsValue();
|
||||
store.transaction.filterStart = moment(data.start_date).format(
|
||||
|
|
@ -129,6 +154,18 @@ export const Profile = observer(() => {
|
|||
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 = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
|
|
@ -154,6 +191,39 @@ export const Profile = observer(() => {
|
|||
Terapkan
|
||||
</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 = [
|
||||
{
|
||||
title: "Nama Produk",
|
||||
|
|
@ -705,6 +775,18 @@ export const Profile = observer(() => {
|
|||
<FilterOutlined />
|
||||
Filter
|
||||
</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 && (
|
||||
<Table
|
||||
columns={columns}
|
||||
|
|
@ -982,6 +1064,38 @@ export const Profile = observer(() => {
|
|||
</Row>
|
||||
</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
|
||||
visible={visible}
|
||||
title={"Ganti Password"}
|
||||
|
|
|
|||
|
|
@ -64,8 +64,10 @@ export class Transaction {
|
|||
|
||||
//filter
|
||||
visibleModalFilterTransaction = false;
|
||||
visibleModalFilterTransactionByCode = false;
|
||||
filterStart = null;
|
||||
filterEnd = null;
|
||||
filterTrxId = null;
|
||||
filterStartDetailUser = null;
|
||||
filterEndDetailUser = null;
|
||||
constructor(ctx) {
|
||||
|
|
@ -163,7 +165,7 @@ export class Transaction {
|
|||
async getDataHistoryTransaction() {
|
||||
try {
|
||||
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);
|
||||
this.dataHistoryTransaction = response.body.data ?? [];
|
||||
|
|
@ -175,7 +177,7 @@ export class Transaction {
|
|||
|
||||
async getDetailHistoryTransaction(id) {
|
||||
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');
|
||||
this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
|
||||
this.total_data = response?.body?.count ?? 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user