From ac7e5714e796e18c3cbfcdf735cb9095d315e925 Mon Sep 17 00:00:00 2001 From: ajat91 Date: Thu, 16 Dec 2021 16:11:36 +0700 Subject: [PATCH] Pages Supplier --- src/component/CommissionComponent.js | 398 +++++++++++---------------- src/component/SupplierComponent.js | 64 ++--- src/component/TopupsaldoModal.js | 74 +++++ src/pages/Config/Commission.js | 147 +++++----- src/pages/Config/Supplier.js | 94 +------ src/pages/Membership/Membership.js | 82 +++++- src/store/commission.js | 4 +- 7 files changed, 422 insertions(+), 441 deletions(-) create mode 100644 src/component/TopupsaldoModal.js diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js index a569aaa..8bfd2e3 100644 --- a/src/component/CommissionComponent.js +++ b/src/component/CommissionComponent.js @@ -1,244 +1,178 @@ -import React, {useEffect, useState} from "react"; -import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd"; -import {observer} from "mobx-react-lite"; -import {ExclamationCircleOutlined} from "@ant-design/icons"; -import {useHistory} from "react-router-dom"; -import {capitalize} from "lodash"; -import {useStore} from "../utils/useStore"; -import {LINKS} from "../routes/app"; +import React, { useEffect, useState } from "react"; +import { + Button, + Form, + Input, + message, + Modal, + Select, + Space, + Table, +} from "antd"; +import { observer } from "mobx-react-lite"; +import { ExclamationCircleOutlined } from "@ant-design/icons"; +import { useHistory } from "react-router-dom"; +import { capitalize } from "lodash"; +import { useStore } from "../utils/useStore"; +import { LINKS } from "../routes/app"; export const CommissionComponent = observer((props) => { - const store = useStore(); - const [form] = Form.useForm(); - const {Option} = Select; - const history = useHistory(); - const [idData, setIdData] = useState(''); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const store = useStore(); + const [form] = Form.useForm(); + const { Option } = Select; + const history = useHistory(); + const [idData, setIdData] = useState(""); + const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - //await store.product.getDataSubCategories(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); - }, []); - - const handleEditButton = (data) => { - console.log(data, "isi data") - form.setFieldsValue({ - name: data.name, - npwp: data.npwp, - address: data.address, - - }); - store.commission.visibleModalCommission = true; - setIdData(data.id); - } - - const columns = [ - { - title: "Name", - dataIndex: "name", - key: "name", - }, - { - title: "Npwp", - dataIndex: "npwp", - key: "npwp", - }, - { - title: "Address", - dataIndex: "address", - key: "address", - }, - { - title: "Status", - dataIndex: "status", - key: "status", - render: (text, record) => ( - - {record?.status === true ? " ACTIVE" : "INACTIVE"} - - ), - }, - { - title: "Action", - key: "action", - render: (text, record) => ( - - - - - ), - }, - ]; - - const deleteData = async (id) => { - try { - console.log(id); - await store.commission.delete(id); - message.success("Data Berhasil Dihapus"); - history.push(LINKS.PRODUCT); - } catch (err) { - console.log("error", err); - message.error("Gagal menghapus"); - } + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + //await store.product.getDataSubCategories(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } }; - 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"); - }, - }); - }; + init(); + }, []); - const handleCancel = () => { - setIdData('') - store.commission.visibleModalCommission = false; + const handleEditButton = (data) => { + console.log(data, "isi data"); + form.setFieldsValue({ + value: data.commission, + }); + store.commission.visibleModalCommission = true; + setIdData(data.id); + }; + + const columns = [ + { + title: "Name", + dataIndex: "name", + key: "name", + }, + { + title: "Amount", + dataIndex: "commission", + key: "commission", + }, + { + title: "Action", + key: "action", + render: (text, record) => ( + + + + ), + }, + ]; + + const deleteData = async (id) => { + try { + console.log(id); + await store.commission.delete(id); + message.success("Data Berhasil Dihapus"); + history.push(LINKS.PRODUCT); + } catch (err) { + console.log("error", err); + message.error("Gagal menghapus"); } + }; - const handleSubmit = async (data) => { - console.log(data, "isi data2") - if (idData !== '') { - setConfirmLoading(true); - try { - await store.commission.update(idData, data) - message.success("Success Update Data Member") - } catch (e) { - message.error("Failed Update Data Member") - } - setConfirmLoading(false); - store.commission.visibleModalCommission = false; - setIdData(''); - form.resetFields(); - } else { - setConfirmLoading(true); - try { - await store.commission.create(data) - message.success("Success Add New Member") - } catch (e) { - console.log(e, "apa errornya") - message.error("Failed Add Member") - } - setConfirmLoading(false); - store.commission.visibleModalCommission = false; - setIdData(''); - form.resetFields(); - } + const handleCancel = () => { + setIdData(""); + store.commission.visibleModalCommission = false; + }; + + const handleSubmit = async (data) => { + console.log(data, "isi data2"); + if (idData !== "") { + setConfirmLoading(true); + try { + await store.commission.update(idData, data); + message.success("Success Update Data Member"); + } catch (e) { + message.error("Failed Update Data Member"); + } + setConfirmLoading(false); + store.commission.visibleModalCommission = false; + setIdData(""); + form.resetFields(); + } else { + setConfirmLoading(true); + try { + await store.commission.create(data); + message.success("Success Add New Member"); + } catch (e) { + console.log(e, "apa errornya"); + message.error("Failed Add Member"); + } + setConfirmLoading(false); + store.commission.visibleModalCommission = false; + setIdData(""); + form.resetFields(); } + }; - return ( -
- { - let pageNumber = page.current; - store.commission.pageSize = page.pageSize; - store.commission.page = pageNumber - 1; - // store.membership.isLoading = true; - await store.commission.getData(); - // store.membership.isLoading = false; - }} - /> + return ( +
+
{ + let pageNumber = page.current; + store.commission.pageSize = page.pageSize; + store.commission.page = pageNumber - 1; + // store.membership.isLoading = true; + await store.commission.getData(); + // store.membership.isLoading = false; + }} + /> - { - form.resetFields(); - handleCancel(); - }} - onOk={() => { - form - .validateFields() - .then((values) => { - console.log(values, "isi form") - handleSubmit(values); - form.resetFields(); - }) - .catch((info) => { - console.error("Validate Failed:", info); - }); - }} - > -
- - - - - - - - - - - - - - - - - - - ); + { + form.resetFields(); + handleCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + console.log(values, "isi form"); + handleSubmit(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} + > +
+ + + + + + + ); }); diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js index 3b096b4..3af817a 100644 --- a/src/component/SupplierComponent.js +++ b/src/component/SupplierComponent.js @@ -1,43 +1,23 @@ import React, { useEffect, useState } from "react"; -import { - Button, - Form, - Input, - message, - Modal, - Select, - Space, - Table, - Tag, -} from "antd"; +import { Button, Form, Input, message, Modal, Space, Table, Tag } from "antd"; import { observer } from "mobx-react-lite"; import { ExclamationCircleOutlined } from "@ant-design/icons"; import { useHistory } from "react-router-dom"; -import { capitalize } from "lodash"; import { useStore } from "../utils/useStore"; import { LINKS } from "../routes/app"; +import { TopupsaldoModal } from "./TopupsaldoModal"; export const SupplierComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - //const [formEdit] = Form.useForm(); - const { Option } = Select; const history = useHistory(); const [idData, setIdData] = useState(""); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const [code, setCode] = useState(""); useEffect(() => { const init = async () => { - try { - setIsLoading(true); - await store.supplier.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } + await store.supplier.getData(); }; - init(); }, []); @@ -52,6 +32,14 @@ export const SupplierComponent = observer((props) => { setIdData(data.id); }; + const handleTopup = (data) => { + console.log(data, "isi data"); + form.setFieldsValue({ + code: data.code, + }); + store.supplier.visibleModalTransaction = true; + setCode(data.code); + }; const changeStatus = async (id, isActive) => { const status = isActive ? "inactive" : "active"; const status2 = isActive ? "Inactivating" : "Activating"; @@ -78,6 +66,12 @@ export const SupplierComponent = observer((props) => { dataIndex: "code", key: "code", }, + , + { + title: "Saldo", + dataIndex: "saldo", + key: "saldo", + }, { title: "Status", dataIndex: "status", @@ -85,8 +79,7 @@ export const SupplierComponent = observer((props) => { render: (text, record) => ( changeStatus(record?.id, record?.status)} + style={{ color: "#4F566B"}} > {record?.status === true ? " ACTIVE" : "INACTIVE"} @@ -98,7 +91,13 @@ export const SupplierComponent = observer((props) => { render: (text, record) => ( - + + ), }, @@ -140,7 +139,6 @@ export const SupplierComponent = observer((props) => { const handleSubmit = async (data) => { console.log(data, "isi data2"); if (idData !== "") { - setConfirmLoading(true); try { await store.supplier.update(idData, data); message.success("Success Update Data Member"); @@ -148,21 +146,19 @@ export const SupplierComponent = observer((props) => { } catch (e) { message.error("Failed Update Data Member"); } - setConfirmLoading(false); + store.supplier.visibleModalSupplier = false; setIdData(""); form.resetFields(); } else { - setConfirmLoading(true); try { await store.supplier.create(data); message.success("Success Add New Member"); - //await store.supplier.getData() } catch (e) { console.log(e, "apa errornya"); message.error("Failed Add Member"); } - setConfirmLoading(false); + store.supplier.visibleModalSupplier = false; setIdData(""); form.resetFields(); @@ -187,12 +183,9 @@ export const SupplierComponent = observer((props) => { let pageNumber = page.current; store.supplier.pageSize = page.pageSize; store.supplier.page = pageNumber - 1; - // store.membership.isLoading = true; await store.supplier.getData(); - // store.membership.isLoading = false; }} /> - { + ); }); diff --git a/src/component/TopupsaldoModal.js b/src/component/TopupsaldoModal.js new file mode 100644 index 0000000..673e857 --- /dev/null +++ b/src/component/TopupsaldoModal.js @@ -0,0 +1,74 @@ +import React from "react"; +import { Form, Input, message, Modal } from "antd"; +import { observer } from "mobx-react-lite"; +import { useStore } from "../utils/useStore"; + +export const TopupsaldoModal = observer((props) => { + const store = useStore(); + const [form] = Form.useForm(); + + const handleCancelTransaction = () => { + store.supplier.visibleModalTransaction = false; + }; + const handleSubmitTransaction = async (data) => { + console.log(data, "isi data2"); + + try { + await store.supplier.createTransaction(data); + message.success("Success Top Up"); + } catch (e) { + console.log(e, "apa errornya"); + message.error("Failed Top Up"); + } + + store.supplier.visibleModalTransaction = false; + form.resetFields(); + }; + return ( +
+ { + form.resetFields(); + handleCancelTransaction(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + console.log(values, "isi form"); + handleSubmitTransaction(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} + > +
+ + + + + + + + +
+ ); +}); diff --git a/src/pages/Config/Commission.js b/src/pages/Config/Commission.js index 50a669a..8a00f05 100644 --- a/src/pages/Config/Commission.js +++ b/src/pages/Config/Commission.js @@ -1,90 +1,73 @@ -import React, {useEffect, useState} from "react"; -import {Button, Card, Col, Input, Row, Tabs} from "antd"; -import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; -import {BreadcumbComponent} from "../../component/BreadcumbComponent"; -import {useStore} from "../../utils/useStore"; -import {observer} from "mobx-react-lite"; -import {CommissionComponent} from "../../component/CommissionComponent"; -import {LINKS} from "../../routes/app"; +import React, { useEffect, useState } from "react"; +import { Button, Card, Col, Input, Row, Tabs } from "antd"; +import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; +import { BreadcumbComponent } from "../../component/BreadcumbComponent"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; +import { CommissionComponent } from "../../component/CommissionComponent"; +import { LINKS } from "../../routes/app"; -const {TabPane} = Tabs; -const {Search} = Input; +const { TabPane } = Tabs; +const { Search } = Input; export const Commission = observer(() => { - const [isLoading, setIsLoading] = useState(false); - const store = useStore(); + const [isLoading, setIsLoading] = useState(false); + const store = useStore(); - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - //await store.commission.getDataCategories(); - await store.commission.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + //await store.commission.getDataCategories(); + await store.commission.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; - init(); - }, []); + init(); + }, []); - // const handleChangeTabPane = async (key) => { - // store.product.filterCategory = key; - // console.log(key); - // }; + const routeData = [ + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.COMMISSION, + name: Commission, + }, + ]; - const routeData = [ - { - route: LINKS.HOME, - name: "Home", - }, - { - route: LINKS.COMMISSION, - name: Commission, - }, - ]; - - return ( -
- - - -
- - - - - - - - - - - - - )) - - - - ); + return ( +
+ + + {/* */} + {/*
+ + */} + {/* + + + + */} +
+ + + + ); }); diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js index 8248e57..1f66dbb 100644 --- a/src/pages/Config/Supplier.js +++ b/src/pages/Config/Supplier.js @@ -47,28 +47,6 @@ export const Supplier = observer(() => { init(); }, []); - // const handleChangeTabPane = async (key) => { - // store.product.filterCategory = key; - // console.log(key); - // }; - const handleCancelTransaction = () => { - store.supplier.visibleModalTransaction = false; - }; - const handleSubmitTransaction = async (data) => { - console.log(data, "isi data2"); - setConfirmLoading(true); - try { - await store.supplier.createTransaction(data); - message.success("Success Top Up"); - //await store.supplier.getData() - } catch (e) { - console.log(e, "apa errornya"); - message.error("Failed Top Up"); - } - setConfirmLoading(false); - store.supplier.visibleModalTransaction = false; - form.resetFields(); - }; const routeData = [ { route: LINKS.HOME, @@ -79,19 +57,19 @@ export const Supplier = observer(() => { name: Supplier, }, ]; - + return (
-
+ {/* - - + */} + { onSearch={(value) => console.log(value)} /> - - - - - - - - )) - + - { - form.resetFields(); - handleCancelTransaction(); - }} - onOk={() => { - form - .validateFields() - .then((values) => { - console.log(values, "isi form"); - handleSubmitTransaction(values); - form.resetFields(); - }) - .catch((info) => { - console.error("Validate Failed:", info); - }); - }} - > -
- - - - - - - - ); }); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index 0e621a2..817bb05 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -12,6 +12,8 @@ import { Space, Table, Tag, + Form, + Select, } from "antd"; import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; @@ -19,14 +21,16 @@ import { ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined, + DownloadOutlined, } from "@ant-design/icons"; import { MembershipModal } from "./MembershipModal"; import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { LINKS } from "../../routes/app"; const { Search } = Input; - +const { Option } = Select; export const Membership = observer(() => { + const [form] = Form.useForm(); const store = useStore(); const [visibleModal, setVisibleModal] = useState(false); const [initialData, setInitialData] = useState({}); @@ -62,6 +66,24 @@ export const Membership = observer(() => { message.error(`Failed ${status2} Membership`); } }; + const handleCancelTransaction = () => { + store.supplier.visibleModalTransaction = false; + }; + const handleSubmitTransaction = async (data) => { + console.log(data, "isi data2"); + setConfirmLoading(true); + try { + await store.supplier.createTransaction(data); + message.success("Success Top Up"); + //await store.supplier.getData() + } catch (e) { + console.log(e, "apa errornya"); + message.error("Failed Top Up"); + } + setConfirmLoading(false); + store.supplier.visibleModalTransaction = false; + form.resetFields(); + }; const columns = [ { @@ -219,6 +241,19 @@ export const Membership = observer(() => { + + + {store.ui.mediaQuery.isDesktop && (
{ )} + { + form.resetFields(); + handleCancelTransaction(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + console.log(values, "isi form"); + handleSubmitTransaction(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} + > +
+ + + + + + + +