chore: move action button into detail user

src/pages/Membership/DetailUser.js

@@ -1,24 +1,13 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, {useContext, useEffect, useState} from "react";
-import {
+import {Button, Card, Col, message, Row, Space, Table, Tag, Typography,} from "antd";
-  Button,
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-  Card,
+import {LINKS} from "../../routes/app";
-  Col,
+import {useStore} from "../../utils/useStore";
-  Row,
+import {observer} from "mobx-react-lite";
-  Table,
+import {format, parseISO} from "date-fns";
-  Typography,
+import {ModalLoaderContext} from "../../utils/modal";
-  Tag,
+import {useParams} from "react-router-dom";
-  Space,
+import {MembershipModal} from "./MembershipModal";
-  message,
-} from "antd";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
-import { format, parseISO } from "date-fns";
-import { ModalLoaderContext } from "../../utils/modal";
-import { useParams } from "react-router-dom";
-import { MembershipModal } from "./MembershipModal";
 
 const {Title, Text} = Typography;
 
@@ -36,19 +25,24 @@ export const DetailUser = observer(() => {
     (async () => {
       modalLoader.setLoading(true);
       await getData();
-      await Promise.allSettled([
-        store.transaction.getDataHistoryTopUp(id),
-        store.membership.getDetail(id),
-      ]);
       modalLoader.setLoading(false);
     })();
+
+    return () => {
+      store.membership.dataDetail = {};
+      store.transaction.dataHistoryTopUp = [];
+    };
   }, []);
 
   const getData = async () => {
-    store.authentication.userData.role === "Admin"
+    const isAdmin = store.authentication.userData.role === "Admin";
-      ? await store.membership.getData()
+    await Promise.allSettled([
-      : await store.membership.getDataBySuperior();
+      store.transaction.getDataHistoryTopUp(id),
+      store.membership.getDetail(id),
+      store.role.getData(isAdmin)
+    ]);
   };
+
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
@@ -69,46 +63,42 @@ export const DetailUser = observer(() => {
 
   const onSubmit = async (data) => {
     data.superior = true;
-
-    if (initialData.id) {
     setConfirmLoading(true);
     modalLoader.setLoading(true);
     try {
-        await store.membership.update(initialData.id, data);
+      let response;
+      if (initialData.isChangePassword) {
+        response = await store.membership.changePassword(initialData.id, data);
+      } else {
+        response = await store.membership.update(initialData.id, data);
+      }
+
+      setVisibleModal(false);
+
+      if (response?.body?.statusCode === 200) {
         message.success(
             initialData.isChangePassword
                 ? "Success Change Member Password"
-            : "Success Update Data Member"
+                : "Success Update Data Member");
-        );
+      } else {
+        message.error(
+            initialData.isChangePassword
+                ? "Failed Change Member Password"
+                : "Failed Update Data Member");
+      }
       await getData();
-        modalLoader.setLoading(false);
     } catch (e) {
-        modalLoader.setLoading(true);
+      modalLoader.setLoading(false);
       message.error(
           initialData.isChangePassword
               ? "Failed Update Member Password"
               : "Failed Update Data Member"
       );
     }
-      setConfirmLoading(false);
-      setVisibleModal(false);
-    } else {
-      setConfirmLoading(true);
-      modalLoader.setLoading(true);
-      try {
-        await store.membership.create(data);
-        message.success("Success Add New Member");
-        await getData();
-      } catch (e) {
-        console.log(e, "apa errornya");
-        message.error("Failed Add Member");
-      }
     modalLoader.setLoading(false);
     setConfirmLoading(false);
-      setVisibleModal(false);
-      setInitialData({});
-    }
   };
+
   const columns = [
     {
       title: "Amount",
@@ -133,63 +123,13 @@ export const DetailUser = observer(() => {
       key: "isActive",
       render: (text, record) => (
           <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+              color={store.membership.dataDetail.isActive === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+              style={{color: "#4F566B"}}
           >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+            {store.membership.dataDetail.isActive === true ? " ACTIVE" : "INACTIVE"}
           </Tag>
       ),
     },
-    {
-      title: "Action",
-      key: "action",
-      render: (text, record) => (
-        <Space size="middle">
-          {/* {store.authentication.userData.role === "Admin" &&  */}
-          <Button
-            type={record?.isActive === true ? "danger" : "primary"}
-            onClick={() => changeStatus(record?.id, record?.isActive)}
-          >
-            {record?.isActive === true ? "Inactive" : "Active"}
-          </Button>
-          {/* } */}
-          {/* {store.authentication.userData.role === "Admin" &&  */}
-          <Button
-            onClick={() => {
-              let record2 = record;
-              delete record2.password;
-              record2.isChangePassword = false;
-
-              setInitialData({
-                ...record2,
-                // roleId: record.roles.id,
-              });
-              setVisibleModal(true);
-            }}
-          >
-            Edit
-          </Button>
-          {/* }
-              {store.authentication.userData.role === "Admin" &&  */}
-          <Button
-            onClick={() => {
-              let record2 = record;
-              delete record2.password;
-              record2.isChangePassword = true;
-
-              setInitialData({
-                ...record2,
-                // roleId: record.roles.id,
-              });
-              setVisibleModal(true);
-            }}
-          >
-            Ganti Password
-          </Button>
-          {/* } */}
-        </Space>
-      ),
-    },
   ];
 
   const routeData = [
@@ -206,6 +146,7 @@ export const DetailUser = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
     },
   ];
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -224,7 +165,7 @@ export const DetailUser = observer(() => {
                 <Text strong>Username</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.membership.dataDetail.superior?.username}</Text>
+                <Text>{store.membership.dataDetail.username}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
@@ -252,20 +193,58 @@ export const DetailUser = observer(() => {
               </Col>
             </Row>
           </Col>
-          {/* <Col lg={12} xs={24}>
+          <Col lg={12} xs={24}>
-            <Row justify={"center"}>
+            <Title strong level={3}>Action User Detail</Title>
-              <Col lg={24} xs={12}>
+            <Space
-                <Title strong level={3} style={styleSaldoTitle}>
+                size="middle"
-                  Saldo
+                align={"center"}
-                </Title>
+                wrap={true}
+                style={{textAlign: 'center'}}
+            >
+              {store.authentication.userData.role === "Admin" &&
+                  <Button
+                      type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
+                      onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
+                  >
+                    {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
+                  </Button>
+              }
+              {store.authentication.userData.role === "Admin" &&
+                  <Button
+                      onClick={() => {
+                        setInitialData({
+                          id: store.membership.dataDetail.id,
+                          name: store.membership.dataDetail.userDetail.name,
+                          username: store.membership.dataDetail.username,
+                          phone_number: store.membership.dataDetail.userDetail.phone_number,
+                          roleId: store.membership.dataDetail.roles.id,
+                          isChangePassword: false,
+                        });
+                        setVisibleModal(true);
+                      }}
+                  >
+                    Edit
+                  </Button>
+              }
+              {store.authentication.userData.role === "Admin" &&
+                  <Button
+                      onClick={() => {
+                        setInitialData({
+                          id: store.membership.dataDetail.id,
+                          name: store.membership.dataDetail.userDetail.name,
+                          username: store.membership.dataDetail.username,
+                          phone_number: store.membership.dataDetail.userDetail.phone_number,
+                          roleId: store.membership.dataDetail.roles.id,
+                          isChangePassword: true,
+                        });
+                        setVisibleModal(true);
+                      }}
+                  >
+                    Ganti Password
+                  </Button>
+              }
+            </Space>
           </Col>
-              <Col lg={24} xs={12}>
-                <Text style={styleSaldoContent}>
-                  {store.transaction?.data.amount}
-                </Text>
-              </Col>
-            </Row>
-          </Col> */}
         </Row>
         <Row>
           <Col span={24}>
@@ -273,16 +252,6 @@ export const DetailUser = observer(() => {
               <Title strong level={3}>
                 History Top Up
               </Title>
-
-              {/* <Button
-                style={{ marginBottom: "1rem" }}
-                onClick={() => {
-                  console.log("clicked filter");
-                }}
-              >
-                <FilterOutlined />
-                Filter
-              </Button> */}
               <Table
                   columns={columns}
                   dataSource={store.transaction.dataHistoryTopUp}
@@ -293,44 +262,6 @@ export const DetailUser = observer(() => {
         </Row>
         <div />
       </Card>
-      {/* <Modal
-        visible={isVisibleTopUpModal}
-        title="Top Up Saldo"
-        okText="Top Up"
-        cancelText="Cancel"
-        onCancel={() => {
-          form.resetFields();
-          handleCancelTransaction();
-        }}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              console.log(values, "isi form");
-              handleSubmitTransaction(values);
-              form.resetFields();
-            })
-            .catch((info) => {
-              console.error("Validate Failed:", info);
-            });
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item
-            name="amount"
-            label="Amount"
-            rules={[{ required: true, message: "Please input amount!" }]}
-          >
-            <InputNumber
-              style={{ width: "100%" }}
-              formatter={(value) =>
-                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-              }
-              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
-            />
-          </Form.Item>
-        </Form>
-      </Modal> */}
       <MembershipModal
         visible={visibleModal}
         confirmLoading={confirmLoading}

src/pages/Membership/Membership.js

@@ -1,21 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {
+import {Button, Card, Col, Divider, Form, InputNumber, List, message, Modal, Row, Space, Table, Tag} from "antd";
-  Button,
-  Card,
-  Col,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  List,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tag
-} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
@@ -25,8 +9,6 @@ import {LINKS} from "../../routes/app";
 import {useHistory} from "react-router-dom";
 import {ModalLoaderContext} from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
 export const Membership = observer(() => {
   const history = useHistory();
   const [form] = Form.useForm();
@@ -338,7 +320,7 @@ export const Membership = observer(() => {
               bordered
               pagination={{
                   pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
+                  total: store.membership.totalData,
                   current: store.membership.page + 1,
                   showSizeChanger: true,
                   simple: false,
@@ -367,9 +349,9 @@ export const Membership = observer(() => {
                       modalLoader.setLoading(false);
                   },
                   pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
+                  total: store.membership.totalData,
                   current: store.membership.page + 1,
-                style: { marginBottom: "1rem", marginRight: "1rem" },
+                  style: {marginBottom: "1rem", marginRight: "1rem"},
               }}
               dataSource={store.membership.data}
               style={{ padding: 0 }}

src/pages/Membership/MembershipModal.js

@@ -55,18 +55,18 @@ export const MembershipModal = ({
                     <Form.Item
                         name="name"
                         label="Name"
-            rules={[{ required: true, message: "Please input Name!" }]}
+                        rules={[{required: true, message: "Please input Name!"}]}
                     >
-            <Input />
+                        <Input/>
                     </Form.Item>
                 )}
                 {!initialData.id && (
                     <Form.Item
                         name="username"
                         label="Username"
-            rules={[{ required: true, message: "Please input Username!" }]}
+                        rules={[{required: true, message: "Please input Username!"}]}
                     >
-            <Input />
+                        <Input/>
                     </Form.Item>
                 )}
                 {((initialData.id && initialData.isChangePassword) ||
@@ -74,7 +74,7 @@ export const MembershipModal = ({
                     <Form.Item
                         name="password"
                         label="Password"
-            rules={[{ required: false, message: "Please input password!" }]}
+                        rules={[{required: false, message: "Please input password!"}]}
                     >
                         <Input.Password/>
                     </Form.Item>
@@ -84,9 +84,9 @@ export const MembershipModal = ({
                     <Form.Item
                         name="phone_number"
                         label="Phone Number"
-            rules={[{ required: true, message: "Please input Phone Number!" }]}
+                        rules={[{required: true, message: "Please input Phone Number!"}]}
                     >
-            <Input />
+                        <Input/>
                     </Form.Item>
                 )}
                 {((initialData.id && !initialData.isChangePassword) ||
@@ -94,7 +94,7 @@ export const MembershipModal = ({
                     <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) => (

src/store/membership.js

@@ -5,8 +5,9 @@ export class Membership {
     page = 0;
     pageSize = 10
     data = [];
-    total_data = 0
+    totalData = 0;
-    dataDetail=[]
+
+    dataDetail = {};
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -19,22 +20,23 @@ export class Membership {
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
-                item.phone_number = item?.user_detail?.phone_number;item.roleId = item?.roles.id;
+                item.phone_number = item?.user_detail?.phone_number;
+                item.roleId = item?.roles.id;
                 item.roleName = item?.roles.name;
                 return item
             }) ?? []
 
-            this.total_data = response?.body?.count ?? 0
+            this.totalData = response?.body?.count ?? 0
         } catch (e) {
             console.error(e);
         }
     }
+
     async getDetail(id) {
         try {
             const response = await http.get(`/users/`+id);
             console.log(response,'Data Detail')
             this.dataDetail = response.body.data
-            this.total_data = response?.body?.count ?? 0
         } catch (e) {
             console.error(e);
         }
@@ -46,12 +48,13 @@ export class Membership {
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
-                item.phone_number = item?.user_detail?.phone_number;item.roleId = item?.roles.id;
+                item.phone_number = item?.user_detail?.phone_number;
+                item.roleId = item?.roles.id;
                 item.roleName = item?.roles?.name;
                 return item
             }) ?? []
 
-            this.total_data = response?.body?.count ?? 0
+            this.totalData = response?.body?.count ?? 0
         } catch (e) {
             console.error(e);
         }
@@ -75,6 +78,15 @@ export class Membership {
         }
     }
 
+    async changePassword(id, data) {
+        try {
+            const response = await http.put('/users/change-password/' + id).send(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async delete(id) {
         try {
             const response = await http.del('/users/' + id);