From 5f062ed63066aa30b75a0503f1144b344232e64e Mon Sep 17 00:00:00 2001 From: "ajat91.sudrajat" Date: Mon, 20 Dec 2021 13:42:24 +0700 Subject: [PATCH] post payback --- src/pages/App/MenuList.js | 20 +- src/pages/Payback/Payback.js | 75 ++---- src/pages/Payback/PaybackFromUser.js | 277 +++++++++++++++++++++ src/pages/Payback/PaybackModal.js | 354 +++++++++++++++------------ src/routes/app.js | 5 + src/store/index.js | 3 +- src/store/payback.js | 91 +++++++ 7 files changed, 609 insertions(+), 216 deletions(-) create mode 100644 src/pages/Payback/PaybackFromUser.js create mode 100644 src/store/payback.js diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index 9c06ffc..a099c3b 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -124,12 +124,20 @@ export const MenuList = observer((props) => { )} - - - - Payback - - + } title="Payback"> + + + + Payback + + + + + + Payback User + + + {store.authentication.userData.role !== "Admin" && ( diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 2b2742d..34f9b4c 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState ,useEffect} from "react"; import { Button, Card, @@ -31,56 +31,25 @@ export const Payback = observer(() => { const [visibleModal, setVisibleModal] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false); const [initialData, setInitialData] = useState({}); + //const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); - // useEffect(() => { - // // const init = async () => { - // // try { - // // setIsLoading(true); - // // await store.membership.getData(); - // // await store.role.getData(); - // // setIsLoading(false); - // // } catch (e) { - // // setIsLoading(false); - // // } - // // }; - // - // // init(); - // }, []); - const dummyData = [ - { - key: "1", - id: 1, - name: "John Doe", - picture: - "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", - amount: "Rp. 1.000.000", - }, - { - key: "2", - id: 1, - name: "John Doe", - picture: - "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", - amount: "Rp. 1.000.000", - }, - { - key: "3", - id: 1, - name: "John Doe", - picture: - "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", - amount: "Rp. 1.000.000", - }, - { - key: "4", - id: 1, - name: "John Doe", - picture: - "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", - amount: "Rp. 1.000.000", - }, - ]; + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + await store.payback.getDataUser(); + //await store.role.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + const columns = [ { @@ -90,8 +59,8 @@ export const Payback = observer(() => { }, { title: "Picture", - dataIndex: "picture", - key: "picture", + dataIndex: "image_prove", + key: "image_prove", render: (text, record) => ( { key="1" hasEmpty columns={columns} - dataSource={dummyData} + dataSource={store.payback.data} bordered // pagination={{ // pageSize: store.membership.pageSize, @@ -245,7 +214,7 @@ export const Payback = observer(() => { // current: store.membership.page, // style: {marginBottom: "1rem", marginRight: "1rem"}, // }} - dataSource={dummyData} + dataSource={store.payback.data} style={{ padding: 0 }} renderItem={(item) => { return ( diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js new file mode 100644 index 0000000..94077a1 --- /dev/null +++ b/src/pages/Payback/PaybackFromUser.js @@ -0,0 +1,277 @@ +import React, { useState ,useEffect} from "react"; +import { + Button, + Card, + Col, + Divider, + Image, + Input, + List, + message, + Row, + Space, + Table, +} from "antd"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; +import { + CheckCircleOutlined, + CloseOutlined, + FilterOutlined, + PlusSquareOutlined, +} from "@ant-design/icons"; +import { PaybackModal } from "./PaybackModal"; +import { BreadcumbComponent } from "../../component/BreadcumbComponent"; +import { LINKS } from "../../routes/app"; + +const { Search } = Input; + +export const PaybackFromUser = observer(() => { + const store = useStore(); + const [visibleModal, setVisibleModal] = useState(false); + const [confirmLoading, setConfirmLoading] = useState(false); + const [initialData, setInitialData] = useState({}); + //const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + await store.payback.getData(); + //await store.role.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + + + const columns = [ + // { + // title: "Name", + // dataIndex: "name", + // key: "name", + // }, + { + title: "Picture", + dataIndex: "image_prove", + key: "image_prove", + render: (text, record) => ( + avatar + ), + }, + { + title: "Amount", + dataIndex: "amount", + key: "amount", + }, + // { + // title: "Action", + // key: "action", + // width: 100, + // render: (text, record) => ( + // + // + // + // + // ), + // }, + ]; + + if(store.authentication.userData.role === "Retail") columns.pop(); + + const routeData = [ + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.PAYBACKFROMUSER, + name: Payback User, + }, + ]; + + const onSubmit = async (data) => { + setConfirmLoading(true); + try { + // await store.membership.create(data); + // message.success("Success Add New Member"); + // await store.membership.getData(); + } catch (e) { + console.error(e, "apa errornya"); + message.error("Failed Add Member"); + } + setConfirmLoading(false); + setVisibleModal(false); + }; + + const handleAction = async (record, type) => {}; + + return ( +
+ + +
+ + + + + + + {store.authentication.userData.role !== "Admin" && ( + + )} + + + {store.ui.mediaQuery.isDesktop && ( + { + // let pageNumber = page.current; + // store.membership.pageSize = page.pageSize; + // store.membership.page = pageNumber - 1; + // // store.membership.isLoading = true; + // await store.membership.getData(); + // // store.membership.isLoading = false; + // }} + /> + )} + + {store.ui.mediaQuery.isMobile && ( + { + // store.membership.pageSize = page.pageSize; + // store.membership.page = page.current; + // store.membership.getData(); + // }, + // pageSize: store.membership.pageSize, + // total: store.membership.total_data, + // current: store.membership.page, + // style: {marginBottom: "1rem", marginRight: "1rem"}, + // }} + dataSource={store.payback.data} + style={{ padding: 0 }} + renderItem={(item) => { + return ( +
+ + + +
+ } + /> +
+

+ {item.amount} +

+
+ + + + ); + }} + /> + )} + + + + { + await onSubmit(data); + }} + onCancel={() => { + setInitialData({}); + setVisibleModal(false); + }} + /> + + ); +}); diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js index f7fcda0..dc87207 100644 --- a/src/pages/Payback/PaybackModal.js +++ b/src/pages/Payback/PaybackModal.js @@ -1,164 +1,206 @@ -import React, {useState} 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"; +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(); +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); - 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]; + 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); + } + }; - 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; + 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 = ( +
+ {loading ? ( + + ) : ( + + )} +
+ ); + + const previewUpload = ( + + ); + + 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"); } - const handlePreview = async (file) => { - const fileUrl = appConfig.apiUrl + file.response.path; - setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1)); - }; + store.payback.visibleModalPayback = false; + form.resetFields(); + }; - 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 = ( -
- {loading ? ( - - ) : ( - - )} -
- ); - - const previewUpload = ( - - ) - - return ( - { - form.resetFields() - onCancel() - }} - onOk={() => { - form - .validateFields() - .then(values => { - onCreate(values); - form.resetFields() - }) - .catch(info => { - console.log('Validate Failed:', info); - }); - }} + return ( + { + form.resetFields(); + onCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + handleSubmit(values); + console.log(values); + form.resetFields(); + }) + .catch((info) => { + console.log("Validate Failed:", info); + }); + }} + > +
+ - - - - - - -
-
- - {!firstIndexFileList ? uploadButton : null} - -
- Max size of file 2 mb -
-
-
-
Preview
-
- preview -
-
{previewTitle}
-
{previewUpload} - {previewTitle && {`${previewTitle ?? ""}`}}
-
-
- - - - - - - ); + + + +
+
+ + {!firstIndexFileList ? uploadButton : null} + +
+ Max size of file 2 mb +
+
+
+
Preview
+
+ preview +
+
{previewTitle}
+
+ {previewUpload} + {previewTitle && {`${previewTitle ?? ""}`}} +
+
+
+ + + + + + + ); }; diff --git a/src/routes/app.js b/src/routes/app.js index a61c9ef..1667fd2 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -10,6 +10,7 @@ import {Partner} from "../pages/Config/Partner"; import {Supplier} from "../pages/Config/Supplier"; import {Category} from "../pages/Product/Category"; import {Payback} from "../pages/Payback/Payback"; +import {PaybackFromUser} from "../pages/Payback/PaybackFromUser"; import {Subcategory} from "../pages/Product/Subcategory"; export const LINKS = { @@ -24,6 +25,7 @@ export const LINKS = { SUPPLIER: "/app/supplier", CATEGORY: "/app/category", PAYBACK: "/app/payback", + PAYBACKFROMUSER: "/app/payback-from-user", SUBCATEGORY: "/app/subcategory", }; @@ -36,6 +38,9 @@ export const AppRoute = () => { + + + diff --git a/src/store/index.js b/src/store/index.js index fef11ad..138b277 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -10,7 +10,7 @@ import { Transaction } from "./transaction"; import { TokenUtil } from "../utils/token"; import { Category } from "./category"; import { Subcategory } from "./subcategory"; - +import { Payback } from "./payback"; import { Role } from "./role"; export class Store { @@ -23,6 +23,7 @@ export class Store { supplier = new Supplier(this); commission = new Commission(this); category = new Category(this); + payback = new Payback(this); transaction = new Transaction(this); subcategory = new Subcategory(this); role = new Role(this); diff --git a/src/store/payback.js b/src/store/payback.js new file mode 100644 index 0000000..1c36900 --- /dev/null +++ b/src/store/payback.js @@ -0,0 +1,91 @@ +import { makeAutoObservable } from "mobx"; +import { http } from "../utils/http"; + +export class Payback { + page = 0; + pageSize = 10; + data = []; + total_data = 0; + filterCategory = null; + visibleModalPayback = false; + + pageCategories = 0; + pageSizeCategories = 10; + dataCategories = []; + total_dataCategories = 0; + + pageSubCategories = 0; + pageSizeSubCategories = 10; + dataSubCategories = []; + total_dataSubCategories = 0; + + constructor(ctx) { + this.ctx = ctx; + makeAutoObservable(this); + } + + async getData() { + try { + const response = await http.get( + `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}` + ); + //console.log(response) + this.data = + response.body[0].map((item, idx) => { + item.key = idx; + return item; + }) ?? []; + + this.total_data = response.body.total_data ?? 0; + } catch (e) { + console.error(e); + } + } + + async getDataUser() { + try { + const response = await http.get( + `/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}` + ); + console.log(response); + this.data = + response.body[0].map((item, idx) => { + item.key = idx; + return item; + }) ?? []; + + this.total_data = response.body.total_data ?? 0; + } catch (e) { + console.error(e); + } + } + + async update(id, data) { + try { + const response = await http.put(`/config/commission/${id}`).send(data); + await this.getData(); + return response; + } catch (e) { + console.error(e); + } + } + + async delete(id) { + try { + const response = await http.del(`/product/${id}`); + await this.getData(); + return response; + } catch (e) { + console.error(e); + } + } + async create(data) { + try { + console.log(data) + return await http.post("/transaction/deposit-return").send(data); + + } catch (e) { + console.error(e); + } + } +}