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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-21 16:58:07 +07:00
commit 4a2429bd8d
7 changed files with 124 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.css
View File

@ -63,6 +63,11 @@ code {
.ant-menu-submenu-arrow{ .ant-menu-submenu-arrow{
padding-right: 40px !important; padding-right: 40px !important;
} }
.ant-breadcrumb{ .ant-breadcrumb {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #ed1f24 !important;
border-color: #ed1f24 !important;
}

56
src/pages/Payback/Payback.js
View File

@ -158,21 +158,21 @@ export const Payback = observer(() => {
columns={columns} columns={columns}
dataSource={store.payback.data} dataSource={store.payback.data}
bordered bordered
pagination={{ // pagination={{
pageSize: store.payback.page, // pageSize: store.payback.page,
total: store.payback.total_data, // total: store.payback.total_data,
current: store.payback.pageSize + 1, // current: store.payback.pageSize + 1,
showSizeChanger: true, // showSizeChanger: true,
simple: false // simple: false
}} // }}
onChange={async (page) => { // onChange={async (page) => {
let pageNumber = page.current; // let pageNumber = page.current;
store.payback.pageSize = page.pageSize; // store.payback.pageSize = page.pageSize;
store.payback.page = pageNumber - 1; // store.payback.page = pageNumber - 1;
modalLoader.setLoading(true); // modalLoader.setLoading(true);
await store.payback.getData(); // await store.payback.getData();
modalLoader.setLoading(false); // modalLoader.setLoading(false);
}} // }}
/> />
)} )}
@ -180,19 +180,19 @@ export const Payback = observer(() => {
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ // pagination={{
onChange: async (page) => { // onChange: async (page) => {
store.payback.pageSize = page.pageSize; // store.payback.pageSize = page.pageSize;
store.payback.page = page.current; // store.payback.page = page.current;
modalLoader.setLoading(true); // modalLoader.setLoading(true);
await store.payback.getData(); // await store.payback.getData();
modalLoader.setLoading(false); // modalLoader.setLoading(false);
}, // },
pageSize: store.payback.pageSize, // pageSize: store.payback.pageSize,
total: store.payback.total_data, // total: store.payback.total_data,
current: store.payback.page, // current: store.payback.page,
style: {marginBottom: "1rem", marginRight: "1rem"}, // style: {marginBottom: "1rem", marginRight: "1rem"},
}} // }}
dataSource={store.payback.data} dataSource={store.payback.data}
style={{padding: 0}} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {

28
src/pages/Payback/PaybackFromUser.js
View File

@ -12,7 +12,6 @@ const {Search} = Input;
export const PaybackFromUser = observer(() => { export const PaybackFromUser = observer(() => {
const store = useStore(); const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
@ -71,23 +70,6 @@ export const PaybackFromUser = observer(() => {
}, },
]; ];
const onSubmit = async (data) => {
modalLoader.setLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
// await store.membership.getData();
} catch (e) {
console.error(e, "apa errornya");
message.error("Failed Add Member");
}
modalLoader.setLoading(false);
setVisibleModal(false);
};
const handleAction = async (record, type) => {
};
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData}/>
@ -113,7 +95,7 @@ export const PaybackFromUser = observer(() => {
<Button <Button
onClick={() => { onClick={() => {
setInitialData({}); setInitialData({});
setVisibleModal(true); store.payback.visibleModalPayback = true;
}} }}
> >
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
@ -210,15 +192,7 @@ export const PaybackFromUser = observer(() => {
</Card> </Card>
<PaybackModal <PaybackModal
visible={visibleModal}
initialData={initialData} initialData={initialData}
onCreate={async (data) => {
await onSubmit(data);
}}
onCancel={() => {
setInitialData({});
setVisibleModal(false);
}}
/> />
</div> </div>
); );

65
src/pages/Payback/PaybackModal.js
View File

@ -1,12 +1,12 @@
import React, {useContext, useState} from "react"; import React, {useContext, useState} from "react";
import {Form, Input, message, Modal, Upload,} from "antd"; import {Form, InputNumber, message, Modal, Upload,} from "antd";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons"; import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
import {http} from "../../utils/http"; import {http} from "../../utils/http";
import {appConfig} from "../../config/app"; import {appConfig} from "../../config/app";
export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => { export const PaybackModal = ({initialData}) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const [image, setImage] = useState(""); const [image, setImage] = useState("");
@ -58,40 +58,51 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
); );
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); modalLoader.setLoading(true);
try { try {
modalLoader.setLoading(true); const request = {
await store.payback.create(data); ...data,
modalLoader.setLoading(false); destination: store.authentication.profileData.superior?.id
}
await store.payback.create(request);
message.success("Success Add Payback"); message.success("Success Add Payback");
await store.payback.getData();
} catch (e) { } catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) { if (e.response?.body?.message) {
message.error(e.response.body.message); message.error(e.response.body.message);
return; return;
} }
message.error(e.message); message.error(e.message);
} }
modalLoader.setLoading(false);
form.resetFields(); form.resetFields();
store.payback.visibleModalPayback = false;
setImage("");
setFileList([]);
setPreviewImage("");
setPreviewVisible(false);
}; };
const handleCancel = () => {
form.resetFields();
store.payback.visibleModalPayback = false;
setImage("");
setFileList([]);
setPreviewImage("");
setPreviewVisible(false);
}
return ( return (
<Modal <Modal
visible={visible} visible={store.payback.visibleModalPayback}
title={"Create a new Payback"} title={"Create a new Payback"}
okText={"Create"} okText={"Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={handleCancel}
form.resetFields();
onCancel();
}}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
handleSubmit(values); handleSubmit(values);
console.log(values);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
@ -105,14 +116,6 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
name="form_in_modal" name="form_in_modal"
initialValues={initialData} initialValues={initialData}
> >
<Form.Item
name="destination"
label="destination"
rules={[{required: true, message: "Please input Name!"}]}
initialValue={store.authentication.profileData.superior?.id}
>
<Input/>
</Form.Item>
<Form.Item <Form.Item
label="Upload Picture" label="Upload Picture"
name="image_prove" name="image_prove"
@ -138,13 +141,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
{image === "" ? uploadButton : null} {image === "" ? uploadButton : null}
</Upload> </Upload>
<h5 <h5 style={{
style={{ marginTop: 12,
marginTop: 12, color: "rgba(0, 0, 0, 0.45)",
color: "rgba(0, 0, 0, 0.45)", }}>
}} Max size of file 2 MB
>
Max size of file 2 mb
</h5> </h5>
</div> </div>
</Form.Item> </Form.Item>
@ -153,7 +154,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
label="amount" label="amount"
rules={[{required: true, message: "Please input Amount!"}]} rules={[{required: true, message: "Please input Amount!"}]}
> >
<Input/> <InputNumber
style={{width: "100%"}}
formatter={value => `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\Rp.\s?|(,*)/g, '')}
/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

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

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState} from "react"; import React, {useContext, useEffect} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd"; import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
@ -10,8 +10,6 @@ const {Option} = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
const [productData, setProductData] = useState([]);
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
@ -36,20 +34,6 @@ export const Product = observer(() => {
init(); init();
}, []); }, []);
// data
useEffect(() => {
console.log("⚡ transaction data store", store.transaction.data);
setProductData(store.transaction.data);
}, [store.transaction.data]);
// Subcategory
useEffect(() => {
console.log(
"⚡ transaction subcategory store",
store.transaction.dataSubCategories
);
}, [store.transaction.dataSubCategories]);
const handleChangeSubcategory = async (item) => { const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item; store.transaction.filterSubCategory = item;
modalLoader.setLoading(true); modalLoader.setLoading(true);
@ -61,12 +45,16 @@ export const Product = observer(() => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
const response = await store.transaction.buyProduct({productCode: data}); const response = await store.transaction.buyProduct({productCode: data});
// if (response.status === 200) { if (response.status === 201) {
message.success("Success Buy Product"); message.success("Success Buy Product");
// } else { } else {
//message.error("Failed Buy Product"); message.error("Failed Buy Product", 3);
//} }
} catch (e) { } catch (e) {
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Buy Product"); message.error("Failed Buy Product");
} }
@ -107,52 +95,52 @@ export const Product = observer(() => {
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{width: 200, marginRight: 10}} style={{width: 200, marginRight: 10}}
/> />
</Col> </Col>
</Row> </Row>
{productData.length != 0 && ( {store.transaction.data.length != 0 && (
<Row> <Row>
{productData.map((item, index) => ( {store.transaction.data.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card <Card
onClick={() => { onClick={() => {
Modal.confirm({ Modal.confirm({
title: `Are you sure buy ${item.name}?`, title: `Are you sure buy ${item.name}?`,
icon: <MoneyCollectOutlined/>, icon: <MoneyCollectOutlined/>,
okText: "Confirm", okText: "Confirm",
cancelText: "Cancel", cancelText: "Cancel",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleBuyProduct(item.code) handleBuyProduct(item.code)
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Cancel");
}, },
}); });
}} }}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
> >
<span style={{color: "black"}}>{item.name}</span> <span style={{color: "black"}}>{item.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",
}).format(item?.currentPrice?.mark_up_price)} }).format(item?.currentPrice?.mark_up_price)}
</span> </span>
</Card> </Card>
</Col> </Col>
))} ))}
</Row> </Row>
)} )}
{productData.length !== 0 && ( {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right"}}> <Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang Beli Sekarang
</Button> </Button>
</Col> </Col>
)} )}
</div> </div>
); );

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

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState,message} from "react"; import React, {message, useContext, useEffect} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd"; import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -14,7 +14,6 @@ export const Transaction = observer(() => {
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
// Init
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
@ -34,14 +33,11 @@ export const Transaction = observer(() => {
init(); init();
}, []); }, []);
// Category
useEffect(() => {
console.log('⚡ transaction category store', store.transaction.dataCategories)
}, [store.transaction.dataCategories])
const handleChangeTabs = async (key) => { const handleChangeTabs = async (key) => {
store.transaction.filterCategory = key; store.transaction.dataSubCategories = [];
store.transaction.data = [];
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.transaction.filterCategory = key;
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };

6
src/store/payback.js
View File

@ -73,9 +73,9 @@ export class Payback {
async create(data) { async create(data) {
try { try {
console.log(data) const response = await http.post("/transaction/deposit-return").send(data);
return await http.post("/transaction/deposit-return").send(data); await this.getData();
return response;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }