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

feat: change status partner & membership

Browse Source
This commit is contained in:
rarsyansyahr 2021-12-15 18:14:02 +07:00
parent 08b82c55ab
commit d0b2aec893
7 changed files with 245 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/component/PartnerComponent.js
View File

@ -40,6 +40,21 @@ export const PartnerComponent = observer((props) => {
init();
}, []);
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
try {
const response = await store.partner.changeStatus(id, status);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Partner`)
: message.error(`Failed ${status2} Partner`);
} catch (err) {
console.log("error", err);
message.error(`Failed ${status2} Partner`);
}
};
const handleEditButton = (data) => {
console.log(data, "isi data");
form.setFieldsValue({
@ -72,9 +87,13 @@ export const PartnerComponent = observer((props) => {
dataIndex: "status",
key: "status",
render: (text, record) => (
<Button size="small" type={record?.status === true ? "primary" : "danger"}>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Button>
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: 'pointer' }}
onClick={() => changeStatus(record?.id, record?.status)}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
{

52
src/component/SupplierComponent.js
View File

@ -45,16 +45,26 @@ export const SupplierComponent = observer((props) => {
form.setFieldsValue({
name: data.name,
code: data.code,
status:data.status
status: data.status,
});
store.supplier.visibleModalSupplier = true;
setIdData(data.id);
};
const changeStatus = (id, isActive) => {
const status = isActive ? "inactive" : "active"
store.supplier.changeStatus(id, status)
}
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
try {
const response = await store.supplier.changeStatus(id, status);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Supplier`)
: message.error(`Failed ${status2} Supplier`);
} catch (err) {
console.log("error", err);
message.error(`Failed ${status2} Supplier`);
}
};
const columns = [
{
@ -74,7 +84,7 @@ export const SupplierComponent = observer((props) => {
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: 'pointer' }}
style={{ color: "#4F566B", cursor: "pointer" }}
onClick={() => changeStatus(record?.id, record?.status)}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
@ -125,7 +135,7 @@ export const SupplierComponent = observer((props) => {
setIdData("");
store.supplier.visibleModalSupplier = false;
};
const handleCancelTransaction= () => {
const handleCancelTransaction = () => {
store.supplier.visibleModalTransaction = false;
};
@ -162,21 +172,19 @@ export const SupplierComponent = observer((props) => {
const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
setConfirmLoading(true);
try {
await store.supplier.createTransaction(data);
message.success("Success Top Up");
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Top Up");
}
setConfirmLoading(false);
store.supplier.visibleModalTransaction = false;
form.resetFields();
};
setConfirmLoading(true);
try {
await store.supplier.createTransaction(data);
message.success("Success Top Up");
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Top Up");
}
setConfirmLoading(false);
store.supplier.visibleModalTransaction = false;
form.resetFields();
};
return (
<div>

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

@ -1,13 +1,30 @@
import React, {useEffect, useState} from "react";
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 {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import React, { useEffect, useState } from "react";
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 { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
const {Search} = Input;
const { Search } = Input;
export const Membership = observer(() => {
const store = useStore();
@ -31,6 +48,21 @@ export const Membership = observer(() => {
init();
}, []);
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
try {
const response = await store.membership.changeStatus(id, status);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`);
} catch (err) {
console.log("error", err);
message.error(`Failed ${status2} Membership`);
}
};
const columns = [
{
title: "Name",
@ -48,10 +80,11 @@ export const Membership = observer(() => {
key: "status",
render: (text, record) => (
<Tag
color={record?.isActive === true ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: "pointer" }}
onClick={() => changeStatus(record?.id, record?.status)}
>
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
@ -188,26 +221,26 @@ export const Membership = observer(() => {
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.membership.getData();
// store.membership.isLoading = false;
}}
key="1"
hasEmpty
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.membership.getData();
// store.membership.isLoading = false;
}}
/>
)}

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

@ -1,96 +1,100 @@
import React from 'react';
import {Form, Input, Modal, Select,} from 'antd';
import {capitalize} from "lodash";
import {useStore} from "../../utils/useStore";
import React from "react";
import { Form, Input, Modal, Select } from "antd";
import { capitalize } from "lodash";
import { useStore } from "../../utils/useStore";
export const MembershipModal = ({
visible,
onCreate,
onCancel,
initialData,
}) => {
const [form] = Form.useForm();
const {Option} = Select;
const dataStatus = ["true", "false"]
const store = useStore();
visible,
onCreate,
onCancel,
initialData,
}) => {
const [form] = Form.useForm();
const { Option } = Select;
const dataStatus = ["true", "false"];
const store = useStore();
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Membership"}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields()
onCancel()
}}
onOk={() => {
form
.validateFields()
.then(values => {
onCreate(values);
form.resetFields()
})
.catch(info => {
console.log('Validate Failed:', info);
});
}}
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Membership"}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
onCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
onCreate(values);
form.resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="username"
label="Username"
rules={[{ required: true, message: "Please input Username!" }]}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="username"
label="Username"
rules={[{required: true, message: 'Please input Username!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[{required: false, message: 'Please input password!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{required: true, message: 'Please input role id!'}]}
>
<Select>
{store.role.data.map(item => (
<Option key={item.id} value={item.id}>{item.name}</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="superior"
label="Superior"
rules={[{required: true, message: 'Please select superior status!'}]}
>
<Select
showSearch
placeholder="Select Status"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
filterSort={(optionA, optionB) =>
optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
}
>
{dataStatus.map(it => {
return <Option value={it}>{capitalize(it)}</Option>
})}
</Select>
</Form.Item>
</Form>
</Modal>
);
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[{ required: false, message: "Please input password!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
{store.role.data.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="superior"
label="Superior"
rules={[
{ required: true, message: "Please select superior status!" },
]}
>
<Select
showSearch
placeholder="Select Status"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
filterSort={(optionA, optionB) =>
optionA.children
.toLowerCase()
.localeCompare(optionB.children.toLowerCase())
}
>
{dataStatus.map((it, idx) => {
return <Option value={it} key={idx}>{capitalize(it)}</Option>;
})}
</Select>
</Form.Item>
</Form>
</Modal>
);
};

17
src/store/membership.js
View File

@ -12,11 +12,14 @@ export class Membership {
makeAutoObservable(this);
}
@action
async getData() {
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response)
this.data = response.body.data ?? []
this.data = response.body.data.map((item, idx) => {
item.key = idx;
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
}
// async getData() {
@ -25,12 +28,10 @@ export class Membership {
// this.total_data = response.body.total_data ?? 0
// }
@action
async create(data) {
return await http.post('/users').send(data)
}
@action
async update(id, data) {
// console.log(data)
// console.log(id)
@ -44,6 +45,12 @@ export class Membership {
return await http.del('/users/' + id);
}
async changeStatus(id, status) {
const response = await http.get(`/users/${id}/${status}`);
await this.getData();
return response;
}
}

13
src/store/partner.js
View File

@ -26,8 +26,12 @@ export class Partner {
async getData() {
const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data ?? []
//console.log(response.body,"ini dari store")
this.data = response.body.data.map((item, idx) => {
item.key = idx;
return item
}) ?? []
this.total_data = response.body.count ?? 0
}
@ -55,6 +59,11 @@ export class Partner {
return response;
}
async changeStatus(id, status) {
const response = await http.get(`/users/partner/${id}/${status}`);
await this.getData();
return response;
}
}

11
src/store/product.js
View File

@ -37,7 +37,10 @@ export class Product {
async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data ?? []
this.dataSubCategories = response.body.data.map((item, idx) => {
item.key = idx;
return item
}) ?? []
this.total_dataSubCategories = response.body.count ?? 0
}
@ -46,9 +49,15 @@ export class Product {
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
this.dataCategories = this.dataCategories.map((item, idx) => {
item.key = idx;
return item
}) ?? []
}
async create(data) {