From 558ca2a09808a06b21777551937ca72c3c298c07 Mon Sep 17 00:00:00 2001 From: ajat91 Date: Tue, 14 Dec 2021 18:52:42 +0700 Subject: [PATCH] Pages Config --- package.json | 3 + src/component/BreadcumbComponent.js | 2 +- ...ionComponent.js => CommissionComponent.js} | 30 +- src/component/PartnerComponent.js | 496 ++++++++++-------- src/component/SupplierComponent.js | 4 +- src/index.css | 3 + src/pages/App/DesktopLayout.js | 10 +- src/pages/App/MenuList.js | 20 +- .../Config/{Commision.js => Commission.js} | 30 +- src/pages/Config/Partner.js | 18 +- src/pages/Config/Supplier.js | 21 +- src/pages/Product/Product.js | 6 +- src/routes/app.js | 8 +- src/store/commision.js | 0 src/store/commission.js | 52 ++ src/store/index.js | 4 +- src/store/partner.js | 32 +- src/store/supplier.js | 24 +- 18 files changed, 421 insertions(+), 342 deletions(-) rename src/component/{CommisionComponent.js => CommissionComponent.js} (88%) rename src/pages/Config/{Commision.js => Commission.js} (70%) delete mode 100644 src/store/commision.js create mode 100644 src/store/commission.js diff --git a/package.json b/package.json index 31c20a8..644ea67 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,9 @@ "dependencies": { "@ant-design/icons": "^4.6.2", "@babel/core": "7.14.5", + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3", + "@fortawesome/react-fontawesome": "^0.1.16", "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@svgr/webpack": "5.5.0", "@testing-library/jest-dom": "^5.14.1", diff --git a/src/component/BreadcumbComponent.js b/src/component/BreadcumbComponent.js index 75b4494..58708ea 100644 --- a/src/component/BreadcumbComponent.js +++ b/src/component/BreadcumbComponent.js @@ -5,7 +5,7 @@ import {Link} from "react-router-dom"; export const BreadcumbComponent = (props) => { return (
- + {props.data.map((e, index) => ( diff --git a/src/component/CommisionComponent.js b/src/component/CommissionComponent.js similarity index 88% rename from src/component/CommisionComponent.js rename to src/component/CommissionComponent.js index 98a5cc0..a569aaa 100644 --- a/src/component/CommisionComponent.js +++ b/src/component/CommissionComponent.js @@ -7,7 +7,7 @@ import {capitalize} from "lodash"; import {useStore} from "../utils/useStore"; import {LINKS} from "../routes/app"; -export const CommisionComponent = observer((props) => { +export const CommissionComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); const {Option} = Select; @@ -20,7 +20,7 @@ export const CommisionComponent = observer((props) => { const init = async () => { try { setIsLoading(true); - await store.product.getDataSubCategories(); + //await store.product.getDataSubCategories(); setIsLoading(false); } catch (e) { setIsLoading(false); @@ -38,7 +38,7 @@ export const CommisionComponent = observer((props) => { address: data.address, }); - store.product.visibleModalProduct = true; + store.commission.visibleModalCommission = true; setIdData(data.id); } @@ -92,7 +92,7 @@ export const CommisionComponent = observer((props) => { const deleteData = async (id) => { try { console.log(id); - await store.product.delete(id); + await store.commission.delete(id); message.success("Data Berhasil Dihapus"); history.push(LINKS.PRODUCT); } catch (err) { @@ -119,7 +119,7 @@ export const CommisionComponent = observer((props) => { const handleCancel = () => { setIdData('') - store.product.visibleModalProduct = false; + store.commission.visibleModalCommission = false; } const handleSubmit = async (data) => { @@ -127,26 +127,26 @@ export const CommisionComponent = observer((props) => { if (idData !== '') { setConfirmLoading(true); try { - await store.product.update(idData, data) + await store.commission.update(idData, data) message.success("Success Update Data Member") } catch (e) { message.error("Failed Update Data Member") } setConfirmLoading(false); - store.product.visibleModalProduct = false; + store.commission.visibleModalCommission = false; setIdData(''); form.resetFields(); } else { setConfirmLoading(true); try { - await store.partner.create(data) + 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.product.visibleModalProduct = false; + store.commission.visibleModalCommission = false; setIdData(''); form.resetFields(); } @@ -157,7 +157,7 @@ export const CommisionComponent = observer((props) => { { }} onChange={async (page) => { let pageNumber = page.current; - store.product.pageSize = page.pageSize; - store.product.page = pageNumber - 1; + store.commission.pageSize = page.pageSize; + store.commission.page = pageNumber - 1; // store.membership.isLoading = true; - await store.product.getData(); + await store.commission.getData(); // store.membership.isLoading = false; }} /> { diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js index f91e120..64f27ee 100644 --- a/src/component/PartnerComponent.js +++ b/src/component/PartnerComponent.js @@ -1,244 +1,274 @@ -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, + 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"; export const PartnerComponent = 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.partner.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.partner.visibleModalPartner = 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.product.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.partner.getData(); + 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.partner.visibleModalPartner = false; + const handleEditButton = (data) => { + console.log(data, "isi data"); + form.setFieldsValue({ + name: data.name, + npwp: data.npwp, + address: data.address, + }); + store.partner.visibleModalPartner = 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) => ( + + ), + }, + { + title: "Action", + key: "action", + render: (text, record) => ( + + + + + ), + }, + ]; + +// const handleEditStatus = async (id)=>{ +// try { +// console.log(id); +// await store.partner.delete(id); +// message.success("Data Berhasil Dihapus"); +// history.push(LINKS.PARTNER); +// } catch (err) { +// console.log("error", err); +// message.error("Gagal menghapus"); +// } +// } + + const deleteData = async (id) => { + try { + console.log(id); + await store.partner.delete(id); + message.success("Data Berhasil Dihapus"); + history.push(LINKS.PARTNER); + } 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.partner.update(idData, data) - message.success("Success Update Data Member") - } catch (e) { - message.error("Failed Update Data Member") - } - setConfirmLoading(false); - store.partner.visibleModalPartner = false; - setIdData(''); - form.resetFields(); - } else { - setConfirmLoading(true); - try { - await store.partner.create(data) - message.success("Success Add New Member") - } catch (e) { - console.log(e, "apa errornya") - message.error("Failed Add Member") - } - setConfirmLoading(false); - store.partner.visibleModalPartner = false; - setIdData(''); - form.resetFields(); - } + + 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"); + }, + }); + }; + + const handleCancel = () => { + setIdData(""); + store.partner.visibleModalPartner = false; + }; + + const handleSubmit = async (data) => { + console.log(data, "isi data2"); + if (idData !== "") { + setConfirmLoading(true); + try { + await store.partner.update(idData, data); + message.success("Success Update Data Partner"); + //await store.partner.getData() + } catch (e) { + message.error("Failed Update Data Partner"); + } + setConfirmLoading(false); + store.partner.visibleModalPartner = false; + setIdData(""); + form.resetFields(); + } else { + setConfirmLoading(true); + try { + await store.partner.create(data); + message.success("Success Add New Partner"); + //await store.partner.getData() + } catch (e) { + console.log(e, "apa errornya"); + message.error("Failed Add Partner"); + } + setConfirmLoading(false); + store.partner.visibleModalPartner = false; + setIdData(""); + form.resetFields(); } + }; + return ( +
+
{ + let pageNumber = page.current; + store.partner.pageSize = page.pageSize; + store.partner.page = pageNumber - 1; + //store.membership.isLoading = true; + await store.partner.getData(); + // store.membership.isLoading = false; + }} + /> - return ( -
-
{ - let pageNumber = page.current; - store.partner.pageSize = page.pageSize; - store.partner.page = pageNumber - 1; - // store.membership.isLoading = true; - await store.partner.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 c3c5454..f12cc45 100644 --- a/src/component/SupplierComponent.js +++ b/src/component/SupplierComponent.js @@ -30,7 +30,7 @@ export const SupplierComponent = observer((props) => { const init = async () => { try { setIsLoading(true); - await store.product.getDataSubCategories(); + await store.supplier.getData(); setIsLoading(false); } catch (e) { setIsLoading(false); @@ -90,7 +90,7 @@ export const SupplierComponent = observer((props) => { const deleteData = async (id) => { try { console.log(id); - await store.product.delete(id); + await store.supplier.delete(id); message.success("Data Berhasil Dihapus"); history.push(LINKS.PRODUCT); } catch (err) { diff --git a/src/index.css b/src/index.css index 47e2225..8911c18 100644 --- a/src/index.css +++ b/src/index.css @@ -63,3 +63,6 @@ code { .ant-menu-submenu-arrow{ padding-right: 40px !important; } +.ant-breadcrumb{ + margin-bottom: 10px !important; +} \ No newline at end of file diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index b1bb129..56a4e1c 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -133,13 +133,13 @@ export const DesktopLayout = observer(() => { - + Commision - + Supplier @@ -168,12 +168,6 @@ export const DesktopLayout = observer(() => { Profile - {/**/} - {/* */} - {/* */} - {/* About*/} - {/* */} - {/**/} diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index 19e699d..c56da91 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -9,7 +9,7 @@ import { DatabaseOutlined, MoneyCollectOutlined, ProjectOutlined, - FileProtectOutlined + FileProtectOutlined, } from "@ant-design/icons"; import { observer } from "mobx-react-lite"; import { useStore } from "../../utils/useStore"; @@ -51,28 +51,32 @@ export const MenuList = observer((props) => { {store.authentication.userData.role !== "Retail" && ( - + Membership )} {store.authentication.userData.role !== "Retail" && ( - } title="Config" style={{backgroundColor:'#e3e8ee'}}> + } + title="Config" + > - + Partner - - - Commision + + + Commission - + Supplier diff --git a/src/pages/Config/Commision.js b/src/pages/Config/Commission.js similarity index 70% rename from src/pages/Config/Commision.js rename to src/pages/Config/Commission.js index 099f158..50a669a 100644 --- a/src/pages/Config/Commision.js +++ b/src/pages/Config/Commission.js @@ -4,13 +4,13 @@ import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; -import {CommisionComponent} from "../../component/CommisionComponent"; +import {CommissionComponent} from "../../component/CommissionComponent"; import {LINKS} from "../../routes/app"; const {TabPane} = Tabs; const {Search} = Input; -export const Commision = observer(() => { +export const Commission = observer(() => { const [isLoading, setIsLoading] = useState(false); const store = useStore(); @@ -18,8 +18,8 @@ export const Commision = observer(() => { const init = async () => { try { setIsLoading(true); - await store.partner.getDataCategories(); - await store.partner.getData(); + //await store.commission.getDataCategories(); + await store.commission.getData(); setIsLoading(false); } catch (e) { setIsLoading(false); @@ -29,10 +29,10 @@ export const Commision = observer(() => { init(); }, []); - const handleChangeTabPane = async (key) => { - store.product.filterCategory = key; - console.log(key); - }; + // const handleChangeTabPane = async (key) => { + // store.product.filterCategory = key; + // console.log(key); + // }; const routeData = [ { @@ -40,8 +40,8 @@ export const Commision = observer(() => { name: "Home", }, { - route: LINKS.PARTNER, - name: Partner, + route: LINKS.COMMISSION, + name: Commission, }, ]; @@ -59,7 +59,11 @@ export const Commision = observer(() => { console.log(value)} />