Perbaikan Project PPOB

src/pages/Product/Product.js

@@ -1,15 +1,30 @@
-import React, {useContext, useEffect, useState} from "react";
-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";
-import {ProductComponent} from "../../component/ProductComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+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";
+import { ProductComponent } from "../../component/ProductComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -30,7 +45,7 @@ export const Product = observer(() => {
           store.supplier.getData(),
           store.category.getData(),
           store.product.getDataSubCategories(),
-          store.product.getProductPartner()
+          store.product.getProductPartner(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);
@@ -58,18 +73,26 @@ export const Product = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: "bold"}}>Produk</span>,
+      name: <span style={{ fontWeight: "bold" }}>Produk</span>,
+    },
+  ];
+
+  const dataRoute = [
+    {
+      route: LINKS.PRODUCT,
+      name: "Produk",
     },
   ];
 
   const beforeUpload = (file) => {
     let isLt2M;
     let allowedFile = [
-      "text/csv", "application/csv",
+      "text/csv",
+      "application/csv",
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
       "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
       "application/vnd.ms-excel",
-      "application/vnd.ms-excel.sheet.macroEnabled.12"
+      "application/vnd.ms-excel.sheet.macroEnabled.12",
     ];
     let isValid = allowedFile.includes(file.type);
     if (!isValid) {
@@ -93,12 +116,14 @@ export const Product = observer(() => {
         message.error("Failed upload excel!");
       }
 
-      setFileList([{
-        uid: '-1',
-        name: response.body.filename,
-        status: 'done',
-        url: '',
-      }]);
+      setFileList([
+        {
+          uid: "-1",
+          name: response.body.filename,
+          status: "done",
+          url: "",
+        },
+      ]);
       setExcel(response.body.filename);
     } catch (e) {
       setLoading(false);
@@ -107,10 +132,10 @@ export const Product = observer(() => {
   };
 
   const handleChange = (info) => {
-    if (info.file.status === 'uploading') {
+    if (info.file.status === "uploading") {
       setLoading(true);
     } else {
-      setLoading(false)
+      setLoading(false);
     }
   };
 
@@ -140,7 +165,7 @@ export const Product = observer(() => {
   const handleSubmit = async (data) => {
     const request = {
       fileName: excel,
-      supplierCode: data.supplierCode
+      supplierCode: data.supplierCode,
     };
     const responseUploadProduct = await handleUploadProduct(request);
 
@@ -152,30 +177,37 @@ export const Product = observer(() => {
   };
 
   return (
-      <div className={[""].join(" ")}>
-        <BreadcumbComponent data={routeData}/>
-        <Card>
-              <div>
-                <Row style={{marginBottom: 20}}>
-                  <Col span={12}>
-                    <Button
-                        onClick={() => {
-                          store.product.visibleModalFilterProduct = true;
-                        }}
-                    >
-                      <FilterOutlined/>
-                      Filter
-                    </Button>
-                  </Col>
-                  <Col span={12}>
-                    <div
-                        style={{
-                          display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                          justifyContent: "flex-end",
-                          textAlign: "right",
-                        }}
-                    >
-                      {/* <Search
+    <div className={[""].join(" ")}>
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Admin Partner"
+            ? routeData
+            : dataRoute
+        }
+      />
+      <Card>
+        <div>
+          <Row style={{ marginBottom: 20 }}>
+            <Col span={12}>
+              <Button
+                onClick={() => {
+                  store.product.visibleModalFilterProduct = true;
+                }}
+              >
+                <FilterOutlined />
+                Filter
+              </Button>
+            </Col>
+            <Col span={12}>
+              <div
+                style={{
+                  display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                  justifyContent: "flex-end",
+                  textAlign: "right",
+                }}
+              >
+                {/* <Search
                     placeholder="input search text"
                     style={{
                       width: store.ui.mediaQuery.isMobile ? 160 : 200,
@@ -184,105 +216,109 @@ export const Product = observer(() => {
                     }}
                   /> */}
 
-                      {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
-                  fileList={fileList}
-                  onChange={handleChange}
-                  beforeUpload={(file) => beforeUpload(file)}
-                  customRequest={(args) => uploadHandler(args)}
-                  onRemove={(file) => {
-                    setLoading(false);
-                    setFileList([]);
-                    setExcel("");
-                  }}
-              >
-                <div
+                {store.authentication.userData.role == "Admin" && (
+                  <div
                     style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "center",
+                      display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                      justifyContent: "flex-end",
+                      textAlign: "right",
                     }}
-                >
-                  <Button
-                      disabled={loading}
+                  >
+                    <Button
+                      disabled={visibleModalUpload}
                       style={{
                         marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                        marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
                       }}
-                      icon={<UploadOutlined/>}
-                  >
-                    Upload Product
-                  </Button>
-                </div>
-              </Upload>
-            </Form.Item>
-            <Form.Item
-                name="supplierCode"
-                label="Supplier Code"
-                rules={[{required: true, message: "Please input Supplier Code!"}]}
+                      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
+              fileList={fileList}
+              onChange={handleChange}
+              beforeUpload={(file) => beforeUpload(file)}
+              customRequest={(args) => uploadHandler(args)}
+              onRemove={(file) => {
+                setLoading(false);
+                setFileList([]);
+                setExcel("");
+              }}
             >
-              <Select>
-                {store.supplier.data.map(data => (
-                    <Option key={data.id} value={data.code}>
-                      {data.name}
-                    </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          </Form>
-        </Modal>
-      </div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "center",
+                }}
+              >
+                <Button
+                  disabled={loading}
+                  style={{
+                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  }}
+                  icon={<UploadOutlined />}
+                >
+                  Upload Product
+                </Button>
+              </div>
+            </Upload>
+          </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>
   );
 });