From 4df9f7214ee34c399fb1e9560f77dcffc98808a1 Mon Sep 17 00:00:00 2001 From: ajat91 Date: Wed, 15 Dec 2021 18:30:27 +0700 Subject: [PATCH] Menu Supplier --- src/component/Subcategory.js | 59 +++++------ src/component/SupplierComponent.js | 72 ++------------ src/pages/App/DesktopLayout.js | 152 ++++++++++++++++++----------- src/pages/App/MenuList.js | 151 ++++++++++++++-------------- src/pages/Config/Supplier.js | 90 ++++++++++++++++- src/pages/Product/Subcategory.js | 7 +- src/store/subcategory.js | 17 +--- 7 files changed, 287 insertions(+), 261 deletions(-) diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js index 604280e..b961295 100644 --- a/src/component/Subcategory.js +++ b/src/component/Subcategory.js @@ -22,6 +22,7 @@ export const SubcategoryComponent = observer((props) => { setIsLoading(true); //store.product.pageCategories=StrToLower(props.category) await store.subcategory.getData(); + await store.category.getData(); setIsLoading(false); } catch (e) { setIsLoading(false); @@ -35,8 +36,9 @@ export const SubcategoryComponent = observer((props) => { console.log(data, "isi data") form.setFieldsValue({ name: data.name, + categoryId: data.categoryId, }); - store.category.visibleModalCategory = true; + store.subcategory.visibleModalSubcategory = true; setIdData(data.id); } @@ -46,32 +48,6 @@ export const SubcategoryComponent = observer((props) => { dataIndex: "name", key: "name", }, - // { - // title: "Gangguan", - // dataIndex: "status", - // key: "status", - // render: (text, record) => ( - // - // {capitalize(record?.status)} - // - // ), - // }, - // { - // title: "Tersedia", - // dataIndex: "tersedia", - // key: "tersedia", - // render: (text, record) => ( - // - // {record?.status === "ACTIVE" ? " Ya" : "Tidak"} - // - // ), - // }, { title: "Action", key: "action", @@ -120,7 +96,7 @@ export const SubcategoryComponent = observer((props) => { const handleCancel = () => { setIdData('') - store.category.visibleModalCategory = false; + store.subcategory.visibleModalSubcategory = false; } const handleSubmit = async (data) => { @@ -128,31 +104,31 @@ export const SubcategoryComponent = observer((props) => { if (idData !== '') { setConfirmLoading(true); try { - await store.category.update(idData, data) + await store.subcategory.update(idData, data) message.success("Success Update Data Category") } catch (e) { message.error("Failed Update Data Category") } setConfirmLoading(false); - store.category.visibleModalCategory = false; + store.subcategory.visibleModalSubcategory = false; setIdData(''); form.resetFields(); } else { setConfirmLoading(true); try { - await store.category.create(data) + await store.subcategory.create(data) message.success("Success Add New Category") } catch (e) { console.log(e, "apa errornya") message.error("Failed Add Category") } setConfirmLoading(false); - store.category.visibleModalCategory = false; + store.subcategory.visibleModalSubcategory = false; setIdData(''); form.resetFields(); } } - + //console.log() return (
{ /> { @@ -210,6 +186,19 @@ export const SubcategoryComponent = observer((props) => { > + + + diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js index e23240e..05f0592 100644 --- a/src/component/SupplierComponent.js +++ b/src/component/SupplierComponent.js @@ -20,6 +20,7 @@ import { LINKS } from "../routes/app"; 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(""); @@ -45,16 +46,16 @@ export const SupplierComponent = observer((props) => { form.setFieldsValue({ name: data.name, code: data.code, - status:data.status + status: data.status, }); store.supplier.visibleModalSupplier = true; setIdData(data.id); }; const changeStatus = (id, isActive) => { - const status = isActive ? "inactive" : "active" - store.supplier.changeStatus(id, status) - } + const status = isActive ? "inactive" : "active"; + store.supplier.changeStatus(id, status); + }; const columns = [ { @@ -74,7 +75,7 @@ export const SupplierComponent = observer((props) => { render: (text, record) => ( changeStatus(record?.id, record?.status)} > {record?.status === true ? " ACTIVE" : "INACTIVE"} @@ -125,9 +126,6 @@ export const SupplierComponent = observer((props) => { setIdData(""); store.supplier.visibleModalSupplier = false; }; - const handleCancelTransaction= () => { - store.supplier.visibleModalTransaction = false; - }; const handleSubmit = async (data) => { console.log(data, "isi data2"); @@ -136,6 +134,7 @@ export const SupplierComponent = observer((props) => { try { await store.supplier.update(idData, data); message.success("Success Update Data Member"); + await store.supplier.getData(); } catch (e) { message.error("Failed Update Data Member"); } @@ -160,24 +159,6 @@ export const SupplierComponent = observer((props) => { } }; - 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(); - }; - - - 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/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index a0e1d46..de39103 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -1,32 +1,40 @@ -import React, {useState} from "react"; -import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd"; -import {MenuList} from "./MenuList"; -import {Link, useHistory} from "react-router-dom"; -import {HomeOutlined, MenuOutlined, UserOutlined} from "@ant-design/icons"; -import {AppRoute, LINKS} from "../../routes/app"; -import {useStore} from "../../utils/useStore"; -import {observer} from "mobx-react-lite"; -import {useMediaQuery} from "react-responsive"; +import React, { useState } from "react"; +import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd"; +import { MenuList } from "./MenuList"; +import { Link, useHistory } from "react-router-dom"; +import { + HomeOutlined, + MenuOutlined, + UserOutlined, + ProfileOutlined, + DatabaseOutlined, + FileAddOutlined, + FileSyncOutlined, +} from "@ant-design/icons"; +import { AppRoute, LINKS } from "../../routes/app"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; +import { useMediaQuery } from "react-responsive"; -const {Text, Paragraph} = Typography; -const {Header, Content, Sider} = Layout; -const {SubMenu} = Menu; +const { Text, Paragraph } = Typography; +const { Header, Content, Sider } = Layout; +const { SubMenu } = Menu; export const DesktopLayout = observer(() => { - let history = useHistory(); - const xl = useMediaQuery({minWidth: 1024}); - const store = useStore(); - const [clicked, setClicked] = useState(false); + let history = useHistory(); + const xl = useMediaQuery({ minWidth: 1024 }); + const store = useStore(); + const [clicked, setClicked] = useState(false); - return ( - { Commision - - - - Supplier - - + + + + Supplier + + )} - {store.authentication.userData.role !== "Retail" && ( - - - - Product - - - )} - - - - Payback + {store.authentication.userData.role !== "Retail" && ( + } + title="Product" + > + + + + Product - - {store.authentication.userData.role === "Retail" && ( - - - - Transaction - - - )} - - - - Profile + + + + + Category + + + + + Sub Category + + + + )} + {store.authentication.userData.role !== "Retail" && ( + + + + Product + - + )} + + + + Payback + + + {store.authentication.userData.role === "Retail" && ( + + + + Transaction + + + )} + + + + Profile + + + diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index e4d14d2..bf6c867 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -1,6 +1,6 @@ -import React, {useEffect, useState} from "react"; -import {Menu} from "antd"; -import {Link} from "react-router-dom"; +import React, { useEffect, useState } from "react"; +import { Menu } from "antd"; +import { Link } from "react-router-dom"; import { AppstoreOutlined, DatabaseOutlined, @@ -14,26 +14,25 @@ import { ProjectOutlined, UserOutlined, } from "@ant-design/icons"; -import {observer} from "mobx-react-lite"; -import {useStore} from "../../utils/useStore"; -import {LINKS} from "../../routes/app"; +import { observer } from "mobx-react-lite"; +import { useStore } from "../../utils/useStore"; +import { LINKS } from "../../routes/app"; -const {SubMenu} = Menu; +const { SubMenu } = Menu; export const MenuList = observer((props) => { const store = useStore(); - useEffect(() => { - }, []); + useEffect(() => {}, []); const [setKeys, setSetKeys] = useState(["dashboard"]); return ( - { )} {store.authentication.userData.role !== "Retail" && ( - } - title="Config" - > + } title="Config"> @@ -87,74 +82,70 @@ export const MenuList = observer((props) => { )} {store.authentication.userData.role !== "Retail" && ( - } - title="Product" - > - + } title="Product"> + + + + Product + + + + + + Category + + + + + + Sub Category + + + + )} + {store.authentication.userData.role === ("Retail" || "Admin") && ( + + + + Transaction + + + )} + {store.authentication.userData.role !== "Retail" && ( + Product - - - - Category - - - - - - Sub Category - - - )} - {store.authentication.userData.role === ("Retail" || "Admin") && ( - - - - Transaction - - - )} - {store.authentication.userData.role !== "Retail" && ( - - - - Product - - - )} - - - - Payback + + + + Payback + + + {store.authentication.userData.role === ("Retail" || "Admin") && ( + + + + Transaction - {store.authentication.userData.role === ("Retail" || "Admin") && ( - - - - Transaction - - - )} - - + )} + + - Profile - - - {/**/} - {/* */} - {/* */} - {/* About*/} - {/* */} - {/**/} - - + Profile + + + {/**/} + {/* */} + {/* */} + {/* About*/} + {/* */} + {/**/} + + ); }); diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js index 19de002..8248e57 100644 --- a/src/pages/Config/Supplier.js +++ b/src/pages/Config/Supplier.js @@ -1,6 +1,21 @@ import React, { useEffect, useState } from "react"; -import { Button, Card, Col, Input, Row, Tabs } from "antd"; -import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons"; +import { + Button, + Card, + Col, + Input, + Row, + Tabs, + Form, + message, + Modal, + Select, +} from "antd"; +import { + FilterOutlined, + PlusSquareOutlined, + DownloadOutlined, +} from "@ant-design/icons"; import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; @@ -9,9 +24,12 @@ import { LINKS } from "../../routes/app"; const { TabPane } = Tabs; const { Search } = Input; +const { Option } = Select; export const Supplier = observer(() => { const [isLoading, setIsLoading] = useState(false); + const [confirmLoading, setConfirmLoading] = useState(false); + const [form] = Form.useForm(); const store = useStore(); useEffect(() => { @@ -33,7 +51,24 @@ export const Supplier = observer(() => { // 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, @@ -44,7 +79,7 @@ export const Supplier = observer(() => { name: Supplier, }, ]; - + return (
@@ -78,7 +113,7 @@ export const Supplier = observer(() => { { )) + { + 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/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 68ee928..d00ef06 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -18,8 +18,8 @@ export const Subcategory = observer(() => { const init = async () => { try { setIsLoading(true); - //await store.product.getDataCategories(); - await store.subcategory.getDataSubCategories(); + //await store.category.getData(); + await store.subcategory.getData(); setIsLoading(false); } catch (e) { setIsLoading(false); @@ -65,12 +65,11 @@ export const Subcategory = observer(() => { marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, }} /> - - diff --git a/src/store/subcategory.js b/src/store/subcategory.js index e18d6a0..659e79e 100644 --- a/src/store/subcategory.js +++ b/src/store/subcategory.js @@ -7,7 +7,7 @@ export class Subcategory { data = []; total_data = 0; filterCategory = null; - visibleModalCategory = false; + visibleModalSubcategory = false; pageCategories = 0; pageSizeCategories = 10 @@ -38,24 +38,15 @@ export class Subcategory { this.total_dataSubCategories = response.body.count ?? 0 } - async getDataCategories() { - const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`); - - this.dataCategories = response.body.data ?? [] - this.total_dataCategories = response.body.total_data ?? 0 - if (this.dataCategories.length > 0) { - this.filterCategory = this.dataCategories[0].id - } - } - async create(data) { - const response = await http.post('/product/categories').send(data); + const response = await http.post('/product/sub-categories').send(data); + console.log(response) await this.getData(); return response; } async update(id, data) { - const response = await http.put(`/product/categories/${id}`).send(data); + const response = await http.put(`/product/sub-categories/${id}`).send(data); await this.getData(); return response; }