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

feat: remodel product page

Browse Source
This commit is contained in:
caturbgs 2021-12-16 21:36:42 +07:00
parent d41681c217
commit cf3afb27c4
4 changed files with 154 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/component/ProductComponent.js
View File

@ -1,5 +1,5 @@
import React, {useEffect, useState} from "react"; import React, {useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd"; import {Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Typography} 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";
@ -7,6 +7,8 @@ import {capitalize} from "lodash";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
const {Title, Text} = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -15,21 +17,9 @@ export const ProductComponent = observer((props) => {
const [idData, setIdData] = useState(''); const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [filterSupplier, setFilterSupplier] = useState(null);
useEffect(() => { const [filterCategories, setFilterCategories] = useState(null);
const init = async () => { const [filterSubCategories, setFilterSubCategories] = useState(null);
try {
setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category)
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data") console.log(data, "isi data")
@ -173,6 +163,42 @@ export const ProductComponent = observer((props) => {
} }
} }
const handleRemoveFilter = async () => {
store.product.filterSupplier = null;
store.product.filterCategory = null;
store.product.filterSubCategory = null;
setFilterSupplier(null);
setFilterCategories(null);
setFilterSubCategories(null);
await store.product.getData();
store.product.visibleModalFilterProduct = false;
};
const handleCancelFilter = () => {
setFilterSupplier(null);
setFilterCategories(null);
setFilterSubCategories(null);
store.product.visibleModalFilterProduct = false;
};
const handleSubmitFilter = async () => {
store.product.filterSupplier = filterSupplier;
store.product.filterCategory = filterCategories;
store.product.filterSubCategory = filterSubCategories;
await store.product.getData();
store.product.visibleModalFilterProduct = false;
};
const footerLayoutFilter = [
<Button key={'remove'} onClick={handleRemoveFilter} style={{
backgroundColor: '#e74e5e', color: '#fff'
}}>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>
<Table <Table
@ -276,6 +302,66 @@ export const ProductComponent = observer((props) => {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal
visible={store.product.visibleModalFilterProduct}
title={"Filter"}
footer={footerLayoutFilter}
>
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Supplier</Title>
<Select
mode={"multiple"}
placeholder="Choose Supplier"
onChange={(val) => {
setFilterSupplier(val);
}}
style={{marginBottom: "20px", width: "100%"}}
>
{store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
<Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Categories</Title>
<Select
mode={"multiple"}
placeholder="Choose Category"
onChange={(val) => {
setFilterCategories(val);
}}
style={{marginBottom: "20px", width: "100%"}}
>
{store.category.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
<Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
<Select
mode={"multiple"}
placeholder="Choose Sub-Category"
onChange={(val) => {
setFilterSubCategories(val);
}}
style={{marginBottom: "20px", width: "100%"}}
>
{store.category.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
</Modal>
</div> </div>
); );
}); });

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

@ -1,33 +1,32 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Button, Card, Col, Input, Row, Select, Tabs, Upload } from "antd"; import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
import { import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
FilterOutlined, import {BreadcumbComponent} from "../../component/BreadcumbComponent";
PlusSquareOutlined, import {useStore} from "../../utils/useStore";
UploadOutlined, import {observer} from "mobx-react-lite";
} from "@ant-design/icons"; import {ProductComponent} from "../../component/ProductComponent";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {LINKS} from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { ProductComponent } from "../../component/ProductComponent";
import { LINKS } from "../../routes/app";
const { TabPane } = Tabs; const {TabPane} = Tabs;
const { Search } = Input; const {Search} = Input;
const { Option } = Select; const {Option} = Select;
export const Product = observer(() => { export const Product = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [uploadProduct, setUpload] = useState(true);
const store = useStore(); const store = useStore();
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
await store.supplier.getData(); await Promise.allSettled([
await store.product.getDataCategories(); store.supplier.getData(),
store.product.getDataCategories(),
store.product.getDataSubCategories(),
store.category.getData(),
store.category.getDataSubCategories(),
]);
await store.product.getData(); await store.product.getData();
//await store.supplier.data;
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -52,14 +51,17 @@ export const Product = observer(() => {
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
{/* <Button> <Button onClick={() => {
<FilterOutlined /> store.product.visibleModalFilterProduct = true
}}>
<FilterOutlined/>
Filter Filter
</Button> */} </Button>
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12}>
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -68,36 +70,21 @@ export const Product = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
<Button onClick={() => (store.product.visibleModalProduct = true)}>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<Row>
<Col span={20}>
<Select
placeholder="Choose Supplier"
onChange={(val) => {
val ? setUpload(false) : setUpload(true);
}}
style={{ marginBottom: "20px", width: "100%" }}
>
{store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
<Col style={{ marginLeft: "10px" }}>
<Upload> <Upload>
<Button disabled={uploadProduct} icon={<UploadOutlined />}> <Button disabled={store.product.uploadBtnProduct} style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} icon={<UploadOutlined/>}>
Upload Product Upload Product
</Button> </Button>
</Upload> </Upload>
<Button onClick={() => (store.product.visibleModalProduct = true)}>
<PlusSquareOutlined/> New
</Button>
</div>
</Col> </Col>
</Row> </Row>
<ProductComponent /> <ProductComponent/>
</Card> </Card>
</div> </div>
); );

15
src/store/category.js
View File

@ -9,11 +9,6 @@ export class Category {
filterCategory = null; filterCategory = null;
visibleModalCategory = false; visibleModalCategory = false;
pageCategories = 0;
pageSizeCategories = 10
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0; pageSubCategories = 0;
pageSizeSubCategories = 10 pageSizeSubCategories = 10
dataSubCategories = []; dataSubCategories = [];
@ -37,16 +32,6 @@ export class Category {
this.total_dataSubCategories = response.body.count ?? 0 this.total_dataSubCategories = response.body.count ?? 0
} }
async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
}
async create(data) { async create(data) {
const response = await http.post('/product/categories').send(data); const response = await http.post('/product/categories').send(data);
await this.getData(); await this.getData();

8
src/store/product.js
View File

@ -6,8 +6,12 @@ export class Product {
pageSize = 10 pageSize = 10
data = []; data = [];
total_data = 0; total_data = 0;
filterSupplier = null;
filterCategory = null; filterCategory = null;
filterSubCategory = null;
visibleModalProduct = false; visibleModalProduct = false;
visibleModalFilterProduct = false;
uploadBtnProduct = false;
pageCategories = 0; pageCategories = 0;
pageSizeCategories = 10 pageSizeCategories = 10
@ -25,8 +29,7 @@ export class Product {
} }
async getData() { async getData() {
const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`); const response = await http.get(`/product/all?supplier=${this.filterSupplier}&categories=${this.filterCategory}&categories=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data.map((item, idx) => { this.data = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item return item
@ -46,7 +49,6 @@ export class Product {
async getDataCategories() { async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`); const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? [] this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0 this.total_dataCategories = response.body.total_data ?? 0