Merge branches 'develop' and 'develop' of gitlab.com:empatnusabangsa/ppob/ppob-frontend into develop
This commit is contained in:
commit
53a051981f
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
|
||||
import React, {useState} from "react";
|
||||
import {Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Typography} from "antd";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {ExclamationCircleOutlined} from "@ant-design/icons";
|
||||
import {useHistory} from "react-router-dom";
|
||||
|
|
@ -7,6 +7,8 @@ import {capitalize} from "lodash";
|
|||
import {useStore} from "../utils/useStore";
|
||||
import {LINKS} from "../routes/app";
|
||||
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
export const ProductComponent = observer((props) => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
|
|
@ -15,21 +17,9 @@ export const ProductComponent = observer((props) => {
|
|||
const [idData, setIdData] = useState('');
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//store.product.pageCategories=StrToLower(props.category)
|
||||
await store.product.getDataSubCategories();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
const [filterSupplier, setFilterSupplier] = useState(null);
|
||||
const [filterCategories, setFilterCategories] = useState(null);
|
||||
const [filterSubCategories, setFilterSubCategories] = useState(null);
|
||||
|
||||
const handleEditButton = (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 (
|
||||
<div>
|
||||
<Table
|
||||
|
|
@ -276,6 +302,66 @@ export const ProductComponent = observer((props) => {
|
|||
</Form.Item>
|
||||
</Form>
|
||||
</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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
|
||||
import {
|
||||
FilterOutlined,
|
||||
PlusSquareOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
|
|
@ -17,17 +13,20 @@ const { Option } = Select;
|
|||
|
||||
export const Product = observer(() => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [uploadProduct, setUpload] = useState(true);
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.supplier.getData();
|
||||
await store.product.getDataCategories();
|
||||
await Promise.allSettled([
|
||||
store.supplier.getData(),
|
||||
store.product.getDataCategories(),
|
||||
store.product.getDataSubCategories(),
|
||||
store.category.getData(),
|
||||
store.category.getDataSubCategories(),
|
||||
]);
|
||||
await store.product.getData();
|
||||
//await store.supplier.data;
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
|
|
@ -54,12 +53,15 @@ export const Product = observer(() => {
|
|||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
{/* <Button>
|
||||
<Button onClick={() => {
|
||||
store.product.visibleModalFilterProduct = true
|
||||
}}>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button> */}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
<Col span={12}>
|
||||
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{
|
||||
|
|
@ -68,33 +70,18 @@ export const Product = observer(() => {
|
|||
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>
|
||||
<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
|
||||
</Button>
|
||||
</Upload>
|
||||
<Button onClick={() => (store.product.visibleModalProduct = true)}>
|
||||
<PlusSquareOutlined/> New
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<ProductComponent/>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,6 @@ export class Category {
|
|||
filterCategory = null;
|
||||
visibleModalCategory = false;
|
||||
|
||||
pageCategories = 0;
|
||||
pageSizeCategories = 10
|
||||
dataCategories = [];
|
||||
total_dataCategories = 0;
|
||||
|
||||
pageSubCategories = 0;
|
||||
pageSizeSubCategories = 10
|
||||
dataSubCategories = [];
|
||||
|
|
|
|||
|
|
@ -6,8 +6,12 @@ export class Product {
|
|||
pageSize = 10
|
||||
data = [];
|
||||
total_data = 0;
|
||||
filterSupplier = null;
|
||||
filterCategory = null;
|
||||
filterSubCategory = null;
|
||||
visibleModalProduct = false;
|
||||
visibleModalFilterProduct = false;
|
||||
uploadBtnProduct = false;
|
||||
|
||||
pageCategories = 0;
|
||||
pageSizeCategories = 10
|
||||
|
|
@ -25,8 +29,7 @@ export class Product {
|
|||
}
|
||||
|
||||
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) => {
|
||||
item.key = idx;
|
||||
return item
|
||||
|
|
@ -46,7 +49,6 @@ export class Product {
|
|||
|
||||
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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user