diff --git a/src/config/app.js b/src/config/app.js index 92eae9f..36a03ee 100644 --- a/src/config/app.js +++ b/src/config/app.js @@ -1,5 +1,5 @@ export const appConfig = { - apiUrl: 'https://api-reconcile.movic.id' + apiUrl: 'http://localhost:3222/v1' }; //export default appConfig; diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js index b51d3f8..0a00d0a 100644 --- a/src/pages/Product/Product.js +++ b/src/pages/Product/Product.js @@ -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: Product, }, ]; + 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 (
@@ -37,7 +71,7 @@ export const Product = () => { placeholder="input search text" style={{width: 200, marginRight: 10}} /> - @@ -64,7 +98,16 @@ export const Product = () => { Prdct - + { + onSubmit(data) + }} + onCancel={() => { + setInitialData({}) + setVisibleModal(false); + }}/>
); -}; +}); diff --git a/src/pages/Product/Pulsa.js b/src/pages/Product/Pulsa.js index c6d1e6c..eafdfb9 100644 --- a/src/pages/Product/Pulsa.js +++ b/src/pages/Product/Pulsa.js @@ -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) => ( + + {record?.status} + + ), }, { title: "Tersedia", dataIndex: "tersedia", key: "tersedia", + render: (text, record) => ( + + {record?.status === "AKTIF" ? " Ya" : "Tidak"} + + ), }, { title: "Action", @@ -40,58 +79,51 @@ export const Pulsa = () => { render: (text, record) => ( - + ), }, ]; - const dataSource = [ - { - key: "1", - kode: "BROP2", - produk: "DATA AXIS 2GB-60HR", - harga_beli: "Rp.10.000", - harga_jual: "Rp.40.000", - gangguan: Active, - tersedia: Ya, - }, - { - key: "2", - kode: "-", - produk: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Gangguan, - tersedia: Tidak, - }, - { - key: "3", - kode: "-", - produk: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Active, - tersedia: Ya, - }, - { - key: "4", - kode: "-", - produk: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Active, - tersedia: Ya, + 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: , + okText: "Yes", + okType: "primary", + cancelText: "Cancel", + onOk() { + return deleteData(id); + }, + onCancel() { + console.log("Cancel"); + }, + }); + }; return (
); -}; +}); diff --git a/src/pages/Product/PulsaModal.js b/src/pages/Product/PulsaModal.js new file mode 100644 index 0000000..13b54af --- /dev/null +++ b/src/pages/Product/PulsaModal.js @@ -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 ( +// { +// 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); +// }); +// }} +// > +//
+// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// ); +// }; +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 ( + { + form.resetFields(); + onCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + onCreate(values); + form.resetFields(); + }) + .catch((info) => { + console.log("Validate Failed:", info); + }); + }} + > +
+ + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/store/categories.js b/src/store/categories.js new file mode 100644 index 0000000..a74f913 --- /dev/null +++ b/src/store/categories.js @@ -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); + } +} + + diff --git a/src/store/index.js b/src/store/index.js index e3e59fb..e6250f3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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() { } diff --git a/src/store/product.js b/src/store/product.js new file mode 100644 index 0000000..cd761ae --- /dev/null +++ b/src/store/product.js @@ -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); + } +} + + diff --git a/src/store/user.js b/src/store/user.js index 741da5b..00722be 100644 --- a/src/store/user.js +++ b/src/store/user.js @@ -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; } }