Merge branch 'develop' into 'devops-staging'
Develop See merge request empatnusabangsa/ppob/ppob-frontend!55
This commit is contained in:
commit
e3fbdae41f
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
<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
|
||||
|
|
@ -38,6 +144,14 @@ export const MembershipModal = ({
|
|||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
setImage("");
|
||||
setFileList([]);
|
||||
setPreviewImage("");
|
||||
setResponseFilename("");
|
||||
setImageStore("");
|
||||
setFileStore([]);
|
||||
setPreviewImageStore("");
|
||||
setResponseFilenameStore("");
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
|
|
@ -115,21 +229,200 @@ export const MembershipModal = ({
|
|||
</Form.Item>
|
||||
)}
|
||||
{((initialData.id && !initialData.isChangePassword) ||
|
||||
!initialData.id) && (
|
||||
<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>
|
||||
)}
|
||||
!initialData.id) &&
|
||||
store.authentication.userData.role === "Admin" && (
|
||||
<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>
|
||||
)}
|
||||
{((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 Foto Identitas Diri"
|
||||
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 Foto Identitas Diri"
|
||||
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 Foto Toko / Kios" 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)}
|
||||
onRemove={(file) => {
|
||||
setImageStore("");
|
||||
setLoadingStore(false);
|
||||
setFileStore([]);
|
||||
}}
|
||||
>
|
||||
{imageStore === "" ? uploadButtonStore : 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-2338-464a-8fb8-5cbc089d4209"
|
||||
value="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
|
||||
>
|
||||
Retail
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user