chore: move action button into detail user

2021-12-23 16:30:03 +07:00 · 2021-12-23 16:30:03 +07:00 · 1a0a1756b0
commit 1a0a1756b0
parent db6287ca2c
4 changed files with 246 additions and 321 deletions
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@ -1,24 +1,13 @@
-import React, { useContext, useEffect, useState } from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Row,
-  Table,
-  Typography,
-  Tag,
-  Space,
-  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";
+import React, {useContext, useEffect, useState} from "react";
+import {Button, Card, Col, message, Row, Space, Table, Tag, Typography,} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+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"
-      ? await store.membership.getData()
-      : await store.membership.getDataBySuperior();
+    const isAdmin = store.authentication.userData.role === "Admin";
+    await Promise.allSettled([
+      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;
+    setConfirmLoading(true);
+    modalLoader.setLoading(true);
+    try {
+      let response;
+      if (initialData.isChangePassword) {
+        response = await store.membership.changePassword(initialData.id, data);
+      } else {
+        response = await store.membership.update(initialData.id, data);
+      }

-    if (initialData.id) {
-      setConfirmLoading(true);
-      modalLoader.setLoading(true);
-      try {
-        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"
-        );
-        await getData();
-        modalLoader.setLoading(false);
-      } catch (e) {
-        modalLoader.setLoading(true);
+            initialData.isChangePassword
+                ? "Success Change Member Password"
+                : "Success Update Data Member");
+      } else {
        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");
+            initialData.isChangePassword
+                ? "Failed Change Member Password"
+                : "Failed Update Data Member");
      }
+      await getData();
+    } catch (e) {
      modalLoader.setLoading(false);
-      setConfirmLoading(false);
-      setVisibleModal(false);
-      setInitialData({});
+      message.error(
+          initialData.isChangePassword
+              ? "Failed Update Member Password"
+              : "Failed Update Data Member"
+      );
    }
+    modalLoader.setLoading(false);
+    setConfirmLoading(false);
  };
+
  const columns = [
    {
      title: "Amount",
@ -132,62 +122,12 @@ export const DetailUser = observer(() => {
      dataIndex: "isActive",
      key: "isActive",
      render: (text, record) => (
-        <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
-        >
-          {record?.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)}
+          <Tag
+              color={store.membership.dataDetail.isActive === true ? "processing" : "#E3E8EE"}
+              style={{color: "#4F566B"}}
          >
-            {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>
+            {store.membership.dataDetail.isActive === true ? " ACTIVE" : "INACTIVE"}
+          </Tag>
      ),
    },
  ];
@ -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>
@ -246,26 +187,64 @@ export const DetailUser = observer(() => {
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.isActive === true
-                    ? "Aktif"
-                    : "Inaktif"}
+                      ? "Aktif"
+                      : "Inaktif"}
                </Text>
              </Col>
            </Row>
          </Col>
-          {/* <Col lg={12} xs={24}>
-            <Row justify={"center"}>
-              <Col lg={24} xs={12}>
-                <Title strong level={3} style={styleSaldoTitle}>
-                  Saldo
-                </Title>
-              </Col>
-              <Col lg={24} xs={12}>
-                <Text style={styleSaldoContent}>
-                  {store.transaction?.data.amount}
-                </Text>
-              </Col>
-            </Row>
-          </Col> */}
+          <Col lg={12} xs={24}>
+            <Title strong level={3}>Action User Detail</Title>
+            <Space
+                size="middle"
+                align={"center"}
+                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>
        </Row>
        <Row>
          <Col span={24}>
@ -273,64 +252,16 @@ 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}
-                bordered
+                  columns={columns}
+                  dataSource={store.transaction.dataHistoryTopUp}
+                  bordered
              />
            </div>
          </Col>
        </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}
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -1,21 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  List,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tag
-} from "antd";
+import {Button, Card, Col, Divider, Form, InputNumber, List, message, Modal, Row, 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();
@ -337,11 +319,11 @@ export const Membership = observer(() => {
              dataSource={store.membership.data}
              bordered
              pagination={{
-                pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
-                current: store.membership.page + 1,
-                showSizeChanger: true,
-                simple: false,
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
              }}
              onChange={async (page) => {
                let pageNumber = page.current;
@ -359,17 +341,17 @@ export const Membership = observer(() => {
              itemLayout="horizontal"
              position={"top"}
              pagination={{
-                onChange: async (page) => {
-                  store.membership.pageSize = page.pageSize;
-                  store.membership.page = page.current - 1;
-                  modalLoader.setLoading(true);
-                  await getData();
-                  modalLoader.setLoading(false);
-                },
-                pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
-                current: store.membership.page + 1,
-                style: { marginBottom: "1rem", marginRight: "1rem" },
+                  onChange: async (page) => {
+                      store.membership.pageSize = page.pageSize;
+                      store.membership.page = page.current - 1;
+                      modalLoader.setLoading(true);
+                      await getData();
+                      modalLoader.setLoading(false);
+                  },
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  style: {marginBottom: "1rem", marginRight: "1rem"},
              }}
              dataSource={store.membership.data}
              style={{ padding: 0 }}
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@ -12,100 +12,100 @@ export const MembershipModal = ({
    const {Option} = Select;
    const store = useStore();

-  return (
-    <Modal
-      visible={visible}
-      title={
-        initialData.isChangePassword
-          ? "Change Member Password"
-          : initialData.id
-          ? "Edit Member"
-          : "Create a new Membership"
-      }
-      okText={initialData.id ? "Edit" : "Create"}
-      cancelText="Cancel"
-      onCancel={() => {
-        form.resetFields();
-        onCancel();
-      }}
-      onOk={() => {
-        form
-          .validateFields()
-          .then((values) => {
-            let input = values;
-            if (initialData.id)
-              input.username = initialData.username;
+    return (
+        <Modal
+            visible={visible}
+            title={
+                initialData.isChangePassword
+                    ? "Change Member Password"
+                    : initialData.id
+                        ? "Edit Member"
+                        : "Create a new Membership"
+            }
+            okText={initialData.id ? "Edit" : "Create"}
+            cancelText="Cancel"
+            onCancel={() => {
+                form.resetFields();
+                onCancel();
+            }}
+            onOk={() => {
+                form
+                    .validateFields()
+                    .then((values) => {
+                        let input = values;
+                        if (initialData.id)
+                            input.username = initialData.username;

-            onCreate(input);
-            form.resetFields();
-          })
-          .catch((info) => {
-            console.log("Validate Failed:", info);
-          });
-      }}
-    >
-      <Form
-        form={form}
-        layout="vertical"
-        name="form_in_modal"
-        initialValues={initialData}
-      >
-        {((initialData.id && !initialData.isChangePassword) ||
-          !initialData.id) && (
-          <Form.Item
-            name="name"
-            label="Name"
-            rules={[{ required: true, message: "Please input Name!" }]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        {!initialData.id && (
-          <Form.Item
-            name="username"
-            label="Username"
-            rules={[{ required: true, message: "Please input Username!" }]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        {((initialData.id && initialData.isChangePassword) ||
-          !initialData.id) && (
-          <Form.Item
-            name="password"
-            label="Password"
-            rules={[{ required: false, message: "Please input password!" }]}
-          >
-              <Input.Password/>
-          </Form.Item>
-        )}
-        {((initialData.id && !initialData.isChangePassword) ||
-          !initialData.id) && (
-          <Form.Item
-            name="phone_number"
-            label="Phone Number"
-            rules={[{ required: true, message: "Please input Phone Number!" }]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        {((initialData.id && !initialData.isChangePassword) ||
-          !initialData.id) && (
-          <Form.Item
-            name="roleId"
-            label="Role"
-            rules={[{ required: true, message: "Please input role id!" }]}
-          >
-            <Select>
-              {store.role.data.map((item) => (
-                <Option key={item.id} value={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
-        )}
-      </Form>
-    </Modal>
-  );
+                        onCreate(input);
+                        form.resetFields();
+                    })
+                    .catch((info) => {
+                        console.log("Validate Failed:", info);
+                    });
+            }}
+        >
+            <Form
+                form={form}
+                layout="vertical"
+                name="form_in_modal"
+                initialValues={initialData}
+            >
+                {((initialData.id && !initialData.isChangePassword) ||
+                    !initialData.id) && (
+                    <Form.Item
+                        name="name"
+                        label="Name"
+                        rules={[{required: true, message: "Please input Name!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                )}
+                {!initialData.id && (
+                    <Form.Item
+                        name="username"
+                        label="Username"
+                        rules={[{required: true, message: "Please input Username!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                )}
+                {((initialData.id && initialData.isChangePassword) ||
+                    !initialData.id) && (
+                    <Form.Item
+                        name="password"
+                        label="Password"
+                        rules={[{required: false, message: "Please input password!"}]}
+                    >
+                        <Input.Password/>
+                    </Form.Item>
+                )}
+                {((initialData.id && !initialData.isChangePassword) ||
+                    !initialData.id) && (
+                    <Form.Item
+                        name="phone_number"
+                        label="Phone Number"
+                        rules={[{required: true, message: "Please input Phone Number!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                )}
+                {((initialData.id && !initialData.isChangePassword) ||
+                    !initialData.id) && (
+                    <Form.Item
+                        name="roleId"
+                        label="Role"
+                        rules={[{required: true, message: "Please input role id!"}]}
+                    >
+                        <Select>
+                            {store.role.data.map((item) => (
+                                <Option key={item.id} value={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                )}
+            </Form>
+        </Modal>
+    );
 };
--- a/src/store/membership.js
+++ b/src/store/membership.js
@ -5,8 +5,9 @@ export class Membership {
    page = 0;
    pageSize = 10
    data = [];
-    total_data = 0
-    dataDetail=[]
+    totalData = 0;
+
+    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);