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

Perbaikan Tampilan Mobile Menu Transaksi

Browse Source
This commit is contained in:
ajat91.sudrajat
2022-02-03 13:28:50 +07:00
parent 238eeb92ce
commit 34629edc40
2 changed files with 289 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
src/pages/Transaction/Transaction.js
View File

@@ -10,6 +10,8 @@ import {
Modal, Modal,
Row, Row,
DatePicker, DatePicker,
Form,
Input,
} from "antd"; } from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Product } from "./Product"; import { Product } from "./Product";
@@ -24,12 +26,16 @@ export const Transaction = observer(() => {
const { Title } = Typography; const { Title } = Typography;
const { Option } = Select; const { Option } = Select;
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [form] = Form.useForm();
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
const [barang, setBarang] = useState({});
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataCategories(); await store.transaction.getDataCategories();
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
@@ -44,22 +50,96 @@ export const Transaction = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabs = async (key) => { const routeData = [
{
route: LINKS.TRANSACTION,
name: "Transaksi",
},
];
const handleChangeTabs = async (item) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.transaction.dataSubCategories = []; store.transaction.dataSubCategories = [];
store.transaction.data = []; store.transaction.data = [];
store.transaction.filterSubCategory = null; store.transaction.filterSubCategory = null;
store.transaction.filterCategory = key; store.transaction.filterCategory = item;
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
const routeData = [ const handleChangeSubcategory = async (item) => {
{ store.transaction.filterSubCategory = item;
route: LINKS.TRANSACTION, modalLoader.setLoading(true);
name: "Transaksi" await store.transaction.getData();
}, modalLoader.setLoading(false);
]; };
const handleBuyProduct = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProd({
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success(response?.body?.message || "Berhasil Beli Produk");
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
console.log(e.result, "testingan1");
if (e.response?.body?.error) {
message.error(e.response.body.error);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
return;
}
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleBuyStag = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success(response?.body?.message || "Berhasil Beli Produk");
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
console.log(e.result, "testingan1");
if (e.response?.body?.error) {
message.error(e.response.body.error);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
return;
}
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
// setDataProd(false);
// setDataStag(false);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleCancel = () => {
form.resetFields();
setVisibleModalBuy(false);
};
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
@@ -75,13 +155,206 @@ export const Transaction = observer(() => {
Filter Filter
</Button> */} </Button> */}
</Col> </Col>
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50"> {store.ui.mediaQuery.isDesktop && (
{store.transaction.dataCategories.map((item, index) => ( <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
<TabPane tab={item.name} key={item.id}> {store.transaction.dataCategories.map((item, index) => (
<Product /> <TabPane tab={item.name} key={item.id}>
</TabPane> <Product />
))} </TabPane>
</Tabs> ))}
</Tabs>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Kategori
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Category"}
allowClear={true}
onChange={(val) => handleChangeTabs(val)}
style={{ marginBottom: "10px", width: "100%" }}
>
{store.transaction.dataCategories.map((item, index) => (
<Option key={index} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<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}
>
{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" }}>
{/* <Search
placeholder="input search text"
style={{ width: 200, marginRight: 10 }}
/> */}
</Col>
</Row>
{store.transaction.data.length != 0 && (
<Row>
{store.transaction.data.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card
onClick={() => {
setVisibleModalBuy(true);
setBarang(item);
}}
hoverable
style={{
cursor: "pointer",
marginLeft: 10,
borderColor: "salmon",
height: 100,
marginBottom: 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>
</Col>
))}
</Row>
)}
<Modal
visible={visibleModalBuy}
title={`Apakah anda yakin membeli ${barang?.product_name}?`}
okText={"Confirm"}
onCancel={() => {
form.resetFields();
setVisibleModalBuy(false);
}}
// footer={footerLayoutFilter}
footer={[
<Button
key="back"
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
onClick={() => {
form.resetFields();
handleCancel();
}}
>
Batal
</Button>,
<Button
key="Beli"
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyProduct(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Beli
</Button>,
<Button
key="Beli Stag"
type="primary"
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyStag(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Beli Staging
</Button>,
]}
>
<Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Nomor Tujuan"
rules={[
{
required: true,
message: "Tolong masukan nomor tujuan!",
},
// {
// pattern: /^(?:\d*)$/,
// message: "Value should contain just number",
// },
// {
// pattern: /^[\d]{1,12}$/,
// message: "Value should be 1 - 12 character",
// },
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
)}
</Card> </Card>
</div> </div>
); );

2
src/store/transaction.js
View File

@@ -23,7 +23,7 @@ export class Transaction {
pageSizeSubCategories = 10; pageSizeSubCategories = 10;
dataSubCategories = []; dataSubCategories = [];
total_dataSubCategories = 0; total_dataSubCategories = 0;
filterSubCategory = null; //filterSubCategory = null;
pageHistoryTransaction = 0; pageHistoryTransaction = 0;
pageSizeHistoryTransaction = 10; pageSizeHistoryTransaction = 10;