feat: completing sub categories
This commit is contained in:
parent
1cb4ad5e09
commit
d41681c217
|
|
@ -1,173 +1,203 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Form, Input, message, Modal, 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";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
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) => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const {Option} = Select;
|
||||
const history = useHistory();
|
||||
const [idData, setIdData] = useState('');
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const { Option } = Select;
|
||||
const history = useHistory();
|
||||
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.subcategory.getData();
|
||||
await store.category.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//store.product.pageCategories=StrToLower(props.category)
|
||||
getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleEditButton = (data) => {
|
||||
console.log(data, "isi data")
|
||||
form.setFieldsValue({
|
||||
name: data.name,
|
||||
categoryId: data.categoryId,
|
||||
});
|
||||
store.subcategory.visibleModalSubcategory = true;
|
||||
setIdData(data.id);
|
||||
const getData = async () => {
|
||||
await store.subcategory.getData();
|
||||
await store.category.getData();
|
||||
};
|
||||
|
||||
const handleEditButton = (data) => {
|
||||
console.log(data, "isi data");
|
||||
form.setFieldsValue({
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
categoryId: data.categoryId,
|
||||
});
|
||||
store.subcategory.visibleModalSubcategory = true;
|
||||
setIdData(data.id);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Code",
|
||||
dataIndex: "code",
|
||||
key: "code",
|
||||
},
|
||||
{
|
||||
title: "Sub Category Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
key: "action",
|
||||
render: (text, record) => (
|
||||
<Space size="middle">
|
||||
<Button onClick={() => handleEditButton(record)}>Edit</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleCancel = () => {
|
||||
setIdData("");
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
console.log(data, "isi data2");
|
||||
if (idData !== "") {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.subcategory.update(idData, data);
|
||||
await getData();
|
||||
message.success("Success Update Data Category");
|
||||
} catch (e) {
|
||||
message.error("Failed Update Data Category");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.subcategory.create(data);
|
||||
await getData();
|
||||
message.success("Success Add New Category");
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya");
|
||||
message.error("Failed Add Category");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
}
|
||||
};
|
||||
//console.log()
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{ textAlign: "center" }}
|
||||
columns={columns}
|
||||
dataSource={store.subcategory.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.product.pageSize,
|
||||
total: store.product.total_data,
|
||||
current: store.product.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={(page) => {
|
||||
let pageNumber = page.current;
|
||||
store.product.pageSize = page.pageSize;
|
||||
store.product.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Sub Category Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
key: "action",
|
||||
render: (text, record) => (
|
||||
<Space size="middle">
|
||||
<Button
|
||||
onClick={() => handleEditButton(record)}
|
||||
>Edit</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleCancel = () => {
|
||||
setIdData('')
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
}
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
console.log(data, "isi data2")
|
||||
if (idData !== '') {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.subcategory.update(idData, data)
|
||||
message.success("Success Update Data Category")
|
||||
} catch (e) {
|
||||
message.error("Failed Update Data Category")
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
setIdData('');
|
||||
form.resetFields();
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.subcategory.create(data)
|
||||
message.success("Success Add New Category")
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya")
|
||||
message.error("Failed Add Category")
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.subcategory.visibleModalSubcategory = false;
|
||||
setIdData('');
|
||||
form.resetFields();
|
||||
}
|
||||
}
|
||||
//console.log()
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{textAlign: "center"}}
|
||||
columns={columns}
|
||||
dataSource={store.subcategory.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.product.pageSize,
|
||||
total: store.product.total_data,
|
||||
current: store.product.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.product.pageSize = page.pageSize;
|
||||
store.product.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
await store.product.getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
visible={store.subcategory.visibleModalSubcategory}
|
||||
title={idData ? "Edit Sub Category" : "Create a new sub category"}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form")
|
||||
handleSubmit(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
<Modal
|
||||
visible={store.subcategory.visibleModalSubcategory}
|
||||
title={idData ? "Edit Sub Category" : "Create a new sub category"}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form");
|
||||
handleSubmit(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
{!idData && (
|
||||
<Form.Item
|
||||
name="code"
|
||||
label="Code"
|
||||
rules={[
|
||||
{ required: true, message: "Please input code category!" },
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
rules={[{required: true, message: "Please input name category!"}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="categoryId"
|
||||
label="Categories"
|
||||
rules={[{required: true, message: "Please input category id!"}]}
|
||||
>
|
||||
<Select placeholder="Select Category" allowClear>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
rules={[{ required: true, message: "Please input name category!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{!idData && (
|
||||
<Form.Item
|
||||
name="categoryId"
|
||||
label="Categories"
|
||||
rules={[{ required: true, message: "Please input category id!" }]}
|
||||
>
|
||||
<Select placeholder="Select Category" allowClear>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -65,18 +65,15 @@ export const Category = observer(() => {
|
|||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
<Button onClick={() => (store.category.visibleModalCategory = true)}>
|
||||
<Button
|
||||
onClick={() => (store.category.visibleModalCategory = true)}
|
||||
>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
|
||||
<TabPane tab="Category" key="1">
|
||||
<CategoryComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
<CategoryComponent />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@ export const Product = observer(() => {
|
|||
<Card>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
{/* <Button>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Button> */}
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
<Search
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { observer } from "mobx-react-lite";
|
|||
import { LINKS } from "../../routes/app";
|
||||
import { SubcategoryComponent } from "../../component/Subcategory";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { Search } = Input;
|
||||
|
||||
export const Subcategory = observer(() => {
|
||||
|
|
@ -18,8 +17,7 @@ export const Subcategory = observer(() => {
|
|||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//await store.category.getData();
|
||||
await store.subcategory.getData();
|
||||
// await getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
|
|
@ -29,11 +27,10 @@ export const Subcategory = observer(() => {
|
|||
init();
|
||||
}, []);
|
||||
|
||||
const handleChangeTabPane = async (key) => {
|
||||
store.product.filterCategory = key;
|
||||
console.log(key);
|
||||
const getData = async () => {
|
||||
await store.category.getData();
|
||||
await store.subcategory.getData();
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
|
|
@ -51,10 +48,10 @@ export const Subcategory = observer(() => {
|
|||
<Card>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
{/* <Button>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Button> */}
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
<Search
|
||||
|
|
@ -65,17 +62,14 @@ export const Subcategory = observer(() => {
|
|||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
<Button onClick={() => (store.subcategory.visibleModalSubcategory= true)}>
|
||||
<Button
|
||||
onClick={() => (store.subcategory.visibleModalSubcategory = true)}
|
||||
>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
|
||||
<TabPane tab="Sub-Category" key="1">
|
||||
<SubcategoryComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
<SubcategoryComponent />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,21 +26,18 @@ export class Subcategory {
|
|||
|
||||
async getData() {
|
||||
const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
|
||||
console.log(response)
|
||||
this.data = response.body.data ?? []
|
||||
this.total_data = response.body.total_data ?? 0
|
||||
}
|
||||
|
||||
async getDataSubCategories() {
|
||||
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
|
||||
console.log(response)
|
||||
this.dataSubCategories = response.body.data ?? []
|
||||
this.total_dataSubCategories = response.body.count ?? 0
|
||||
}
|
||||
|
||||
async create(data) {
|
||||
const response = await http.post('/product/sub-categories').send(data);
|
||||
console.log(response)
|
||||
await this.getData();
|
||||
return response;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user