Pages Supplier

2021-12-16 16:11:36 +07:00 · 2021-12-16 16:11:36 +07:00 · ac7e5714e7
commit ac7e5714e7
parent 6f743301e4
7 changed files with 422 additions and 441 deletions
--- a/src/component/CommissionComponent.js
+++ b/src/component/CommissionComponent.js
@ -1,5 +1,14 @@
 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,
+} from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
@ -12,7 +21,7 @@ export const CommissionComponent = 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);

@ -31,16 +40,13 @@ export const CommissionComponent = observer((props) => {
  }, []);

  const handleEditButton = (data) => {
-        console.log(data, "isi data")
+    console.log(data, "isi data");
    form.setFieldsValue({
-            name: data.name,
-            npwp: data.npwp,
-            address: data.address,
-            
+      value: data.commission,
    });
    store.commission.visibleModalCommission = true;
    setIdData(data.id);
-    }
+  };

  const columns = [
    {
@ -49,41 +55,16 @@ export const CommissionComponent = observer((props) => {
      key: "name",
    },
    {
-          title: "Npwp",
-          dataIndex: "npwp",
-          key: "npwp",
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-        },
-        {
-          title: "Status",
-          dataIndex: "status",
-          key: "status",
-          render: (text, record) => (
-            <Tag
-              color={record?.status === true ? "processing" : "#E3E8EE"}
-              style={{ color: "#4F566B" }}
-            >
-              {record?.status === true ? " ACTIVE" : "INACTIVE"}
-            </Tag>
-          ),
+      title: "Amount",
+      dataIndex: "commission",
+      key: "commission",
    },
    {
      title: "Action",
      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>
        </Space>
      ),
    },
@ -101,56 +82,40 @@ export const CommissionComponent = observer((props) => {
    }
  };

-    const handleDelete = (id) => {
-        Modal.confirm({
-            title: "Are you sure delete this record?",
-            icon: <ExclamationCircleOutlined/>,
-            okText: "Yes",
-            okType: "primary",
-            cancelText: "Cancel",
-            onOk() {
-                return deleteData(id);
-            },
-            onCancel() {
-                console.log("Cancel");
-            },
-        });
+  const handleCancel = () => {
+    setIdData("");
+    store.commission.visibleModalCommission = false;
  };

-    const handleCancel = () => {
-        setIdData('')
-        store.commission.visibleModalCommission = false;
-    }
-
  const handleSubmit = async (data) => {
-        console.log(data, "isi data2")
-        if (idData !== '') {
+    console.log(data, "isi data2");
+    if (idData !== "") {
      setConfirmLoading(true);
      try {
-                await store.commission.update(idData, data)
-                message.success("Success Update Data Member")
+        await store.commission.update(idData, data);
+        message.success("Success Update Data Member");
      } catch (e) {
-                message.error("Failed Update Data Member")
+        message.error("Failed Update Data Member");
      }
      setConfirmLoading(false);
      store.commission.visibleModalCommission = false;
-            setIdData('');
+      setIdData("");
      form.resetFields();
    } else {
      setConfirmLoading(true);
      try {
-                await store.commission.create(data)
-                message.success("Success Add New Member")
+        await store.commission.create(data);
+        message.success("Success Add New Member");
      } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
+        console.log(e, "apa errornya");
+        message.error("Failed Add Member");
      }
      setConfirmLoading(false);
      store.commission.visibleModalCommission = false;
-            setIdData('');
+      setIdData("");
      form.resetFields();
    }
-    }
+  };

  return (
    <div>
@ -164,7 +129,7 @@ export const CommissionComponent = 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;
@ -189,7 +154,7 @@ export const CommissionComponent = observer((props) => {
          form
            .validateFields()
            .then((values) => {
-                            console.log(values, "isi form")
+              console.log(values, "isi form");
              handleSubmit(values);
              form.resetFields();
            })
@ -198,42 +163,11 @@ export const CommissionComponent = observer((props) => {
            });
        }}
      >
-                <Form
-                    form={form}
-                    layout="vertical"
-                >
+        <Form form={form} layout="vertical">
          <Form.Item
-                    name="name"
-                    label="Name"
-                    rules={[{required: true, message: 'Please input name!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="owner"
-                    label="Owner"
-                    rules={[{required: true, message: 'Please input owner!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="password_account"
-                    label="Password Account"
-                    rules={[{required: true, message: 'Please input password account!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="npwp"
-                    label="Npwp"
-                    rules={[{required: true, message: 'Please input npwp!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="address"
-                    label="address"
-                    rules={[{required: true, message: 'Please input password!'}]}
+            name="value"
+            label="Commission"
+            rules={[{ required: true, message: "Please input commission!" }]}
          >
            <Input />
          </Form.Item>
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@ -1,43 +1,23 @@
 import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-} from "antd";
+import { Button, Form, Input, message, Modal, 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 { TopupsaldoModal } from "./TopupsaldoModal";

 export const SupplierComponent = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();
-  //const [formEdit] = Form.useForm();
-  const { Option } = Select;
  const history = useHistory();
  const [idData, setIdData] = useState("");
-  const [confirmLoading, setConfirmLoading] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [code, setCode] = useState("");

  useEffect(() => {
    const init = async () => {
-      try {
-        setIsLoading(true);
      await store.supplier.getData();
-        setIsLoading(false);
-      } catch (e) {
-        setIsLoading(false);
-      }
    };
-
    init();
  }, []);

@ -52,6 +32,14 @@ export const SupplierComponent = observer((props) => {
    setIdData(data.id);
  };

+  const handleTopup = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      code: data.code,
+    });
+    store.supplier.visibleModalTransaction = true;
+    setCode(data.code);
+  };
  const changeStatus = async (id, isActive) => {
    const status = isActive ? "inactive" : "active";
    const status2 = isActive ? "Inactivating" : "Activating";
@ -78,6 +66,12 @@ export const SupplierComponent = observer((props) => {
      dataIndex: "code",
      key: "code",
    },
+    ,
+    {
+      title: "Saldo",
+      dataIndex: "saldo",
+      key: "saldo",
+    },
    {
      title: "Status",
      dataIndex: "status",
@ -85,8 +79,7 @@ export const SupplierComponent = observer((props) => {
      render: (text, record) => (
        <Tag
          color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: "pointer" }}
-          onClick={() => changeStatus(record?.id, record?.status)}
+          style={{ color: "#4F566B"}}
        >
          {record?.status === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
@ -98,7 +91,13 @@ export const SupplierComponent = observer((props) => {
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => handleEditButton(record)}>Edit</Button>
-          <Button onClick={() => handleDelete(record.id)}>Delete</Button>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.status)}
+          >
+            {record?.status === true ? "INACTIVE" : "ACTIVE"}
+          </Button>
+          <Button onClick={() => handleTopup(record)}> Top Up Saldo</Button>
        </Space>
      ),
    },
@ -140,7 +139,6 @@ export const SupplierComponent = observer((props) => {
  const handleSubmit = async (data) => {
    console.log(data, "isi data2");
    if (idData !== "") {
-      setConfirmLoading(true);
      try {
        await store.supplier.update(idData, data);
        message.success("Success Update Data Member");
@ -148,21 +146,19 @@ export const SupplierComponent = observer((props) => {
      } catch (e) {
        message.error("Failed Update Data Member");
      }
-      setConfirmLoading(false);
+
      store.supplier.visibleModalSupplier = false;
      setIdData("");
      form.resetFields();
    } else {
-      setConfirmLoading(true);
      try {
        await store.supplier.create(data);
        message.success("Success Add New Member");
-        //await store.supplier.getData()
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
-      setConfirmLoading(false);
+
      store.supplier.visibleModalSupplier = false;
      setIdData("");
      form.resetFields();
@ -187,12 +183,9 @@ export const SupplierComponent = observer((props) => {
          let pageNumber = page.current;
          store.supplier.pageSize = page.pageSize;
          store.supplier.page = pageNumber - 1;
-          // store.membership.isLoading = true;
          await store.supplier.getData();
-          // store.membership.isLoading = false;
        }}
      />
-
      <Modal
        visible={store.supplier.visibleModalSupplier}
        title={idData ? "Edit Supplier" : "Create a new Supplier"}
@ -232,6 +225,7 @@ export const SupplierComponent = observer((props) => {
          </Form.Item>
        </Form>
      </Modal>
+      <TopupsaldoModal code={code} />
    </div>
  );
 });
--- a/src/component/TopupsaldoModal.js
+++ b/src/component/TopupsaldoModal.js
@ -0,0 +1,74 @@
+import React from "react";
+import { Form, Input, message, Modal } from "antd";
+import { observer } from "mobx-react-lite";
+import { useStore } from "../utils/useStore";
+
+export const TopupsaldoModal = observer((props) => {
+  const store = useStore();
+  const [form] = Form.useForm();
+
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, "isi data2");
+
+    try {
+      await store.supplier.createTransaction(data);
+      message.success("Success Top Up");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Top Up");
+    }
+
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
+  return (
+    <div>
+      <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"
+          initialValues={{ supplier: props.code }}
+        >
+          <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>
+  );
+});
--- a/src/pages/Config/Commission.js
+++ b/src/pages/Config/Commission.js
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@ -29,11 +29,6 @@ export const Commission = observer(() => {
    init();
  }, []);

-    // const handleChangeTabPane = async (key) => {
-    //     store.product.filterCategory = key;
-    //     console.log(key);
-    // };
-
  const routeData = [
    {
      route: LINKS.HOME,
@ -41,7 +36,7 @@ export const Commission = observer(() => {
    },
    {
      route: LINKS.COMMISSION,
-            name: <span style={{fontWeight: 'bold'}}>Commission</span>,
+      name: <span style={{ fontWeight: "bold" }}>Commission</span>,
    },
  ];

@ -49,14 +44,14 @@ export const Commission = observer(() => {
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
-                <Row style={{marginBottom: 20}}>
-                    <Col span={12}>
+        {/* <Row style={{ marginBottom: 20 }}> */}
+          {/* <Col span={12}>
            <Button>
              <FilterOutlined />
              Filter
            </Button>
-                    </Col>
-                    <Col span={12} style={{textAlign: "right"}}>
+          </Col> */}
+          {/* <Col span={24} style={{ textAlign: "right" }}>
            <Search
              placeholder="input search text"
              style={{
@ -65,25 +60,13 @@ export const Commission = observer(() => {
                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
              }}
            />
-                        <Button onClick={() => store.partner.visibleModalPartner = true}>
+            <Button onClick={() => (store.commission.visibleModalCommission = true)}>
              <PlusSquareOutlined /> New
            </Button>
          </Col>
-                </Row>
-                <Tabs
-                    //onChange={handleChangeTabPane}
-                    size="default"
-                    tabBarGutter="50"
-                >
+        </Row> */}
+        <div style={{marginTop:20}}> <CommissionComponent/></div>
       
-                        <TabPane
-                            tab="Commision"
-                            key="1"
-                        >
-                            <CommissionComponent/>
-                        </TabPane>
-                    ))
-                </Tabs>
      </Card>
    </div>
  );
--- a/src/pages/Config/Supplier.js
+++ b/src/pages/Config/Supplier.js
@ -47,28 +47,6 @@ export const Supplier = observer(() => {
    init();
  }, []);

-  // const handleChangeTabPane = async (key) => {
-  //     store.product.filterCategory = 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 = [
    {
      route: LINKS.HOME,
@ -85,13 +63,13 @@ export const Supplier = observer(() => {
      <BreadcumbComponent data={routeData} />
      <Card>
        <Row style={{ marginBottom: 20 }}>
-          <Col span={12}>
+          {/* <Col span={12}>
            <Button>
              <FilterOutlined />
              Filter
            </Button>
-          </Col>
-          <Col span={12} style={{ textAlign: "right" }}>
+          </Col> */}
+          <Col span={24} style={{ textAlign: "right" }}>
            <Search
              placeholder="input search text"
              style={{
@ -102,76 +80,14 @@ export const Supplier = observer(() => {
              onSearch={(value) => console.log(value)}
            />
            <Button
-              //style={{ marginLeft: "10px" }}
              onClick={() => (store.supplier.visibleModalSupplier = true)}
            >
              <PlusSquareOutlined /> New
            </Button>
          </Col>
        </Row>
-        <Col span={24} style={{ textAlign: "right" }}>
-          <Button
-            onClick={() => (store.supplier.visibleModalTransaction = true)}
-          >
-            <DownloadOutlined /> Top Up Saldo
-          </Button>
-        </Col>
-        <Tabs
-          //onChange={handleChangeTabPane}
-          size="default"
-          tabBarGutter="50"
-        >
-          <TabPane tab="Supplier" key="1">
        <SupplierComponent />
-          </TabPane>
-          ))
-        </Tabs>
      </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>
  );
 });
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -12,6 +12,8 @@ import {
  Space,
  Table,
  Tag,
+  Form,
+  Select,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@ -19,14 +21,16 @@ import {
  ExclamationCircleOutlined,
  FilterOutlined,
  PlusSquareOutlined,
+  DownloadOutlined,
 } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";

 const { Search } = Input;
-
+const { Option } = Select;
 export const Membership = observer(() => {
+  const [form] = Form.useForm();
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
@ -62,6 +66,24 @@ export const Membership = observer(() => {
      message.error(`Failed ${status2} Membership`);
    }
  };
+  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 columns = [
    {
@ -219,6 +241,19 @@ export const Membership = observer(() => {
              </Button>
            </Col>
          </Row>
+          <Col
+            span={24}
+            style={{
+              textAlign: "right",
+              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
+            }}
+          >
+            <Button
+              onClick={() => (store.supplier.visibleModalTransaction = true)}
+            >
+              <DownloadOutlined /> Top Up Saldo
+            </Button>
+          </Col>
          {store.ui.mediaQuery.isDesktop && (
            <Table
              key="1"
@ -306,6 +341,51 @@ export const Membership = observer(() => {
          )}
        </div>
      </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>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
--- a/src/store/commission.js
+++ b/src/store/commission.js
@ -7,7 +7,7 @@ export class Commission {
    data = [];
    total_data = 0;
    filterCategory = null;
-    visibleModalSupplier = false;
+    visibleModalCommission = false;

    pageCategories = 0;
    pageSizeCategories = 10
@ -37,7 +37,7 @@ export class Commission {
    }

    async update(id, data) {
-        const response = await http.put(`/product/${id}`).send(data);
+        const response = await http.put(`/config/commission/${id}`).send(data);
        await this.getData();
        return response;
    }