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

Perbaikan Menu Transaksi

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-30 18:09:00 +07:00
parent 07c08472b3
commit fc944a23e0
3 changed files with 76 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/PartnerComponent.js
View File

@ -422,7 +422,7 @@ export const PartnerComponent = observer((props) => {
}, },
{ {
pattern: /^[\d]{2,12}$/, pattern: /^[\d]{2,12}$/,
message: "Phone number should be 12 character", message: "Phone number should be less than 12 character",
}, },
]} ]}
> >

2
src/pages/Membership/MembershipModal.js
View File

@ -103,7 +103,7 @@ export const MembershipModal = ({
{ {
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
pattern: /^[\d]{2,12}$/, pattern: /^[\d]{2,12}$/,
message: "Phone number should be 12 character", message: "Phone number should be less than 12 character",
}, },
]} ]}
> >

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

@ -1,11 +1,11 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd"; import { Card, Col, Form, Input, message, Modal, Row, Select } from "antd";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input; const { Search } = Input;
const {Option} = Select; const { Option } = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
@ -72,34 +72,34 @@ export const Product = observer(() => {
}; };
return ( return (
<div> <div>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category Sub Category
</span> </span>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<Select <Select
placeholder={"Select Sub Category"} placeholder={"Select Sub Category"}
allowClear={true} allowClear={true}
onChange={(val) => handleChangeSubcategory(val)} onChange={(val) => handleChangeSubcategory(val)}
style={{marginBottom: "10px", width: "100%"}} style={{ marginBottom: "10px", width: "100%" }}
value={store.transaction.filterSubCategory} 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 Produk & Nominal
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
@ -115,7 +115,7 @@ export const Product = observer(() => {
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card <Card
onClick={() => { onClick={() => {
setVisibleModalBuy(true) setVisibleModalBuy(true);
}} }}
hoverable hoverable
style={{ style={{
@ -123,12 +123,12 @@ export const Product = observer(() => {
marginLeft: 10, marginLeft: 10,
borderColor: "salmon", borderColor: "salmon",
height: 100, height: 100,
marginBottom: 10 marginBottom: 10,
}} }}
> >
<span style={{color: "black"}}>{item.product_name}</span> <span style={{ color: "black" }}>{item.product_name}</span>
<br/> <br />
<span style={{color: "grey", fontSize: 10}}> <span style={{ color: "grey", fontSize: 10 }}>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
@ -137,34 +137,47 @@ export const Product = observer(() => {
</Card> </Card>
<Modal <Modal
visible={visibleModalBuy} visible={visibleModalBuy}
title={`Are you sure buy ${item.product_name}?`} title={`Are you sure buy ${item.product_name}?`}
okText={"Confirm"} okText={"Confirm"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log(values, "isi form"); console.log(values, "isi form");
handleBuyProduct(values, item.product_code); handleBuyProduct(values, item.product_code);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.error("Validate Failed:", info); console.error("Validate Failed:", info);
}); });
}} }}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item <Form.Item
name="destination" name="destination"
label="Destination" label="Destination"
rules={[{required: true, message: "Please input Destination Number!"}]} rules={[
{
required: true,
message: "Please input Destination Number!",
},
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
},
{
pattern: /^[\d]{2,12}$/,
message: "Value should be less than 12 character",
},
]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>