diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index 9f38c91..b0bd509 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -282,6 +282,7 @@ export const Membership = observer(() => { setConfirmLoading(true); modalLoader.setLoading(true); try { + console.log(data,"data member") const response = await store.membership.create(data); response?.body?.statusCode === 201 || response?.body?.statusCode === 200 ? message.success( diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js index 752cbe0..a49f0da 100644 --- a/src/pages/Membership/MembershipModal.js +++ b/src/pages/Membership/MembershipModal.js @@ -8,8 +8,12 @@ import { Row, Col, Typography, + Upload, + message, } from "antd"; import { useStore } from "../../utils/useStore"; +import { appConfig } from "../../config/app"; +import { LoadingOutlined, PlusOutlined } from "@ant-design/icons"; const { Title, Text } = Typography; export const MembershipModal = ({ @@ -22,6 +26,108 @@ export const MembershipModal = ({ const { Option } = Select; const store = useStore(); const [value, setValue] = useState(); + const [image, setImage] = useState(""); + const [imageStore, setImageStore] = useState(""); + const [fileList, setFileList] = useState([]); + const [fileStore, setFileStore] = useState([]); + const [previewImage, setPreviewImage] = useState(""); + const [previewImageStore, setPreviewImageStore] = useState(""); + const [responseFilename, setResponseFilename] = useState(""); + 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"]; + let isValid = allowedFile.includes(file.type); + if (!isValid) { + message.error("You can only upload Image file!"); + } + isLt2M = file.size / 1024 / 1024 < 2; + if (!isLt2M) { + message.error("File must smaller than 2MB!"); + } + return isValid && isLt2M ? true : Upload.LIST_IGNORE; + }; + + const beforeUploadStore = (file) => { + let isLt2M; + let allowedFile = ["image/jpeg", "image/png"]; + let isValid = allowedFile.includes(file.type); + if (!isValid) { + message.error("You can only upload Image file!"); + } + isLt2M = file.size / 1024 / 1024 < 2; + if (!isLt2M) { + message.error("File must smaller than 2MB!"); + } + return isValid && isLt2M ? true : Upload.LIST_IGNORE; + }; + + const uploadHandler = async (args) => { + const file = args.file; + const res = await store.payback.uploadImages(file); + console.log(res, "ini respon 1"); + setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`); + setResponseFilename(res.body.filename); + setFileList([ + { + uid: "-1", + name: res.body.filename, + status: "done", + url: `${appConfig.apiUrl}/config/image/${res.body.filename}`, + }, + ]); + setLoading(false); + }; + + const uploadHandlerStore = async (args) => { + const file = args.file; + 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}`, + }, + ]); + setLoadingStore(false); + }; + + const handleChange = (info) => { + if (info.file.status === "uploading") { + setLoading(true); + } else { + setLoading(false); + } + }; + + const handleChangeStore = (info) => { + if (info.file.status === "uploading") { + setLoadingStore(true); + } else { + setLoadingStore(false); + } + }; + + const uploadButton = ( +
+ {loading ? : } +
Click to Upload
+
+ ); + + const uploadButtonStore = ( +
+ {loadingStore ? : } +
Click to Upload
+
+ ); return ( { form.resetFields(); onCancel(); + setImage(""); + setFileList([]); + setPreviewImage(""); + setResponseFilename(""); + setImageStore(""); + setFileStore([]); + setPreviewImageStore(""); + setResponseFilenameStore(""); }} onOk={() => { form @@ -115,21 +229,200 @@ export const MembershipModal = ({ )} {((initialData.id && !initialData.isChangePassword) || - !initialData.id) && ( - - - - )} + !initialData.id) && + store.authentication.userData.role === "Admin" && ( + + + + )} + {((initialData.id && !initialData.isChangePassword) || + !initialData.id) && + store.authentication.userData.role === "Supervisor" && ( +
+ + { + setValue(value); + }} + /> + + +
+ { + setPreviewImage(file.url || file.filename); + }} + showUploadList={true} + onChange={handleChange} + beforeUpload={(file) => beforeUpload(file)} + customRequest={(args) => uploadHandler(args)} + onRemove={(file) => { + setImage(""); + setLoading(false); + setFileList([]); + }} + > + {image === "" ? uploadButton : null} + +
+ Max size of file 2 MB +
+
+ + + + +
+ )} + {((initialData.id && !initialData.isChangePassword) || + !initialData.id) && + store.authentication.userData.role === "Sales" && ( +
+ + { + setValue(value); + }} + /> + + {/* + */} + +
+ { + setPreviewImage(file.url || file.filename); + }} + showUploadList={true} + onChange={handleChange} + beforeUpload={(file) => beforeUpload(file)} + customRequest={(args) => uploadHandler(args)} + onRemove={(file) => { + setImage(""); + setLoading(false); + setFileList([]); + }} + > + {image === "" ? uploadButton : null} + +
+ Max size of file 2 MB +
+
+ + +
+ { + setPreviewImageStore(file.url || file.filename); + }} + showUploadList={true} + onChange={handleChangeStore} + beforeUpload={(file) => beforeUploadStore(file)} + customRequest={(args) => uploadHandlerStore(args)} + onRemove={(file) => { + setImageStore(""); + setLoadingStore(false); + setFileStore([]); + }} + > + {imageStore === "" ? uploadButtonStore : null} + +
+ Max size of file 2 MB +
+
+ + + + +
+ )} );