feat: move upload into modal

src/pages/Product/Product.js

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Input, message, Row, Upload} from "antd";
+import {Button, Card, Col, Form, Input, message, Modal, Row, Select, Upload} from "antd";
-import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
+import {FilterOutlined, PlusOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -9,15 +9,22 @@ import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
   const [loading, setLoading] = useState(false);
+  const [visibleModalUpload, setVisibleModalUpload] = useState(false);
+  const [excel, setExcel] = useState("");
+  const [fileList, setFileList] = useState([]);
+  const [form] = Form.useForm();
 
   useEffect(() => {
     const init = async () => {
       try {
+        store.supplier.page = 0;
+        store.supplier.pageSize = 1000;
         modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
@@ -37,6 +44,10 @@ export const Product = observer(() => {
     };
 
     init();
+
+    return () => {
+      store.supplier.pageSize = 10;
+    };
   }, []);
 
   const routeData = [
@@ -73,16 +84,21 @@ export const Product = observer(() => {
   const uploadHandler = async (args) => {
     const file = args.file;
     try {
-      const responseUpload = await store.product.uploadExcel(file);
+      const response = await store.product.uploadExcel(file);
 
-      if (responseUpload.status === 201) {
+      if (response.status === 201) {
         message.success("Success upload excel!");
       } else {
         message.error("Failed upload excel!");
       }
 
-      setLoading(false);
+      setFileList([{
-      const responseUploadProduct = await handleUploadProduct(responseUpload);
+        uid: '-1',
+        name: response.body.filename,
+        status: 'done',
+        url: '',
+      }]);
+      setExcel(response.body.filename);
     } catch (e) {
       setLoading(false);
       message.error("Failed upload excel!");
@@ -99,27 +115,40 @@ export const Product = observer(() => {
 
   const handleUploadProduct = async (data) => {
     try {
-      const response = await store.product.uploadProduct({fileName: data.body.filename});
+      const response = await store.product.uploadProduct(data);
 
       if (response.status === 201) {
         message.success("Success Create Product by Excel!");
       } else {
         message.error("Failed Create Product by Excel!");
       }
-      setLoading(false);
-      await store.product.getData();
       return response;
     } catch (e) {
       setLoading(false);
       message.error("Failed Create Product by Excel!");
     }
-  }
+  };
 
-  const loadingState = (
+  const handleCancel = () => {
-      <div>
+    form.resetFields();
-        {loading ? <LoadingOutlined/> : null}
+    setFileList([]);
-      </div>
+    setExcel("");
-  );
+    setVisibleModalUpload(false);
+  };
+
+  const handleSubmit = async (data) => {
+    const request = {
+      fileName: excel,
+      supplierCode: data.supplierCode
+    };
+    const responseUploadProduct = await handleUploadProduct(request);
+
+    await store.product.getData();
+    setLoading(false);
+    setFileList([]);
+    setExcel("");
+    setVisibleModalUpload(false);
+  };
 
   return (
       <div className={["ppob-container"].join(" ")}>
@@ -162,35 +191,99 @@ export const Product = observer(() => {
                             textAlign: "right",
                           }}
                       >
-                        <Upload
+                        <Button
-                            showUploadList={false}
+                            disabled={visibleModalUpload}
-                            onChange={handleChange}
+                            style={{
-                            beforeUpload={(file) => beforeUpload(file)}
+                              marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                            customRequest={(args) => uploadHandler(args)}
+                              marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                            onRemove={(file) => {
-                              setLoading(false);
                             }}
+                            icon={<PlusOutlined/>}
+                            onClick={() => setVisibleModalUpload(true)}
                         >
-                          <Button
+                          Tambah Produk
-                              disabled={loading}
+                        </Button>
-                              style={{
-                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                              }}
-                              icon={<UploadOutlined/>}
-                          >
-                            Upload Product
-                          </Button>
-                        </Upload>
-                        {loadingState}
                       </div>
                     </div>
-              </Col>
+                  </Col>
-            </Row>
+                </Row>
-          </div>
+              </div>
-        )}
+          )}
-        <ProductComponent />
+          <ProductComponent/>
-      </Card>
+        </Card>
-    </div>
+
+        <Modal
+            visible={visibleModalUpload}
+            title={"Upload Excel Product"}
+            okText={"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="fileName"
+                label="Upload Excel Product"
+                rules={[{required: true, message: "Please Upload Excel Product!"}]}
+            >
+              <Upload
+                  fileList={fileList}
+                  onChange={handleChange}
+                  beforeUpload={(file) => beforeUpload(file)}
+                  customRequest={(args) => uploadHandler(args)}
+                  onRemove={(file) => {
+                    setLoading(false);
+                    setFileList([]);
+                    setExcel("");
+                  }}
+              >
+                <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "center",
+                    }}
+                >
+                  <Button
+                      disabled={loading}
+                      style={{
+                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                      }}
+                      icon={<UploadOutlined/>}
+                  >
+                    Upload Product
+                  </Button>
+                </div>
+              </Upload>
+            </Form.Item>
+            <Form.Item
+                name="supplierCode"
+                label="Supplier Code"
+                rules={[{required: true, message: "Please input Supplier Code!"}]}
+            >
+              <Select>
+                {store.supplier.data.map(data => (
+                    <Option key={data.id} value={data.code}>
+                      {data.name}
+                    </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
+      </div>
   );
 });