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

Merge branch 'develop' into 'devops-staging'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!19
This commit is contained in:
Catur Bagaskara 2021-12-23 18:45:43 +00:00
commit 7d551d478f
2 changed files with 81 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@ export const Profile = observer(() => {
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
<Text>{format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')}</Text>
)
},
},

138
src/pages/Transaction/Product.js
View File

@ -1,16 +1,17 @@
import React, { useContext, useEffect } from "react";
import { useStore } from "../../utils/useStore";
import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
import { observer } from "mobx-react-lite";
import { MoneyCollectOutlined } from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
const { Option } = Select;
const {Search} = Input;
const {Option} = Select;
export const Product = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [form] = Form.useForm();
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
useEffect(() => {
const init = async () => {
@ -41,11 +42,12 @@ export const Product = observer(() => {
modalLoader.setLoading(false);
};
const handleBuyProduct = async (data) => {
const handleBuyProduct = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({
productCode: data,
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success("Berhasil Beli Produk");
@ -60,38 +62,44 @@ export const Product = observer(() => {
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleCancel = () => {
form.resetFields();
setVisibleModalBuy(false);
};
return (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
Sub Category
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => handleChangeSubcategory(val)}
style={{ marginBottom: "10px", width: "100%" }}
value={store.transaction.filterSubCategory}
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => handleChangeSubcategory(val)}
style={{marginBottom: "10px", width: "100%"}}
value={store.transaction.filterSubCategory}
>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
<Col
span={12}
style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
<Col
span={12}
style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
>
Produk & Nominal
</Col>
<Col span={12} style={{ textAlign: "right" }}>
@ -107,19 +115,7 @@ export const Product = observer(() => {
<Col key={index} xs={24} md={16} lg={8}>
<Card
onClick={() => {
Modal.confirm({
title: `Are you sure buy ${item.product_name}?`,
icon: <MoneyCollectOutlined />,
okText: "Confirm",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleBuyProduct(item.product_code);
},
onCancel() {
console.log("Cancel");
},
});
setVisibleModalBuy(true)
}}
hoverable
style={{
@ -130,26 +126,52 @@ export const Product = observer(() => {
marginBottom: 10,
}}
>
<span style={{ color: "black" }}>{item.product_name}</span>
<br />
<span style={{ color: "grey", fontSize: 10 }}>
<span style={{color: "black"}}>{item.product_name}</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item?.price)}
</span>
</Card>
<Modal
visible={visibleModalBuy}
title={`Are you sure buy ${item.product_name}?`}
okText={"Confirm"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyProduct(values, item.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="phoneNumber"
label="Phone Number"
rules={[{required: true, message: "Please input Phone Number!"}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
</Col>
))}
</Row>
)}
{/* {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang
</Button>
</Col>
)} */}
</div>
);
});