Perbaikan Tampilan Mobile Menu Transaksi
This commit is contained in:
@@ -10,6 +10,8 @@ import {
|
||||
Modal,
|
||||
Row,
|
||||
DatePicker,
|
||||
Form,
|
||||
Input,
|
||||
} from "antd";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { Product } from "./Product";
|
||||
@@ -24,12 +26,16 @@ export const Transaction = observer(() => {
|
||||
const { Title } = Typography;
|
||||
const { Option } = Select;
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [form] = Form.useForm();
|
||||
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
|
||||
const [barang, setBarang] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
modalLoader.setLoading(true);
|
||||
await store.transaction.getDataCategories();
|
||||
await store.transaction.getDataSubCategories();
|
||||
modalLoader.setLoading(false);
|
||||
} catch (e) {
|
||||
modalLoader.setLoading(false);
|
||||
@@ -44,22 +50,96 @@ export const Transaction = observer(() => {
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleChangeTabs = async (key) => {
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.TRANSACTION,
|
||||
name: "Transaksi",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const handleChangeTabs = async (item) => {
|
||||
modalLoader.setLoading(true);
|
||||
store.transaction.dataSubCategories = [];
|
||||
store.transaction.data = [];
|
||||
store.transaction.filterSubCategory = null;
|
||||
store.transaction.filterCategory = key;
|
||||
store.transaction.filterCategory = item;
|
||||
await store.transaction.getDataSubCategories();
|
||||
modalLoader.setLoading(false);
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.TRANSACTION,
|
||||
name: "Transaksi"
|
||||
},
|
||||
];
|
||||
const handleChangeSubcategory = async (item) => {
|
||||
store.transaction.filterSubCategory = item;
|
||||
modalLoader.setLoading(true);
|
||||
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 (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
@@ -75,6 +155,7 @@ export const Transaction = observer(() => {
|
||||
Filter
|
||||
</Button> */}
|
||||
</Col>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
|
||||
{store.transaction.dataCategories.map((item, index) => (
|
||||
<TabPane tab={item.name} key={item.id}>
|
||||
@@ -82,6 +163,198 @@ export const Transaction = observer(() => {
|
||||
</TabPane>
|
||||
))}
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,7 @@ export class Transaction {
|
||||
pageSizeSubCategories = 10;
|
||||
dataSubCategories = [];
|
||||
total_dataSubCategories = 0;
|
||||
filterSubCategory = null;
|
||||
//filterSubCategory = null;
|
||||
|
||||
pageHistoryTransaction = 0;
|
||||
pageSizeHistoryTransaction = 10;
|
||||
|
||||
Reference in New Issue
Block a user