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

feat: completing sub categories

Browse Source
This commit is contained in:
rarsyansyahr
2021-12-16 20:31:59 +07:00
parent 1cb4ad5e09
commit d41681c217
5 changed files with 210 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/component/Subcategory.js
View File

@@ -1,18 +1,28 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd"; import {
import {observer} from "mobx-react-lite"; Button,
import {ExclamationCircleOutlined} from "@ant-design/icons"; Form,
import {useHistory} from "react-router-dom"; Input,
import {capitalize} from "lodash"; message,
import {useStore} from "../utils/useStore"; Modal,
import {LINKS} from "../routes/app"; Select,
Space,
Table,
Tag,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { capitalize } from "lodash";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
export const SubcategoryComponent = observer((props) => { export const SubcategoryComponent = observer((props) => {
const store = useStore(); const store = useStore();
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 [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -21,8 +31,7 @@ export const SubcategoryComponent = observer((props) => {
try { try {
setIsLoading(true); setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category) //store.product.pageCategories=StrToLower(props.category)
await store.subcategory.getData(); getData();
await store.category.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@@ -32,17 +41,28 @@ export const SubcategoryComponent = observer((props) => {
init(); init();
}, []); }, []);
const getData = async () => {
await store.subcategory.getData();
await store.category.getData();
};
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data") console.log(data, "isi data");
form.setFieldsValue({ form.setFieldsValue({
code: data.code,
name: data.name, name: data.name,
categoryId: data.categoryId, categoryId: data.categoryId,
}); });
store.subcategory.visibleModalSubcategory = true; store.subcategory.visibleModalSubcategory = true;
setIdData(data.id); setIdData(data.id);
} };
const columns = [ const columns = [
{
title: "Code",
dataIndex: "code",
key: "code",
},
{ {
title: "Sub Category Name", title: "Sub Category Name",
dataIndex: "name", dataIndex: "name",
@@ -53,53 +73,53 @@ export const SubcategoryComponent = observer((props) => {
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button <Button onClick={() => handleEditButton(record)}>Edit</Button>
onClick={() => handleEditButton(record)}
>Edit</Button>
</Space> </Space>
), ),
}, },
]; ];
const handleCancel = () => { const handleCancel = () => {
setIdData('') setIdData("");
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
} };
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2") console.log(data, "isi data2");
if (idData !== '') { if (idData !== "") {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.subcategory.update(idData, data) await store.subcategory.update(idData, data);
message.success("Success Update Data Category") await getData();
message.success("Success Update Data Category");
} catch (e) { } catch (e) {
message.error("Failed Update Data Category") message.error("Failed Update Data Category");
} }
setConfirmLoading(false); setConfirmLoading(false);
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.subcategory.create(data) await store.subcategory.create(data);
message.success("Success Add New Category") await getData();
message.success("Success Add New Category");
} catch (e) { } catch (e) {
console.log(e, "apa errornya") console.log(e, "apa errornya");
message.error("Failed Add Category") message.error("Failed Add Category");
} }
setConfirmLoading(false); setConfirmLoading(false);
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(''); setIdData("");
form.resetFields(); form.resetFields();
} }
} };
//console.log() //console.log()
return ( return (
<div> <div>
<Table <Table
style={{textAlign: "center"}} style={{ textAlign: "center" }}
columns={columns} columns={columns}
dataSource={store.subcategory.data} dataSource={store.subcategory.data}
bordered bordered
@@ -108,14 +128,14 @@ export const SubcategoryComponent = 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={(page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSize = page.pageSize; store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1; store.product.page = pageNumber - 1;
// store.membership.isLoading = true; // store.membership.isLoading = true;
await store.product.getData(); getData();
// store.membership.isLoading = false; // store.membership.isLoading = false;
}} }}
/> />
@@ -133,7 +153,7 @@ export const SubcategoryComponent = 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();
}) })
@@ -142,21 +162,30 @@ export const SubcategoryComponent = observer((props) => {
}); });
}} }}
> >
<Form <Form form={form} layout="vertical">
form={form} {!idData && (
layout="vertical" <Form.Item
name="code"
label="Code"
rules={[
{ required: true, message: "Please input code category!" },
]}
> >
<Input />
</Form.Item>
)}
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{required: true, message: "Please input name category!"}]} rules={[{ required: true, message: "Please input name category!" }]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
{!idData && (
<Form.Item <Form.Item
name="categoryId" name="categoryId"
label="Categories" label="Categories"
rules={[{required: true, message: "Please input category id!"}]} rules={[{ required: true, message: "Please input category id!" }]}
> >
<Select placeholder="Select Category" allowClear> <Select placeholder="Select Category" allowClear>
{store.category.data.map((item) => ( {store.category.data.map((item) => (
@@ -166,6 +195,7 @@ export const SubcategoryComponent = observer((props) => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
)}
</Form> </Form>
</Modal> </Modal>
</div> </div>

11
src/pages/Product/Category.js
View File

@@ -65,18 +65,15 @@ export const Category = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
<Button onClick={() => (store.category.visibleModalCategory = true)}> <Button
onClick={() => (store.category.visibleModalCategory = true)}
>
<PlusSquareOutlined /> New <PlusSquareOutlined /> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50"> <CategoryComponent />
<TabPane tab="Category" key="1">
<CategoryComponent/>
</TabPane>
))
</Tabs>
</Card> </Card>
</div> </div>
); );

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

@@ -54,10 +54,10 @@ export const Product = observer(() => {
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> {/* <Button>
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> </Button> */}
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
<Search <Search

26
src/pages/Product/Subcategory.js
View File

@@ -7,7 +7,6 @@ import { observer } from "mobx-react-lite";
import { LINKS } from "../../routes/app"; import { LINKS } from "../../routes/app";
import { SubcategoryComponent } from "../../component/Subcategory"; import { SubcategoryComponent } from "../../component/Subcategory";
const { TabPane } = Tabs;
const { Search } = Input; const { Search } = Input;
export const Subcategory = observer(() => { export const Subcategory = observer(() => {
@@ -18,8 +17,7 @@ export const Subcategory = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
//await store.category.getData(); // await getData();
await store.subcategory.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@@ -29,11 +27,10 @@ export const Subcategory = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabPane = async (key) => { const getData = async () => {
store.product.filterCategory = key; await store.category.getData();
console.log(key); await store.subcategory.getData();
}; };
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@@ -51,10 +48,10 @@ export const Subcategory = observer(() => {
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> {/* <Button>
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> </Button> */}
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
<Search <Search
@@ -65,17 +62,14 @@ export const Subcategory = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
<Button onClick={() => (store.subcategory.visibleModalSubcategory= true)}> <Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)}
>
<PlusSquareOutlined /> New <PlusSquareOutlined /> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50"> <SubcategoryComponent />
<TabPane tab="Sub-Category" key="1">
<SubcategoryComponent/>
</TabPane>
))
</Tabs>
</Card> </Card>
</div> </div>
); );

3
src/store/subcategory.js
View File

@@ -26,21 +26,18 @@ export class Subcategory {
async getData() { async getData() {
const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`); const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
console.log(response)
this.data = response.body.data ?? [] this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0 this.total_data = response.body.total_data ?? 0
} }
async getDataSubCategories() { async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
console.log(response)
this.dataSubCategories = response.body.data ?? [] this.dataSubCategories = response.body.data ?? []
this.total_dataSubCategories = response.body.count ?? 0 this.total_dataSubCategories = response.body.count ?? 0
} }
async create(data) { async create(data) {
const response = await http.post('/product/sub-categories').send(data); const response = await http.post('/product/sub-categories').send(data);
console.log(response)
await this.getData(); await this.getData();
return response; return response;
} }