ppob-frontend/src/component/CategoryComponent.js

import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";

export const CategoryComponent = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();
  const history = useHistory();
  const [idData, setIdData] = useState("");
  const modalLoader = useContext(ModalLoaderContext);

  const handleEditButton = (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",
      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>
        </Space>
      ),
    },
  ];

  const deleteData = async (id) => {
    try {
      console.log(id);
      modalLoader.setLoading(true);
      await store.category.delete(id);
      modalLoader.setLoading(true);
      message.success("Data Berhasil Dihapus");
      history.push(LINKS.PRODUCT);
    } catch (err) {
      console.log("error", err);
      message.error("Gagal menghapus");
    }
  };

  const handleCancel = () => {
    setIdData("");
    store.category.visibleModalCategory = false;
  };

  const handleSubmit = async (data) => {
    console.log(data, "isi data2");
    if (idData !== "") {
      modalLoader.setLoading(true);
      try {
        await store.category.update(idData, data);
        message.success("Success Update Data Category");
      } catch (e) {
        message.error("Failed Update Data Category");
      }
      modalLoader.setLoading(false);
      store.category.visibleModalCategory = false;
      setIdData("");
      form.resetFields();
    } else {
      modalLoader.setLoading(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");
      }
      modalLoader.setLoading(false);
      store.category.visibleModalCategory = false;
      setIdData("");
      form.resetFields();
    }
  };

  return (
    <div>
      <Table
        style={{textAlign: "center"}}
        columns={columns}
        dataSource={store.category.data}
        bordered
        pagination={{
          pageSize: store.category.pageSize,
          total: store.category.total_data,
          current: store.category.page + 1,
          showSizeChanger: true,
          simple: false,
        }}
        onChange={async (page) => {
          let pageNumber = page.current;
          store.category.pageSize = page.pageSize;
          store.category.page = pageNumber - 1;
          modalLoader.setLoading(true);
          //await store.category.getData();
          modalLoader.setLoading(false);
        }}
      />

      <Modal
        visible={store.category.visibleModalCategory}
        title={idData ? "Edit Category" : "Create a new 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">
          <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!"}]}
          >
            <Input/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});