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

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

@ -1,35 +1,49 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; Col,
import {MembershipModal} from "./MembershipModal"; Divider,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Input,
import {format} from "date-fns"; 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 { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { format } from "date-fns";
const {Search} = Input; const { Search } = Input;
export const Membership = observer(() => { export const Membership = observer(() => {
const store = useStore(); const store = useStore();
const [visibleModal, setVisibleModal] = useState(false) const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({}) const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const init = async () => { const init = async () => {
try { try {
setIsLoading(true) setIsLoading(true);
await store.membership.getData(); await store.membership.getData();
setIsLoading(false) setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false) setIsLoading(false);
}
} }
};
useEffect(() => { useEffect(() => {
init();
init()
}, []); }, []);
const columns = [ const columns = [
@ -50,26 +64,32 @@ export const Membership = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"} color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{color: "#4F566B"}} style={{ color: "#4F566B" }}
> >
{record?.status} {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag> </Tag>
) ),
}, },
{ {
title: "Action", title: "Action",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button onClick={() => { <Button
setVisibleModal(true) onClick={() => {
setInitialData(record) setVisibleModal(true);
}}>Edit</Button> setInitialData(record);
<Button onClick={async () => {
handleDelete(record.id)
}} }}
>Delete</Button> >
Edit
</Button>
<Button
onClick={async () => {
handleDelete(record.id);
}}
>
Delete
</Button>
</Space> </Space>
), ),
}, },
@ -82,89 +102,89 @@ export const Membership = observer(() => {
}, },
{ {
route: "/app/membership", route: "/app/membership",
name: <span style={{fontWeight: "bold"}}>Membership</span>, name: <span style={{ fontWeight: "bold" }}>Membership</span>,
}, },
]; ];
const onSubmit = async (data) => { const onSubmit = async (data) => {
if (initialData.id) { if (initialData.id) {
setInitialData({}) setInitialData({});
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.membership.update(initialData.id, data) await store.membership.update(initialData.id, data);
message.success("Success Update Data Member") message.success("Success Update Data Member");
await store.membership.getData();
} catch (e) { } catch (e) {
message.error("Failed Update Data Member") message.error("Failed Update Data Member");
} }
setConfirmLoading(false); setConfirmLoading(false);
setVisibleModal(false); setVisibleModal(false);
} else { } else {
setInitialData({}) setInitialData({});
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.membership.create(data) await store.membership.create(data);
message.success("Success Add New Member") message.success("Success Add New Member");
await store.membership.getData();
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya");
message.error("Failed Add Member") message.error("Failed Add Member");
} }
setConfirmLoading(false); setConfirmLoading(false);
setVisibleModal(false); setVisibleModal(false);
} }
} };
const handleDelete = (record) => { const handleDelete = (record) => {
Modal.confirm({ Modal.confirm({
title: 'Are you sure reject this record?', title: "Are you sure reject this record?",
icon: <ExclamationCircleOutlined/>, icon: <ExclamationCircleOutlined />,
okText: 'Yes', okText: "Yes",
okType: 'primary', okType: "primary",
cancelText: 'Cancel', cancelText: "Cancel",
onOk() { onOk() {
try { try {
//TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya //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) // await store.membership.delete(record.id)
message.success('Success Delete Data') message.success("Success Delete Data");
} catch (e) { } catch (e) {
message.error("Failed Delete Data") message.error("Failed Delete Data");
} }
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log("Cancel");
}, },
}); });
} };
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined/> <FilterOutlined />
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{ textAlign: "right" }}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{width: 200, marginRight: 10}} style={{ width: 200, marginRight: 10 }}
/> />
<Button onClick={() => setVisibleModal(true)}> <Button onClick={() => setVisibleModal(true)}>
<PlusSquareOutlined/> New <PlusSquareOutlined /> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
key="1" key="1"
hasEmpty hasEmpty
size={"small"} size={"small"}
columns={columns} columns={columns}
dataSource={store.membership.data[0]} dataSource={store.membership.data}
bordered bordered
// pagination={{ // pagination={{
// total: store.membership.total_data, // total: store.membership.total_data,
@ -179,7 +199,8 @@ export const Membership = observer(() => {
// }} // }}
// current={store.membership.page} // current={store.membership.page}
// loading={store.membership.pageSize} // loading={store.membership.pageSize}
/>)} />
)}
{store.ui.mediaQuery.isMobile && ( {store.ui.mediaQuery.isMobile && (
<List <List
@ -194,10 +215,10 @@ export const Membership = observer(() => {
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.total_data,
current: store.membership.page, current: store.membership.page,
style: {marginBottom: '1rem', marginRight: '1rem'} style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.membership.data} dataSource={store.membership.data}
style={{padding: 0}} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -215,27 +236,27 @@ export const Membership = observer(() => {
> >
<List.Item.Meta <List.Item.Meta
className={["cariparkir-container"].join(" ")} className={["cariparkir-container"].join(" ")}
title={item.name} title={item.username}
description={ description={
<div style={{}}> <div style={{}}>
<p> <p>
<small>Email : {item.email}</small> <br/> <small>Username : {item.username}</small> <br />
</p> </p>
</div> </div>
} }
/> />
<div style={{marginRight: 16}}> <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
margin: 0, margin: 0,
}} }}
> >
{format(new Date(item.created_at), "dd-MM-yyyy")} {item.username}
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{margin: 0}}/> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}
@ -243,16 +264,18 @@ export const Membership = observer(() => {
)} )}
</div> </div>
</Card> </Card>
<MembershipModal visible={visibleModal} <MembershipModal
visible={visibleModal}
confirmLoading={confirmLoading} confirmLoading={confirmLoading}
initialData={initialData} initialData={initialData}
onCreate={async (data) => { onCreate={async (data) => {
onSubmit(data) onSubmit(data);
}} }}
onCancel={() => { onCancel={() => {
setInitialData({}) setInitialData({});
setVisibleModal(false); setVisibleModal(false);
}}/> }}
/>
</div> </div>
); );
}); });

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

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

6
src/store/membership.js
View File

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