Pages Categories

src/component/CategoryComponent.js

@@ -1,5 +1,15 @@
 import React, { useEffect, useState } from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
+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";
@@ -12,7 +22,7 @@ export const CategoryComponent = observer((props) => {
   const [form] = Form.useForm();
   const { Option } = Select;
   const history = useHistory();
-    const [idData, setIdData] = useState('');
+  const [idData, setIdData] = useState("");
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -32,15 +42,21 @@ export const CategoryComponent = observer((props) => {
   }, []);
 
   const handleEditButton = (data) => {
-        console.log(data, "isi data")
+    console.log(data, "isi data");
     form.setFieldsValue({
       name: data.name,
+      code: data.code,
     });
     store.category.visibleModalCategory = true;
     setIdData(data.id);
-    }
+  };
 
   const columns = [
+    {
+      title: "Kode",
+      dataIndex: "code",
+      key: "code",
+    },
     {
       title: "Category Name",
       dataIndex: "name",
@@ -77,14 +93,8 @@ export const CategoryComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-                    <Button
-                        onClick={() => handleEditButton(record)}
-                    >Edit</Button>
-                    <Button
-                        onClick={() => handleDelete(record.id)}
-                    >
-                        Delete
-                    </Button>
+          <Button onClick={() => handleEditButton(record)}>Edit</Button>
+          <Button onClick={() => handleDelete(record.id)}>Delete</Button>
         </Space>
       ),
     },
@@ -119,39 +129,39 @@ export const CategoryComponent = observer((props) => {
   };
 
   const handleCancel = () => {
-        setIdData('')
+    setIdData("");
     store.category.visibleModalCategory = false;
-    }
+  };
 
   const handleSubmit = async (data) => {
-        console.log(data, "isi data2")
-        if (idData !== '') {
+    console.log(data, "isi data2");
+    if (idData !== "") {
       setConfirmLoading(true);
       try {
-                await store.category.update(idData, data)
-                message.success("Success Update Data Category")
+        await store.category.update(idData, data);
+        message.success("Success Update Data Category");
       } catch (e) {
-                message.error("Failed Update Data Category")
+        message.error("Failed Update Data Category");
       }
       setConfirmLoading(false);
       store.category.visibleModalCategory = false;
-            setIdData('');
+      setIdData("");
       form.resetFields();
     } else {
       setConfirmLoading(true);
       try {
-                await store.category.create(data)
-                message.success("Success Add New Category")
+        await store.category.create(data);
+        message.success("Success Add New Category");
       } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Category")
+        console.log(e, "apa errornya");
+        message.error("Failed Add Category");
       }
       setConfirmLoading(false);
       store.category.visibleModalCategory = false;
-            setIdData('');
+      setIdData("");
       form.resetFields();
     }
-    }
+  };
 
   return (
     <div>
@@ -165,7 +175,7 @@ export const CategoryComponent = observer((props) => {
           total: store.product.total_data,
           current: store.product.page + 1,
           showSizeChanger: true,
-                    simple: false
+          simple: false,
         }}
         onChange={async (page) => {
           let pageNumber = page.current;
@@ -190,7 +200,7 @@ export const CategoryComponent = observer((props) => {
           form
             .validateFields()
             .then((values) => {
-                            console.log(values, "isi form")
+              console.log(values, "isi form");
               handleSubmit(values);
               form.resetFields();
             })
@@ -199,10 +209,14 @@ export const CategoryComponent = observer((props) => {
             });
         }}
       >
-                <Form
-                    form={form}
-                    layout="vertical"
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="code"
+            label="Code"
+            rules={[{ required: true, message: "Please input name code!" }]}
           >
+            <Input />
+          </Form.Item>
           <Form.Item
             name="name"
             label="Name"