PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: move action button into detail user

Browse Source
This commit is contained in:
caturbgs 2021-12-23 16:30:03 +07:00
parent db6287ca2c
commit 1a0a1756b0
4 changed files with 246 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

299
src/pages/Membership/DetailUser.js
View File

@ -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; const {Title, Text} = Typography;
@ -36,19 +25,24 @@ export const DetailUser = observer(() => {
(async () => { (async () => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await getData(); await getData();
await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id),
store.membership.getDetail(id),
]);
modalLoader.setLoading(false); modalLoader.setLoading(false);
})(); })();
return () => {
store.membership.dataDetail = {};
store.transaction.dataHistoryTopUp = [];
};
}, []); }, []);
const getData = async () => { 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 changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating"; const status2 = isActive ? "Inactivating" : "Activating";
@ -69,46 +63,42 @@ export const DetailUser = observer(() => {
const onSubmit = async (data) => { const onSubmit = async (data) => {
data.superior = true; 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) { setVisibleModal(false);
setConfirmLoading(true);
modalLoader.setLoading(true); if (response?.body?.statusCode === 200) {
try {
await store.membership.update(initialData.id, data);
message.success( message.success(
initialData.isChangePassword initialData.isChangePassword
? "Success Change Member Password" ? "Success Change Member Password"
: "Success Update Data Member" : "Success Update Data Member");
); } else {
await getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(true);
message.error( message.error(
initialData.isChangePassword initialData.isChangePassword
? "Failed Update Member Password" ? "Failed Change Member Password"
: "Failed Update Data Member" : "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");
} }
await getData();
} catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
setConfirmLoading(false); message.error(
setVisibleModal(false); initialData.isChangePassword
setInitialData({}); ? "Failed Update Member Password"
: "Failed Update Data Member"
);
} }
modalLoader.setLoading(false);
setConfirmLoading(false);
}; };
const columns = [ const columns = [
{ {
title: "Amount", title: "Amount",
@ -132,62 +122,12 @@ export const DetailUser = observer(() => {
dataIndex: "isActive", dataIndex: "isActive",
key: "isActive", key: "isActive",
render: (text, record) => ( render: (text, record) => (
<Tag <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"}
</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"} {store.membership.dataDetail.isActive === true ? " ACTIVE" : "INACTIVE"}
</Button> </Tag>
{/* } */}
{/* {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>
), ),
}, },
]; ];
@ -206,6 +146,7 @@ export const DetailUser = observer(() => {
name: <span style={{ fontWeight: "bold" }}>Detail User</span>, name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
}, },
]; ];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
@ -224,7 +165,7 @@ export const DetailUser = observer(() => {
<Text strong>Username</Text> <Text strong>Username</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.membership.dataDetail.superior?.username}</Text> <Text>{store.membership.dataDetail.username}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Role</Text> <Text strong>Role</Text>
@ -246,26 +187,64 @@ export const DetailUser = observer(() => {
<Col span={12}> <Col span={12}>
<Text> <Text>
{store.membership.dataDetail.isActive === true {store.membership.dataDetail.isActive === true
? "Aktif" ? "Aktif"
: "Inaktif"} : "Inaktif"}
</Text> </Text>
</Col> </Col>
</Row> </Row>
</Col> </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}
</Col> style={{textAlign: 'center'}}
<Col lg={24} xs={12}> >
<Text style={styleSaldoContent}> {store.authentication.userData.role === "Admin" &&
{store.transaction?.data.amount} <Button
</Text> type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
</Col> onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
</Row> >
</Col> */} {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>
<Row> <Row>
<Col span={24}> <Col span={24}>
@ -273,64 +252,16 @@ export const DetailUser = observer(() => {
<Title strong level={3}> <Title strong level={3}>
History Top Up History Top Up
</Title> </Title>
{/* <Button
style={{ marginBottom: "1rem" }}
onClick={() => {
console.log("clicked filter");
}}
>
<FilterOutlined />
Filter
</Button> */}
<Table <Table
columns={columns} columns={columns}
dataSource={store.transaction.dataHistoryTopUp} dataSource={store.transaction.dataHistoryTopUp}
bordered bordered
/> />
</div> </div>
</Col> </Col>
</Row> </Row>
<div /> <div />
</Card> </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 <MembershipModal
visible={visibleModal} visible={visibleModal}
confirmLoading={confirmLoading} confirmLoading={confirmLoading}

52
src/pages/Membership/Membership.js
View File

@ -1,21 +1,5 @@
import React, {useContext, useEffect, useState} from "react"; 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 {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons"; import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
@ -25,8 +9,6 @@ import {LINKS} from "../../routes/app";
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
const {Option} = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -337,11 +319,11 @@ export const Membership = observer(() => {
dataSource={store.membership.data} dataSource={store.membership.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.totalData,
current: store.membership.page + 1, current: store.membership.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
@ -359,17 +341,17 @@ export const Membership = observer(() => {
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page) => { onChange: async (page) => {
store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
store.membership.page = page.current - 1; store.membership.page = page.current - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await getData(); await getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.totalData,
current: store.membership.page + 1, current: store.membership.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" }, style: {marginBottom: "1rem", marginRight: "1rem"},
}} }}
dataSource={store.membership.data} dataSource={store.membership.data}
style={{ padding: 0 }} style={{ padding: 0 }}

190
src/pages/Membership/MembershipModal.js
View File

@ -12,100 +12,100 @@ export const MembershipModal = ({
const {Option} = Select; const {Option} = Select;
const store = useStore(); const store = useStore();
return ( return (
<Modal <Modal
visible={visible} visible={visible}
title={ title={
initialData.isChangePassword initialData.isChangePassword
? "Change Member Password" ? "Change Member Password"
: initialData.id : initialData.id
? "Edit Member" ? "Edit Member"
: "Create a new Membership" : "Create a new Membership"
} }
okText={initialData.id ? "Edit" : "Create"} okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
onCancel(); onCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
let input = values; let input = values;
if (initialData.id) if (initialData.id)
input.username = initialData.username; input.username = initialData.username;
onCreate(input); onCreate(input);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.log("Validate Failed:", info); console.log("Validate Failed:", info);
}); });
}} }}
> >
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
name="form_in_modal" name="form_in_modal"
initialValues={initialData} initialValues={initialData}
> >
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{ required: true, message: "Please input Name!" }]} rules={[{required: true, message: "Please input Name!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{!initialData.id && ( {!initialData.id && (
<Form.Item <Form.Item
name="username" name="username"
label="Username" label="Username"
rules={[{ required: true, message: "Please input Username!" }]} rules={[{required: true, message: "Please input Username!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{((initialData.id && initialData.isChangePassword) || {((initialData.id && initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="password" name="password"
label="Password" label="Password"
rules={[{ required: false, message: "Please input password!" }]} rules={[{required: false, message: "Please input password!"}]}
> >
<Input.Password/> <Input.Password/>
</Form.Item> </Form.Item>
)} )}
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="phone_number" name="phone_number"
label="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> </Form.Item>
)} )}
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="roleId" name="roleId"
label="Role" label="Role"
rules={[{ required: true, message: "Please input role id!" }]} rules={[{required: true, message: "Please input role id!"}]}
> >
<Select> <Select>
{store.role.data.map((item) => ( {store.role.data.map((item) => (
<Option key={item.id} value={item.id}> <Option key={item.id} value={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
)} )}
</Form> </Form>
</Modal> </Modal>
); );
}; };

26
src/store/membership.js
View File

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