From d41681c2178343911076aa1a42a1fd588b93627f Mon Sep 17 00:00:00 2001
From: rarsyansyahr <rarsyansyahr@gmail.com>
Date: Thu, 16 Dec 2021 20:31:59 +0700
Subject: [PATCH] feat: completing sub categories

---
 src/component/Subcategory.js     | 358 +++++++++++++++++--------------
 src/pages/Product/Category.js    |  11 +-
 src/pages/Product/Product.js     |   4 +-
 src/pages/Product/Subcategory.js |  26 +--
 src/store/subcategory.js         |   3 -
 5 files changed, 210 insertions(+), 192 deletions(-)

diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js
index 96b34b4..fbb1f71 100644
--- a/src/component/Subcategory.js
+++ b/src/component/Subcategory.js
@@ -1,173 +1,203 @@
-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 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);
+  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();
-                await store.category.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //store.product.pageCategories=StrToLower(props.category)
+        getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
 
-        init();
-    }, []);
+    init();
+  }, []);
 
-    const handleEditButton = (data) => {
-        console.log(data, "isi data")
-        form.setFieldsValue({
-            name: data.name,
-            categoryId: data.categoryId,
-        });
-        store.subcategory.visibleModalSubcategory = true;
-        setIdData(data.id);
+  const getData = async () => {
+    await store.subcategory.getData();
+    await store.category.getData();
+  };
+
+  const handleEditButton = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      code: data.code,
+      name: data.name,
+      categoryId: data.categoryId,
+    });
+    store.subcategory.visibleModalSubcategory = true;
+    setIdData(data.id);
+  };
+
+  const columns = [
+    {
+      title: "Code",
+      dataIndex: "code",
+      key: "code",
+    },
+    {
+      title: "Sub Category Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEditButton(record)}>Edit</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  const handleCancel = () => {
+    setIdData("");
+    store.subcategory.visibleModalSubcategory = false;
+  };
+
+  const handleSubmit = async (data) => {
+    console.log(data, "isi data2");
+    if (idData !== "") {
+      setConfirmLoading(true);
+      try {
+        await store.subcategory.update(idData, data);
+        await getData();
+        message.success("Success Update Data Category");
+      } catch (e) {
+        message.error("Failed Update Data Category");
+      }
+      setConfirmLoading(false);
+      store.subcategory.visibleModalSubcategory = false;
+      setIdData("");
+      form.resetFields();
+    } else {
+      setConfirmLoading(true);
+      try {
+        await store.subcategory.create(data);
+        await getData();
+        message.success("Success Add New Category");
+      } catch (e) {
+        console.log(e, "apa errornya");
+        message.error("Failed Add Category");
+      }
+      setConfirmLoading(false);
+      store.subcategory.visibleModalSubcategory = false;
+      setIdData("");
+      form.resetFields();
     }
+  };
+  //console.log()
+  return (
+    <div>
+      <Table
+        style={{ textAlign: "center" }}
+        columns={columns}
+        dataSource={store.subcategory.data}
+        bordered
+        pagination={{
+          pageSize: store.product.pageSize,
+          total: store.product.total_data,
+          current: store.product.page + 1,
+          showSizeChanger: true,
+          simple: false,
+        }}
+        onChange={(page) => {
+          let pageNumber = page.current;
+          store.product.pageSize = page.pageSize;
+          store.product.page = pageNumber - 1;
+          // store.membership.isLoading = true;
+          getData();
+          // store.membership.isLoading = false;
+        }}
+      />
 
-    const columns = [
-        {
-            title: "Sub Category Name",
-            dataIndex: "name",
-            key: "name",
-        },
-        {
-            title: "Action",
-            key: "action",
-            render: (text, record) => (
-                <Space size="middle">
-                    <Button
-                        onClick={() => handleEditButton(record)}
-                    >Edit</Button>
-                </Space>
-            ),
-        },
-    ];
-
-    const handleCancel = () => {
-        setIdData('')
-        store.subcategory.visibleModalSubcategory = false;
-    }
-
-    const handleSubmit = async (data) => {
-        console.log(data, "isi data2")
-        if (idData !== '') {
-            setConfirmLoading(true);
-            try {
-                await store.subcategory.update(idData, data)
-                message.success("Success Update Data Category")
-            } catch (e) {
-                message.error("Failed Update Data Category")
-            }
-            setConfirmLoading(false);
-            store.subcategory.visibleModalSubcategory = false;
-            setIdData('');
-            form.resetFields();
-        } else {
-            setConfirmLoading(true);
-            try {
-                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.subcategory.visibleModalSubcategory = false;
-            setIdData('');
-            form.resetFields();
-        }
-    }
-    //console.log()
-    return (
-        <div>
-            <Table
-                style={{textAlign: "center"}}
-                columns={columns}
-                dataSource={store.subcategory.data}
-                bordered
-                pagination={{
-                    pageSize: store.product.pageSize,
-                    total: store.product.total_data,
-                    current: store.product.page + 1,
-                    showSizeChanger: true,
-                    simple: false
-                }}
-                onChange={async (page) => {
-                    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;
-                }}
-            />
-
-            <Modal
-                visible={store.subcategory.visibleModalSubcategory}
-                title={idData ? "Edit Sub Category" : "Create a new sub category"}
-                okText={idData ? "Edit" : "Create"}
-                cancelText="Cancel"
-                onCancel={() => {
-                    form.resetFields();
-                    handleCancel();
-                }}
-                onOk={() => {
-                    form
-                        .validateFields()
-                        .then((values) => {
-                            console.log(values, "isi form")
-                            handleSubmit(values);
-                            form.resetFields();
-                        })
-                        .catch((info) => {
-                            console.error("Validate Failed:", info);
-                        });
-                }}
+      <Modal
+        visible={store.subcategory.visibleModalSubcategory}
+        title={idData ? "Edit Sub Category" : "Create a new sub category"}
+        okText={idData ? "Edit" : "Create"}
+        cancelText="Cancel"
+        onCancel={() => {
+          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 form={form} layout="vertical">
+          {!idData && (
+            <Form.Item
+              name="code"
+              label="Code"
+              rules={[
+                { required: true, message: "Please input code category!" },
+              ]}
             >
-                <Form
-                    form={form}
-                    layout="vertical"
-                >
-                    <Form.Item
-                        name="name"
-                        label="Name"
-                        rules={[{required: true, message: "Please input name category!"}]}
-                    >
-                        <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>
-    );
+              <Input />
+            </Form.Item>
+          )}
+          <Form.Item
+            name="name"
+            label="Name"
+            rules={[{ required: true, message: "Please input name category!" }]}
+          >
+            <Input />
+          </Form.Item>
+          {!idData && (
+            <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>
+  );
 });
diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js
index 1186ee3..0a26060 100644
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@@ -65,18 +65,15 @@ export const Category = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             />
-            <Button onClick={() => (store.category.visibleModalCategory = true)}>
+            <Button
+              onClick={() => (store.category.visibleModalCategory = true)}
+            >
               <PlusSquareOutlined /> New
             </Button>
           </Col>
         </Row>
 
-        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
-            <TabPane tab="Category" key="1">
-              <CategoryComponent/>
-            </TabPane>
-          ))
-        </Tabs>
+        <CategoryComponent />
       </Card>
     </div>
   );
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 3586974..7324cde 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -54,10 +54,10 @@ export const Product = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={12}>
-            <Button>
+            {/* <Button>
               <FilterOutlined />
               Filter
-            </Button>
+            </Button> */}
           </Col>
           <Col span={12} style={{ textAlign: "right" }}>
             <Search
diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js
index d00ef06..7e7162d 100644
--- a/src/pages/Product/Subcategory.js
+++ b/src/pages/Product/Subcategory.js
@@ -7,7 +7,6 @@ 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(() => {
@@ -18,8 +17,7 @@ export const Subcategory = observer(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        //await store.category.getData();
-        await store.subcategory.getData();
+        // await getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -29,11 +27,10 @@ export const Subcategory = observer(() => {
     init();
   }, []);
 
-  const handleChangeTabPane = async (key) => {
-    store.product.filterCategory = key;
-    console.log(key);
+  const getData = async () => {
+    await store.category.getData();
+    await store.subcategory.getData();
   };
-
   const routeData = [
     {
       route: LINKS.HOME,
@@ -51,10 +48,10 @@ export const Subcategory = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={12}>
-            <Button>
+            {/* <Button>
               <FilterOutlined />
               Filter
-            </Button>
+            </Button> */}
           </Col>
           <Col span={12} style={{ textAlign: "right" }}>
             <Search
@@ -65,17 +62,14 @@ export const Subcategory = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             />
-            <Button onClick={() => (store.subcategory.visibleModalSubcategory= 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/>
-            </TabPane>
-          ))
-        </Tabs>
+        <SubcategoryComponent />
       </Card>
     </div>
   );
diff --git a/src/store/subcategory.js b/src/store/subcategory.js
index 659e79e..64e4bae 100644
--- a/src/store/subcategory.js
+++ b/src/store/subcategory.js
@@ -26,21 +26,18 @@ export class Subcategory {
 
     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 create(data) {
         const response = await http.post('/product/sub-categories').send(data);
-        console.log(response)
         await this.getData();
         return response;
     }