Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/SupplierComponent.js

@@ -65,7 +65,7 @@ export const SupplierComponent = observer((props) => {
       width: "5%",
     },
     {
-      title: "Saldo",
+      title: "Saldo di Supplier",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
       width: "20%",
@@ -75,6 +75,17 @@ export const SupplierComponent = observer((props) => {
             currency: "IDR",
           }).format(text)
     },
+    {
+      title: "Saldo di System",
+      dataIndex: ["coa_undistribute", "amount"],
+      key: ["coa_undistribute", "amount"],
+      width: "20%",
+      render: (text, record) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text)
+    },
     {
       title: "Status",
       dataIndex: "status",

src/pages/Payback/PaybackFromUser.js

@@ -20,8 +20,10 @@ export const PaybackFromUser = observer(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
-        await store.payback.getDataUser();
+        await Promise.allSettled([
-        await store.authentication.getProfile();
+          store.payback.getDataUser(),
+          store.authentication.getProfile()
+        ]);
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);

src/pages/Payback/PaybackModal.js

@@ -1,37 +1,28 @@
-import React, {useState, useEffect, useContext} from "react";
+import React, {useContext, useState} from "react";
-import {
+import {Form, Input, message, Modal, Upload,} from "antd";
-  Button,
-  Form,
-  Image,
-  Input,
-  message,
-  Modal,
-  Upload,
-} from "antd";
 import {useStore} from "../../utils/useStore";
-import {appConfig} from "../../config/app";
+import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
-import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
+import {http} from "../../utils/http";
+import {appConfig} from "../../config/app";
 
 export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   const [form] = Form.useForm();
   const store = useStore();
+  const [image, setImage] = useState("");
   const [fileList, setFileList] = useState([]);
-  const [previewTitle, setPreviewTitle] = useState("");
   const [previewImage, setPreviewImage] = useState("");
-  const [fileUrl, setFileUrl] = useState("");
+  const [previewVisible, setPreviewVisible] = useState(false);
-  const firstIndexFileList = fileList[0];
   const [loading, setLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
 
   const beforeUpload = (file) => {
-    let isPdf, isLt2M;
+    let isLt2M;
-    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
+    let allowedFile = ["image/jpeg", "image/png"];
     let isValid = allowedFile.includes(file.type);
     if (!isValid) {
-      message.error("You can only upload PDF or Image file!");
+      message.error("You can only upload 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!");
@@ -39,42 +30,33 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
     return isValid && isLt2M ? true : Upload.LIST_IGNORE;
   };
 
-  const handlePreview = async (file) => {
+  const uploadHandler = async (args) => {
-    const fileUrl = appConfig.apiUrl + file.response.path;
+    const file = args.file;
-    setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
+    const res = await http.upload(file);
+    setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setFileList([{
+      uid: '-1',
+      name: 'image',
+      status: 'done',
+      url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+    }]);
   };
 
-  const handleChange = ({fileList}) => {
+  const handleChange = (info) => {
-    setFileList(fileList);
+    if (info.file.status === 'uploading') {
-    if (fileList.length && fileList[0].status === "done") {
+      setLoading(true);
-      form.setFieldsValue({
+      return;
-        file_url: fileList[0].response.path,
-      });
-      console.log(fileList, "apaaaaaa");
-      setFileUrl(fileList[0].response.path);
-      setPreviewImage(fileList[0].response.path);
-      setPreviewTitle(fileList[0].name);
     }
+    setLoading(false)
   };
 
   const uploadButton = (
       <div>
-      {loading ? (
+        {loading ? <LoadingOutlined/> : <PlusOutlined/>}
-        <LoadingOutlined/>
+        <div style={{marginTop: 8}}>Click to Upload</div>
-      ) : (
-        <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 {
@@ -134,27 +116,27 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
           <Form.Item
               label="Upload Picture"
               name="image_prove"
-        >
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
           >
             <div>
               <Upload
-                name="image_prove"
+                  listType="picture-card"
-                maxCount={1}
-                className="avatar-uploader"
-                // listType="picture-card"
-                action={appConfig.apiUrl + "/files"}
                   fileList={fileList}
-                beforeUpload={beforeUpload}
+                  onPreview={(file) => {
-                onPreview={handlePreview}
+                    setPreviewImage(file.url || file.filename);
+                    setPreviewVisible(file.url || file.filename);
+                  }}
+                  showUploadList={true}
                   onChange={handleChange}
+                  beforeUpload={(file) => beforeUpload(file)}
+                  customRequest={(args) => uploadHandler(args)}
+                  onRemove={(file) => {
+                    setImage('');
+                    setLoading(false);
+                    setFileList([]);
+                  }}
               >
-                {!firstIndexFileList ? uploadButton : null}
+
+                {image === "" ? uploadButton : null}
               </Upload>
               <h5
                   style={{
@@ -165,22 +147,6 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
                 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"

src/utils/http.js

@@ -50,13 +50,16 @@ export const http = {
         return req;
     },
     upload: (file) => {
-        const request = superagent
+        let req = superagent
-            .post(appConfig.apiUrl + '/files')
+            .post(appConfig.apiUrl + '/config/upload-files')
             .attach('file', file)
             .use(authIntercept)
             .use(attachSuperagentLogger);
+        if (TokenUtil.accessToken) {
+            req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
+        }
 
-        return request;
+        return req;
     },
     uploadAntd: (args) => {
         const file = args.file;