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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

Browse Source
This commit is contained in:
ajat91 2021-12-16 16:11:57 +07:00
commit 5ce366f638
13 changed files with 359 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/component/PartnerComponent.js
View File

@ -23,6 +23,7 @@ export const PartnerComponent = observer((props) => {
const { Option } = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [isChangePassword, setIsChangePassword] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@ -62,6 +63,19 @@ export const PartnerComponent = observer((props) => {
npwp: data.npwp,
address: data.address,
});
setIsChangePassword(false);
store.partner.visibleModalPartner = true;
setIdData(data.id);
};
const changePassword = (data) => {
// form.setFieldsValue({
// name: data.name,
// npwp: data.npwp,
// address: data.address,
// });
setIsChangePassword(true);
store.partner.visibleModalPartner = true;
setIdData(data.id);
};
@ -89,8 +103,7 @@ export const PartnerComponent = observer((props) => {
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: 'pointer' }}
onClick={() => changeStatus(record?.id, record?.status)}
style={{ color: "#4F566B", cursor: "pointer" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
@ -101,25 +114,19 @@ export const PartnerComponent = observer((props) => {
key: "action",
render: (text, record) => (
<Space size="middle">
<Button onClick={() => changeStatus(record?.id, record?.status)}>
{record?.status === true ? "Inactive" : "Active"}
</Button>
<Button onClick={() => handleEditButton(record)}>Edit</Button>
<Button onClick={() => handleDelete(record.id)}>Delete</Button>
{/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
<Button onClick={() => changePassword(record)}>
Change Password
</Button>
</Space>
),
},
];
// const handleEditStatus = async (id)=>{
// try {
// console.log(id);
// await store.partner.delete(id);
// message.success("Data Berhasil Dihapus");
// history.push(LINKS.PARTNER);
// } catch (err) {
// console.log("error", err);
// message.error("Gagal menghapus");
// }
// }
const deleteData = async (id) => {
try {
console.log(id);
@ -132,7 +139,6 @@ export const PartnerComponent = observer((props) => {
}
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
@ -160,10 +166,10 @@ export const PartnerComponent = observer((props) => {
setConfirmLoading(true);
try {
await store.partner.update(idData, data);
message.success("Success Update Data Partner");
message.success(isChangePassword ? "Failed Change Partner Password" : "Success Update Data Partner");
//await store.partner.getData()
} catch (e) {
message.error("Failed Update Data Partner");
message.error(isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner");
}
setConfirmLoading(false);
store.partner.visibleModalPartner = false;
@ -211,7 +217,13 @@ export const PartnerComponent = observer((props) => {
<Modal
visible={store.partner.visibleModalPartner}
title={idData ? "Edit Partner" : "Create a new partner"}
title={
isChangePassword
? "Change Member Password"
: idData
? "Edit Partner"
: "Create a new partner"
}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
@ -232,60 +244,65 @@ export const PartnerComponent = observer((props) => {
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="name"
label="Name"
rules={[
{!isChangePassword && (
<Form.Item
name="name"
label="Name"
rules={[
idData
? { required: false }
: { required: true, message: "Please input password name!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="owner"
label="Owner"
rules={[
idData
? { required: false }
: { required: true, message: "Please input name!" }
]}
>
<Input />
</Form.Item>
<Form.Item
name="password_account"
label="Password Account"
rules={[
idData
? { required: false }
: { required: true, message: "Please input password account!" }
]}
>
<Input />
</Form.Item>
<Form.Item
name="npwp"
label="Npwp"
rules={[
idData
? { required: false }
: { required: true, message: "Please input npwp!" }
]}
>
<Input />
</Form.Item>
<Form.Item
name="address"
label="address"
rules={[
idData
? { required: false }
: { required: true, message: "Please input password address!" }
]}
>
<Input />
</Form.Item>
: { required: true, message: "Please input password name!" },
]}
>
<Input />
</Form.Item>
)}
{((idData && isChangePassword) || !idData) && (
<Form.Item
name="password_account"
label="Password Account"
rules={[
idData
? { required: false }
: {
required: true,
message: "Please input password account!",
},
]}
>
<Input />
</Form.Item>
)}
{!isChangePassword && (
<>
<Form.Item
name="npwp"
label="Npwp"
rules={[
idData
? { required: false }
: { required: true, message: "Please input npwp!" },
]}
>
<Input />
</Form.Item>
<Form.Item
name="address"
label="address"
rules={[
idData
? { required: false }
: {
required: true,
message: "Please input password address!",
},
]}
>
<Input />
</Form.Item>
</>
)}
</Form>
</Modal>
</div>

2
src/pages/App/DesktopLayout.js
View File

@ -83,7 +83,7 @@ export const DesktopLayout = observer(() => {
color: "#413d3e",
}}
>
Admin
{store.authentication.userData.role}
</Paragraph>
</div>
<MenuList closeLeftDrawer={() => {}} />

8
src/pages/App/MenuList.js
View File

@ -111,14 +111,6 @@ export const MenuList = observer((props) => {
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined />

19
src/pages/Config/Partner.js
View File

@ -51,10 +51,10 @@ export const Partner = observer(() => {
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
{/* <Button>
<FilterOutlined/>
Filter
</Button>
</Button> */}
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
@ -70,20 +70,7 @@ export const Partner = observer(() => {
</Button>
</Col>
</Row>
<Tabs
//onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<TabPane
tab="Partner"
key="1"
>
<PartnerComponent/>
</TabPane>
))
</Tabs>
<PartnerComponent />
</Card>
</div>
);

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

@ -41,8 +41,8 @@ export const Membership = observer(() => {
const init = async () => {
try {
setIsLoading(true);
await store.membership.getData();
await store.role.getData();
await getData();
store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
@ -52,9 +52,18 @@ export const Membership = observer(() => {
init();
}, []);
const getData = () => {
(store.authentication.userData.role === "Admin")
? store.membership.getData()
: store.membership.getDataBySuperior();
}
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
console.log(status);
try {
const response = await store.membership.changeStatus(id, status);
@ -96,17 +105,21 @@ export const Membership = observer(() => {
dataIndex: "username",
key: "username",
},
{
title: "Role",
dataIndex: "roleName",
key: "role",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: "pointer" }}
onClick={() => changeStatus(record?.id, record?.status)}
color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
@ -115,27 +128,45 @@ export const Membership = observer(() => {
key: "action",
render: (text, record) => (
<Space size="middle">
<Button onClick={() => changeStatus(record?.id, record?.isActive)}>
{record?.isActive === true ? "Inactive" : "Active"}
</Button>
<Button
onClick={() => {
setVisibleModal(true);
let record2 = record;
delete record2.password;
record2.isChangePassword = false;
setInitialData({
...record,
roleId: record.roles.id,
...record2,
// roleId: record.roles.id,
});
setVisibleModal(true);
}}
>
Edit
</Button>
<Button
onClick={() => {
let record2 = record;
delete record2.password;
record2.isChangePassword = true;
setInitialData({
...record2,
// roleId: record.roles.id,
});
setVisibleModal(true);
}}
>
Ganti Password
</Button>
{/* <Button
onClick={async () => {
handleDelete(record.id);
}}
>
Delete
</Button>
{/* <Button onClick={showModal}
>
Role
</Button> */}
</Space>
),
@ -154,16 +185,26 @@ export const Membership = observer(() => {
];
const onSubmit = async (data) => {
data.superior = true;
if (initialData.id) {
setInitialData({});
setConfirmLoading(true);
try {
console.log(data);
await store.membership.update(initialData.id, data);
message.success("Success Update Data Member");
await store.membership.getData();
message.success(
initialData.isChangePassword
? "Success Change Member Password"
: "Success Update Data Member"
);
await getData();
} catch (e) {
message.error("Failed Update Data Member");
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
: "Failed Update Data Member"
);
}
setConfirmLoading(false);
setVisibleModal(false);
@ -173,7 +214,7 @@ export const Membership = observer(() => {
try {
await store.membership.create(data);
message.success("Success Add New Member");
await store.membership.getData();
await getData();
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Member");
@ -195,7 +236,7 @@ export const Membership = observer(() => {
//TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
await store.membership.delete(record);
message.success("Success Delete Data");
await store.membership.getData();
await getData();
} catch (e) {
message.error("Failed Delete Data");
}
@ -273,7 +314,7 @@ export const Membership = observer(() => {
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.membership.getData();
await getData();
// store.membership.isLoading = false;
}}
/>
@ -287,7 +328,7 @@ export const Membership = observer(() => {
onChange: (page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
store.membership.getData();
getData();
},
pageSize: store.membership.pageSize,
total: store.membership.total_data,

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

@ -17,7 +17,13 @@ export const MembershipModal = ({
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Membership"}
title={
initialData.isChangePassword
? "Change Member Password"
: initialData.id
? "Edit Member"
: "Create a new Membership"
}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
@ -28,7 +34,10 @@ export const MembershipModal = ({
form
.validateFields()
.then((values) => {
onCreate(values);
let input = values;
input.username = initialData.username;
onCreate(input);
form.resetFields();
})
.catch((info) => {
@ -42,58 +51,39 @@ export const MembershipModal = ({
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())
}
{((initialData.id && !initialData.isChangePassword) || !initialData.id) && (
<Form.Item
name="username"
label="Username"
rules={[{ required: true, message: "Please input Username!" }]}
>
{dataStatus.map((it, idx) => {
return <Option value={it} key={idx}>{capitalize(it)}</Option>;
})}
</Select>
</Form.Item>
<Input />
</Form.Item>
)}
{((initialData.id && initialData.isChangePassword) || !initialData.id) && (
<Form.Item
name="password"
label="Password"
rules={[{ required: false, message: "Please input password!" }]}
>
<Input />
</Form.Item>
)}
{((initialData.id && !initialData.isChangePassword) || !initialData.id) && (
<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>
</Modal>
);

28
src/pages/Product/Product.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { Button, Card, Col, Input, Row, Select, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
@ -9,6 +9,7 @@ import { LINKS } from "../../routes/app";
const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;
export const Product = observer(() => {
const [isLoading, setIsLoading] = useState(false);
@ -72,14 +73,27 @@ export const Product = observer(() => {
</Col>
</Row>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
<Row>
<Col span={24}>
<Select
placeholder="Choose Supplier"
onChange={(val) => console.log(val, "SELECTED")}
style={{ marginBottom: "20px", width: "100%" }}
>
<Option value={1}>Hemm</Option>
<Option value={2}>Huam</Option>
</Select>
</Col>
</Row>
{/* <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
{store.product.dataCategories.map((item, idx) => (
<TabPane tab={item.name} key={item.id}>
{/* <ProductComponent category={item.name} /> */}
<ProductComponent />
</TabPane>
<TabPane tab={item.name} key={item.id}> */}
{/* <ProductComponent category={item.name} /> */}
<ProductComponent />
{/* </TabPane>
))}
</Tabs>
</Tabs> */}
</Card>
</div>
);

111
src/pages/Profile/Profile.js
View File

@ -1,12 +1,14 @@
import React from "react";
import {Card, Col, Row, Typography} from "antd";
import React, {useEffect} from "react";
import {Button, Card, Col, Row, Table, Typography} 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} from "@ant-design/icons";
const {Title, Text} = Typography;
export const Profile = () => {
export const Profile = observer(() => {
const store = useStore();
const routeData = [
{
@ -19,34 +21,103 @@ export const Profile = () => {
},
];
useEffect(() => {
(async () => {
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
})()
}, []);
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
},
]
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Title strong>Profile</Title>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Row>
<Col span={12}>
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text>
</Col>
</Row>
</Col>
<Col span={12}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Title strong level={3}>Saldo</Title>
<Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text>
</div>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong>Profile</Title>
<Row>
<Col span={10}>
<Text strong>Name</Text>
</Col>
<Col span={14}>
<Text>{store.authentication.userData.username}</Text>
</Col>
<Col span={10}>
<Text strong>Role</Text>
</Col>
<Col span={14}>
<Text>{store.authentication.userData.role}</Text>
</Col>
</Row>
<Title strong level={3}>History User Transaction</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter')
}}>
<FilterOutlined/>
Filter
</Button>
<Table
columns={columns}
dataSource={store.transaction.dataHistoryTransaction}
bordered
/>
</div>
</Col>
</Row>
<div/>
</Card>
</div>
)
};
});

11
src/store/authentication.js
View File

@ -6,6 +6,7 @@ export class Authentication {
isLoggedIn = false;
isLoginLoading = false;
ctx;
profileData = {};
constructor(ctx) {
this.ctx = ctx;
@ -49,6 +50,16 @@ export class Authentication {
}
}
async getProfile() {
try {
const response = await http.get('/auth/profile');
this.profileData = response.body;
} catch (e) {
console.error(e);
throw e;
}
}
logout() {
TokenUtil.clearAccessToken();
TokenUtil.persistToken();

7
src/store/commission.js
View File

@ -26,8 +26,11 @@ export class Commission {
async getData() {
const response = await http.get(`/config/commission?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 create(data) {

21
src/store/membership.js
View File

@ -14,19 +14,26 @@ export class Membership {
async getData() {
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data.map((item, idx) => {
item.key = idx;
item.roleName = item.roles.name;
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
}
async getDataBySuperior() {
const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data.map((item, idx) => {
item.key = idx;
item.roleName = item.roles.name;
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
}
// async getData() {
// const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
// this.data = response.body.data ?? []
// this.total_data = response.body.total_data ?? 0
// }
async create(data) {
return await http.post('/users').send(data)
@ -47,6 +54,8 @@ export class Membership {
}
async changeStatus(id, status) {
console.log(`/users/${id}/${status}`);
const response = await http.get(`/users/${id}/${status}`);
await this.getData();
return response;

16
src/store/transaction.js
View File

@ -1,5 +1,5 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Transaction {
page = 0;
@ -19,6 +19,11 @@ export class Transaction {
dataSubCategories = [];
total_dataSubCategories = 0;
pageHistoryTransaction = 0;
// pageSizeHistoryTransaction = 10
dataHistoryTransaction = [];
total_dataHistoryTransaction = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
@ -47,6 +52,13 @@ export class Transaction {
}
}
async getDataHistoryTransaction() {
const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}`);
this.dataHistoryTransaction = response.body.data ?? []
this.total_dataHistoryTransaction = response.body.total_data ?? 0
}
async create(data) {
const response = await http.post('/product').send(data);
await this.getData();

7
src/store/user.js
View File

@ -1,9 +1,14 @@
import {action, observable} from "mobx";
import {action, makeAutoObservable, observable} from "mobx";
import {http} from "../utils/http";
export class User {
@observable data = [];
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
@action
async getData() {
this.data = (await http.get('/user')).body.data;