feat: create component product

2021-12-10 10:50:39 +07:00 · 2021-12-10 10:50:39 +07:00 · 8a73e728d8
commit 8a73e728d8
parent 65252fd2a7
8 changed files with 180 additions and 155 deletions
--- a/package.json
+++ b/package.json
@ -45,6 +45,7 @@
    "jest-watch-typeahead": "0.6.1",
    "less": "^3.11.1",
    "less-loader": "6.1.0",
+    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "0.11.3",
    "mobx": "^6.3.2",
    "mobx-react-lite": "^3.2.0",
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@ -1,30 +1,18 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import {Button, message, Modal, Space, Table, Tag} from "antd";
-import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
+import {capitalize} from "lodash";
+import {store} from "../utils/useStore";
+import {PulsaModal} from "../pages/Product/PulsaModal";

-export const Pulsa = observer(() => {
-    const store = useStore();
+export const ProductComponent = observer((props) => {
    const history = useHistory();
-    const [visibleModal, setVisibleModal] = useState(false);
    const [initialData, setInitialData] = useState({});
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                await store.product.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };

-        init();
-    }, []);
    const columns = [
        {
            title: "Kode",
@ -44,8 +32,8 @@ export const Pulsa = observer(() => {
        ,
        {
            title: "Harga Jual",
-            dataIndex: "mark_up_price",
-            key: "mark_up_price",
+            dataIndex: "base_price",
+            key: "base_price",
        },
        {
            title: "Gangguan",
@ -56,7 +44,7 @@ export const Pulsa = observer(() => {
                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
                    style={{color: "#4F566B"}}
                >
-                    {record?.status}
+                    {capitalize(record?.status)}
                </Tag>
            ),
        },
@ -78,7 +66,12 @@ export const Pulsa = observer(() => {
            key: "action",
            render: (text, record) => (
                <Space size="middle">
-                    <Button>Edit</Button>
+                    <Button
+                        onClick={() => {
+                            setInitialData(record);
+                            store.product.visibleModal = true;
+                        }}
+                    >Edit</Button>
                    <Button
                        onClick={async () => {
                            handleDelete(record.id);
@ -90,6 +83,7 @@ export const Pulsa = observer(() => {
            ),
        },
    ];
+
    const deleteData = async (id) => {
        try {
            console.log(id);
@ -101,6 +95,7 @@ export const Pulsa = observer(() => {
            message.error("Gagal menghapus");
        }
    };
+
    const handleDelete = (id) => {
        Modal.confirm({
            title: "Are you sure delete this record?",
@ -116,14 +111,52 @@ export const Pulsa = observer(() => {
            },
        });
    };
+
+    const onSubmit = async (data) => {
+        if (initialData.id) {
+            setInitialData({})
+            setConfirmLoading(true);
+            try {
+                await store.product.update(initialData.id, data)
+                message.success("Success Update Data Member")
+            } catch (e) {
+                message.error("Failed Update Data Member")
+            }
+            setConfirmLoading(false);
+            store.product.visibleModal = false;
+        } else {
+            setInitialData({})
+            setConfirmLoading(true);
+            try {
+                await store.product.create(data)
+                message.success("Success Add New Member")
+            } catch (e) {
+                console.log(e, "apa errornya")
+                message.error("Failed Add Member")
+            }
+            setConfirmLoading(false);
+            store.product.visibleModal = false;
+        }
+    }
+
    return (
        <div>
            <Table
                style={{textAlign: "center"}}
                columns={columns}
-                dataSource={store.product.data}
+                dataSource={props.data}
                bordered
            />
+            <PulsaModal visible={store.product.visibleModal}
+                        confirmLoading={confirmLoading}
+                        initialData={initialData}
+                        onCreate={async (data) => {
+                            await onSubmit(data)
+                        }}
+                        onCancel={() => {
+                            setInitialData({})
+                            store.product.visibleModal = false;
+                        }}/>
        </div>
    );
 });
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@ -1,24 +1,38 @@
-import React, {useState} from "react";
-import {Button, Card, Col, Input, message, Row, Tabs} from "antd";
+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 {Pulsa} from "./Pulsa";
-import {PulsaModal} from "./PulsaModal";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";

 const {TabPane} = Tabs;
 const {Search} = Input;

 export const Product = observer(() => {
-    const [visibleModal, setVisibleModal] = useState(false)
-    const [initialData, setInitialData] = useState({})
-    const [confirmLoading, setConfirmLoading] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const store = useStore();
-    const callback = (key) => {
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.product.getDataCategories();
+                await store.product.getData();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleChangeTabPane = async (key) => {
+        store.product.filterCategory = key;
        console.log(key);
    };
+
    const routeData = [
        {
            route: "/app/home",
@ -29,32 +43,7 @@ export const Product = observer(() => {
            name: <span style={{fontWeight: 'bold'}}>Product</span>,
        },
    ];
-    const onSubmit = async (data) => {
-        if (initialData.id) {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.update(initialData.id, data)
-                message.success("Success Update Data Member")
-            } catch (e) {
-                message.error("Failed Update Data Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        } else {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.create(data)
-                message.success("Success Add New Member")
-            } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        }
-    }
+
    return (
        <div className={["ppob-container"].join(" ")}>
            <BreadcumbComponent data={routeData}/>
@ -71,44 +60,28 @@ export const Product = observer(() => {
                            placeholder="input search text"
                            style={{width: 200, marginRight: 10}}
                        />
-                        <Button onClick={() => setVisibleModal(true)}>
+                        <Button onClick={() => store.product.visibleModal = true}>
                            <PlusSquareOutlined/> New
                        </Button>
                    </Col>
                </Row>
                <Tabs
-                    defaultActiveKey="1"
-                    onChange={callback}
+                    onChange={handleChangeTabPane}
                    size="default"
                    tabBarGutter="50"
                >
-                    <TabPane tab="Pulsa" key="1">
-                        <Pulsa/>
-                    </TabPane>
-                    <TabPane tab="Game Voucher" key="2">
-                        Game Voucher
-                    </TabPane>
-                    <TabPane tab="Product" key="3">
-                        Product
-                    </TabPane>
-                    <TabPane tab="Prduct" key="4">
-                        Prduct
-                    </TabPane>
-                    <TabPane tab="Prdct" key="5">
-                        Prdct
-                    </TabPane>
+                    {store.product.dataCategories.map((item) => (
+                        <TabPane
+                            tab={item.name}
+                            key={item.id}
+                        >
+                            <ProductComponent
+                                data={store.product.data}
+                            />
+                        </TabPane>
+                    ))}
                </Tabs>
            </Card>
-            <PulsaModal visible={visibleModal}
-                        confirmLoading={confirmLoading}
-                        initialData={initialData}
-                        onCreate={async (data) => {
-                            onSubmit(data)
-                        }}
-                        onCancel={() => {
-                            setInitialData({})
-                            setVisibleModal(false);
-                        }}/>
        </div>
    );
 });
--- a/src/pages/Product/PulsaModal.js
+++ b/src/pages/Product/PulsaModal.js
@ -1,30 +1,50 @@
 import React, {useEffect, useState} from "react";
 import {Form, Input, Modal, Select} from "antd";
 import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";

-export const PulsaModal = ({visible, onCreate, onCancel}) => {
+export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) => {
  const [form] = Form.useForm();
  const {Option} = Select;
-  const dataStatus = ["Active", "Inactive"];
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
-  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
-  const init = async () => {
-    try {
-      setIsLoading(true);
-      await store.categories.getData();
-      setIsLoading(false);
-    } catch (e) {
-      setIsLoading(false);
-    }
-  };

  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.product.getDataSubCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
    init();
  }, []);

+
+  const subCategoriesOption = [
+    <Option key={123} value={123}>
+      {123}
+    </Option>,
+    <Option key={431} value={123}>
+      {123}
+    </Option>
+  ];
+
+  const subCategoriesOption2 = store.product.dataSubCategories.slice().map(subCategory => {
+    return (
+        <Option key={subCategory.id} value={subCategory.id}>
+          {subCategory.name}
+        </Option>
+    )
+  });
+
+  console.log(store.product.dataSubCategories, 'subCategoriesOption2');
+
  return (
      <Modal
          visible={visible}
@ -68,7 +88,7 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
            <Input/>
          </Form.Item>
          <Form.Item
-              name="markUpPrice"
+              name="base_price"
              label="Mark Up Price"
              rules={[{required: true, message: "Please input mark up price!"}]}
          >
@ -92,17 +112,24 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
            </Select>
          </Form.Item>
          <Form.Item
-              name="subCategoriesId"
-              label="Sub Categories"
-              rules={[{required: true, message: "Please select Sub Category!"}]}
+              name="sub_category"
+              label="Sub categories"
+              rules={[{required: true, message: "Please select sub categories!"}]}
          >
            <Select placeholder="Select Sub Category" allowClear>
-              {store.categories.data.map((it) => {
-                return <Option value={it.id}>{it.name}</Option>;
-              })}
+              {subCategoriesOption2}
            </Select>
          </Form.Item>
+          {/*<Form.Item*/}
+          {/*    name="subCategories"*/}
+          {/*    label="Sub Categories"*/}
+          {/*    rules={[{required: true, message: "Please select Sub Category!"}]}*/}
+          {/*>*/}
+          {/*  <Select placeholder="Select Sub Category" allowClear>*/}
+          {/*    {subCategoriesOption2}*/}
+          {/*  </Select>*/}
+          {/*</Form.Item>*/}
        </Form>
      </Modal>
  );
-};
+});
--- a/src/store/categories.js
+++ b/src/store/categories.js
@ -1,40 +0,0 @@
-import {action, makeAutoObservable} from "mobx";
-import {http} from "../utils/http";
-
-export class Categories {
-    page = 0;
-    pageSize = 10
-    data = [];
-    total_data = 0
-
-    constructor(ctx) {
-        this.ctx = ctx;
-        makeAutoObservable(this);
-    }
-
-    @action
-    async getData() {
-        const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response, 'Data cate')
-        console.log(JSON.stringify(response.body.data), 'Data')
-
-        this.data = response.body.data ?? []
-        this.total_data = response.body.total_data ?? 0
-    }
-
-    @action
-    async create(data) {
-        return await http.post('/user').send(data)
-    }
-
-    @action
-    async update(id, data) {
-        return await http.put('/user/' + id).send(data);
-    }
-
-    async delete(id) {
-        return await http.del('/product/' + id);
-    }
-}
-
-
--- a/src/store/index.js
+++ b/src/store/index.js
@ -3,7 +3,6 @@ import {Authentication} from "./authentication";
 import {User} from "./user";
 import {Membership} from "./membership";
 import {Product} from "./product";
-import {Categories} from "./categories";
 import {TokenUtil} from "../utils/token";

 export class Store {
@ -12,7 +11,6 @@ export class Store {
    user = new User(this);
    membership = new Membership(this);
    product = new Product(this);
-    categories = new Categories(this);

    constructor() {
        TokenUtil.loadToken();
--- a/src/store/product.js
+++ b/src/store/product.js
@ -5,33 +5,66 @@ export class Product {
    page = 0;
    pageSize = 10
    data = [];
-    total_data = 0
+    total_data = 0;
+    filterCategory = null;
+
+    pageCategories = 0;
+    pageSizeCategories = 10
+    dataCategories = [];
+    total_dataCategories = 0;
+
+    pageSubCategories = 0;
+    pageSizeSubCategories = 10
+    dataSubCategories = [];
+    total_dataSubCategories = 0;
+
+    visibleModal = false;

    constructor(ctx) {
        this.ctx = ctx;
        makeAutoObservable(this);
    }

-    @action
    async getData() {
-        const response = await http.get(`/product?page=${this.page}&pageSize=${this.pageSize}`);
+        const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);

        this.data = response.body.data ?? []
        this.total_data = response.body.total_data ?? 0
    }

-    @action
-    async create(data) {
-        return await http.post('/product').send(data)
+    async getDataSubCategories() {
+        const response = await http.get(`/product/sub-categories?pageSize=${this.pageSizeSubCategories}`);
+        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
+        }
    }

    @action
+    async create(data) {
+        const response = await http.post('/product', data);
+        await this.getData();
+        return response;
+    }
+
    async update(id, data) {
-        return await http.put('/user/' + id).send(data);
+        const response = await http.put(`/product/${id}`, data);
+        await this.getData();
+        return response;
    }

    async delete(id) {
-        return await http.del('/product/' + id);
+        const response = await http.del(`/product/${id}`);
+        await this.getData();
+        return response;
    }
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -7784,7 +7784,7 @@ lodash.uniq@^4.5.0:

 lodash@^4.17.21:
  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

 loglevel@^1.6.8: