Pages Membership

src/pages/App/MenuList.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {Menu} from "antd";
 import {Link} from "react-router-dom";
-import {CalendarOutlined, HomeOutlined,} from "@ant-design/icons";
+import {HomeOutlined,} from "@ant-design/icons";
 import {observer} from "mobx-react-lite";
 import {useStore} from "../../utils/useStore";
 
@@ -39,30 +39,30 @@ export const MenuList = observer((props) => {
 					<span>Home</span>
 				</Link>
 			</Menu.Item>
-			<Menu.Item key="membership">
+			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
 				<Link to={'/app/membership'}>
 					<HomeOutlined/>
 					<span>Membership</span>
 				</Link>
-			</Menu.Item>
-			<Menu.Item key="product">
+			</Menu.Item>}
+			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
 				<Link to={'/app/product'}>
 					<HomeOutlined/>
 					<span>Product</span>
 				</Link>
-			</Menu.Item>
-			<Menu.Item key="transaction">
+			</Menu.Item>}
+			{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
 				<Link to={'/app/transaction'}>
 					<HomeOutlined/>
 					<span>Transaction</span>
 				</Link>
-			</Menu.Item>
-			<Menu.Item key="about">
-				<Link to={'/app/about'}>
-					<CalendarOutlined/>
-					<span>About</span>
-				</Link>
-			</Menu.Item>
+			</Menu.Item>}
+			{/*<Menu.Item key="about">*/}
+			{/*	<Link to={'/app/about'}>*/}
+			{/*		<CalendarOutlined/>*/}
+			{/*		<span>About</span>*/}
+			{/*	</Link>*/}
+			{/*</Menu.Item>*/}
 			<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
 		</Menu>
 	);

src/pages/Membership/Membership.js

@@ -1,30 +1,12 @@
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Input,
-  List,
-  message,
-  Modal,
-  Row,
-  Space,
-  Table,
-  Tag,
-} from "antd";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import {
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
-} from "@ant-design/icons";
-import { MembershipModal } from "./MembershipModal";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { format } from "date-fns";
+import React, {useEffect, useState} from "react";
+import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import {MembershipModal} from "./MembershipModal";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 
-const { Search } = Input;
+const {Search} = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
@@ -33,16 +15,18 @@ export const Membership = observer(() => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const init = async () => {
-    try {
-      setIsLoading(true);
-      await store.membership.getData();
-      setIsLoading(false);
-    } catch (e) {
-      setIsLoading(false);
-    }
-  };
   useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.membership.getData();
+        await store.role.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
     init();
   }, []);
 
@@ -78,7 +62,10 @@ export const Membership = observer(() => {
           <Button
             onClick={() => {
               setVisibleModal(true);
-              setInitialData(record);
+              setInitialData({
+                ...record,
+                roleId: record.roles.id,
+              });
             }}
           >
             Edit
@@ -143,7 +130,7 @@ export const Membership = observer(() => {
   
   const handleDelete = (record) => {
     Modal.confirm({
-      title: "Are you sure reject this record?",
+      title: "Are you sure delete this record?",
       icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
@@ -176,17 +163,20 @@ export const Membership = observer(() => {
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
               <Button>
-                <FilterOutlined />
+                <FilterOutlined/>
                 Filter
               </Button>
             </Col>
-            <Col span={12} style={{ textAlign: "right" }}>
+            <Col span={12} style={{textAlign: "right"}}>
               <Search
-                placeholder="input search text"
-                style={{ width: 200, marginRight: 10 }}
+                  placeholder="input search text"
+                  style={{width: 200, marginRight: 10}}
               />
-              <Button onClick={() => setVisibleModal(true)}>
-                <PlusSquareOutlined /> New
+              <Button onClick={() => {
+                setInitialData({});
+                setVisibleModal(true);
+              }}>
+                <PlusSquareOutlined/> New
               </Button>
             </Col>
           </Row>
@@ -198,6 +188,7 @@ export const Membership = observer(() => {
               columns={columns}
               dataSource={store.membership.data}
               bordered
+             
               // pagination={{
               //   total: store.membership.total_data,
               //   current: store.membership.page,

src/pages/Membership/MembershipModal.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import {Form, Input, Modal, Select,} from 'antd';
+import {capitalize} from "lodash";
+import {useStore} from "../../utils/useStore";
 
 export const MembershipModal = ({
                                     visible,
@@ -10,6 +12,7 @@ export const MembershipModal = ({
     const [form] = Form.useForm();
     const {Option} = Select;
     const dataStatus = ["true", "false"]
+    const store = useStore();
 
 
     return (
@@ -57,11 +60,14 @@ export const MembershipModal = ({
                 </Form.Item>
                 <Form.Item
                     name="roleId"
-                    label="Role Id"
-                    
+                    label="Role"
                     rules={[{required: true, message: 'Please input role id!'}]}
                 >
-                    <Input defaultValue="0571"/>
+                    <Select>
+                        {store.role.data.map(item => (
+                            <Option key={item.id} value={item.id}>{item.name}</Option>
+                        ))}
+                    </Select>
                 </Form.Item>
                 <Form.Item
                     name="superior"
@@ -80,7 +86,7 @@ export const MembershipModal = ({
                         }
                     >
                         {dataStatus.map(it => {
-                            return <Option value={it}>{it}</Option>
+                            return <Option value={it}>{capitalize(it)}</Option>
                         })}
                     </Select>
                 </Form.Item>

src/pages/Product/Product.js

@@ -60,7 +60,7 @@ export const Product = observer(() => {
                             placeholder="input search text"
                             style={{width: 200, marginRight: 10}}
                         />
-                        <Button onClick={() => store.product.visibleModal = true}>
+                        <Button onClick={() => store.product.visibleModalProduct = true}>
                             <PlusSquareOutlined/> New
                         </Button>
                     </Col>