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

Crud Membership

Browse Source
This commit is contained in:
ajat91 2021-12-10 13:18:42 +07:00 committed by caturbgs
parent 48905225bb
commit 0da2118bec
3 changed files with 216 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 { format } from "date-fns";
@ -11,25 +28,22 @@ const {Search} = Input;
export const Membership = observer(() => {
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false)
const [initialData, setInitialData] = useState({})
const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const init = async () => {
try {
setIsLoading(true)
setIsLoading(true);
await store.membership.getData();
setIsLoading(false)
setIsLoading(false);
} catch (e) {
setIsLoading(false)
}
setIsLoading(false);
}
};
useEffect(() => {
init()
init();
}, []);
const columns = [
@ -52,24 +66,30 @@ export const Membership = observer(() => {
color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status}
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag>
)
),
},
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button onClick={() => {
setVisibleModal(true)
setInitialData(record)
}}>Edit</Button>
<Button onClick={async () => {
handleDelete(record.id)
<Button
onClick={() => {
setVisibleModal(true);
setInitialData(record);
}}
>Delete</Button>
>
Edit
</Button>
<Button
onClick={async () => {
handleDelete(record.id);
}}
>
Delete
</Button>
</Space>
),
},
@ -88,53 +108,54 @@ export const Membership = observer(() => {
const onSubmit = async (data) => {
if (initialData.id) {
setInitialData({})
setInitialData({});
setConfirmLoading(true);
try {
await store.membership.update(initialData.id, data)
message.success("Success Update Data Member")
await store.membership.update(initialData.id, data);
message.success("Success Update Data Member");
await store.membership.getData();
} catch (e) {
message.error("Failed Update Data Member")
message.error("Failed Update Data Member");
}
setConfirmLoading(false);
setVisibleModal(false);
} else {
setInitialData({})
setInitialData({});
setConfirmLoading(true);
try {
await store.membership.create(data)
message.success("Success Add New Member")
await store.membership.create(data);
message.success("Success Add New Member");
await store.membership.getData();
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Member")
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
setVisibleModal(false);
}
}
};
const handleDelete = (record) => {
Modal.confirm({
title: 'Are you sure reject this record?',
title: "Are you sure reject this record?",
icon: <ExclamationCircleOutlined />,
okText: 'Yes',
okType: 'primary',
cancelText: 'Cancel',
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
try {
//TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
// await store.membership.delete(record.id)
message.success('Success Delete Data')
message.success("Success Delete Data");
} catch (e) {
message.error("Failed Delete Data")
message.error("Failed Delete Data");
}
},
onCancel() {
console.log('Cancel');
console.log("Cancel");
},
});
}
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
@ -157,14 +178,13 @@ export const Membership = observer(() => {
</Button>
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
size={"small"}
columns={columns}
dataSource={store.membership.data[0]}
dataSource={store.membership.data}
bordered
// pagination={{
// total: store.membership.total_data,
@ -179,7 +199,8 @@ export const Membership = observer(() => {
// }}
// current={store.membership.page}
// loading={store.membership.pageSize}
/>)}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
@ -194,7 +215,7 @@ export const Membership = observer(() => {
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page,
style: {marginBottom: '1rem', marginRight: '1rem'}
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.membership.data}
style={{ padding: 0 }}
@ -215,11 +236,11 @@ export const Membership = observer(() => {
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
title={item.username}
description={
<div style={{}}>
<p>
<small>Email : {item.email}</small> <br/>
<small>Username : {item.username}</small> <br />
</p>
</div>
}
@ -231,7 +252,7 @@ export const Membership = observer(() => {
margin: 0,
}}
>
{format(new Date(item.created_at), "dd-MM-yyyy")}
{item.username}
</p>
</div>
</List.Item>
@ -243,16 +264,18 @@ export const Membership = observer(() => {
)}
</div>
</Card>
<MembershipModal visible={visibleModal}
<MembershipModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data)
onSubmit(data);
}}
onCancel={() => {
setInitialData({})
setInitialData({});
setVisibleModal(false);
}}/>
}}
/>
</div>
);
});

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

@ -9,13 +9,13 @@ export const MembershipModal = ({
}) => {
const [form] = Form.useForm();
const {Option} = Select;
const dataStatus = ['Active', 'Inactive']
const dataStatus = ["true", "false"]
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Member"}
title={initialData.id ? "Edit Member" : "Create a new Membership"}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
@ -40,13 +40,7 @@ export const MembershipModal = ({
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: 'Please input Name!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="username"
label="Username"
@ -55,10 +49,23 @@ export const MembershipModal = ({
<Input/>
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{required: true, message: 'Please select Status!'}]}
name="password"
label="Password"
rules={[{required: true, message: 'Please input password!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="roleId"
label="Role Id"
rules={[{required: true, message: 'Please input role id!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="superior"
label="Superior"
rules={[{required: true, message: 'Please select superior status!'}]}
>
<Select
showSearch

6
src/store/membership.js
View File

@ -23,16 +23,16 @@ export class Membership {
@action
async create(data) {
return await http.post('/user').send(data)
return await http.post('/users').send(data)
}
@action
async update(id, data) {
return await http.put('/user/' + id).send(data);
return await http.put('/users/' + id).send(data);
}
async delete(id) {
return await http.del('/user/' + id);
return await http.del('/users/' + id);
}
}