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

Pages Categories

Browse Source
This commit is contained in:
ajat91 2021-12-16 19:36:31 +07:00
parent ba01132cd4
commit a7072d7db2
1 changed files with 219 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/component/CategoryComponent.js
View File

@ -1,18 +1,28 @@
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 CategoryComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const { Option } = Select;
const history = useHistory();
const [idData, setIdData] = useState('');
const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@ -32,15 +42,21 @@ export const CategoryComponent = observer((props) => {
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data")
console.log(data, "isi data");
form.setFieldsValue({
name: data.name,
code: data.code,
});
store.category.visibleModalCategory = true;
setIdData(data.id);
}
};
const columns = [
{
title: "Kode",
dataIndex: "code",
key: "code",
},
{
title: "Category Name",
dataIndex: "name",
@ -77,14 +93,8 @@ export const CategoryComponent = observer((props) => {
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => handleEditButton(record)}
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
<Button onClick={() => handleEditButton(record)}>Edit</Button>
<Button onClick={() => handleDelete(record.id)}>Delete</Button>
</Space>
),
},
@ -105,7 +115,7 @@ export const CategoryComponent = observer((props) => {
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
@ -119,44 +129,44 @@ export const CategoryComponent = observer((props) => {
};
const handleCancel = () => {
setIdData('')
setIdData("");
store.category.visibleModalCategory = false;
}
};
const handleSubmit = async (data) => {
console.log(data, "isi data2")
if (idData !== '') {
console.log(data, "isi data2");
if (idData !== "") {
setConfirmLoading(true);
try {
await store.category.update(idData, data)
message.success("Success Update Data Category")
await store.category.update(idData, data);
message.success("Success Update Data Category");
} catch (e) {
message.error("Failed Update Data Category")
message.error("Failed Update Data Category");
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData('');
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.category.create(data)
message.success("Success Add New Category")
await store.category.create(data);
message.success("Success Add New Category");
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Category")
console.log(e, "apa errornya");
message.error("Failed Add Category");
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData('');
setIdData("");
form.resetFields();
}
}
};
return (
<div>
<Table
style={{textAlign: "center"}}
style={{ textAlign: "center" }}
columns={columns}
dataSource={store.category.data}
bordered
@ -165,7 +175,7 @@ export const CategoryComponent = observer((props) => {
total: store.product.total_data,
current: store.product.page + 1,
showSizeChanger: true,
simple: false
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
@ -190,7 +200,7 @@ export const CategoryComponent = observer((props) => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form")
console.log(values, "isi form");
handleSubmit(values);
form.resetFields();
})
@ -199,16 +209,20 @@ export const CategoryComponent = observer((props) => {
});
}}
>
<Form
form={form}
layout="vertical"
<Form form={form} layout="vertical">
<Form.Item
name="code"
label="Code"
rules={[{ required: true, message: "Please input name code!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: "Please input name category!"}]}
rules={[{ required: true, message: "Please input name category!" }]}
>
<Input/>
<Input />
</Form.Item>
</Form>
</Modal>