diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js index 87f01c7..a4ad06c 100644 --- a/src/component/CategoryComponent.js +++ b/src/component/CategoryComponent.js @@ -42,7 +42,7 @@ export const CategoryComponent = observer((props) => { const columns = [ { - title: "Product Name", + title: "Category Name", dataIndex: "name", key: "name", }, diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js new file mode 100644 index 0000000..604280e --- /dev/null +++ b/src/component/Subcategory.js @@ -0,0 +1,217 @@ +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 SubcategoryComponent = 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); + + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + //store.product.pageCategories=StrToLower(props.category) + await store.subcategory.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + + const handleEditButton = (data) => { + console.log(data, "isi data") + form.setFieldsValue({ + name: data.name, + }); + store.category.visibleModalCategory = true; + setIdData(data.id); + } + + const columns = [ + { + title: "Sub Category Name", + 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", + render: (text, record) => ( + + + + + ), + }, + ]; + + const deleteData = async (id) => { + try { + console.log(id); + await store.category.delete(id); + message.success("Data Berhasil Dihapus"); + history.push(LINKS.PRODUCT); + } catch (err) { + console.log("error", err); + message.error("Gagal menghapus"); + } + }; + + 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.category.visibleModalCategory = false; + } + + const handleSubmit = async (data) => { + console.log(data, "isi data2") + if (idData !== '') { + setConfirmLoading(true); + try { + await store.category.update(idData, data) + message.success("Success Update Data Category") + } catch (e) { + message.error("Failed Update Data Category") + } + setConfirmLoading(false); + store.category.visibleModalCategory = false; + setIdData(''); + form.resetFields(); + } else { + setConfirmLoading(true); + try { + await store.category.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; + setIdData(''); + form.resetFields(); + } + } + + return ( +
+ { + let pageNumber = page.current; + store.product.pageSize = page.pageSize; + store.product.page = pageNumber - 1; + // store.membership.isLoading = true; + await store.product.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); + }); + }} + > +
+ + + + + + + ); +}); diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index 102fb6a..156b67d 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -4,14 +4,14 @@ import {Link} from "react-router-dom"; import { AppstoreOutlined, DatabaseOutlined, + FileAddOutlined, FileProtectOutlined, + FileSyncOutlined, HomeOutlined, MenuUnfoldOutlined, MoneyCollectOutlined, - ProjectOutlined, - FileAddOutlined, - FileSyncOutlined, ProfileOutlined, + ProjectOutlined, UserOutlined, } from "@ant-design/icons"; import {observer} from "mobx-react-lite"; @@ -98,28 +98,29 @@ export const MenuList = observer((props) => { Product - + Category - - + + Sub Category )} - {store.authentication.userData.role === ("Retail" || "Admin") && ( - - - - Transaction - - )} - {store.authentication.userData.role !== "Retail" && ( + {store.authentication.userData.role === ("Retail" || "Admin") && ( + + + + Transaction + + + )} + {store.authentication.userData.role !== "Retail" && ( @@ -144,16 +145,16 @@ export const MenuList = observer((props) => { - Profile - - - {/**/} - {/* */} - {/* */} - {/* About*/} - {/* */} - {/**/} - - + Profile + + + {/**/} + {/* */} + {/* */} + {/* About*/} + {/* */} + {/**/} + + ); }); diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js index 3c875e1..1186ee3 100644 --- a/src/pages/Product/Category.js +++ b/src/pages/Product/Category.js @@ -75,7 +75,7 @@ export const Category = observer(() => { - ))} + )) diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index e69de29..68ee928 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -0,0 +1,83 @@ +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 { LINKS } from "../../routes/app"; +import { SubcategoryComponent } from "../../component/Subcategory"; + +const { TabPane } = Tabs; +const { Search } = Input; + +export const Subcategory = observer(() => { + const [isLoading, setIsLoading] = useState(false); + const store = useStore(); + + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + //await store.product.getDataCategories(); + await store.subcategory.getDataSubCategories(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + + const handleChangeTabPane = async (key) => { + store.product.filterCategory = key; + console.log(key); + }; + + const routeData = [ + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.SUBCATEGORY, + name: Sub Category, + }, + ]; + + return ( +
+ + + +
+ + + + + + + + + + + + + )) + + + + ); +}); diff --git a/src/routes/app.js b/src/routes/app.js index fb9f807..a61c9ef 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -10,7 +10,7 @@ import {Partner} from "../pages/Config/Partner"; import {Supplier} from "../pages/Config/Supplier"; import {Category} from "../pages/Product/Category"; import {Payback} from "../pages/Payback/Payback"; - +import {Subcategory} from "../pages/Product/Subcategory"; export const LINKS = { HOME: "/app/home", @@ -24,6 +24,7 @@ export const LINKS = { SUPPLIER: "/app/supplier", CATEGORY: "/app/category", PAYBACK: "/app/payback", + SUBCATEGORY: "/app/subcategory", }; @@ -38,6 +39,9 @@ export const AppRoute = () => { + + + diff --git a/src/store/index.js b/src/store/index.js index 2f07d46..fef11ad 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -9,6 +9,7 @@ import { Commission } from "./commission"; import { Transaction } from "./transaction"; import { TokenUtil } from "../utils/token"; import { Category } from "./category"; +import { Subcategory } from "./subcategory"; import { Role } from "./role"; @@ -23,6 +24,7 @@ export class Store { commission = new Commission(this); category = new Category(this); transaction = new Transaction(this); + subcategory = new Subcategory(this); role = new Role(this); constructor() { diff --git a/src/store/subcategory.js b/src/store/subcategory.js index e69de29..e18d6a0 100644 --- a/src/store/subcategory.js +++ b/src/store/subcategory.js @@ -0,0 +1,70 @@ +import {makeAutoObservable} from "mobx"; +import {http} from "../utils/http"; + +export class Subcategory { + page = 0; + pageSize = 10 + data = []; + total_data = 0; + filterCategory = null; + visibleModalCategory = false; + + pageCategories = 0; + pageSizeCategories = 10 + dataCategories = []; + total_dataCategories = 0; + + pageSubCategories = 0; + pageSizeSubCategories = 10 + dataSubCategories = []; + total_dataSubCategories = 0; + + constructor(ctx) { + this.ctx = ctx; + makeAutoObservable(this); + } + + async getData() { + const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`); + console.log(response) + this.data = response.body.data ?? [] + this.total_data = response.body.total_data ?? 0 + } + + async getDataSubCategories() { + const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); + console.log(response) + this.dataSubCategories = response.body.data ?? [] + 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); + await this.getData(); + return response; + } + + async update(id, data) { + const response = await http.put(`/product/categories/${id}`).send(data); + await this.getData(); + return response; + } + + async delete(id) { + const response = await http.del(`/product/${id}`); + await this.getData(); + return response; + } +} + +