fix: menus

2021-12-16 17:45:00 +07:00 · 2021-12-16 17:45:00 +07:00 · a8a8330941
commit a8a8330941
parent 06eb607c7a
4 changed files with 342 additions and 322 deletions
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@ -10,6 +10,8 @@ import {
  DatabaseOutlined,
  FileAddOutlined,
  FileSyncOutlined,
+  FileProtectOutlined,
+  ShoppingCartOutlined,
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@ -122,12 +124,12 @@ export const DesktopLayout = observer(() => {
              {store.authentication.userData.role !== "Retail" && (
                <Menu.Item key="membership">
                  <Link to={LINKS.MEMBERSHIP}>
-                    <HomeOutlined />
+            <FileProtectOutlined />
                    <span>Membership</span>
                  </Link>
                </Menu.Item>
              )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                <SubMenu
                  key="config"
                  icon={<HomeOutlined />}
@ -154,10 +156,10 @@ export const DesktopLayout = observer(() => {
                  </Menu.Item>
                </SubMenu>
              )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                <SubMenu
                  key="product-main"
-                  icon={<ProfileOutlined />}
+                  icon={<DatabaseOutlined />}
                  title="Product"
                >
                  <Menu.Item key="product">
@ -180,28 +182,28 @@ export const DesktopLayout = observer(() => {
                  </Menu.Item>
                </SubMenu>
              )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role !== "Admin" && (
                <Menu.Item key="product">
                  <Link to={LINKS.PRODUCT}>
-                    <HomeOutlined />
+                    <DatabaseOutlined />
                    <span>Product</span>
                  </Link>
                </Menu.Item>
              )}
+              {store.authentication.userData.role === "Retail" && (
+                <Menu.Item key="transaction">
+                  <Link to={LINKS.TRANSACTION}>
+                    <ShoppingCartOutlined />
+                    <span>Transaction</span>
+                  </Link>
+                </Menu.Item>
+              )}
              <Menu.Item key="payback">
                <Link to={LINKS.PAYBACK}>
-                  <HomeOutlined />
+                  <DatabaseOutlined />
                  <span>Payback</span>
                </Link>
              </Menu.Item>
-              {store.authentication.userData.role === "Retail" && (
-                <Menu.Item key="transaction">
-                  <Link to={LINKS.TRANSACTION}>
-                    <HomeOutlined />
-                    <span>Transaction</span>
-                  </Link>
-                </Menu.Item>
-              )}
              <Menu.Item key="profile">
                <Link to={LINKS.PROFILE}>
                  <UserOutlined />
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@ -12,6 +12,7 @@ import {
  MoneyCollectOutlined,
  ProfileOutlined,
  ProjectOutlined,
+  ShoppingCartOutlined,
  UserOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
@ -59,7 +60,7 @@ export const MenuList = observer((props) => {
          </Link>
        </Menu.Item>
      )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
        <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
          <Menu.Item key="partner">
            <Link to={LINKS.PARTNER}>
@ -81,7 +82,7 @@ export const MenuList = observer((props) => {
          </Menu.Item>
        </SubMenu>
      )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
        <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
          <Menu.Item key="product">
            <Link to={LINKS.PRODUCT}>
@ -103,10 +104,18 @@ export const MenuList = observer((props) => {
          </Menu.Item>
        </SubMenu>
      )}
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
+      {store.authentication.userData.role !== "Admin" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <DatabaseOutlined />
+            <span>Product</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role === "Retail" && (
        <Menu.Item key="transaction">
          <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
+            <ShoppingCartOutlined />
            <span>Transaction</span>
          </Link>
        </Menu.Item>
@ -117,14 +126,6 @@ export const MenuList = observer((props) => {
          <span>Payback</span>
        </Link>
      </Menu.Item>
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
-        <Menu.Item key="transaction">
-          <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
-            <span>Transaction</span>
-          </Link>
-        </Menu.Item>
-      )}
      <Menu.Item key="profile">
        <Link to={LINKS.PROFILE}>
          <UserOutlined />
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -45,6 +45,7 @@ export const Membership = observer(() => {
        setIsLoading(true);
        await getData();
        store.role.getData();
+        if (store.authentication.userData.role === "Admin")
          await store.supplier.getData();
        setIsLoading(false);
      } catch (e) {
@ -85,10 +86,11 @@ export const Membership = observer(() => {
  const handleSubmitTransaction = async (data) => {
    setConfirmLoading(true);
    try {
-      let input = data;
      data.destination = destination;

-      await store.transaction.distributeAdmin(data);
+      (await store.authentication.userData.role) === "Admin"
+        ? store.transaction.distributeAdmin(data)
+        : store.transaction.distribute(data);
      message.success("Success Top Up");
      //await store.supplier.getData()
    } catch (e) {
@ -266,11 +268,6 @@ export const Membership = observer(() => {
  };
  return (
    <div className={["ppob-container"].join(" ")}>
-      {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
      <BreadcumbComponent data={routeData} />
      <Card>
        <div>
@ -410,6 +407,7 @@ export const Membership = observer(() => {
        }}
      >
        <Form form={form} layout="vertical">
+          {store.authentication.userData.role === "Admin" && (
            <Form.Item
              name="supplier"
              label="Supplier"
@ -423,6 +421,7 @@ export const Membership = observer(() => {
                ))}
              </Select>
            </Form.Item>
+          )}
          <Form.Item
            name="amount"
            label="Amount"
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@ -1,8 +1,25 @@
 import React, { useState } from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Row,
+  Space,
+  Table,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
 import { PaybackModal } from "./PaybackModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@ -32,34 +49,38 @@ export const Payback = observer(() => {

  const dummyData = [
    {
-            key: '1',
+      key: "1",
      id: 1,
      name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
      amount: "Rp. 1.000.000",
    },
    {
-            key: '2',
+      key: "2",
      id: 1,
      name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
      amount: "Rp. 1.000.000",
    },
    {
-            key: '3',
+      key: "3",
      id: 1,
      name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
      amount: "Rp. 1.000.000",
    },
    {
-            key: '4',
+      key: "4",
      id: 1,
      name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
      amount: "Rp. 1.000.000",
    },
-    ]
+  ];

  const columns = [
    {
@ -93,7 +114,7 @@ export const Payback = observer(() => {
        <Space size="middle">
          <Button
            onClick={async () => {
-                            await handleAction(record, 'accept');
+              await handleAction(record, "accept");
            }}
            icon={<CheckCircleOutlined />}
            style={{
@ -106,7 +127,7 @@ export const Payback = observer(() => {
          </Button>
          <Button
            onClick={async () => {
-                            await handleAction(record, 'reject');
+              await handleAction(record, "reject");
            }}
            icon={<CloseOutlined />}
            style={{
@ -122,6 +143,8 @@ export const Payback = observer(() => {
    },
  ];

+  if(store.authentication.userData.role === "Retail") columns.pop();
+
  const routeData = [
    {
      route: LINKS.HOME,
@ -147,17 +170,10 @@ export const Payback = observer(() => {
    setVisibleModal(false);
  };

-    const handleAction = async (record, type) => {
-
-    };
+  const handleAction = async (record, type) => {};

  return (
    <div className={["ppob-container"].join(" ")}>
-            {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
      <BreadcumbComponent data={routeData} />
      <Card>
        <div>
@ -177,6 +193,7 @@ export const Payback = observer(() => {
                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                }}
              />
+              {store.authentication.userData.role !== "Admin" && (
                <Button
                  onClick={() => {
                    setInitialData({});
@ -185,6 +202,7 @@ export const Payback = observer(() => {
                >
                  <PlusSquareOutlined /> New
                </Button>
+              )}
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (