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

424
src/component/CategoryComponent.js
View File

@ -1,217 +1,231 @@
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 CategoryComponent = observer((props) => { export const CategoryComponent = 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);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category) //store.product.pageCategories=StrToLower(props.category)
await store.product.getDataSubCategories(); await store.product.getDataSubCategories();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
} }
};
init();
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data")
form.setFieldsValue({
name: data.name,
});
store.category.visibleModalCategory = true;
setIdData(data.id);
}
const columns = [
{
title: "Category Name",
dataIndex: "name",
key: "name",
},
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
// {
// title: "Tersedia",
// dataIndex: "tersedia",
// key: "tersedia",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
// </Tag>
// ),
// },
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => handleEditButton(record)}
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.category.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
}; };
const handleDelete = (id) => { init();
Modal.confirm({ }, []);
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleCancel = () => { const handleEditButton = (data) => {
setIdData('') console.log(data, "isi data");
store.category.visibleModalCategory = false; 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",
key: "name",
},
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
// {
// title: "Tersedia",
// dataIndex: "tersedia",
// key: "tersedia",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
// </Tag>
// ),
// },
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button onClick={() => handleEditButton(record)}>Edit</Button>
<Button onClick={() => handleDelete(record.id)}>Delete</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.category.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
} }
};
const handleSubmit = async (data) => { const handleDelete = (id) => {
console.log(data, "isi data2") Modal.confirm({
if (idData !== '') { title: "Are you sure delete this record?",
setConfirmLoading(true); icon: <ExclamationCircleOutlined />,
try { okText: "Yes",
await store.category.update(idData, data) okType: "primary",
message.success("Success Update Data Category") cancelText: "Cancel",
} catch (e) { onOk() {
message.error("Failed Update Data Category") return deleteData(id);
} },
setConfirmLoading(false); onCancel() {
store.category.visibleModalCategory = false; console.log("Cancel");
setIdData(''); },
form.resetFields(); });
} else { };
setConfirmLoading(true);
try { const handleCancel = () => {
await store.category.create(data) setIdData("");
message.success("Success Add New Category") store.category.visibleModalCategory = false;
} catch (e) { };
console.log(e, "apa errornya")
message.error("Failed Add Category") const handleSubmit = async (data) => {
} console.log(data, "isi data2");
setConfirmLoading(false); if (idData !== "") {
store.category.visibleModalCategory = false; setConfirmLoading(true);
setIdData(''); try {
form.resetFields(); await store.category.update(idData, data);
} message.success("Success Update Data Category");
} catch (e) {
message.error("Failed Update Data Category");
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.category.create(data);
message.success("Success Add New Category");
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Category");
}
setConfirmLoading(false);
store.category.visibleModalCategory = false;
setIdData("");
form.resetFields();
} }
};
return ( return (
<div> <div>
<Table <Table
style={{textAlign: "center"}} style={{ textAlign: "center" }}
columns={columns} columns={columns}
dataSource={store.category.data} dataSource={store.category.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.product.pageSize,
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={async (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(); await store.product.getData();
// store.membership.isLoading = false; // store.membership.isLoading = false;
}} }}
/> />
<Modal <Modal
visible={store.category.visibleModalCategory} visible={store.category.visibleModalCategory}
title={idData ? "Edit Category" : "Create a new Category"} title={idData ? "Edit Category" : "Create a new Category"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();
}} }}
onOk={() => { onOk={() => {
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();
}) })
.catch((info) => { .catch((info) => {
console.error("Validate Failed:", info); console.error("Validate Failed:", info);
}); });
}} }}
> >
<Form <Form form={form} layout="vertical">
form={form} <Form.Item
layout="vertical" name="code"
> label="Code"
<Form.Item rules={[{ required: true, message: "Please input name code!" }]}
name="name" >
label="Name" <Input />
rules={[{required: true, message: "Please input name category!"}]} </Form.Item>
> <Form.Item
<Input/> name="name"
</Form.Item> label="Name"
</Form> rules={[{ required: true, message: "Please input name category!" }]}
</Modal> >
</div> <Input />
); </Form.Item>
</Form>
</Modal>
</div>
);
}); });