diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 8e1edd0..5d77d6b 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -120,15 +120,15 @@ export const DesktopLayout = observer(() => { - - Home + + Beranda {store.authentication.userData.role !== "Retail" && ( - - Membership + + Keanggotaan )} @@ -141,14 +141,14 @@ export const DesktopLayout = observer(() => { > - - Partner + + Rekanan - - Commision + + Komisi @@ -167,23 +167,23 @@ export const DesktopLayout = observer(() => { > - - Product + + Produk {store.authentication.userData.role === "Admin" && ( - - Category + + Kategori )} {store.authentication.userData.role === "Admin" && ( - - Sub Category + + Sub Kategori )} @@ -192,16 +192,16 @@ export const DesktopLayout = observer(() => { {store.authentication.userData.role !== "Admin" && ( - - Product + + Produk )} {store.authentication.userData.role === "Retail" && ( - - Transaction + + Transaksi )} @@ -214,7 +214,7 @@ export const DesktopLayout = observer(() => { - Confirmation + Konfirmasi )} @@ -222,7 +222,7 @@ export const DesktopLayout = observer(() => { - Created + Dibuat oleh Saya )} @@ -230,8 +230,8 @@ export const DesktopLayout = observer(() => { {store.authentication.userData.role !== "Admin" && ( - - Profile + + Profil )} diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index ce7bf9f..db26d51 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -2,7 +2,6 @@ import React, {useEffect, useState} from "react"; import {Menu} from "antd"; import {Link} from "react-router-dom"; import { - AlipayOutlined, AppstoreOutlined, DatabaseOutlined, FileAddOutlined, @@ -11,7 +10,6 @@ import { HomeOutlined, MenuUnfoldOutlined, MoneyCollectOutlined, - PayCircleOutlined, ProfileOutlined, ProjectOutlined, ShoppingCartOutlined, @@ -132,7 +130,7 @@ export const MenuList = observer((props) => { - konfirmasi + Konfirmasi )} @@ -140,7 +138,7 @@ export const MenuList = observer((props) => { - Buat Pembayaran + Dibuat oleh Saya )} @@ -148,17 +146,11 @@ export const MenuList = observer((props) => { {store.authentication.userData.role !== "Admin" && ( - - Profile + + Profil )} - {/**/} - {/* */} - {/* */} - {/* About*/} - {/* */} - {/**/} ); diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js index f90fdf9..7f6f2a7 100644 --- a/src/pages/Membership/DetailUser.js +++ b/src/pages/Membership/DetailUser.js @@ -20,19 +20,18 @@ import { ModalLoaderContext } from "../../utils/modal"; import { useParams } from "react-router-dom"; import { MembershipModal } from "./MembershipModal"; -const { Title, Text } = Typography; +const {Title, Text} = Typography; export const DetailUser = observer(() => { const store = useStore(); const modalLoader = useContext(ModalLoaderContext); - const { id } = useParams(); + const {id} = useParams(); const [visibleModal, setVisibleModal] = useState(false); const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false); const [destination, setDestination] = useState(null); const [initialData, setInitialData] = useState({}); const [confirmLoading, setConfirmLoading] = useState(false); - //console.log(id) useEffect(() => { (async () => { modalLoader.setLoading(true); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index 9eb9a91..9f5ddd1 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, {useContext, useEffect, useState} from "react"; import { Button, Card, @@ -14,19 +14,19 @@ import { Select, Space, Table, - Tag, + Tag } from "antd"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; -import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons"; -import { MembershipModal } from "./MembershipModal"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { LINKS } from "../../routes/app"; -import { useHistory } from "react-router-dom"; -import { ModalLoaderContext } from "../../utils/modal"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; +import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons"; +import {MembershipModal} from "./MembershipModal"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {LINKS} from "../../routes/app"; +import {useHistory} from "react-router-dom"; +import {ModalLoaderContext} from "../../utils/modal"; -const { Search } = Input; -const { Option } = Select; +const {Search} = Input; +const {Option} = Select; export const Membership = observer(() => { const history = useHistory(); const [form] = Form.useForm(); diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js index 39ae6b9..1cc8127 100644 --- a/src/pages/Payback/PaybackModal.js +++ b/src/pages/Payback/PaybackModal.js @@ -3,7 +3,6 @@ import {Form, InputNumber, message, Modal, Upload,} from "antd"; import {useStore} from "../../utils/useStore"; import {LoadingOutlined, PlusOutlined} from "@ant-design/icons"; import {ModalLoaderContext} from "../../utils/modal"; -import {http} from "../../utils/http"; import {appConfig} from "../../config/app"; export const PaybackModal = ({initialData}) => { @@ -32,7 +31,7 @@ export const PaybackModal = ({initialData}) => { const uploadHandler = async (args) => { const file = args.file; - const res = await http.upload(file); + const res = await store.payback.uploadImages(file); setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`); setResponseFilename(res.body.filename); setFileList([{ diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js index 8319da3..ee4fd07 100644 --- a/src/pages/Product/Product.js +++ b/src/pages/Product/Product.js @@ -1,22 +1,19 @@ -import React, { useContext, useEffect } from "react"; -import { Button, Card, Col, Input, message, Row, Upload } from "antd"; -import { - FilterOutlined, - PlusSquareOutlined, - UploadOutlined, -} from "@ant-design/icons"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; -import { ProductComponent } from "../../component/ProductComponent"; -import { LINKS } from "../../routes/app"; -import { ModalLoaderContext } from "../../utils/modal"; +import React, {useContext, useEffect, useState} from "react"; +import {Button, Card, Col, Input, message, Row, Upload} from "antd"; +import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; +import {ProductComponent} from "../../component/ProductComponent"; +import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const { Search } = Input; +const {Search} = Input; export const Product = observer(() => { const store = useStore(); const modalLoader = useContext(ModalLoaderContext); + const [loading, setLoading] = useState(false); useEffect(() => { const init = async () => { @@ -49,36 +46,97 @@ export const Product = observer(() => { }, { route: LINKS.PRODUCT, - name: Product, + name: Product, }, ]; + const beforeUpload = (file) => { + let isLt2M; + let allowedFile = [ + "text/csv", "application/csv", + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + "application/vnd.ms-excel.sheet.binary.macroEnabled.12", + "application/vnd.ms-excel", + "application/vnd.ms-excel.sheet.macroEnabled.12" + ]; + let isValid = allowedFile.includes(file.type); + if (!isValid) { + message.error("You can only upload Excel file!"); + } + isLt2M = file.size / 1024 / 1024 < 10; + if (!isLt2M) { + message.error("File must smaller than 10MB!"); + } + return isValid && isLt2M ? true : Upload.LIST_IGNORE; + }; + + const uploadHandler = async (args) => { + const file = args.file; + const responseUpload = await store.product.uploadExcel(file); + + if (responseUpload.status === 201) { + message.success("Success upload excel!"); + } else { + message.error("Failed upload excel!"); + setLoading(false); + } + + const responseUploadProduct = await handleUploadProduct(responseUpload); + setLoading(false); + }; + + const handleChange = (info) => { + if (info.file.status === 'uploading') { + setLoading(true); + } else { + setLoading(false) + } + }; + + const handleUploadProduct = async (data) => { + const response = await store.product.uploadProduct({fileName: data.body.filename}); + + if (response.status === 201) { + message.success("Success Create Product by Excel!"); + } else { + message.error("Failed Create Product by Excel!"); + setLoading(false); + } + return response; + } + + const loadingState = ( +
+ {loading ? : null} +
+ ); + return ( -
- - - {store.authentication.userData.role !== "Admin" && ( -
- - - - - -
- {/* + + + {store.authentication.userData.role !== "Admin" && ( +
+ + + + + +
+ {/* { }} /> */} -
- - - - {/* */} -
-
+ beforeUpload(file)} + customRequest={(args) => uploadHandler(args)} + onRemove={(file) => { + setLoading(false); + }} + > + + + {loadingState} +
+
diff --git a/src/store/payback.js b/src/store/payback.js index d0a5c83..279d56f 100644 --- a/src/store/payback.js +++ b/src/store/payback.js @@ -93,4 +93,13 @@ export class Payback { console.error(e); } } + + async uploadImages(data) { + try { + const response = await http.upload(data); + return response; + } catch (e) { + console.error(e); + } + } } diff --git a/src/store/product.js b/src/store/product.js index 24fd675..1ccd96a 100644 --- a/src/store/product.js +++ b/src/store/product.js @@ -132,6 +132,24 @@ export class Product { console.error(e); } } + + async uploadExcel(data) { + try { + const response = await http.upload(data); + return response; + } catch (e) { + console.error(e); + } + } + + async uploadProduct(data) { + try { + const response = await http.post('/product/upload-product').send(data); + return response; + } catch (e) { + console.error(e); + } + } } diff --git a/src/store/transaction.js b/src/store/transaction.js index a7032d1..951c4d8 100644 --- a/src/store/transaction.js +++ b/src/store/transaction.js @@ -22,14 +22,15 @@ export class Transaction { filterSubCategory = null; pageHistoryTransaction = 0; - pageHistoryTopUp = 0; pageSizeHistoryTransaction = 10 dataHistoryTransaction = []; total_dataHistoryTransaction = 0; - dataHistoryTopUp=[]; + pageHistoryTopUp = 0; + pageSizeHistoryTopUp = 10; + dataHistoryTopUp = []; total_dataHistoryTopUp = 0; - + constructor(ctx) { this.ctx = ctx; makeAutoObservable(this); @@ -80,9 +81,7 @@ export class Transaction { async getDataHistoryTopUp(id) { try { - //console.log("Top up") - const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`); - //console.log(response,"data") + const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`); this.dataHistoryTopUp = response.body.data ?? [] this.total_dataHistoryTopUp = response?.body?.count ?? 0 } catch (e) {