ppob-frontend/src/pages/Payback/PaybackModal.js

import React, { useState, useEffect } from "react";
import {
  Button,
  Form,
  Image,
  Input,
  message,
  Modal,
  Upload,
} from "antd";
import { useStore } from "../../utils/useStore";
import { appConfig } from "../../config/app";
import { LoadingOutlined, UploadOutlined } from "@ant-design/icons";

export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
  const [form] = Form.useForm();
  const store = useStore();
  const [fileList, setFileList] = useState([]);
  const [previewTitle, setPreviewTitle] = useState("");
  const [previewImage, setPreviewImage] = useState("");
  const [loading, setLoading] = useState(false);
  const [fileUrl, setFileUrl] = useState("");
  const firstIndexFileList = fileList[0];
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        setIsLoading(true);
        //await store.membership.getData();
        //await store.role.getData();
        await store.authentication.getProfile();
        setIsLoading(false);
      } catch (e) {
        setIsLoading(false);
      }
    };

    init();
  }, []);
  const beforeUpload = (file) => {
    let isPdf, isLt2M;
    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
    let isValid = allowedFile.includes(file.type);
    if (!isValid) {
      message.error("You can only upload PDF or Image file!");
    }
    // return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
    isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("File must smaller than 2MB!");
    }
    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
  };

  const handlePreview = async (file) => {
    const fileUrl = appConfig.apiUrl + file.response.path;
    setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
  };

  const handleChange = ({ fileList }) => {
    setFileList(fileList);
    if (fileList.length && fileList[0].status === "done") {
      form.setFieldsValue({
        file_url: fileList[0].response.path,
      });
      console.log(fileList, "apaaaaaa");
      setFileUrl(fileList[0].response.path);
      setPreviewImage(fileList[0].response.path);
      setPreviewTitle(fileList[0].name);
    }
  };

  const uploadButton = (
    <div>
      {loading ? (
        <LoadingOutlined />
      ) : (
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      )}
    </div>
  );

  const previewUpload = (
    <Image
      className="w-full h-full"
      preview={false}
      src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}
    />
  );

  const handleSubmit = async (data) => {
    console.log(data, "isi data2");
    try {
      await store.payback.create(data);
      message.success("Success Add New Member");
    } catch (e) {
      console.log(e, "apa errornya");
      message.error("Failed Add Member");
    }

    store.payback.visibleModalPayback = false;
    form.resetFields();
  };

  return (
    <Modal
      visible={visible}
      title={"Create a new Payback"}
      okText={"Create"}
      cancelText="Cancel"
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            handleSubmit(values);
            console.log(values);
            form.resetFields();
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={initialData}
      >
        <Form.Item
          name="destination"
          label="destination"
          rules={[{ required: true, message: "Please input Name!" }]}
          initialValue={store.authentication.profileData.superior?.id}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Upload Picture"
          name="image_prove"
          initialValue={"tes"}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <div>
              <Upload
                name="image_prove"
                maxCount={1}
                className="avatar-uploader"
                // listType="picture-card"
                action={appConfig.apiUrl + "/files"}
                fileList={fileList}
                beforeUpload={beforeUpload}
                onPreview={handlePreview}
                onChange={handleChange}
                defaultValue={"tes"}
              >
                {!firstIndexFileList ? uploadButton : null}
              </Upload>
              <h5
                style={{
                  marginTop: 12,
                  color: "rgba(0, 0, 0, 0.45)",
                }}
              >
                Max size of file 2 mb
              </h5>
            </div>
            <div>
              <h5>Preview</h5>
              <div>
                <img
                  src={previewImage}
                  alt="preview"
                  style={{ width: "100%" }}
                />
              </div>
              <h5>{previewTitle}</h5>
              <h5>
                {previewUpload}
                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}
              </h5>
            </div>
          </div>
        </Form.Item>
        <Form.Item
          name="amount"
          label="amount"
          rules={[{ required: true, message: "Please input Amount!" }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};