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

Mobile Responsive

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-21 15:21:58 +07:00
parent 89b890c888
commit f91cbd02b2
5 changed files with 471 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/component/PartnerComponent.js
View File

@ -1,5 +1,17 @@
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag,} from "antd"; import {
Button,
Form,
Input,
message,
Modal,
Select,
Space,
Table,
Tag,
List,
Divider,
} from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -181,6 +193,7 @@ export const PartnerComponent = observer((props) => {
}; };
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && (
<Table <Table
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
columns={columns} columns={columns}
@ -202,7 +215,96 @@ export const PartnerComponent = observer((props) => {
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.partner.pageSize = page.pageSize;
store.partner.page = page.current;
modalLoader.setLoading(true);
await store.partner.getData();
modalLoader.setLoading(false);
},
pageSize: store.partner.pageSize,
total: store.partner.total_data,
current: store.partner.page,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.partner.data}
style={{ padding: 0 }}
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.code}
description={
<div style={{}}>
<p>
<small>Nama : {item.name}</small> <br />
<small>Npwp : {item.npwp}</small> <br />
<small>Address : {item.address}</small>
<Space size="middle">
<Button
type={
item?.status === true ? "danger" : "primary"
}
onClick={() =>
changeStatus(item?.id, item?.status)
}
>
{item?.status === true ? "Inactive" : "Active"}
</Button>
<Button onClick={() => handleEditButton(item)}>
Edit
</Button>
{/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
<Button onClick={() => changePassword(item)}>
Change Password
</Button>
</Space>
</p>
<p></p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
marginBottom: 40,
}}
>
<Tag
color={item?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: "pointer" }}
>
{item?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
<Modal <Modal
visible={store.partner.visibleModalPartner} visible={store.partner.visibleModalPartner}
title={ title={
@ -281,7 +383,10 @@ export const PartnerComponent = observer((props) => {
rules={[ rules={[
idData idData
? { required: false } ? { required: false }
: {required: true, message: "Please input password phone number!"}, : {
required: true,
message: "Please input password phone number!",
},
]} ]}
> >
<Input /> <Input />

190
src/component/ProductComponent.js
View File

@ -1,5 +1,19 @@
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd"; import {
Button,
Col,
Form,
Input,
message,
Modal,
Row,
Select,
Table,
Divider,
Tag,
Typography,
List,
} from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -15,14 +29,14 @@ export const ProductComponent = observer((props) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Option } = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(''); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState(null); const [filterSupplier, setFilterSupplier] = useState(null);
const [filterCategories, setFilterCategories] = useState(null); const [filterCategories, setFilterCategories] = useState(null);
const [filterSubCategories, setFilterSubCategories] = useState(null); const [filterSubCategories, setFilterSubCategories] = useState(null);
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data") console.log(data, "isi data");
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name,
price: data.price, price: data.price,
@ -33,7 +47,7 @@ export const ProductComponent = observer((props) => {
}); });
store.product.visibleModalProduct = true; store.product.visibleModalProduct = true;
setIdData(data.id); setIdData(data.id);
} };
const columns = [ const columns = [
{ {
@ -81,7 +95,7 @@ export const ProductComponent = observer((props) => {
{record?.status === "ACTIVE" ? " Tersedia" : "Tidak"} {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag> </Tag>
), ),
} },
]; ];
const deleteData = async (id) => { const deleteData = async (id) => {
@ -113,39 +127,39 @@ export const ProductComponent = observer((props) => {
}; };
const handleCancel = () => { const handleCancel = () => {
setIdData('') setIdData("");
store.product.visibleModalProduct = false; store.product.visibleModalProduct = false;
} };
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2") console.log(data, "isi data2");
if (idData !== '') { if (idData !== "") {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
await store.product.update(idData, data) await store.product.update(idData, data);
message.success("Success Update Data Member") message.success("Success Update Data Member");
} catch (e) { } catch (e) {
message.error("Failed Update Data Member") message.error("Failed Update Data Member");
} }
modalLoader.setLoading(false); modalLoader.setLoading(false);
store.product.visibleModalProduct = false; store.product.visibleModalProduct = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
await store.product.create(data) await store.product.create(data);
message.success("Success Add New Member") message.success("Success Add New Member");
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya");
message.error("Failed Add Member") message.error("Failed Add Member");
} }
modalLoader.setLoading(false); modalLoader.setLoading(false);
store.product.visibleModalProduct = false; store.product.visibleModalProduct = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} }
} };
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.product.filterSupplier = null; store.product.filterSupplier = null;
@ -174,19 +188,39 @@ export const ProductComponent = observer((props) => {
}; };
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button key={'remove'} onClick={handleRemoveFilter} style={{ <Button
backgroundColor: '#e74e5e', color: '#fff' key={"remove"}
}}>Remove Filter</Button>, onClick={handleRemoveFilter}
<Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>, style={{
<Button key={'submit'} onClick={handleSubmitFilter} style={{ backgroundColor: "#e74e5e",
backgroundColor: '#4e79e7', color: '#fff' color: "#fff",
}}>Apply</Button> }}
] >
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && (
<Table <Table
style={{textAlign: "center"}} style={{
textAlign: "center",
width: store.ui.mediaQuery.isMobile ? 250 : "",
}}
columns={columns} columns={columns}
dataSource={store.product.data} dataSource={store.product.data}
bordered bordered
@ -195,7 +229,7 @@ export const ProductComponent = observer((props) => {
total: store.product.total_data, total: store.product.total_data,
current: store.product.page + 1, current: store.product.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
@ -206,7 +240,80 @@ export const ProductComponent = observer((props) => {
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.product.pageSize = page.pageSize;
store.product.page = page.current;
modalLoader.setLoading(true);
await store.product.getData();
modalLoader.setLoading(false);
},
pageSize: store.product.pageSize,
total: store.product.total_data,
current: store.product.page,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.product.data}
style={{ padding: 0 }}
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.code}
description={
<div style={{}}>
<p>
<small>Nama Produk : {item.name}</small> <br />
<small>Harga Beli : {item.currentPrice.price}</small>
<br />
<small>
Harga Jual : {item.currentPrice.mark_up_price}
</small>
</p>
<p></p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
<Tag
color={item?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{item?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
<Modal <Modal
visible={store.product.visibleModalProduct} visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"} title={idData ? "Edit Product" : "Create a new Product"}
@ -220,7 +327,7 @@ export const ProductComponent = observer((props) => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log(values, "isi form") console.log(values, "isi form");
handleSubmit(values); handleSubmit(values);
form.resetFields(); form.resetFields();
}) })
@ -229,10 +336,7 @@ export const ProductComponent = observer((props) => {
}); });
}} }}
> >
<Form <Form form={form} layout="vertical">
form={form}
layout="vertical"
>
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
@ -274,7 +378,9 @@ export const ProductComponent = observer((props) => {
<Form.Item <Form.Item
name="subCategoriesId" name="subCategoriesId"
label="Sub categories" label="Sub categories"
rules={[{required: true, message: "Please select sub categories!"}]} rules={[
{ required: true, message: "Please select sub categories!" },
]}
> >
<Select placeholder="Select Sub Category" allowClear> <Select placeholder="Select Sub Category" allowClear>
{store.product.dataSubCategories.map((item) => ( {store.product.dataSubCategories.map((item) => (
@ -294,7 +400,9 @@ export const ProductComponent = observer((props) => {
> >
<Row> <Row>
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Supplier</Title> <Title level={5} type={"secondary"} strong>
Filter Supplier
</Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Supplier" placeholder="Choose Supplier"
@ -311,7 +419,9 @@ export const ProductComponent = observer((props) => {
</Select> </Select>
</Col> </Col>
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Categories</Title> <Title level={5} type={"secondary"} strong>
Filter Categories
</Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Category" placeholder="Choose Category"
@ -330,7 +440,9 @@ export const ProductComponent = observer((props) => {
</Select> </Select>
</Col> </Col>
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title> <Title level={5} type={"secondary"} strong>
Filter Sub-Categories
</Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Sub-Category" placeholder="Choose Sub-Category"

84
src/component/Subcategory.js
View File

@ -1,5 +1,17 @@
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {
Button,
Form,
Input,
message,
Modal,
Select,
Space,
Table,
List,
Tag,
Divider,
} from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { useStore } from "../utils/useStore"; import { useStore } from "../utils/useStore";
@ -94,6 +106,7 @@ export const SubcategoryComponent = observer((props) => {
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && (
<Table <Table
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
columns={columns} columns={columns}
@ -115,7 +128,74 @@ export const SubcategoryComponent = observer((props) => {
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.subcategory.pageSize = page.pageSize;
store.subcategory.page = page.current;
modalLoader.setLoading(true);
await store.subcategory.getData();
modalLoader.setLoading(false);
},
pageSize: store.subcategory.pageSize,
total: store.subcategory.total_data,
current: store.subcategory.page,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.subcategory.data}
style={{ padding: 0 }}
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.code}
description={
<div style={{}}>
<p>
<small>Sub Category : {item.name}</small> <br />
<small>Category : {item.categoryName}</small>
<br />
</p>
<p></p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
<Button onClick={() => handleEditButton(item)}>
Edit
</Button>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
<Modal <Modal
visible={store.subcategory.visibleModalSubcategory} visible={store.subcategory.visibleModalSubcategory}
title={idData ? "Edit Sub Category" : "Create a new sub category"} title={idData ? "Edit Sub Category" : "Create a new sub category"}

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

@ -145,7 +145,7 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISION}> <Link to={LINKS.COMMISSION}>
<HomeOutlined /> <HomeOutlined />
<span>Commision</span> <span>Commision</span>
</Link> </Link>

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

@ -63,7 +63,7 @@ export const Product = observer(() => {
</Button> </Button>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{display: 'flex', justifyContent: 'flex-end'}}> <div style={{display: store.ui.mediaQuery.isMobile? "" :'flex',justifyContent: 'flex-end',textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{