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
parent ab347b8ff9
commit a0207af25e
4 changed files with 220 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/component/ProductComponent.js
View File

@ -26,14 +26,14 @@ export const ProductComponent = observer((props) => {
}, },
{ {
title: "Harga Beli", title: "Harga Beli",
dataIndex: "price", dataIndex: "basePrice",
key: "price", key: "basePrice",
}, },
, ,
{ {
title: "Harga Jual", title: "Harga Jual",
dataIndex: "base_price", dataIndex: "price",
key: "base_price", key: "price",
}, },
{ {
title: "Gangguan", title: "Gangguan",

363
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 = [
@ -49,28 +63,34 @@ export const Membership = observer(() => {
key: "status", key: "status",
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> >
</Space> Edit
</Button>
<Button
onClick={async () => {
handleDelete(record.id);
}}
>
Delete
</Button>
</Space>
), ),
}, },
]; ];
@ -82,177 +102,180 @@ 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 && (
<Table
key="1"
hasEmpty
size={"small"}
columns={columns}
dataSource={store.membership.data}
bordered
// pagination={{
// total: store.membership.total_data,
// current: store.membership.page,
// pageSize: store.membership.pageSize,
// simple: true
// }}
// onChange={(page) => {
// store.membership.pageSize = page.pageSize;
// store.membership.page = page.current;
// store.membership.getData();
// }}
// current={store.membership.page}
// loading={store.membership.pageSize}
/>
)}
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isMobile && (
<Table <List
key="1" itemLayout="horizontal"
hasEmpty position={"top"}
size={"small"} pagination={{
columns={columns} onChange: (page) => {
dataSource={store.membership.data[0]} store.membership.pageSize = page.pageSize;
bordered store.membership.page = page.current;
// pagination={{ store.membership.getData();
// total: store.membership.total_data, },
// current: store.membership.page, pageSize: store.membership.pageSize,
// pageSize: store.membership.pageSize, total: store.membership.total_data,
// simple: true current: store.membership.page,
// }} style: { marginBottom: "1rem", marginRight: "1rem" },
// onChange={(page) => { }}
// store.membership.pageSize = page.pageSize; dataSource={store.membership.data}
// store.membership.page = page.current; style={{ padding: 0 }}
// store.membership.getData(); renderItem={(item) => {
// }} return (
// current={store.membership.page} <div>
// loading={store.membership.pageSize} <List.Item
/>)} key={item.id}
style={{
{store.ui.mediaQuery.isMobile && ( backgroundColor: "#ffffff",
<List paddingTop: 0,
itemLayout="horizontal" paddingBottom: 0,
position={"top"} display: "flex",
pagination={{ flexDirection: "row",
onChange: (page) => { alignItems: "center",
store.membership.pageSize = page.pageSize; justifyContent: "center",
store.membership.page = page.current; }}
store.membership.getData(); >
}, <List.Item.Meta
pageSize: store.membership.pageSize, className={["cariparkir-container"].join(" ")}
total: store.membership.total_data, title={item.username}
current: store.membership.page, description={
style: {marginBottom: '1rem', marginRight: '1rem'} <div style={{}}>
}} <p>
dataSource={store.membership.data} <small>Username : {item.username}</small> <br />
style={{padding: 0}} </p>
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
description={
<div style={{}}>
<p>
<small>Email : {item.email}</small> <br/>
</p>
</div>
}
/>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{format(new Date(item.created_at), "dd-MM-yyyy")}
</p>
</div>
</List.Item>
<Divider plain style={{margin: 0}}/>
</div> </div>
); }
}} />
/> <div style={{ marginRight: 16 }}>
)} <p
</div> style={{
</Card> fontSize: 9,
<MembershipModal visible={visibleModal} margin: 0,
confirmLoading={confirmLoading} }}
initialData={initialData} >
onCreate={async (data) => { {item.username}
onSubmit(data) </p>
}} </div>
onCancel={() => { </List.Item>
setInitialData({}) <Divider plain style={{ margin: 0 }} />
setVisibleModal(false); </div>
}}/> );
</div> }}
/>
)}
</div>
</Card>
<MembershipModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data);
}}
onCancel={() => {
setInitialData({});
setVisibleModal(false);
}}
/>
</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);
} }
} }