ppob-frontend/src/pages/Membership/Membership.js

import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  Divider,
  Input,
  List,
  message,
  Modal,
  Row,
  Space,
  Table,
  Tag,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
  ExclamationCircleOutlined,
  FilterOutlined,
  PlusSquareOutlined,
} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { format } from "date-fns";

const { Search } = Input;

export const Membership = observer(() => {
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const init = async () => {
    try {
      setIsLoading(true);
      await store.membership.getData();
      setIsLoading(false);
    } catch (e) {
      setIsLoading(false);
    }
  };
  useEffect(() => {
    init();
  }, []);

  const columns = [
    {
      title: "Name",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
      render: (text, record) => (
        <Tag
          color={record?.isActive === true ? "processing" : "#E3E8EE"}
          style={{ color: "#4F566B" }}
        >
          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setVisibleModal(true);
              setInitialData(record);
            }}
          >
            Edit
          </Button>
          <Button
            onClick={async () => {
              handleDelete(record.id);
            }}
          >
            Delete
          </Button>
          {/* <Button onClick={showModal}
          >
            Role
          </Button> */}
        </Space>
      ),
    },
  ];

  const routeData = [
    {
      route: "/app/home",
      name: "Home",
    },
    {
      route: "/app/membership",
      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
    },
  ];

  const onSubmit = async (data) => {
    if (initialData.id) {
      setInitialData({});
      setConfirmLoading(true);
      try {
        console.log(data)
        await store.membership.update(initialData.id, data);
        message.success("Success Update Data Member");
        await store.membership.getData();
      } catch (e) {
        message.error("Failed Update Data Member");
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    } else {
      setInitialData({});
      setConfirmLoading(true);
      try {
        await store.membership.create(data);
        message.success("Success Add New Member");
        await store.membership.getData();
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    }
  };

  
  const handleDelete = (record) => {
    Modal.confirm({
      title: "Are you sure reject this record?",
      icon: <ExclamationCircleOutlined />,
      okText: "Yes",
      okType: "primary",
      cancelText: "Cancel",
      async onOk() {
        try {
          //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
          await store.membership.delete(record)
          message.success("Success Delete Data");
          await store.membership.getData();
        } catch (e) {
          message.error("Failed Delete Data");
        }
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  return (
    <div className={["ppob-container"].join(" ")}>
      {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal> */}
      <BreadcumbComponent data={routeData} />
      <Card>
        <div>
          <Row style={{ marginBottom: 20 }}>
            <Col span={12}>
              <Button>
                <FilterOutlined />
                Filter
              </Button>
            </Col>
            <Col span={12} style={{ textAlign: "right" }}>
              <Search
                placeholder="input search text"
                style={{ width: 200, marginRight: 10 }}
              />
              <Button onClick={() => setVisibleModal(true)}>
                <PlusSquareOutlined /> New
              </Button>
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
            <Table
              key="1"
              hasEmpty
              size={"small"}
              columns={columns}
              dataSource={store.membership.data}
              bordered
              // pagination={{
              //   total: store.membership.total_data,
              //   current: store.membership.page,
              //   pageSize: store.membership.pageSize,
              //   simple: true
              // }}
              // onChange={(page) => {
              //   store.membership.pageSize = page.pageSize;
              //   store.membership.page = page.current;
              //   store.membership.getData();
              // }}
              // current={store.membership.page}
              // loading={store.membership.pageSize}
            />
          )}

          {store.ui.mediaQuery.isMobile && (
            <List
              itemLayout="horizontal"
              position={"top"}
              pagination={{
                onChange: (page) => {
                  store.membership.pageSize = page.pageSize;
                  store.membership.page = page.current;
                  store.membership.getData();
                },
                pageSize: store.membership.pageSize,
                total: store.membership.total_data,
                current: store.membership.page,
                style: { marginBottom: "1rem", marginRight: "1rem" },
              }}
              dataSource={store.membership.data}
              style={{ padding: 0 }}
              renderItem={(item) => {
                return (
                  <div>
                    <List.Item
                      key={item.id}
                      style={{
                        backgroundColor: "#ffffff",
                        paddingTop: 0,
                        paddingBottom: 0,
                        display: "flex",
                        flexDirection: "row",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <List.Item.Meta
                        className={["cariparkir-container"].join(" ")}
                        title={item.username}
                        description={
                          <div style={{}}>
                            <p>
                              <small>Username : {item.username}</small> <br />
                            </p>
                          </div>
                        }
                      />
                      <div style={{ marginRight: 16 }}>
                        <p
                          style={{
                            fontSize: 9,
                            margin: 0,
                          }}
                        >
                          {item.username}
                        </p>
                      </div>
                    </List.Item>
                    <Divider plain style={{ margin: 0 }} />
                  </div>
                );
              }}
            />
          )}
        </div>
      </Card>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});