Role Access

src/component/ProductComponent.js

@@ -1,18 +1,33 @@
-import React, {useContext, useState} from "react";
-import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  List,
+  message,
+  Modal,
+  Row,
+  Select,
+  Table,
+  Tag,
+  Typography,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -49,20 +64,20 @@ export const ProductComponent = observer((props) => {
       dataIndex: "current_price_price",
       key: "current_price_price",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Harga Jual",
       dataIndex: "mark_up_price",
       key: "mark_up_price",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     // {
     //     title: "Gangguan",
@@ -94,14 +109,14 @@ export const ProductComponent = observer((props) => {
       title: "Action",
       key: "action",
       render: (text, record) => (
-          <Button
-            onClick={async () => {
-              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
-              //console.log(record.id)
-            }}
-            >
-              Detail
-            </Button>
+        <Button
+          onClick={async () => {
+            history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            //console.log(record.id)
+          }}
+        >
+          Detail
+        </Button>
       ),
     },
   ];
@@ -207,12 +222,12 @@ export const ProductComponent = observer((props) => {
 
   const footerLayoutFilter = [
     <Button
-        key={"remove"}
-        onClick={handleRemoveFilter}
-        style={{
-          backgroundColor: "#e74e5e",
-          color: "#fff",
-        }}
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
     >
       Remove Filter
     </Button>,
@@ -302,9 +317,7 @@ export const ProductComponent = observer((props) => {
                           <small>{item.product_name}</small> <br />
                           <small>Harga Beli : {item.current_price_price}</small>
                           <br />
-                          <small>
-                            Harga Jual : {item.mark_up_price}
-                          </small>
+                          <small>Harga Jual : {item.mark_up_price}</small>
                         </p>
                         <p></p>
                       </div>
@@ -318,10 +331,14 @@ export const ProductComponent = observer((props) => {
                       }}
                     >
                       <Tag
-                        color={item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
+                        color={
+                          item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
+                        }
                         style={{ color: "#4F566B" }}
                       >
-                        {item?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
+                        {item?.product_status === "ACTIVE"
+                          ? " Tersedia"
+                          : "Tidak"}
                       </Tag>
                     </p>
                   </div>
@@ -367,14 +384,26 @@ export const ProductComponent = observer((props) => {
             label="Price"
             rules={[{ required: true, message: "Please input price!" }]}
           >
-            <Input />
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
           <Form.Item
             name="markUpPrice"
             label="Mark Up Price"
             rules={[{ required: true, message: "Please input mark up price!" }]}
           >
-            <Input />
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
           <Form.Item
             name="code"
@@ -402,9 +431,9 @@ export const ProductComponent = observer((props) => {
           >
             <Select placeholder="Select Sub Category" allowClear>
               {store.category.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Form.Item>
@@ -422,18 +451,18 @@ export const ProductComponent = observer((props) => {
               Filter Supplier
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Supplier"
-                onChange={(val) => {
-                  setFilterSupplier(val);
-                }}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={filterSupplier}
+              mode={"multiple"}
+              placeholder="Choose Supplier"
+              onChange={(val) => {
+                setFilterSupplier(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>
@@ -442,16 +471,16 @@ export const ProductComponent = observer((props) => {
               Filter Categories
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Category"
-                onChange={async (val) => handleFilterCategory(val)}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={store.product.filterCategory || []}
+              mode={"multiple"}
+              placeholder="Choose Category"
+              onChange={async (val) => handleFilterCategory(val)}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>
@@ -460,18 +489,18 @@ export const ProductComponent = observer((props) => {
               Filter Sub-Categories
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Sub-Category"
-                onChange={(val) => {
-                  setFilterSubCategories(val);
-                }}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={filterSubCategories}
+              mode={"multiple"}
+              placeholder="Choose Sub-Category"
+              onChange={(val) => {
+                setFilterSubCategories(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>