From a9d0d199d1e45800d60d7fb2fa3b3f65a24f8450 Mon Sep 17 00:00:00 2001 From: "ajat91.sudrajat" Date: Tue, 11 Jan 2022 14:33:09 +0700 Subject: [PATCH] Perbaikan PPOB --- src/component/CategoryComponent.js | 113 +++++++++++++++---- src/component/PartnerComponent.js | 16 +-- src/component/ProductComponent.js | 6 +- src/component/SubcategoryComponent.js | 6 +- src/component/SupplierComponent.js | 6 +- src/pages/App/DesktopLayout.js | 28 ++--- src/pages/Membership/DetailUser.js | 46 +++++--- src/pages/Membership/Membership.js | 10 +- src/pages/Membership/MembershipModal.js | 31 ++++-- src/pages/Membership/Picture.js | 141 ++++++++++++++++++++++++ src/pages/Payback/Payback.js | 4 +- src/pages/Payback/PaybackCreated.js | 15 ++- src/pages/Profile/Profile.js | 27 +++-- src/store/product.js | 1 + src/store/transaction.js | 1 + 15 files changed, 344 insertions(+), 107 deletions(-) create mode 100644 src/pages/Membership/Picture.js diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js index 42adce7..627881e 100644 --- a/src/component/CategoryComponent.js +++ b/src/component/CategoryComponent.js @@ -8,6 +8,8 @@ import { Select, Space, Table, + List, + Divider } from "antd"; import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; @@ -115,28 +117,95 @@ export const CategoryComponent = observer((props) => { return (
- { - let pageNumber = page.current; - store.category.pageSize = page.pageSize; - store.category.page = pageNumber - 1; - modalLoader.setLoading(true); - await store.category.getData(); - modalLoader.setLoading(false); - }} - /> - + {store.ui.mediaQuery.isDesktop && ( +
{ + let pageNumber = page.current; + store.category.pageSize = page.pageSize; + store.category.page = pageNumber - 1; + modalLoader.setLoading(true); + await store.category.getData(); + modalLoader.setLoading(false); + }} + /> + )} + {store.ui.mediaQuery.isMobile && ( + { + store.category.pageSize = pageSize; + store.category.page = page - 1; + modalLoader.setLoading(true); + await store.category.getData(); + modalLoader.setLoading(false); + }, + pageSize: store.category.pageSize, + total: store.category.total_data, + current: store.category.page + 1, + style: { marginBottom: "1rem", marginRight: "1rem" }, + }} + dataSource={store.category.data} + style={{ padding: 0 }} + renderItem={(item) => { + return ( +
+ + +

+ Category : {item.name} +
+

+

+
+ } + /> +
+

+ +

+
+ + + + ); + }} + /> + )} { itemLayout="horizontal" position={"top"} pagination={{ - onChange: async (page) => { - store.partner.pageSize = page.pageSize; - store.partner.page = page.current - 1; + onChange: async (page, pageSize) => { + store.partner.pageSize = pageSize; + store.partner.page = page - 1; modalLoader.setLoading(true); await store.partner.getData(); modalLoader.setLoading(false); @@ -270,9 +270,11 @@ export const PartnerComponent = observer((props) => { description={

- Nama : {item.name}
- Npwp : {item.npwp}
- Address : {item.address} +

+ Nama : {item.name}
+ Npwp : {item.npwp}
+ Address : {item.address} +
- - - + + + {data.map((item)=>{ + + })} + + + )} {store.authentication.userData.role === "Admin" && ( @@ -448,7 +458,7 @@ export const DetailUser = observer(() => { { { { itemLayout="horizontal" position={"top"} pagination={{ - onChange: async (page) => { - store.transaction.pageSize = page.pageSize; - store.transaction.page = page.current - 1; + onChange: async (page,pageSize) => { + store.transaction.pageSize = pageSize; + store.transaction.page = page - 1; modalLoader.setLoading(true); await getData(); modalLoader.setLoading(false); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index b8c1cfd..99f4899 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -30,6 +30,7 @@ import { LINKS } from "../../routes/app"; import { useHistory } from "react-router-dom"; import { ModalLoaderContext } from "../../utils/modal"; + export const Membership = observer(() => { const history = useHistory(); const { Option } = Select; @@ -291,7 +292,7 @@ export const Membership = observer(() => { const request = { ...data, image_identity: image, - image_store: imageStore, + image_store: JSON.stringify(imageStore), }; const response = await store.membership.create(request); response?.body?.statusCode === 201 || response?.body?.statusCode === 200 @@ -308,6 +309,7 @@ export const Membership = observer(() => { setConfirmLoading(false); setVisibleModal(false); setInitialData({}); + form.resetFields(); } }; return ( @@ -385,9 +387,9 @@ export const Membership = observer(() => { itemLayout="horizontal" position={"top"} pagination={{ - onChange: async (page) => { - store.membership.pageSize = page.pageSize; - store.membership.page = page.current - 1; + onChange: async (page, pageSize) => { + store.membership.pageSize = pageSize; + store.membership.page = page -1; modalLoader.setLoading(true); await getData(); modalLoader.setLoading(false); diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js index b1c3176..4981af4 100644 --- a/src/pages/Membership/MembershipModal.js +++ b/src/pages/Membership/MembershipModal.js @@ -36,7 +36,7 @@ export const MembershipModal = ({ const [responseFilenameStore, setResponseFilenameStore] = useState(""); const [loading, setLoading] = useState(false); const [loadingStore, setLoadingStore] = useState(false); - + const beforeUpload = (file) => { let isLt2M; let allowedFile = ["image/jpeg", "image/png"]; @@ -87,15 +87,14 @@ export const MembershipModal = ({ const res = await store.payback.uploadImages(file); console.log(res, "ini respon 2"); setImageStore(`${appConfig.apiUrl}/config/image/${res.body.filename}`); - setResponseFilenameStore(res.body.filename); - setFileStore([ - { - uid: "-1", - name: res.body.filename, - status: "done", - url: `${appConfig.apiUrl}/config/image/${res.body.filename}`, - }, - ]); + setResponseFilenameStore([...responseFilenameStore, res.body.filename]); + setFileStore([...fileStore, { + uid: "-1", + name: res.body.filename, + status: "done", + url: `${appConfig.apiUrl}/config/image/${res.body.filename}`, + } ]); + setLoadingStore(false); }; @@ -159,6 +158,15 @@ export const MembershipModal = ({ .then((values) => { onCreate(values,responseFilename,responseFilenameStore); form.resetFields(); + setFileStore([]) + setImage(""); + setFileList([]); + setPreviewImage(""); + setResponseFilename(""); + setImageStore(""); + setFileStore([]); + setPreviewImageStore(""); + setResponseFilenameStore(""); }) .catch((info) => { console.log("Validate Failed:", info); @@ -435,13 +443,14 @@ export const MembershipModal = ({ onChange={handleChangeStore} beforeUpload={(file) => beforeUploadStore(file)} customRequest={(args) => uploadHandlerStore(args)} + maxCount={3} onRemove={(file) => { setImageStore(""); setLoadingStore(false); setFileStore([]); }} > - {imageStore === "" ? uploadButtonStore : null} + {fileStore.length >= 3 ? null:uploadButtonStore }
{ + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); +} + +export class PicturesWall extends React.Component { + state = { + previewVisible: false, + previewImage: '', + previewTitle: '', + fileList: [], + }; + + handleCancel = () => this.setState({ previewVisible: false }); + + handlePreview = async file => { + if (!file.url && !file.preview) { + file.preview = await getBase64(file.originFileObj); + } + + this.setState({ + previewImage: file.url || file.preview, + previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1), + previewVisible: true, + }); + }; + + handlePreviewCancel = () => { + this.setState({ + previewVisible: false, + }); + }; + + handleChange = ({ fileList }, info) => { + + // if (this.props.maxUpload) { + // if (fileList.length > this.props.maxUpload) { + // fileList.splice(0, 1) + // } + // } + + // if (info.file.status !== 'uploading') { + // console.log(info.file, info.fileList); + // } + // if (info.file.status === 'done') { + // message.success(`${info.file.name} file uploaded successfully`); + // } else if (info.file.status === 'error') { + // message.error(`${info.file.name} file upload failed.`); + // } + + this.setState({ fileList }) + }; + + render() { + const { previewVisible, previewImage, fileList, previewTitle, handlePreviewCancel } = this.state; + const uploadButton = ( +
+ +
Upload
+
+ ); + + return ( + <> + { + console.log({ file }) + http.uploadAntd({ + file, + onError() { + + }, + onProgress(event) { + console.log({ event }) + }, + onSuccess: (res) => { + if (this.props.onUpload) { + const { fileList } = this.state + const index = fileList.findIndex(d => d.uid === file.uid) + + if (fileList.length > this.props.maxUpload) { + this.setState({ + fileList: [] + }) && this.props.onUpload() + message.error('Upload foto tidak boleh melebihi batas maksimal!'); + } else { + fileList[index].path = res.body.path + this.setState({ + ...fileList + }) + this.props.onUpload(fileList) + + } + } + } + }) + return false; + }} + {...(this.props.uploadProps || {})} + > + {/* {fileList.length > this.props.maxUpload ? + this.setState({ + fileList: [] + }) && this.props.onUpload() && null + : + ''} */} + {fileList.length >= this.props.maxUpload ? '' : uploadButton} + + + + + + + ); + } +} + +export default PicturesWall; diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 11dd20a..7575b04 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -367,12 +367,10 @@ export const Payback = observer(() => { >

- {item.userData_name} -
Amount: {item.amount}
{PAYBACK_STATUS[item.status] === diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js index 084bd04..bdc2aa8 100644 --- a/src/pages/Payback/PaybackCreated.js +++ b/src/pages/Payback/PaybackCreated.js @@ -274,9 +274,9 @@ export const PaybackCreated = observer(() => { itemLayout="horizontal" position={"top"} pagination={{ - onChange: async (page) => { - store.payback.pageSizeCreated = page.pageSize; - store.payback.pageCreated = page.current - 1; + onChange: async (page, pageSize) => { + store.payback.pageSizeCreated = pageSize; + store.payback.pageCreated = page - 1; modalLoader.setLoading(true); await store.payback.getDataCreated(); modalLoader.setLoading(false); @@ -308,7 +308,7 @@ export const PaybackCreated = observer(() => { title={item.name} description={

- + Amount: {item.amount}
} /> @@ -319,7 +319,12 @@ export const PaybackCreated = observer(() => { margin: 0, }} > - {item.amount} + {" "} +

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index ca45c15..3e91a33 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -401,20 +401,19 @@ export const Profile = observer(() => { position={"top"} dataSource={store.transaction.dataHistoryTransaction} pagination={{ + onChange: async (page, pageSize) => { + console.log(page,'Page') + console.log(pageSize,'Page size') + store.transaction.pageSizeHistoryTransaction = pageSize; + store.transaction.pageHistoryTransaction = page -1; + modalLoader.setLoading(true); + await store.transaction.getDataHistoryTransaction(); + modalLoader.setLoading(false); + }, pageSize: store.transaction.pageSizeHistoryTransaction, - total: store.transaction.total_dataHistoryTransaction, + total:store.transaction.total_dataHistoryTransaction, current: store.transaction.pageHistoryTransaction + 1, - showSizeChanger: true, - simple: false, - }} - onChange={async (page) => { - let pageNumber = page.current; - store.transaction.pageSizeHistoryTransaction = - page.pageSize; - store.transaction.pageHistoryTransaction = pageNumber - 1; - modalLoader.setLoading(true); - await store.transaction.getDataHistoryTransaction(); - modalLoader.setLoading(false); + style: { marginBottom: "1rem", marginRight: "1rem" }, }} style={{ padding: 0 }} renderItem={(item) => { @@ -472,6 +471,10 @@ export const Profile = observer(() => { No.Seri : {item.seri_number} {" "}
+ + Alasan Gagal : {item.failed_reason} + {" "} +
IDTrx Mitra :{" "} {item.partner_transaction_code} diff --git a/src/store/product.js b/src/store/product.js index 6a0713d..903ed5b 100644 --- a/src/store/product.js +++ b/src/store/product.js @@ -48,6 +48,7 @@ export class Product { }) ?? [] this.total_data = response?.body?.count ?? 0 + //console.log(this.total_data) } catch (e) { console.error(e); } diff --git a/src/store/transaction.js b/src/store/transaction.js index 3fb6cca..f10cb9e 100644 --- a/src/store/transaction.js +++ b/src/store/transaction.js @@ -135,6 +135,7 @@ export class Transaction { console.log(response); this.dataHistoryTransaction = response.body.data ?? []; this.total_dataHistoryTransaction = response?.body?.count ?? 0; + console.log(this.total_dataHistoryTransaction) } catch (e) { console.error(e); }