Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

2021-12-24 10:49:42 +07:00 · 2021-12-24 10:49:42 +07:00 · c715069d63
commit c715069d63
parent c371a727b1 fbad2d68e8
7 changed files with 341 additions and 248 deletions
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@ -108,12 +108,7 @@ export const ProductComponent = observer((props) => {
      render: (text, record) => (
        <Button
            onClick={async () => {
-            await store.product.getDetail(record.product_id);
-            await store.product.getDetailProduct(record.product_id);
-            history.push(
-              LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
-            );
-            //console.log(record.product_id);
+              history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
            }}
          >
            Detail
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, message, Row, Space, Table, Tag, Typography,} from "antd";
+import {Button, Card, Col, message, Row, Space, Table, Typography,} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
@ -104,6 +104,11 @@ export const DetailUser = observer(() => {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
    },
    {
      title: "Transaction Date",
@ -117,19 +122,6 @@ export const DetailUser = observer(() => {
        );
      },
    },
-    {
-      title: "Status",
-      dataIndex: "isActive",
-      key: "isActive",
-      render: (text, record) => (
-          <Tag
-              color={store.membership.dataDetail.isActive === true ? "processing" : "#E3E8EE"}
-              style={{color: "#4F566B"}}
-          >
-            {store.membership.dataDetail.isActive === true ? " ACTIVE" : "INACTIVE"}
-          </Tag>
-      ),
-    },
  ];

  const routeData = [
@ -142,8 +134,8 @@ export const DetailUser = observer(() => {
      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
    },
    {
-      route: LINKS.USER_DETAIL,
-      name: <span style={{ fontWeight: "bold" }}>Detail Anggota</span>,
+      route: LINKS.USER_DETAIL.replace(":id", id),
+      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
    },
  ];

@ -194,22 +186,19 @@ export const DetailUser = observer(() => {
            </Row>
          </Col>
          <Col lg={12} xs={24}>
-            <Title strong level={3}>Action User Detail</Title>
-            <Space
+            {store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>}
+            {store.authentication.userData.role === "Admin" && <Space
                size="middle"
                align={"center"}
                wrap={true}
                style={{textAlign: 'center'}}
            >
-              {store.authentication.userData.role === "Admin" &&
              <Button
                  type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
                  onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
              >
                {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
              </Button>
-              }
-              {store.authentication.userData.role === "Admin" &&
              <Button
                  onClick={() => {
                    setInitialData({
@ -225,8 +214,6 @@ export const DetailUser = observer(() => {
              >
                Edit
              </Button>
-              }
-              {store.authentication.userData.role === "Admin" &&
              <Button
                  onClick={() => {
                    setInitialData({
@ -242,8 +229,7 @@ export const DetailUser = observer(() => {
              >
                Ganti Password
              </Button>
-              }
-            </Space>
+            </Space>}
          </Col>
        </Row>
        <Row>
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Input, message, Row, Upload} from "antd";
-import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
+import {Button, Card, Col, Form, Input, message, Modal, Row, Select, Upload} from "antd";
+import {FilterOutlined, PlusOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@ -9,15 +9,22 @@ import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";

 const {Search} = Input;
+const {Option} = Select;

 export const Product = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const [loading, setLoading] = useState(false);
+  const [visibleModalUpload, setVisibleModalUpload] = useState(false);
+  const [excel, setExcel] = useState("");
+  const [fileList, setFileList] = useState([]);
+  const [form] = Form.useForm();

  useEffect(() => {
    const init = async () => {
      try {
+        store.supplier.page = 0;
+        store.supplier.pageSize = 1000;
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.supplier.getData(),
@ -37,6 +44,10 @@ export const Product = observer(() => {
    };

    init();
+
+    return () => {
+      store.supplier.pageSize = 10;
+    };
  }, []);

  const routeData = [
@ -73,16 +84,21 @@ export const Product = observer(() => {
  const uploadHandler = async (args) => {
    const file = args.file;
    try {
-      const responseUpload = await store.product.uploadExcel(file);
+      const response = await store.product.uploadExcel(file);

-      if (responseUpload.status === 201) {
+      if (response.status === 201) {
        message.success("Success upload excel!");
      } else {
        message.error("Failed upload excel!");
      }

-      setLoading(false);
-      const responseUploadProduct = await handleUploadProduct(responseUpload);
+      setFileList([{
+        uid: '-1',
+        name: response.body.filename,
+        status: 'done',
+        url: '',
+      }]);
+      setExcel(response.body.filename);
    } catch (e) {
      setLoading(false);
      message.error("Failed upload excel!");
@ -99,33 +115,45 @@ export const Product = observer(() => {

  const handleUploadProduct = async (data) => {
    try {
-      const response = await store.product.uploadProduct({fileName: data.body.filename});
+      const response = await store.product.uploadProduct(data);

      if (response.status === 201) {
        message.success("Success Create Product by Excel!");
      } else {
        message.error("Failed Create Product by Excel!");
      }
-      setLoading(false);
-      await store.product.getData();
      return response;
    } catch (e) {
      setLoading(false);
      message.error("Failed Create Product by Excel!");
    }
-  }
+  };

-  const loadingState = (
-      <div>
-        {loading ? <LoadingOutlined/> : null}
-      </div>
-  );
+  const handleCancel = () => {
+    form.resetFields();
+    setFileList([]);
+    setExcel("");
+    setVisibleModalUpload(false);
+  };
+
+  const handleSubmit = async (data) => {
+    const request = {
+      fileName: excel,
+      supplierCode: data.supplierCode
+    };
+    const responseUploadProduct = await handleUploadProduct(request);
+
+    await store.product.getData();
+    setLoading(false);
+    setFileList([]);
+    setExcel("");
+    setVisibleModalUpload(false);
+  };

  return (
      <div className={["ppob-container"].join(" ")}>
        <BreadcumbComponent data={routeData}/>
        <Card>
-          {store.authentication.userData.role !== "Admin" && (
              <div>
                <Row style={{marginBottom: 20}}>
                  <Col span={12}>
@ -155,42 +183,105 @@ export const Product = observer(() => {
                    }}
                  /> */}

-                      <div
+                      {store.authentication.userData.role == "Admin" && <div
                          style={{
                            display: store.ui.mediaQuery.isMobile ? "" : "flex",
                            justifyContent: "flex-end",
                            textAlign: "right",
                          }}
+                      >
+                        <Button
+                            disabled={visibleModalUpload}
+                            style={{
+                              marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                              marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
+                            }}
+                            icon={<PlusOutlined/>}
+                            onClick={() => setVisibleModalUpload(true)}
+                        >
+                          Tambah Produk
+                        </Button>
+                      </div>}
+                    </div>
+                  </Col>
+                </Row>
+              </div>
+          <ProductComponent/>
+        </Card>
+
+        <Modal
+            visible={visibleModalUpload}
+            title={"Upload Excel Product"}
+            okText={"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">
+            <Form.Item
+                name="fileName"
+                label="Upload Excel Product"
+                rules={[{required: true, message: "Please Upload Excel Product!"}]}
            >
              <Upload
-                            showUploadList={false}
+                  fileList={fileList}
                  onChange={handleChange}
                  beforeUpload={(file) => beforeUpload(file)}
                  customRequest={(args) => uploadHandler(args)}
                  onRemove={(file) => {
                    setLoading(false);
+                    setFileList([]);
+                    setExcel("");
+                  }}
+              >
+                <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "center",
                    }}
                >
                  <Button
                      disabled={loading}
                      style={{
                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
                      }}
                      icon={<UploadOutlined/>}
                  >
                    Upload Product
                  </Button>
+                </div>
              </Upload>
-                        {loadingState}
-                      </div>
-                    </div>
-              </Col>
-            </Row>
-          </div>
-        )}
-        <ProductComponent />
-      </Card>
+            </Form.Item>
+            <Form.Item
+                name="supplierCode"
+                label="Supplier Code"
+                rules={[{required: true, message: "Please input Supplier Code!"}]}
+            >
+              <Select>
+                {store.supplier.data.map(data => (
+                    <Option key={data.id} value={data.code}>
+                      {data.name}
+                    </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
      </div>
  );
 });
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@ -1,10 +1,9 @@
 import React, {useContext, useEffect} from "react";
-import { Button, Card, Col, Row, Table, Typography } from "antd";
+import {Card, Col, Row, Table, Typography} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import { FilterOutlined } from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
 import {useParams} from "react-router-dom";
@ -26,7 +25,7 @@ export const ProductDetail = observer(() => {
      name: <span style={{ fontWeight: "bold" }}>Produk</span>,
    },
    {
-      route: LINKS.PRODUCT_DETAIL,
+      route: LINKS.PRODUCT_DETAIL.replace(':id', `${id}`),
      name: <span style={{fontWeight: "bold"}}>Detail Produk</span>,
    },
  ];
@ -35,21 +34,18 @@ export const ProductDetail = observer(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
-        //store.authentication.getProfile(),
-        store.product.getDetail(id),
+        store.product.getPriceHistoryByProduct(id),
        store.product.getDetailProduct(id),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

-  //console.log(id)
  const columns = [
    {
      title: "Markup Price",
      dataIndex: "mark_up_price",
      key: "mark_up_price",
-      width: "20%",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
@ -60,7 +56,6 @@ export const ProductDetail = observer(() => {
      title: "Price",
      dataIndex: "price",
      key: "price",
-      width: "50%",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
@ -68,12 +63,22 @@ export const ProductDetail = observer(() => {
        }).format(text),
    },
    {
-      title: "Transaction Date",
+      title: "Tanggal Berlaku",
      dataIndex: "startDate",
      key: "startDate",
-      render: (text, record) => {
+      render: (text) => {
        return (
-          <Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</Text>
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
+        );
+      },
+    },
+    {
+      title: "Tanggal Berakhir",
+      dataIndex: "endDate",
+      key: "endDate",
+      render: (text) => {
+        return (
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}</Text>
        );
      },
    },
@ -105,47 +110,25 @@ export const ProductDetail = observer(() => {
                <Text strong>Kode</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.product.dataDetailProduct.code}</Text>
+                <Text>{store.product?.dataDetailProduct?.code}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Nama Produk</Text>
              </Col>
              <Col span={10}>
-                <Text>{store.product.dataDetailProduct.name}</Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Harga Beli</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                  }).format(store.product.dataDetailProduct.basePrice)}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Harga Jual</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                  }).format(store.product.dataDetailProduct.price)}
-                </Text>
+                <Text>{store.product?.dataDetailProduct?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Supplier</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.product.dataDetailProduct.supplier.name}</Text>
+                <Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.product.dataDetailProduct.status}</Text>
+                <Text>{store.product?.dataDetailProduct?.status}</Text>
              </Col>
            </Row>
          </Col>
@ -175,8 +158,23 @@ export const ProductDetail = observer(() => {
              </Button> */}
              <Table
                  columns={columns}
-                dataSource={store.product.dataDetail}
+                  dataSource={store.product.dataPriceHistory}
                  bordered
+                  pagination={{
+                    pageSize: store.product.pageSizePriceHistory,
+                    total: store.product.totalDataPriceHistory,
+                    current: store.product.pagePriceHistory + 1,
+                    showSizeChanger: true,
+                    simple: false,
+                  }}
+                  onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.product.pageSizePriceHistory = page.pageSize;
+                    store.product.pagePriceHistory = pageNumber - 1;
+                    modalLoader.setLoading(true);
+                    await store.product.getPriceHistoryByProduct(id);
+                    modalLoader.setLoading(false);
+                  }}
              />
            </div>
          </Col>
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@ -60,7 +60,7 @@ export const Profile = observer(() => {
      key: 'created_at',
      render: (text, record) => {
        return (
-          <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
+          <Text>{format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')}</Text>
        )
      },
    },
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@ -1,8 +1,7 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useStore} from "../../utils/useStore";
-import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
+import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
-import { MoneyCollectOutlined } from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";

 const {Search} = Input;
@ -11,6 +10,8 @@ const { Option } = Select;
 export const Product = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);

  useEffect(() => {
    const init = async () => {
@ -41,11 +42,12 @@ export const Product = observer(() => {
    modalLoader.setLoading(false);
  };

-  const handleBuyProduct = async (data) => {
+  const handleBuyProduct = async (data, productCode) => {
    modalLoader.setLoading(true);
    try {
      const response = await store.transaction.buyProduct({
-        productCode: data,
+        ...data,
+        productCode: productCode,
      });
      if (response.status === 201) {
        message.success(response?.body?.message || "Berhasil Beli Produk");
@ -60,9 +62,15 @@ export const Product = observer(() => {
      console.log(e, "apa errornya");
      message.error("Gagal Beli Product");
    }
+    setVisibleModalBuy(false);
    modalLoader.setLoading(false);
  };

+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
+
  return (
      <div>
        <Row>
@ -107,19 +115,7 @@ export const Product = observer(() => {
            <Col key={index} xs={24} md={16} lg={8}>
              <Card
                onClick={() => {
-                  Modal.confirm({
-                    title: `Are you sure buy ${item.product_name}?`,
-                    icon: <MoneyCollectOutlined />,
-                    okText: "Confirm",
-                    cancelText: "Cancel",
-                    okType: "primary",
-                    onOk() {
-                      handleBuyProduct(item.product_code);
-                    },
-                    onCancel() {
-                      console.log("Cancel");
-                    },
-                  });
+                  setVisibleModalBuy(true)
                }}
                hoverable
                style={{
@ -139,17 +135,43 @@ export const Product = observer(() => {
                  }).format(item?.price)}
                </span>
              </Card>
+
+              <Modal
+                  visible={visibleModalBuy}
+                  title={`Are you sure buy ${item.product_name}?`}
+                  okText={"Confirm"}
+                  cancelText="Cancel"
+                  onCancel={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                  onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                          console.log(values, "isi form");
+                          handleBuyProduct(values, item.product_code);
+                          form.resetFields();
+                        })
+                        .catch((info) => {
+                          console.error("Validate Failed:", info);
+                        });
+                  }}
+              >
+                <Form form={form} layout="vertical">
+                  <Form.Item
+                      name="phoneNumber"
+                      label="Phone Number"
+                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                  >
+                    <Input/>
+                  </Form.Item>
+                </Form>
+              </Modal>
            </Col>
          ))}
        </Row>
      )}
-      {/* {store.transaction.data.length !== 0 && (
-          <Col style={{textAlign: "right", marginTop: "1em"}}>
-            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-              Beli Sekarang
-            </Button>
-          </Col>
-      )} */}
    </div>
  );
 });
--- a/src/store/product.js
+++ b/src/store/product.js
@ -13,7 +13,7 @@ export class Product {
    uploadBtnProduct = false;

    pageCategories = 0;
-    pageSizeCategories = 10
+    pageSizeCategories = 100;
    dataCategories = [];
    total_dataCategories = 0;

@ -22,11 +22,13 @@ export class Product {
    dataSubCategories = [];
    total_dataSubCategories = 0;
    filterCategory = null;
-    dataDetail=[]
-    dataDetailProduct=[]

-    pageGetDetail=0
-    supplier=null
+    dataPriceHistory = [];
+    totalDataPriceHistory = 0;
+    pagePriceHistory = 0;
+    pageSizePriceHistory = 10
+
+    dataDetailProduct = {};

    constructor(ctx) {
        this.ctx = ctx;
@ -72,22 +74,21 @@ export class Product {
            console.error(e);
        }
    }
-    async getDetail(id) {
+
+    async getPriceHistoryByProduct(id) {
        try {
-            const response = await http.get(`/product/price-history/${id}?page=${this.pageGetDetail}&supplier=${this.supplier}`);
-            //console.log(response,' Detail')
-            this.dataDetail = response.body.data
-            this.total_data = response?.body?.count ?? 0
+            const response = await http.get(`/product/price-history/${id}?page=${this.pagePriceHistory}&pageSize${this.pageSizePriceHistory}`);
+            this.dataPriceHistory = response.body.data
+            this.totalDataPriceHistory = response?.body?.count ?? 0
        } catch (e) {
            console.error(e);
        }
    }
+
    async getDetailProduct(id) {
        try {
            const response = await http.get(`/product/${id}`);
-            //console.log(response,' Detail Product')
            this.dataDetailProduct = response.body.data
-            this.total_data = response?.body?.count ?? 0
        } catch (e) {
            console.error(e);
        }