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

src/component/ProductComponent.js

@@ -15,9 +15,8 @@ export const ProductComponent = observer((props) => {
   const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
-  const [filterSupplier, setFilterSupplier] = useState(null);
+  const [filterSupplier, setFilterSupplier] = useState([]);
-  const [filterCategories, setFilterCategories] = useState(null);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
-  const [filterSubCategories, setFilterSubCategories] = useState(null);
   const modalLoader = useContext(ModalLoaderContext);
 
   const handleEditButton = (data) => {
@@ -42,18 +41,18 @@ export const ProductComponent = observer((props) => {
     },
     {
       title: "Produk",
-      dataIndex: ["product_name"],
+      dataIndex: "product_name",
       key: "product_name",
     },
     {
       title: "Harga Beli",
-      dataIndex: ["current_price_price"],
+      dataIndex: "current_price_price",
-      key: ["current_price_price"],
+      key: "current_price_price",
     },
     {
       title: "Harga Jual",
-      dataIndex: ["mark_up_price"],
+      dataIndex: "mark_up_price",
-      key: ["mark_up_price"],
+      key: "mark_up_price",
     },
     // {
     //     title: "Gangguan",
@@ -163,17 +162,17 @@ export const ProductComponent = observer((props) => {
   const handleRemoveFilter = async () => {
     store.product.filterSupplier = null;
     store.product.filterSubCategory = null;
-    setFilterSupplier(null);
+    setFilterSupplier([]);
-    setFilterCategories(null);
+    store.product.filterCategory = null;
-    setFilterSubCategories(null);
+    setFilterSubCategories([]);
     await store.product.getData();
     store.product.visibleModalFilterProduct = false;
   };
 
   const handleCancelFilter = () => {
-    setFilterSupplier(null);
+    setFilterSupplier([]);
-    setFilterCategories(null);
+    store.product.filterCategory = null;
-    setFilterSubCategories(null);
+    setFilterSubCategories([]);
     store.product.visibleModalFilterProduct = false;
   };
 
@@ -186,6 +185,16 @@ export const ProductComponent = observer((props) => {
     store.product.visibleModalFilterProduct = false;
   };
 
+  const handleFilterCategory = async (value) => {
+    if (value) {
+      store.product.filterCategory = value;
+      await store.product.getDataSubCategories();
+    } else {
+      store.product.filterCategory = null;
+      await store.product.getDataSubCategories();
+    }
+  };
+
   const footerLayoutFilter = [
     <Button
         key={"remove"}
@@ -409,6 +418,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSupplier(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
                   <Option value={item.id} key={item.id}>
@@ -424,12 +434,9 @@ export const ProductComponent = observer((props) => {
             <Select
                 mode={"multiple"}
                 placeholder="Choose Category"
-              onChange={async (val) => {
+                onChange={async (val) => handleFilterCategory(val)}
-                setFilterCategories(val);
-                store.product.filterByCategory = val;
-                await store.product.getDataSubCategories();
-              }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
                   <Option value={item.id} key={item.id}>
@@ -449,6 +456,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSubCategories(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
                   <Option value={item.id} key={item.id}>

src/pages/Membership/Membership.js

@@ -1,31 +1,12 @@
 import React, {useContext, useEffect, useState} from "react";
-import {
+import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
-  Button,
-  Card,
-  Col,
-  Divider,
-  Form,
-  Input,
-  List,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tag,
-} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import {
+import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-  DownloadOutlined,
-  ExclamationCircleOutlined,
-  PlusSquareOutlined,
-} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
-import { Link, useHistory } from "react-router-dom";
+import {useHistory} from "react-router-dom";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;
@@ -357,7 +338,7 @@ export const Membership = observer(() => {
                 store.membership.pageSize = page.pageSize;
                 store.membership.page = pageNumber - 1;
                 modalLoader.setLoading(true);
-                //await getData();
+                await getData();
                 modalLoader.setLoading(false);
               }}
             />

src/pages/Payback/Payback.js

@@ -6,6 +6,7 @@ import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/i
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
+import {appConfig} from "../../config/app";
 
 const {Search} = Input;
 
@@ -40,10 +41,9 @@ export const Payback = observer(() => {
       key: "image_prove",
       render: (text, record) => (
           <Image
-          src={record.picture}
+              src={`${appConfig.apiUrl}/config/image/${text}`}
-          style={{width: 50, height: 50}}
+              style={{width: '5vw'}}
-          shape="circle"
+              alt={record.id}
-          alt="avatar"
           />
       ),
     },

src/pages/Payback/PaybackModal.js

@@ -12,7 +12,7 @@ export const PaybackModal = ({initialData}) => {
   const [image, setImage] = useState("");
   const [fileList, setFileList] = useState([]);
   const [previewImage, setPreviewImage] = useState("");
-  const [previewVisible, setPreviewVisible] = useState(false);
+  const [responseFilename, setResponseFilename] = useState("");
   const [loading, setLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -34,6 +34,7 @@ export const PaybackModal = ({initialData}) => {
     const file = args.file;
     const res = await http.upload(file);
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setResponseFilename(res.body.filename);
     setFileList([{
       uid: '-1',
       name: 'image',
@@ -62,7 +63,8 @@ export const PaybackModal = ({initialData}) => {
     try {
       const request = {
         ...data,
-        destination: store.authentication.profileData.superior?.id
+        destination: store.authentication.profileData.superior?.id,
+        image_prove: responseFilename
       }
       await store.payback.create(request);
       message.success("Success Add Payback");
@@ -74,21 +76,21 @@ export const PaybackModal = ({initialData}) => {
       message.error(e.message);
     }
     modalLoader.setLoading(false);
-    form.resetFields();
     store.payback.visibleModalPayback = false;
+    form.resetFields();
     setImage("");
     setFileList([]);
     setPreviewImage("");
-    setPreviewVisible(false);
+    setResponseFilename("");
   };
 
   const handleCancel = () => {
     form.resetFields();
-    store.payback.visibleModalPayback = false;
     setImage("");
     setFileList([]);
     setPreviewImage("");
-    setPreviewVisible(false);
+    setResponseFilename("");
+    store.payback.visibleModalPayback = false;
   }
 
   return (
@@ -126,7 +128,6 @@ export const PaybackModal = ({initialData}) => {
                   fileList={fileList}
                   onPreview={(file) => {
                     setPreviewImage(file.url || file.filename);
-                    setPreviewVisible(file.url || file.filename);
                   }}
                   showUploadList={true}
                   onChange={handleChange}

src/pages/Product/Product.js

@@ -21,7 +21,7 @@ export const Product = observer(() => {
         await Promise.allSettled([
           store.supplier.getData(),
           store.category.getData(),
-          store.category.getDataSubCategories(),
+          store.product.getDataSubCategories(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);

src/store/product.js

@@ -21,7 +21,7 @@ export class Product {
     pageSizeSubCategories = 10
     dataSubCategories = [];
     total_dataSubCategories = 0;
-    filterByCategory = null;
+    filterCategory = null;
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -45,7 +45,7 @@ export class Product {
 
     async getDataSubCategories() {
         try {
-            const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
             this.dataSubCategories = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item

src/store/role.js

@@ -2,8 +2,8 @@ import {makeAutoObservable} from "mobx";
 import {http} from "../utils/http";
 
 export class Role {
-  page = null;
+  page = 0;
-  pageSize = null;
+  pageSize = 10;
   data = [];
   total_data = 0;