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

fix: merge ajat

Browse Source
This commit is contained in:
ajat91 2021-12-09 20:04:37 +07:00 committed by caturbgs
parent 525d5534df
commit 7b6784709e
8 changed files with 434 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/app.js
View File

@ -1,5 +1,5 @@
export const appConfig = {
apiUrl: 'https://api-reconcile.movic.id'
apiUrl: 'http://localhost:3222/v1'
};
//export default appConfig;

55
src/pages/Product/Product.js
View File

@ -1,13 +1,21 @@
import React from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import React, {useState} from "react";
import {Button, Card, Col, Input, message, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
import {PulsaModal} from "./PulsaModal";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
const {TabPane} = Tabs;
const {Search} = Input;
export const Product = () => {
export const Product = observer(() => {
const [visibleModal, setVisibleModal] = useState(false)
const [initialData, setInitialData] = useState({})
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const callback = (key) => {
console.log(key);
};
@ -21,6 +29,32 @@ export const Product = () => {
name: <span style={{fontWeight: 'bold'}}>Product</span>,
},
];
const onSubmit = async (data) => {
if (initialData.id) {
setInitialData({})
setConfirmLoading(true);
try {
await store.product.update(initialData.id, data)
message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
setVisibleModal(false);
} else {
setInitialData({})
setConfirmLoading(true);
try {
await store.product.create(data)
message.success("Success Add New Member")
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Member")
}
setConfirmLoading(false);
setVisibleModal(false);
}
}
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
@ -37,7 +71,7 @@ export const Product = () => {
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button>
<ButtononClick={() => setVisibleModal(true)}>
<PlusSquareOutlined/> New
</Button>
</Col>
@ -64,7 +98,16 @@ export const Product = () => {
Prdct
</TabPane>
</Tabs>
</Card>
</Card><PulsaModal visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data)
}}
onCancel={() => {
setInitialData({})
setVisibleModal(false);
}}/>
</div>
);
};
});

140
src/pages/Product/Pulsa.js
View File

@ -1,38 +1,77 @@
import React from "react";
import {Button, Space, Table, Tag} from "antd";
import React, {useEffect, useState} from "react";
import {Button, message, Modal, Space, Table, Tag} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
export const Pulsa = () => {
export const Pulsa = observer(() => {
const store = useStore();
const history = useHistory();
const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.product.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const columns = [
{
title: "Kode",
dataIndex: "kode",
key: "kode",
dataIndex: "code",
key: "code",
},
{
title: "Produk",
dataIndex: "produk",
key: "produk",
dataIndex: "name",
key: "name",
},
{
title: "Harga Beli",
dataIndex: "harga_beli",
key: "harga_beli",
dataIndex: "price",
key: "price",
},
,
{
title: "Harga Jual",
dataIndex: "harga_jual",
key: "harga_beli",
dataIndex: "mark_up_price",
key: "mark_up_price",
},
{
title: "Gangguan",
dataIndex: "gangguan",
key: "gangguan",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status}
</Tag>
),
},
{
title: "Tersedia",
dataIndex: "tersedia",
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status === "AKTIF" ? " Ya" : "Tidak"}
</Tag>
),
},
{
title: "Action",
@ -40,58 +79,51 @@ export const Pulsa = () => {
render: (text, record) => (
<Space size="middle">
<Button>Edit</Button>
<Button>Delete</Button>
<Button
onClick={async () => {
handleDelete(record.id);
}}
>
Delete
</Button>
</Space>
),
},
];
const dataSource = [
{
key: "1",
kode: "BROP2",
produk: "DATA AXIS 2GB-60HR",
harga_beli: "Rp.10.000",
harga_jual: "Rp.40.000",
gangguan: <Tag color="processing">Active</Tag>,
tersedia: <Tag color="processing">Ya</Tag>,
},
{
key: "2",
kode: "-",
produk: "-",
harga_beli: "-",
harga_jual: "-",
gangguan: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Gangguan</Tag>,
tersedia: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Tidak</Tag>,
},
{
key: "3",
kode: "-",
produk: "-",
harga_beli: "-",
harga_jual: "-",
gangguan: <Tag color="processing">Active</Tag>,
tersedia: <Tag color="processing">Ya</Tag>,
},
{
key: "4",
kode: "-",
produk: "-",
harga_beli: "-",
harga_jual: "-",
gangguan: <Tag color="processing">Active</Tag>,
tersedia: <Tag color="processing">Ya</Tag>,
const deleteData = async (id) => {
try {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push("/app/product");
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
];
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
return (
<div>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={dataSource}
dataSource={store.product.data}
bordered
scroll={{x: 1500}}
/>
</div>
);
};
});

213
src/pages/Product/PulsaModal.js Normal file
View File

@ -0,0 +1,213 @@
// import React,{useEffect,useState} from "react";
// import { Form, Input, Modal, Select } from "antd";
// export const PulsaModal = ({ visible, onCreate, onCancel, initialData }) => {
// const [form] = Form.useForm();
// const { Option } = Select;
// const [visibleModal, setVisibleModal] = useState(false)
// const [initialData, setInitialData] = useState({})
// const [confirmLoading, setConfirmLoading] = useState(false);
// const [isLoading, setIsLoading] = useState(false);
// useEffect(() => {
// const init = async () => {
// try {
// setIsLoading(true);
// await store.categories.getData();
// setIsLoading(false);
// } catch (e) {
// setIsLoading(false);
// }
// };
// init();
// }, []);
// return (
// <Modal
// visible={visibleModal}
// confirmLoading={confirmLoading}
// initialData={initialData}
// onCreate={async (data) => {
// onSubmit(data)
// }}
// onCancel={() => {
// setInitialData({})
// setVisibleModal(false);
// }}
// visible={visible}
// title={initialData.id ? "Edit Member" : "Create a new Member"}
// okText={initialData.id ? "Edit" : "Create"}
// cancelText="Cancel"
// onCancel={() => {
// form.resetFields();
// onCancel();
// }}
// onOk={() => {
// form
// .validateFields()
// .then((values) => {
// onCreate(values);
// form.resetFields();
// })
// .catch((info) => {
// console.log("Validate Failed:", info);
// });
// }}
// >
// <Form
// form={form}
// layout="vertical"
// name="form_in_modal"
// initialValues={initialData}
// >
// <Form.Item
// name="name"
// label="Name"
// rules={[{ required: true, message: "Please input name!" }]}
// >
// <Input />
// </Form.Item>
// <Form.Item
// name="price"
// label="Price"
// rules={[{ required: true, message: "Please input price!" }]}
// >
// <Input />
// </Form.Item>
// <Form.Item
// name="markUpPrice"
// label="Mark Up Price"
// rules={[{ required: true, message: "Please input mark up price!" }]}
// >
// <Input />
// </Form.Item>
// <Form.Item
// name="code"
// label="Code"
// rules={[{ required: true, message: "Please input code!" }]}
// >
// <Input />
// </Form.Item>
// <Form.Item
// name="status"
// label="Status"
// rules={[{ required: true, message: "Please select Status!" }]}
// >
// <Select placeholder="Select Status" allowClear>
// {store.categories.map(it => {
// return <Option value={it.id}>{it.name}</Option>
// })}
// </Select>
// </Form.Item>
// </Form>
// </Modal>
// );
// };
import React, {useEffect, useState} from "react";
import {Form, Input, Modal, Select} from "antd";
import {useStore} from "../../utils/useStore";
export const PulsaModal = ({visible, onCreate, onCancel}) => {
const [form] = Form.useForm();
const {Option} = Select;
const dataStatus = ["Active", "Inactive"];
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const init = async () => {
try {
setIsLoading(true);
await store.categories.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
useEffect(() => {
init();
}, []);
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Member"}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
onCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
onCreate(values);
form.resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: "Please input name!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="price"
label="Price"
rules={[{required: true, message: "Please input price!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{required: true, message: "Please input mark up price!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="code"
label="Code"
rules={[{required: true, message: "Please input code!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{required: true, message: "Please select Status!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
<Option value="ACTIVE">ACTIVE</Option>
<Option value="INACTIVE">INACTIVE</Option>
</Select>
</Form.Item>
<Form.Item
name="subCategoriesId"
label="Sub Categories"
rules={[{required: true, message: "Please select Sub Category!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
{store.categories.data.map((it) => {
return <Option value={it.id}>{it.name}</Option>;
})}
</Select>
</Form.Item>
</Form>
</Modal>
);
};

40
src/store/categories.js Normal file
View File

@ -0,0 +1,40 @@
import {action, makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Categories {
page = 0;
pageSize = 10
data = [];
total_data = 0
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
@action
async getData() {
const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response, 'Data cate')
console.log(JSON.stringify(response.body.data), 'Data')
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
@action
async create(data) {
return await http.post('/user').send(data)
}
@action
async update(id, data) {
return await http.put('/user/' + id).send(data);
}
async delete(id) {
return await http.del('/product/' + id);
}
}

4
src/store/index.js
View File

@ -2,12 +2,16 @@ import {UI} from "./ui";
import {Authentication} from "./authentication";
import {User} from "./user";
import {Membership} from "./membership";
import {Product} from "./product";
import {Categories} from "./categories";
export class Store {
ui = new UI(this);
authentication = new Authentication(this);
user = new User(this);
membership = new Membership(this);
product = new Product(this);
categories = new Categories(this);
constructor() {
}

40
src/store/product.js Normal file
View File

@ -0,0 +1,40 @@
import {action, makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Product {
page = 0;
pageSize = 10
data = [];
total_data = 0
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
@action
async getData() {
const response = await http.get(`/product?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response, 'Data')
console.log(JSON.stringify(response.body.data), 'Data')
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
@action
async create(data) {
return await http.post('/product').send(data)
}
@action
async update(id, data) {
return await http.put('/user/' + id).send(data);
}
async delete(id) {
return await http.del('/product/' + id);
}
}

2
src/store/user.js
View File

@ -6,7 +6,7 @@ export class User {
@action
async getData() {
this.data = (await http.get('/user')).body.data;
this.data = (await http.get('/product')).body.data;
}
}