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
parent ac7e5714e7 6ce6d67260
commit 5ce366f638
13 changed files with 359 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
)
};
});