513 lines
16 KiB
JavaScript
513 lines
16 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Form,
|
|
Input,
|
|
Modal,
|
|
Select,
|
|
InputNumber,
|
|
Row,
|
|
Col,
|
|
Typography,
|
|
Upload,
|
|
message,
|
|
} from "antd";
|
|
import { useStore } from "../../utils/useStore";
|
|
import { appConfig } from "../../config/app";
|
|
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
|
|
|
|
export const MembershipModal = ({
|
|
visible,
|
|
onCreate,
|
|
onCancel,
|
|
initialData,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
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);
|
|
|
|
useEffect(() => {
|
|
if (initialData.id) {
|
|
setFileList([
|
|
{
|
|
url: `${appConfig.apiUrl}/config/image/${initialData.image_identity}`,
|
|
},
|
|
]);
|
|
setFileStore([
|
|
{
|
|
url: `${appConfig.apiUrl}/config/image/${initialData.image_store}`,
|
|
},
|
|
]);
|
|
setImage(
|
|
`${appConfig.apiUrl}/config/image/${initialData.image_identity}`
|
|
);
|
|
setImageStore(
|
|
`${appConfig.apiUrl}/config/image/${initialData.image_store}`
|
|
);
|
|
}
|
|
return () => {};
|
|
}, [initialData]);
|
|
|
|
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([...responseFilenameStore, res.body.filename]);
|
|
setFileStore([
|
|
...fileStore,
|
|
{
|
|
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 = (
|
|
<div>
|
|
{loading ? <LoadingOutlined /> : <PlusOutlined />}
|
|
<div style={{ marginTop: 8 }}>Click to Upload</div>
|
|
</div>
|
|
);
|
|
|
|
const uploadButtonStore = (
|
|
<div>
|
|
{loadingStore ? <LoadingOutlined /> : <PlusOutlined />}
|
|
<div style={{ marginTop: 8 }}>Click to Upload</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title={
|
|
initialData.isChangePassword
|
|
? "Change Member Password"
|
|
: initialData.id
|
|
? "Edit Member"
|
|
: "Create a new Membership"
|
|
}
|
|
okText={initialData.id ? "Edit" : "Create"}
|
|
cancelText="Cancel"
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
onCancel();
|
|
setImage("");
|
|
setFileList([]);
|
|
setPreviewImage("");
|
|
setResponseFilename("");
|
|
setImageStore("");
|
|
setFileStore([]);
|
|
setPreviewImageStore("");
|
|
setResponseFilenameStore("");
|
|
}}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
console.log(values, "apa valuesanya");
|
|
values.image_identity = responseFilename;
|
|
values.image_store = responseFilenameStore;
|
|
onCreate(values, responseFilename, responseFilenameStore);
|
|
form.resetFields();
|
|
setFileStore([]);
|
|
setImage("");
|
|
setFileList([]);
|
|
setPreviewImage("");
|
|
setResponseFilename("");
|
|
setImageStore("");
|
|
setFileStore([]);
|
|
setPreviewImageStore("");
|
|
setResponseFilenameStore("");
|
|
})
|
|
.catch((info) => {
|
|
console.log("Validate Failed:", info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
name="form_in_modal"
|
|
initialValues={initialData}
|
|
>
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="name"
|
|
label="Name"
|
|
rules={[{ required: true, message: "Please input Name!" }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
)}
|
|
{!initialData.id && (
|
|
<Form.Item
|
|
name="username"
|
|
label="Username"
|
|
rules={[{ required: true, message: "Please input Username!" }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="password"
|
|
label="Password"
|
|
rules={[{ required: false, message: "Please input password!" }]}
|
|
>
|
|
<Input.Password />
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="phone_number"
|
|
label="Phone Number"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please input Phone Number!",
|
|
},
|
|
{
|
|
pattern: /^(?:\d*)$/,
|
|
message: "Phone number should contain just number",
|
|
},
|
|
{
|
|
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
|
|
pattern: /^[\d]{10,12}$/,
|
|
message: "Phone number should be 10 - 12 character",
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onChange={(value) => {
|
|
setValue(value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) &&
|
|
store.authentication.userData.role === "Admin" && (
|
|
<div>
|
|
<Form.Item
|
|
name="identity_number"
|
|
label="Identity Number"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please input identity number!",
|
|
},
|
|
{
|
|
pattern: /^(?:\d*)$/,
|
|
message: "Phone number should contain just number",
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onChange={(value) => {
|
|
setValue(value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="Upload Identity Image" name="image_identity">
|
|
<div>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={(file) => {
|
|
setPreviewImage(file.url || file.filename);
|
|
}}
|
|
showUploadList={true}
|
|
onChange={handleChange}
|
|
beforeUpload={(file) => beforeUpload(file)}
|
|
customRequest={(args) => uploadHandler(args)}
|
|
maxCount={1}
|
|
onRemove={(file) => {
|
|
setImage("");
|
|
setLoading(false);
|
|
setFileList([]);
|
|
}}
|
|
>
|
|
{image === "" ? uploadButton : null}
|
|
</Upload>
|
|
<h5
|
|
style={{
|
|
marginTop: 12,
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
Max size of file 2 MB
|
|
</h5>
|
|
</div>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="roleId"
|
|
label="Role"
|
|
rules={[{ required: true, message: "Please input role id!" }]}
|
|
>
|
|
<Select>
|
|
{store.role.data.map((item) => (
|
|
<Option key={item.id} value={item.id}>
|
|
{item.name}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
</div>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) &&
|
|
store.authentication.userData.role === "Supervisor" && (
|
|
<div>
|
|
<Form.Item
|
|
name="identity_number"
|
|
label="Identity Number"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please input identity number!",
|
|
},
|
|
{
|
|
pattern: /^(?:\d*)$/,
|
|
message: "Phone number should contain just number",
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onChange={(value) => {
|
|
setValue(value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="Upload Identity Image" name="image_identity">
|
|
<div>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={(file) => {
|
|
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}
|
|
</Upload>
|
|
<h5
|
|
style={{
|
|
marginTop: 12,
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
Max size of file 2 MB
|
|
</h5>
|
|
</div>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="roleId"
|
|
label="Role"
|
|
rules={[{ required: true, message: "Please input role id!" }]}
|
|
>
|
|
<Select>
|
|
<Option
|
|
key="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
|
|
value="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
|
|
>
|
|
Sales
|
|
</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</div>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) &&
|
|
store.authentication.userData.role === "Sales" && (
|
|
<div>
|
|
<Form.Item
|
|
name="identity_number"
|
|
label="Identity Number"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please input identity number!",
|
|
},
|
|
{
|
|
pattern: /^(?:\d*)$/,
|
|
message: "Phone number should contain just number",
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
onChange={(value) => {
|
|
setValue(value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
{/* <Row>
|
|
<Col> */}
|
|
<Form.Item label="Upload Identity Image" name="image_identity">
|
|
<div>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={(file) => {
|
|
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}
|
|
</Upload>
|
|
<h5
|
|
style={{
|
|
marginTop: 12,
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
Max size of file 2 MB
|
|
</h5>
|
|
</div>
|
|
</Form.Item>
|
|
<Form.Item label="Upload Store Image" name="image_store">
|
|
<div>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={fileStore}
|
|
onPreview={(file) => {
|
|
setPreviewImageStore(file.url || file.filename);
|
|
}}
|
|
showUploadList={true}
|
|
onChange={handleChangeStore}
|
|
beforeUpload={(file) => beforeUploadStore(file)}
|
|
customRequest={(args) => uploadHandlerStore(args)}
|
|
maxCount={3}
|
|
onRemove={(file) => {
|
|
setImageStore("");
|
|
setLoadingStore(false);
|
|
setFileStore([]);
|
|
}}
|
|
>
|
|
{fileStore.length >= 3 ? null : uploadButtonStore}
|
|
</Upload>
|
|
<h5
|
|
style={{
|
|
marginTop: 12,
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
Max size of file 2 MB
|
|
</h5>
|
|
</div>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="roleId"
|
|
label="Role"
|
|
rules={[{ required: true, message: "Please input role id!" }]}
|
|
>
|
|
<Select>
|
|
<Option
|
|
key="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
|
|
value="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
|
|
>
|
|
Retail
|
|
</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</div>
|
|
)}
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|