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

Pages Membership

Browse Source
This commit is contained in:
ajat91 2021-12-10 14:55:24 +07:00
commit 226831bd40
9 changed files with 122 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/component/ProductComponent.js
View File

@ -14,7 +14,6 @@ export const ProductComponent = observer((props) => {
const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [visibleModal, setVisibleModal] = useState(false);
useEffect(() => {
const init = async () => {
@ -35,11 +34,12 @@ export const ProductComponent = observer((props) => {
form.setFieldsValue({
name: data.name,
price: data.price,
base_price: data.base_price,
markUpPrice: data.basePrice,
code: data.code,
status: data.status,
subCategoriesId: data.sub_categories.id,
});
setVisibleModal(true);
store.product.visibleModalProduct = true;
setIdData(data.id);
}
@ -56,22 +56,21 @@ export const ProductComponent = observer((props) => {
},
{
title: "Harga Beli",
dataIndex: "basePrice",
key: "basePrice",
},
,
{
title: "Harga Jual",
dataIndex: "price",
key: "price",
},
{
title: "Harga Jual",
dataIndex: "basePrice",
key: "basePrice",
},
{
title: "Gangguan",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{capitalize(record?.status)}
@ -84,10 +83,10 @@ export const ProductComponent = observer((props) => {
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status === "AKTIF" ? " Ya" : "Tidak"}
{record?.status === "ACTIVE" ? " Ya" : "Tidak"}
</Tag>
),
},
@ -139,11 +138,12 @@ export const ProductComponent = observer((props) => {
const handleCancel = () => {
setIdData('')
setVisibleModal(false);
store.product.visibleModalProduct = false;
}
const handleSubmit = async (data) => {
if (idData != '') {
console.log(data, "isi data2")
if (idData !== '') {
setConfirmLoading(true);
try {
await store.product.update(idData, data)
@ -152,7 +152,9 @@ export const ProductComponent = observer((props) => {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
setVisibleModal(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
} else {
setConfirmLoading(true);
try {
@ -163,7 +165,9 @@ export const ProductComponent = observer((props) => {
message.error("Failed Add Member")
}
setConfirmLoading(false);
setVisibleModal(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
}
}
@ -176,7 +180,7 @@ export const ProductComponent = observer((props) => {
bordered
/>
<Modal
visible={visibleModal}
visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
@ -188,6 +192,7 @@ export const ProductComponent = observer((props) => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form")
handleSubmit(values);
form.resetFields();
})
@ -215,7 +220,7 @@ export const ProductComponent = observer((props) => {
<Input/>
</Form.Item>
<Form.Item
name="base_price"
name="markUpPrice"
label="Mark Up Price"
rules={[{required: true, message: "Please input mark up price!"}]}
>
@ -239,7 +244,7 @@ export const ProductComponent = observer((props) => {
</Select>
</Form.Item>
<Form.Item
name="sub_category"
name="subCategoriesId"
label="Sub categories"
rules={[{required: true, message: "Please select sub categories!"}]}
>

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

@ -1,7 +1,7 @@
import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {CalendarOutlined, HomeOutlined,} from "@ant-design/icons";
import {HomeOutlined,} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
@ -39,30 +39,30 @@ export const MenuList = observer((props) => {
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="membership">
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>
<Menu.Item key="product">
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
<Menu.Item key="transaction">
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={'/app/transaction'}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
<Menu.Item key="about">
<Link to={'/app/about'}>
<CalendarOutlined/>
<span>About</span>
</Link>
</Menu.Item>
</Menu.Item>}
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu>
);

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

@ -1,30 +1,12 @@
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 { format } from "date-fns";
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";
const { Search } = Input;
const {Search} = Input;
export const Membership = observer(() => {
const store = useStore();
@ -33,16 +15,18 @@ export const Membership = observer(() => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.membership.getData();
await store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
useEffect(() => {
init();
}, []);
@ -78,7 +62,10 @@ export const Membership = observer(() => {
<Button
onClick={() => {
setVisibleModal(true);
setInitialData(record);
setInitialData({
...record,
roleId: record.roles.id,
});
}}
>
Edit
@ -143,7 +130,7 @@ export const Membership = observer(() => {
const handleDelete = (record) => {
Modal.confirm({
title: "Are you sure reject this record?",
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
@ -176,17 +163,20 @@ export const Membership = observer(() => {
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined />
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{ textAlign: "right" }}>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{ width: 200, marginRight: 10 }}
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => setVisibleModal(true)}>
<PlusSquareOutlined /> New
<Button onClick={() => {
setInitialData({});
setVisibleModal(true);
}}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
@ -198,6 +188,7 @@ export const Membership = observer(() => {
columns={columns}
dataSource={store.membership.data}
bordered
// pagination={{
// total: store.membership.total_data,
// current: store.membership.page,

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

@ -1,5 +1,7 @@
import React from 'react';
import {Form, Input, Modal, Select,} from 'antd';
import {capitalize} from "lodash";
import {useStore} from "../../utils/useStore";
export const MembershipModal = ({
visible,
@ -10,6 +12,7 @@ export const MembershipModal = ({
const [form] = Form.useForm();
const {Option} = Select;
const dataStatus = ["true", "false"]
const store = useStore();
return (
@ -57,11 +60,14 @@ export const MembershipModal = ({
</Form.Item>
<Form.Item
name="roleId"
label="Role Id"
label="Role"
rules={[{required: true, message: 'Please input role id!'}]}
>
<Input defaultValue="0571"/>
<Select>
{store.role.data.map(item => (
<Option key={item.id} value={item.id}>{item.name}</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="superior"
@ -80,7 +86,7 @@ export const MembershipModal = ({
}
>
{dataStatus.map(it => {
return <Option value={it}>{it}</Option>
return <Option value={it}>{capitalize(it)}</Option>
})}
</Select>
</Form.Item>

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

@ -60,7 +60,7 @@ export const Product = observer(() => {
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => store.product.visibleModal = true}>
<Button onClick={() => store.product.visibleModalProduct = true}>
<PlusSquareOutlined/> New
</Button>
</Col>

2
src/store/index.js
View File

@ -4,6 +4,7 @@ import {User} from "./user";
import {Membership} from "./membership";
import {Product} from "./product";
import {TokenUtil} from "../utils/token";
import {Role} from "./role";
export class Store {
ui = new UI(this);
@ -11,6 +12,7 @@ export class Store {
user = new User(this);
membership = new Membership(this);
product = new Product(this);
role = new Role(this);
constructor() {
TokenUtil.loadToken();

2
src/store/membership.js
View File

@ -15,8 +15,6 @@ export class Membership {
@action
async getData() {
const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
// console.log(response, 'Data user')
// console.log(JSON.stringify(response.body.data), 'Data')
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}

8
src/store/product.js
View File

@ -1,4 +1,4 @@
import {action, makeAutoObservable} from "mobx";
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Product {
@ -7,6 +7,7 @@ export class Product {
data = [];
total_data = 0;
filterCategory = null;
visibleModalProduct = false;
pageCategories = 0;
pageSizeCategories = 10
@ -46,15 +47,14 @@ export class Product {
}
}
@action
async create(data) {
const response = await http.post('/product', data);
const response = await http.post('/product').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`, data);
const response = await http.put(`/product/${id}`).send(data);
await this.getData();
return response;
}

34
src/store/role.js Normal file
View File

@ -0,0 +1,34 @@
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Role {
page = null;
pageSize = null;
data = [];
total_data = 0
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
const response = await http.get(`/config/roles?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)
}
async update(id, data) {
return await http.put('/users/' + id).send(data);
}
async delete(id) {
return await http.del('/users/' + id);
}
}