Pages Membership

src/component/ProductComponent.js

@@ -14,7 +14,6 @@ export const ProductComponent = observer((props) => {
     const [idData, setIdData] = useState('');
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const [visibleModal, setVisibleModal] = useState(false);
 
     useEffect(() => {
         const init = async () => {
@@ -35,11 +34,12 @@ export const ProductComponent = observer((props) => {
         form.setFieldsValue({
             name: data.name,
             price: data.price,
-            base_price: data.base_price,
+            markUpPrice: data.basePrice,
             code: data.code,
             status: data.status,
+            subCategoriesId: data.sub_categories.id,
         });
-        setVisibleModal(true);
+        store.product.visibleModalProduct = true;
         setIdData(data.id);
     }
 
@@ -56,22 +56,21 @@ export const ProductComponent = observer((props) => {
         },
         {
             title: "Harga Beli",
-            dataIndex: "basePrice",
-            key: "basePrice",
-        },
-        ,
-        {
-            title: "Harga Jual",
             dataIndex: "price",
             key: "price",
         },
+        {
+            title: "Harga Jual",
+            dataIndex: "basePrice",
+            key: "basePrice",
+        },
         {
             title: "Gangguan",
             dataIndex: "status",
             key: "status",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
                     {capitalize(record?.status)}
@@ -84,10 +83,10 @@ export const ProductComponent = observer((props) => {
             key: "tersedia",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
-                    {record?.status === "AKTIF" ? " Ya" : "Tidak"}
+                    {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
                 </Tag>
             ),
         },
@@ -139,11 +138,12 @@ export const ProductComponent = observer((props) => {
 
     const handleCancel = () => {
         setIdData('')
-        setVisibleModal(false);
+        store.product.visibleModalProduct = false;
     }
 
     const handleSubmit = async (data) => {
-        if (idData != '') {
+        console.log(data, "isi data2")
+        if (idData !== '') {
             setConfirmLoading(true);
             try {
                 await store.product.update(idData, data)
@@ -152,7 +152,9 @@ export const ProductComponent = observer((props) => {
                 message.error("Failed Update Data Member")
             }
             setConfirmLoading(false);
-            setVisibleModal(false);
+            store.product.visibleModalProduct = false;
+            setIdData('');
+            form.resetFields();
         } else {
             setConfirmLoading(true);
             try {
@@ -163,7 +165,9 @@ export const ProductComponent = observer((props) => {
                 message.error("Failed Add Member")
             }
             setConfirmLoading(false);
-            setVisibleModal(false);
+            store.product.visibleModalProduct = false;
+            setIdData('');
+            form.resetFields();
         }
     }
 
@@ -176,7 +180,7 @@ export const ProductComponent = observer((props) => {
                 bordered
             />
             <Modal
-                visible={visibleModal}
+                visible={store.product.visibleModalProduct}
                 title={idData ? "Edit Product" : "Create a new Product"}
                 okText={idData ? "Edit" : "Create"}
                 cancelText="Cancel"
@@ -188,6 +192,7 @@ export const ProductComponent = observer((props) => {
                     form
                         .validateFields()
                         .then((values) => {
+                            console.log(values, "isi form")
                             handleSubmit(values);
                             form.resetFields();
                         })
@@ -215,7 +220,7 @@ export const ProductComponent = observer((props) => {
                         <Input/>
                     </Form.Item>
                     <Form.Item
-                        name="base_price"
+                        name="markUpPrice"
                         label="Mark Up Price"
                         rules={[{required: true, message: "Please input mark up price!"}]}
                     >
@@ -239,7 +244,7 @@ export const ProductComponent = observer((props) => {
                         </Select>
                     </Form.Item>
                     <Form.Item
-                        name="sub_category"
+                        name="subCategoriesId"
                         label="Sub categories"
                         rules={[{required: true, message: "Please select sub categories!"}]}
                     >

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>}
-			<Menu.Item key="product">
+			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
 				<Link to={'/app/product'}>
 					<HomeOutlined/>
 					<span>Product</span>
 				</Link>
-			</Menu.Item>
+			</Menu.Item>}
-			<Menu.Item key="transaction">
+			{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
 				<Link to={'/app/transaction'}>
 					<HomeOutlined/>
 					<span>Transaction</span>
 				</Link>
-			</Menu.Item>
+			</Menu.Item>}
-			<Menu.Item key="about">
+			{/*<Menu.Item key="about">*/}
-				<Link to={'/app/about'}>
+			{/*	<Link to={'/app/about'}>*/}
-					<CalendarOutlined/>
+			{/*		<CalendarOutlined/>*/}
-					<span>About</span>
+			{/*		<span>About</span>*/}
-				</Link>
+			{/*	</Link>*/}
-			</Menu.Item>
+			{/*</Menu.Item>*/}
 			<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
 		</Menu>
 	);

src/pages/Membership/Membership.js

@@ -1,28 +1,10 @@
 import React, {useEffect, useState} from "react";
-import {
+import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
-  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 {
+import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
-} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import { format } from "date-fns";
 
 const {Search} = Input;
 
@@ -33,16 +15,18 @@ export const Membership = observer(() => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  useEffect(() => {
     const init = async () => {
       try {
         setIsLoading(true);
         await store.membership.getData();
+        await store.role.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
       }
     };
-  useEffect(() => {
+
     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",
@@ -185,7 +172,10 @@ export const Membership = observer(() => {
                   placeholder="input search text"
                   style={{width: 200, marginRight: 10}}
               />
-              <Button onClick={() => setVisibleModal(true)}>
+              <Button onClick={() => {
+                setInitialData({});
+                setVisibleModal(true);
+              }}>
                 <PlusSquareOutlined/> New
               </Button>
             </Col>
@@ -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>

src/store/index.js

@@ -4,6 +4,7 @@ import {User} from "./user";
 import {Membership} from "./membership";
 import {Product} from "./product";
 import {TokenUtil} from "../utils/token";
+import {Role} from "./role";
 
 export class Store {
     ui = new UI(this);
@@ -11,6 +12,7 @@ export class Store {
     user = new User(this);
     membership = new Membership(this);
     product = new Product(this);
+    role = new Role(this);
 
     constructor() {
         TokenUtil.loadToken();

src/store/membership.js

@@ -15,8 +15,6 @@ export class Membership {
     @action
     async getData() {
         const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
-        // console.log(response, 'Data user')
-        // console.log(JSON.stringify(response.body.data), 'Data')
         this.data = response.body.data ?? []
         this.total_data = response.body.total_data ?? 0
     }

src/store/product.js

@@ -1,4 +1,4 @@
-import {action, makeAutoObservable} from "mobx";
+import {makeAutoObservable} from "mobx";
 import {http} from "../utils/http";
 
 export class Product {
@@ -7,6 +7,7 @@ export class Product {
     data = [];
     total_data = 0;
     filterCategory = null;
+    visibleModalProduct = false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -46,15 +47,14 @@ export class Product {
         }
     }
 
-    @action
     async create(data) {
-        const response = await http.post('/product', data);
+        const response = await http.post('/product').send(data);
         await this.getData();
         return response;
     }
 
     async update(id, data) {
-        const response = await http.put(`/product/${id}`, data);
+        const response = await http.put(`/product/${id}`).send(data);
         await this.getData();
         return response;
     }

src/store/role.js

@@ -0,0 +1,34 @@
+import {makeAutoObservable} from "mobx";
+import {http} from "../utils/http";
+
+export class Role {
+    page = null;
+    pageSize = null;
+    data = [];
+    total_data = 0
+
+    constructor(ctx) {
+        this.ctx = ctx;
+        makeAutoObservable(this);
+    }
+
+    async getData() {
+        const response = await http.get(`/config/roles?page=${this.page}&pageSize=${this.pageSize}`);
+        this.data = response.body.data ?? []
+        this.total_data = response.body.total_data ?? 0
+    }
+
+    async create(data) {
+        return await http.post('/users').send(data)
+    }
+
+    async update(id, data) {
+        return await http.put('/users/' + id).send(data);
+    }
+
+    async delete(id) {
+        return await http.del('/users/' + id);
+    }
+}
+
+