Pages Product

2021-12-09 20:04:37 +07:00 · 2021-12-09 20:04:37 +07:00 · 7852e12d42
commit 7852e12d42
parent f27ddcfe90
8 changed files with 482 additions and 106 deletions
--- a/src/config/app.js
+++ b/src/config/app.js
@ -1,5 +1,5 @@
 export const appConfig = {
-    apiUrl: 'https://api-reconcile.movic.id'
+    apiUrl: 'http://localhost:3222/v1'
 };

 //export default appConfig;
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@ -1,16 +1,30 @@
-import React from "react";
-import {Button, Card, Col, Input, Row, Tabs} from "antd";
+import React,{useState,useEffect} from "react";
+import {Button, Card, Col, Input, Row, Tabs,message} 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";
+
+
+

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

-export const Product = () => {
+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) => {
    console.log(key);
  };
+ 
  const routeData = [
    {
      route: "/app/home",
@ -21,6 +35,32 @@ export const Product = () => {
      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>
        <BreadcumbComponent data={routeData}/>
@ -37,7 +77,7 @@ export const Product = () => {
                  placeholder="input search text"
                  style={{width: 200, marginRight: 10}}
              />
-              <Button>
+              <Button onClick={() => setVisibleModal(true)}>
                <PlusSquareOutlined/> New
              </Button>
            </Col>
@ -65,6 +105,16 @@ export const Product = () => {
            </TabPane>
          </Tabs>
        </Card>
+        <PulsaModal visible={visibleModal}
+                         confirmLoading={confirmLoading}
+                         initialData={initialData}
+                         onCreate={async (data) => {
+                           onSubmit(data)
+                         }}
+                         onCancel={() => {
+                           setInitialData({})
+                           setVisibleModal(false);
+                         }}/>
      </div>
  );
-};
+});
--- a/src/pages/Product/Pulsa.js
+++ b/src/pages/Product/Pulsa.js
@ -1,38 +1,77 @@
-import React from "react";
-import {Button, Space, Table, Tag} from "antd";
+import React, { useEffect, useState, useParams } from "react";
+import { Button, Space, Table, Tag, Modal, message } 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";

-export const Pulsa = () => {
+export const Pulsa = observer(() => {
+  const store = useStore();
+  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",
-            dataIndex: "kode",
-            key: "kode",
+      dataIndex: "code",
+      key: "code",
    },
    {
      title: "Produk",
-            dataIndex: "produk",
-            key: "produk",
+      dataIndex: "name",
+      key: "name",
    },
    {
      title: "Harga Beli",
-            dataIndex: "harga_beli",
-            key: "harga_beli",
+      dataIndex: "price",
+      key: "price",
    },
    ,
    {
      title: "Harga Jual",
-            dataIndex: "harga_jual",
-            key: "harga_beli",
+      dataIndex: "mark_up_price",
+      key: "mark_up_price",
    },
    {
      title: "Gangguan",
-            dataIndex: "gangguan",
-            key: "gangguan",
+      dataIndex: "status",
+      key: "status",
+      render: (text, record) => (
+        <Tag
+          color={record?.status === "AKTIF" ?  "processing" : "#E3E8EE" }
+          style={{ color: "#4F566B" }}
+        >
+          {record?.status}
+        </Tag>
+      ),
    },
    {
      title: "Tersedia",
      dataIndex: "tersedia",
      key: "tersedia",
+      render: (text, record) => (
+        <Tag
+          color={record?.status === "AKTIF" ?  "processing" : "#E3E8EE" }
+          style={{ color: "#4F566B" }}
+        >
+          {record?.status === "AKTIF" ? " Ya" : "Tidak"}
+        </Tag>
+      ),
    },
    {
      title: "Action",
@ -40,61 +79,51 @@ export const Pulsa = () => {
      render: (text, record) => (
        <Space size="middle">
          <Button>Edit</Button>
-                    <Button>Delete</Button>
+          <Button
+            onClick={async () => {
+              handleDelete(record.id);
+            }}
+          >
+            Delete
+          </Button>
        </Space>
      ),
    },
  ];
-    const dataSource = [
-        {
-            key: "1",
-            kode: "BROP2",
-            produk: "DATA AXIS 2GB-60HR",
-            harga_beli: "Rp.10.000",
-            harga_beli: "Rp.10.000",
-            harga_jual: "Rp.40.000",
-            gangguan: <Tag color="processing">Active</Tag>,
-            tersedia: <Tag color="processing">Ya</Tag>,
-        },
-        {
-            key: "2",
-            kode: "-",
-            produk: "-",
-            harga_beli: "-",
-            harga_beli: "-",
-            harga_jual: "-",
-            gangguan: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Gangguan</Tag>,
-            tersedia: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Tidak</Tag>,
-        },
-        {
-            key: "3",
-            kode: "-",
-            produk: "-",
-            harga_beli: "-",
-            harga_beli: "-",
-            harga_jual: "-",
-            gangguan: <Tag color="processing">Active</Tag>,
-            tersedia: <Tag color="processing">Ya</Tag>,
-        },
-        {
-            key: "4",
-            kode: "-",
-            produk: "-",
-            harga_beli: "-",
-            harga_beli: "-",
-            harga_jual: "-",
-            gangguan: <Tag color="processing">Active</Tag>,
-            tersedia: <Tag color="processing">Ya</Tag>,
+  const deleteData = async (id) => {
+    try {
+      console.log(id);
+      await store.product.delete(id);
+      message.success("Data Berhasil Dihapus");
+      history.push("/app/product");
+    } catch (err) {
+      console.log("error", err);
+      message.error("Gagal menghapus");
    }
-    ];
+  };
+  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");
+      },
+    });
+  };
  return (
    <div>
      <Table
        style={{ textAlign: "center" }}
        columns={columns}
-                dataSource={dataSource}
+        dataSource={store.product.data}
        bordered
      />
    </div>
  );
-};
+});
--- a/src/pages/Product/PulsaModal.js
+++ b/src/pages/Product/PulsaModal.js
@ -0,0 +1,213 @@
+// import React,{useEffect,useState} from "react";
+// import { Form, Input, Modal, Select } from "antd";
+
+// export const PulsaModal =  ({ visible, onCreate, onCancel, initialData }) => {
+//   const [form] = Form.useForm();
+//   const { Option } = Select;
+// 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.categories.getData();
+//         setIsLoading(false);
+//       } catch (e) {
+//         setIsLoading(false);
+//       }
+//     };
+
+//     init();
+//   }, []);
+
+//   return (
+//     <Modal
+//     visible={visibleModal}
+//                          confirmLoading={confirmLoading}
+//                          initialData={initialData}
+//                          onCreate={async (data) => {
+//                            onSubmit(data)
+//                          }}
+//                          onCancel={() => {
+//                            setInitialData({})
+//                            setVisibleModal(false);
+//                          }}
+//       visible={visible}
+//       title={initialData.id ? "Edit Member" : "Create a new Member"}
+//       okText={initialData.id ? "Edit" : "Create"}
+//       cancelText="Cancel"
+//       onCancel={() => {
+//         form.resetFields();
+//         onCancel();
+//       }}
+//       onOk={() => {
+//         form
+//           .validateFields()
+//           .then((values) => {
+//             onCreate(values);
+//             form.resetFields();
+//           })
+//           .catch((info) => {
+//             console.log("Validate Failed:", info);
+//           });
+//       }}
+//     >
+//       <Form
+//         form={form}
+//         layout="vertical"
+//         name="form_in_modal"
+//         initialValues={initialData}
+//       >
+//         <Form.Item
+//           name="name"
+//           label="Name"
+//           rules={[{ required: true, message: "Please input name!" }]}
+//         >
+//           <Input />
+//         </Form.Item>
+//         <Form.Item
+//           name="price"
+//           label="Price"
+//           rules={[{ required: true, message: "Please input price!" }]}
+//         >
+//           <Input />
+//         </Form.Item>
+//         <Form.Item
+//           name="markUpPrice"
+//           label="Mark Up Price"
+//           rules={[{ required: true, message: "Please input mark up price!" }]}
+//         >
+//           <Input />
+//         </Form.Item>
+//         <Form.Item
+//           name="code"
+//           label="Code"
+//           rules={[{ required: true, message: "Please input code!" }]}
+//         >
+//           <Input />
+//         </Form.Item>
+//         <Form.Item
+//           name="status"
+//           label="Status"
+//           rules={[{ required: true, message: "Please select Status!" }]}
+//         >
+//           <Select placeholder="Select Status" allowClear>
+//           {store.categories.map(it => {
+//                             return <Option value={it.id}>{it.name}</Option>
+//                         })}
+//           </Select>
+//         </Form.Item>
+//       </Form>
+//     </Modal>
+//   );
+// };
+import React, { useState, useEffect } from "react";
+import { Form, Input, Modal, Select } from "antd";
+import { useStore } from "../../utils/useStore";
+
+export const PulsaModal = ({ visible, onCreate, onCancel }) => {
+  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(() => {
+    init();
+  }, []);
+
+  return (
+    <Modal
+      visible={visible}
+      title={initialData.id ? "Edit Member" : "Create a new Member"}
+      okText={initialData.id ? "Edit" : "Create"}
+      cancelText="Cancel"
+      onCancel={() => {
+        form.resetFields();
+        onCancel();
+      }}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+            form.resetFields();
+          })
+          .catch((info) => {
+            console.log("Validate Failed:", info);
+          });
+      }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="form_in_modal"
+        initialValues={initialData}
+      >
+        <Form.Item
+          name="name"
+          label="Name"
+          rules={[{ required: true, message: "Please input name!" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="price"
+          label="Price"
+          rules={[{ required: true, message: "Please input price!" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="markUpPrice"
+          label="Mark Up Price"
+          rules={[{ required: true, message: "Please input mark up price!" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="code"
+          label="Code"
+          rules={[{ required: true, message: "Please input code!" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="status"
+          label="Status"
+          rules={[{ required: true, message: "Please select Status!" }]}
+        >
+          <Select placeholder="Select Sub Category" allowClear>
+            <Option value="ACTIVE">ACTIVE</Option>
+            <Option value="INACTIVE">INACTIVE</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="subCategoriesId"
+          label="Sub Categories"
+          rules={[{ required: true, message: "Please select Sub Category!" }]}
+        >
+          <Select placeholder="Select Sub Category" allowClear>
+            {store.categories.data.map((it) => {
+              return <Option value={it.id}>{it.name}</Option>;
+            })}
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
--- a/src/store/categories.js
+++ b/src/store/categories.js
@ -0,0 +1,40 @@
+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
@ -2,12 +2,16 @@ import {UI} from "./ui";
 import {Authentication} from "./authentication";
 import {User} from "./user";
 import {Membership} from "./membership";
+import {Product} from "./product";
+import {Categories} from "./categories";

 export class Store {
    ui = new UI(this);
    authentication = new Authentication(this);
    user = new User(this);
    membership = new Membership(this);
+    product = new Product(this);
+    categories = new Categories(this);

    constructor() {
    }
--- a/src/store/product.js
+++ b/src/store/product.js
@ -0,0 +1,40 @@
+import {action, makeAutoObservable} from "mobx";
+import {http} from "../utils/http";
+
+export class Product {
+    page = 0;
+    pageSize = 10
+    data = [];
+    total_data = 0
+
+    constructor(ctx) {
+        this.ctx = ctx;
+        makeAutoObservable(this);
+    }
+
+    @action
+    async getData() {
+        const response = await http.get(`/product?page=${this.page}&pageSize=${this.pageSize}`);
+        console.log(response,'Data')
+        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('/product').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/user.js
+++ b/src/store/user.js
@ -6,7 +6,7 @@ export class User {

    @action
    async getData() {
-        this.data = (await http.get('/user')).body.data;
+        this.data = (await http.get('/product')).body.data;
    }
 }