Menu Supplier
This commit is contained in:
parent
08b82c55ab
commit
4df9f7214e
|
|
@ -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) => (
|
||||
// <Tag
|
||||
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
|
||||
// style={{color: "#4F566B"}}
|
||||
// >
|
||||
// {capitalize(record?.status)}
|
||||
// </Tag>
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// title: "Tersedia",
|
||||
// dataIndex: "tersedia",
|
||||
// key: "tersedia",
|
||||
// render: (text, record) => (
|
||||
// <Tag
|
||||
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
|
||||
// style={{color: "#4F566B"}}
|
||||
// >
|
||||
// {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
|
||||
// </Tag>
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
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 (
|
||||
<div>
|
||||
<Table
|
||||
|
|
@ -178,8 +154,8 @@ export const SubcategoryComponent = observer((props) => {
|
|||
/>
|
||||
|
||||
<Modal
|
||||
visible={store.category.visibleModalCategory}
|
||||
title={idData ? "Edit Category" : "Create a new Category"}
|
||||
visible={store.subcategory.visibleModalSubcategory}
|
||||
title={idData ? "Edit Sub Category" : "Create a new sub category"}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
|
|
@ -210,6 +186,19 @@ export const SubcategoryComponent = observer((props) => {
|
|||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="categoryId"
|
||||
label="Categories"
|
||||
rules={[{required: true, message: "Please input category id!"}]}
|
||||
>
|
||||
<Select placeholder="Select Category" allowClear>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<Tag
|
||||
color={record?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{ color: "#4F566B", cursor: 'pointer' }}
|
||||
style={{ color: "#4F566B", cursor: "pointer" }}
|
||||
onClick={() => 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 (
|
||||
<div>
|
||||
<Table
|
||||
|
|
@ -241,45 +222,6 @@ export const SupplierComponent = observer((props) => {
|
|||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
<Modal
|
||||
visible={store.supplier.visibleModalTransaction}
|
||||
title="Top Up Saldo"
|
||||
okText="Top Up"
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancelTransaction();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form");
|
||||
handleSubmitTransaction(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="supplier"
|
||||
label="Supplier"
|
||||
rules={[{ required: true, message: "Please input supplier!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="Amount"
|
||||
rules={[{ required: true, message: "Please input amount!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
|
|
@ -138,45 +146,71 @@ export const DesktopLayout = observer(() => {
|
|||
<span>Commision</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.SUPPLIER}>
|
||||
<HomeOutlined/>
|
||||
<span>Supplier</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.SUPPLIER}>
|
||||
<HomeOutlined />
|
||||
<span>Supplier</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined/>
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<HomeOutlined/>
|
||||
<span>Payback</span>
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="product-main"
|
||||
icon={<ProfileOutlined />}
|
||||
title="Product"
|
||||
>
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === "Retail" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined/>
|
||||
<span>Profile</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Divider
|
||||
style={{background: "transparent", paddingTop: 15}}
|
||||
/>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<HomeOutlined />
|
||||
<span>Payback</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === "Retail" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined />
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Divider
|
||||
style={{ background: "transparent", paddingTop: 15 }}
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
|
|
@ -61,11 +60,7 @@ export const MenuList = observer((props) => {
|
|||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="config"
|
||||
icon={<MenuUnfoldOutlined />}
|
||||
title="Config"
|
||||
>
|
||||
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
|
||||
<Menu.Item key="partner">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<ProjectOutlined />
|
||||
|
|
@ -87,74 +82,70 @@ export const MenuList = observer((props) => {
|
|||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="product-main"
|
||||
icon={<ProfileOutlined />}
|
||||
title="Product"
|
||||
>
|
||||
<Menu.Item key="product">
|
||||
<SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="retail">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="retail">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined/>
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<DatabaseOutlined/>
|
||||
<span>Payback</span>
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<DatabaseOutlined />
|
||||
<span>Payback</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined />
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="about">*/}
|
||||
{/* <Link to={'/app/about'}>*/}
|
||||
{/* <CalendarOutlined/>*/}
|
||||
{/* <span>About</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
|
||||
</Menu>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="about">*/}
|
||||
{/* <Link to={'/app/about'}>*/}
|
||||
{/* <CalendarOutlined/>*/}
|
||||
{/* <span>About</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -78,7 +113,7 @@ export const Supplier = observer(() => {
|
|||
<Button
|
||||
onClick={() => (store.supplier.visibleModalTransaction = true)}
|
||||
>
|
||||
<DownloadOutlined /> Top Up Saldo
|
||||
<DownloadOutlined /> Top Up Saldo
|
||||
</Button>
|
||||
</Col>
|
||||
<Tabs
|
||||
|
|
@ -92,6 +127,51 @@ export const Supplier = observer(() => {
|
|||
))
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Modal
|
||||
visible={store.supplier.visibleModalTransaction}
|
||||
title="Top Up Saldo"
|
||||
okText="Top Up"
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancelTransaction();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form");
|
||||
handleSubmitTransaction(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="supplier"
|
||||
label="Supplier"
|
||||
rules={[{ required: true, message: "Please input supplier!" }]}
|
||||
>
|
||||
<Select placeholder="Select Code Supplier" allowClear>
|
||||
{store.supplier.data.map((item) => (
|
||||
<Option value={item.code} key={item.code}>
|
||||
{item.code}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="Amount"
|
||||
rules={[{ required: true, message: "Please input amount!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
<Button onClick={() => (store.category.visibleModalCategory = true)}>
|
||||
<Button onClick={() => (store.subcategory.visibleModalSubcategory= true)}>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
|
||||
<TabPane tab="Sub-Category" key="1">
|
||||
<SubcategoryComponent/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user