chore: move action button into detail user
This commit is contained in:
caturbgs
parent
db6287ca2c
commit
1a0a1756b0
|
|
@ -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;
|
||||
|
||||
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"}
|
||||
style={{ color: "#4F566B" }}
|
||||
color={store.membership.dataDetail.isActive === true ? "processing" : "#E3E8EE"}
|
||||
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}>
|
||||
<Row justify={"center"}>
|
||||
<Col lg={24} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>
|
||||
Saldo
|
||||
</Title>
|
||||
<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>
|
||||
<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}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user