Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/PartnerComponent.js

@@ -40,6 +40,21 @@ export const PartnerComponent = observer((props) => {
     init();
   }, []);
 
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.partner.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Partner`)
+        : message.error(`Failed ${status2} Partner`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Partner`);
+    }
+  };
+
   const handleEditButton = (data) => {
     console.log(data, "isi data");
     form.setFieldsValue({
@@ -72,9 +87,13 @@ export const PartnerComponent = observer((props) => {
       dataIndex: "status",
       key: "status",
       render: (text, record) => (
-        <Button size="small" type={record?.status === true ? "primary" : "danger"}>
+        <Tag
+          color={record?.status === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B", cursor: 'pointer' }}
+          onClick={() => changeStatus(record?.id, record?.status)}
+        >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
-        </Button>
+        </Tag>
       ),
     },
     {

src/component/SupplierComponent.js

@@ -52,9 +52,19 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
-  const changeStatus = (id, isActive) => {
+  const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
-    store.supplier.changeStatus(id, status);
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.supplier.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Supplier`)
+        : message.error(`Failed ${status2} Supplier`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Supplier`);
+    }
   };
 
   const columns = [

src/pages/Membership/Membership.js

@@ -1,8 +1,25 @@
 import React, { useEffect, useState } from "react";
-import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
+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 {
+  ExclamationCircleOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -31,6 +48,21 @@ export const Membership = observer(() => {
     init();
   }, []);
 
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.membership.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Membership`);
+    }
+  };
+
   const columns = [
     {
       title: "Name",
@@ -48,10 +80,11 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.isActive === true ? "blue" : "#E3E8EE"}
+          color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+          style={{ color: "#4F566B", cursor: "pointer" }}
+          onClick={() => changeStatus(record?.id, record?.status)}
         >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+          {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
       ),
     },
@@ -198,7 +231,7 @@ export const Membership = observer(() => {
                 total: store.membership.total_data,
                 current: store.membership.page + 1,
                 showSizeChanger: true,
-                  simple: false
+                simple: false,
               }}
               onChange={async (page) => {
                 let pageNumber = page.current;

src/pages/Membership/MembershipModal.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import {Form, Input, Modal, Select,} from 'antd';
+import { Form, Input, Modal, Select } from "antd";
 import { capitalize } from "lodash";
 import { useStore } from "../../utils/useStore";
 
@@ -11,10 +11,9 @@ export const MembershipModal = ({
 }) => {
   const [form] = Form.useForm();
   const { Option } = Select;
-    const dataStatus = ["true", "false"]
+  const dataStatus = ["true", "false"];
   const store = useStore();
 
-
   return (
     <Modal
       visible={visible}
@@ -22,18 +21,18 @@ export const MembershipModal = ({
       okText={initialData.id ? "Edit" : "Create"}
       cancelText="Cancel"
       onCancel={() => {
-                form.resetFields()
+        form.resetFields();
-                onCancel()
+        onCancel();
       }}
       onOk={() => {
         form
           .validateFields()
-                    .then(values => {
+          .then((values) => {
             onCreate(values);
-                        form.resetFields()
+            form.resetFields();
           })
-                    .catch(info => {
+          .catch((info) => {
-                        console.log('Validate Failed:', info);
+            console.log("Validate Failed:", info);
           });
       }}
     >
@@ -43,36 +42,39 @@ export const MembershipModal = ({
         name="form_in_modal"
         initialValues={initialData}
       >
-                
         <Form.Item
           name="username"
           label="Username"
-                    rules={[{required: true, message: 'Please input Username!'}]}
+          rules={[{ required: true, message: "Please input Username!" }]}
         >
           <Input />
         </Form.Item>
         <Form.Item
           name="password"
           label="Password"
-                    rules={[{required: false, message: 'Please input password!'}]}
+          rules={[{ required: false, message: "Please input password!" }]}
         >
           <Input />
         </Form.Item>
         <Form.Item
           name="roleId"
           label="Role"
-                    rules={[{required: true, message: 'Please input role id!'}]}
+          rules={[{ required: true, message: "Please input role id!" }]}
         >
           <Select>
-                        {store.role.data.map(item => (
+            {store.role.data.map((item) => (
-                            <Option key={item.id} value={item.id}>{item.name}</Option>
+              <Option key={item.id} value={item.id}>
+                {item.name}
+              </Option>
             ))}
           </Select>
         </Form.Item>
         <Form.Item
           name="superior"
           label="Superior"
-                    rules={[{required: true, message: 'Please select superior status!'}]}
+          rules={[
+            { required: true, message: "Please select superior status!" },
+          ]}
         >
           <Select
             showSearch
@@ -82,11 +84,13 @@ export const MembershipModal = ({
               option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }
             filterSort={(optionA, optionB) =>
-                            optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
+              optionA.children
+                .toLowerCase()
+                .localeCompare(optionB.children.toLowerCase())
             }
           >
-                        {dataStatus.map(it => {
+            {dataStatus.map((it, idx) => {
-                            return <Option value={it}>{capitalize(it)}</Option>
+              return <Option value={it} key={idx}>{capitalize(it)}</Option>;
             })}
           </Select>
         </Form.Item>

src/store/membership.js

@@ -12,11 +12,14 @@ export class Membership {
         makeAutoObservable(this);
     }
 
-    @action
     async getData() {
         const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response)
+        
-        this.data = response.body.data ?? []
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+        
         this.total_data = response.body.total_data ?? 0
     }
     // async getData() {
@@ -25,12 +28,10 @@ export class Membership {
     //     this.total_data = response.body.total_data ?? 0
     // }
 
-    @action
     async create(data) {
         return await http.post('/users').send(data)
     }
 
-    @action
     async update(id, data) {
         // console.log(data)
         // console.log(id)
@@ -44,6 +45,12 @@ export class Membership {
         return await http.del('/users/' + id);
         
     }
+
+    async changeStatus(id, status) {
+        const response = await http.get(`/users/${id}/${status}`);
+        await this.getData();
+        return response;
+    }
 }
 
 

src/store/partner.js

@@ -26,8 +26,12 @@ export class Partner {
 
     async getData() {
         const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
-        this.data = response.body.data ?? []
+        
-        //console.log(response.body,"ini dari store")
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+
         this.total_data = response.body.count ?? 0
     }
 
@@ -55,6 +59,11 @@ export class Partner {
         return response;
     }
 
+    async changeStatus(id, status) {
+        const response = await http.get(`/users/partner/${id}/${status}`);
+        await this.getData();
+        return response;
+    }
 
 }
 

src/store/product.js

@@ -37,7 +37,10 @@ export class Product {
 
     async getDataSubCategories() {
         const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-        this.dataSubCategories = response.body.data ?? []
+        this.dataSubCategories = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
         this.total_dataSubCategories = response.body.count ?? 0
     }
 
@@ -46,9 +49,15 @@ export class Product {
 
         this.dataCategories = response.body.data ?? []
         this.total_dataCategories = response.body.total_data ?? 0
+
         if (this.dataCategories.length > 0) {
             this.filterCategory = this.dataCategories[0].id
         }
+
+        this.dataCategories = this.dataCategories.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
     }
 
     async create(data) {