PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menu Supplier

Browse Source
This commit is contained in:
ajat91 2021-12-15 18:30:27 +07:00
parent 08b82c55ab
commit 4df9f7214e
7 changed files with 287 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/component/Subcategory.js
View File

@ -22,6 +22,7 @@ export const SubcategoryComponent = observer((props) => {
setIsLoading(true); setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category) //store.product.pageCategories=StrToLower(props.category)
await store.subcategory.getData(); await store.subcategory.getData();
await store.category.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -35,8 +36,9 @@ export const SubcategoryComponent = observer((props) => {
console.log(data, "isi data") console.log(data, "isi data")
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name,
categoryId: data.categoryId,
}); });
store.category.visibleModalCategory = true; store.subcategory.visibleModalSubcategory = true;
setIdData(data.id); setIdData(data.id);
} }
@ -46,32 +48,6 @@ export const SubcategoryComponent = observer((props) => {
dataIndex: "name", dataIndex: "name",
key: "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", title: "Action",
key: "action", key: "action",
@ -120,7 +96,7 @@ export const SubcategoryComponent = observer((props) => {
const handleCancel = () => { const handleCancel = () => {
setIdData('') setIdData('')
store.category.visibleModalCategory = false; store.subcategory.visibleModalSubcategory = false;
} }
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
@ -128,31 +104,31 @@ export const SubcategoryComponent = observer((props) => {
if (idData !== '') { if (idData !== '') {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.category.update(idData, data) await store.subcategory.update(idData, data)
message.success("Success Update Data Category") message.success("Success Update Data Category")
} catch (e) { } catch (e) {
message.error("Failed Update Data Category") message.error("Failed Update Data Category")
} }
setConfirmLoading(false); setConfirmLoading(false);
store.category.visibleModalCategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(''); setIdData('');
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.category.create(data) await store.subcategory.create(data)
message.success("Success Add New Category") message.success("Success Add New Category")
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya")
message.error("Failed Add Category") message.error("Failed Add Category")
} }
setConfirmLoading(false); setConfirmLoading(false);
store.category.visibleModalCategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(''); setIdData('');
form.resetFields(); form.resetFields();
} }
} }
//console.log()
return ( return (
<div> <div>
<Table <Table
@ -178,8 +154,8 @@ export const SubcategoryComponent = observer((props) => {
/> />
<Modal <Modal
visible={store.category.visibleModalCategory} visible={store.subcategory.visibleModalSubcategory}
title={idData ? "Edit Category" : "Create a new Category"} title={idData ? "Edit Sub Category" : "Create a new sub category"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
@ -210,6 +186,19 @@ export const SubcategoryComponent = observer((props) => {
> >
<Input/> <Input/>
</Form.Item> </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> </Form>
</Modal> </Modal>
</div> </div>

72
src/component/SupplierComponent.js
View File

@ -20,6 +20,7 @@ import { LINKS } from "../routes/app";
export const SupplierComponent = observer((props) => { export const SupplierComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
//const [formEdit] = Form.useForm();
const { Option } = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
@ -45,16 +46,16 @@ export const SupplierComponent = observer((props) => {
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name,
code: data.code, code: data.code,
status:data.status status: data.status,
}); });
store.supplier.visibleModalSupplier = true; store.supplier.visibleModalSupplier = true;
setIdData(data.id); setIdData(data.id);
}; };
const changeStatus = (id, isActive) => { const changeStatus = (id, isActive) => {
const status = isActive ? "inactive" : "active" const status = isActive ? "inactive" : "active";
store.supplier.changeStatus(id, status) store.supplier.changeStatus(id, status);
} };
const columns = [ const columns = [
{ {
@ -74,7 +75,7 @@ export const SupplierComponent = observer((props) => {
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.status === true ? "processing" : "#E3E8EE"} color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: 'pointer' }} style={{ color: "#4F566B", cursor: "pointer" }}
onClick={() => changeStatus(record?.id, record?.status)} onClick={() => changeStatus(record?.id, record?.status)}
> >
{record?.status === true ? " ACTIVE" : "INACTIVE"} {record?.status === true ? " ACTIVE" : "INACTIVE"}
@ -125,9 +126,6 @@ export const SupplierComponent = observer((props) => {
setIdData(""); setIdData("");
store.supplier.visibleModalSupplier = false; store.supplier.visibleModalSupplier = false;
}; };
const handleCancelTransaction= () => {
store.supplier.visibleModalTransaction = false;
};
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
@ -136,6 +134,7 @@ export const SupplierComponent = observer((props) => {
try { try {
await store.supplier.update(idData, data); await store.supplier.update(idData, data);
message.success("Success Update Data Member"); message.success("Success Update Data Member");
await store.supplier.getData();
} catch (e) { } catch (e) {
message.error("Failed Update Data Member"); 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 ( return (
<div> <div>
<Table <Table
@ -241,45 +222,6 @@ export const SupplierComponent = observer((props) => {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </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> </div>
); );
}); });

152
src/pages/App/DesktopLayout.js
View File

@ -1,32 +1,40 @@
import React, {useState} from "react"; import React, { useState } from "react";
import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd"; import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import {MenuList} from "./MenuList"; import { MenuList } from "./MenuList";
import {Link, useHistory} from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import {HomeOutlined, MenuOutlined, UserOutlined} from "@ant-design/icons"; import {
import {AppRoute, LINKS} from "../../routes/app"; HomeOutlined,
import {useStore} from "../../utils/useStore"; MenuOutlined,
import {observer} from "mobx-react-lite"; UserOutlined,
import {useMediaQuery} from "react-responsive"; 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 { Text, Paragraph } = Typography;
const {Header, Content, Sider} = Layout; const { Header, Content, Sider } = Layout;
const {SubMenu} = Menu; const { SubMenu } = Menu;
export const DesktopLayout = observer(() => { export const DesktopLayout = observer(() => {
let history = useHistory(); let history = useHistory();
const xl = useMediaQuery({minWidth: 1024}); const xl = useMediaQuery({ minWidth: 1024 });
const store = useStore(); const store = useStore();
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
return ( return (
<Layout <Layout
theme={"light"} theme={"light"}
className={"transparent"} className={"transparent"}
hasSider={store.ui.mediaQuery.isDesktop} hasSider={store.ui.mediaQuery.isDesktop}
style={{ style={{
paddingLeft: xl ? "calc(70vw - 1024px)" : "0", paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
display: "flex", display: "flex",
// minWidth: 1024, // minWidth: 1024,
width: "100%", width: "100%",
height: "100%", height: "100%",
position: "relative", position: "relative",
@ -138,45 +146,71 @@ export const DesktopLayout = observer(() => {
<span>Commision</span> <span>Commision</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
<Link to={LINKS.SUPPLIER}> <Link to={LINKS.SUPPLIER}>
<HomeOutlined/> <HomeOutlined />
<span>Supplier</span> <span>Supplier</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product"> <SubMenu
<Link to={LINKS.PRODUCT}> key="product-main"
<HomeOutlined/> icon={<ProfileOutlined />}
<span>Product</span> title="Product"
</Link> >
</Menu.Item> <Menu.Item key="product">
)} <Link to={LINKS.PRODUCT}>
<Menu.Item key="payback"> <DatabaseOutlined />
<Link to={LINKS.PAYBACK}> <span>Product</span>
<HomeOutlined/>
<span>Payback</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Retail" && ( <Menu.Item key="category">
<Menu.Item key="transaction"> <Link to={LINKS.CATEGORY}>
<Link to={LINKS.TRANSACTION}> <FileAddOutlined />
<HomeOutlined/> <span>Category</span>
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link> </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.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> </Menu>
</div> </div>
</Drawer> </Drawer>

151
src/pages/App/MenuList.js
View File

@ -1,6 +1,6 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {Menu} from "antd"; import { Menu } from "antd";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
AppstoreOutlined, AppstoreOutlined,
DatabaseOutlined, DatabaseOutlined,
@ -14,26 +14,25 @@ import {
ProjectOutlined, ProjectOutlined,
UserOutlined, UserOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
const {SubMenu} = Menu; const { SubMenu } = Menu;
export const MenuList = observer((props) => { export const MenuList = observer((props) => {
const store = useStore(); const store = useStore();
useEffect(() => { useEffect(() => {}, []);
}, []);
const [setKeys, setSetKeys] = useState(["dashboard"]); const [setKeys, setSetKeys] = useState(["dashboard"]);
return ( return (
<Menu <Menu
defaultOpenKeys={["sub4"]} defaultOpenKeys={["sub4"]}
theme="light" theme="light"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
fontWeight: 400, fontWeight: 400,
paddingLeft: 0, paddingLeft: 0,
}} }}
@ -61,11 +60,7 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<SubMenu <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
key="config"
icon={<MenuUnfoldOutlined />}
title="Config"
>
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<ProjectOutlined /> <ProjectOutlined />
@ -87,74 +82,70 @@ export const MenuList = observer((props) => {
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<SubMenu <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
key="product-main" <Menu.Item key="product">
icon={<ProfileOutlined />} <Link to={LINKS.PRODUCT}>
title="Product" <DatabaseOutlined />
> <span>Product</span>
<Menu.Item key="product"> </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}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Product</span>
</Link> </Link>
</Menu.Item> </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="payback">
<Menu.Item key="transaction"> <Link to={LINKS.PAYBACK}>
<Link to={LINKS.TRANSACTION}> <DatabaseOutlined />
<HomeOutlined/> <span>Payback</span>
<span>Transaction</span> </Link>
</Link> </Menu.Item>
</Menu.Item> {store.authentication.userData.role === ("Retail" || "Admin") && (
)} <Menu.Item key="transaction">
{store.authentication.userData.role !== "Retail" && ( <Link to={LINKS.TRANSACTION}>
<Menu.Item key="retail"> <HomeOutlined />
<Link to={LINKS.PRODUCT}> <span>Transaction</span>
<DatabaseOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined/>
<span>Payback</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === ("Retail" || "Admin") && ( )}
<Menu.Item key="transaction"> <Menu.Item key="profile">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.PROFILE}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined />
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{/*<Menu.Item key="about">*/} {/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/} {/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/} {/* <CalendarOutlined/>*/}
{/* <span>About</span>*/} {/* <span>About</span>*/}
{/* </Link>*/} {/* </Link>*/}
{/*</Menu.Item>*/} {/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/> <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu> </Menu>
); );
}); });

88
src/pages/Config/Supplier.js
View File

@ -1,6 +1,21 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd"; import {
import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons"; 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 { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
@ -9,9 +24,12 @@ import { LINKS } from "../../routes/app";
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Search } = Input; const { Search } = Input;
const { Option } = Select;
export const Supplier = observer(() => { export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
const store = useStore(); const store = useStore();
useEffect(() => { useEffect(() => {
@ -33,7 +51,24 @@ export const Supplier = observer(() => {
// store.product.filterCategory = key; // store.product.filterCategory = key;
// console.log(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 = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@ -78,7 +113,7 @@ export const Supplier = observer(() => {
<Button <Button
onClick={() => (store.supplier.visibleModalTransaction = true)} onClick={() => (store.supplier.visibleModalTransaction = true)}
> >
<DownloadOutlined /> Top Up Saldo <DownloadOutlined /> Top Up Saldo
</Button> </Button>
</Col> </Col>
<Tabs <Tabs
@ -92,6 +127,51 @@ export const Supplier = observer(() => {
)) ))
</Tabs> </Tabs>
</Card> </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> </div>
); );
}); });

7
src/pages/Product/Subcategory.js
View File

@ -18,8 +18,8 @@ export const Subcategory = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
//await store.product.getDataCategories(); //await store.category.getData();
await store.subcategory.getDataSubCategories(); await store.subcategory.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -65,12 +65,11 @@ export const Subcategory = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
<Button onClick={() => (store.category.visibleModalCategory = true)}> <Button onClick={() => (store.subcategory.visibleModalSubcategory= true)}>
<PlusSquareOutlined /> New <PlusSquareOutlined /> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50"> <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
<TabPane tab="Sub-Category" key="1"> <TabPane tab="Sub-Category" key="1">
<SubcategoryComponent/> <SubcategoryComponent/>

17
src/store/subcategory.js
View File

@ -7,7 +7,7 @@ export class Subcategory {
data = []; data = [];
total_data = 0; total_data = 0;
filterCategory = null; filterCategory = null;
visibleModalCategory = false; visibleModalSubcategory = false;
pageCategories = 0; pageCategories = 0;
pageSizeCategories = 10 pageSizeCategories = 10
@ -38,24 +38,15 @@ export class Subcategory {
this.total_dataSubCategories = response.body.count ?? 0 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) { 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(); await this.getData();
return response; return response;
} }
async update(id, data) { 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(); await this.getData();
return response; return response;
} }