PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Konfirm Retail Page

Browse Source
This commit is contained in:
ajat91.sudrajat 2022-01-21 14:30:11 +07:00
parent 0cd63db64e
commit 7e065166f3
5 changed files with 247 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Membership/DetailUser.js
View File

@ -509,7 +509,7 @@ export const DetailUser = observer(() => {
);
console.log(store.membership.dataDetail.userDetail.id);
console.log(
store.membership.dataDetail.userDetail.image_identity
store.membership.dataDetail.userDetail.image_identity,"gambar id"
);
console.log(store.membership.dataDetail.username);
setVisibleModal(true);

229
src/pages/Membership/Konfirmasi.js
View File

@ -17,6 +17,7 @@ import {
Typography,
DatePicker,
Form,
Divinder,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
@ -34,8 +35,10 @@ import { appConfig } from "../../config/app";
import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
import moment from "moment";
import { useHistory } from "react-router-dom";
export const Konfirmasi = observer(() => {
const history = useHistory();
const { Option } = Select;
const { Title } = Typography;
const [form] = Form.useForm();
@ -43,6 +46,10 @@ export const Konfirmasi = observer(() => {
const modalLoader = useContext(ModalLoaderContext);
const [filterMembership, setFilterMembership] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState([]);
const [visibleModalToko, setVisibleModalToko] = useState(false);
const [VisibleModalIdentitas, setVisibleModalIdentitas] = useState(false);
const [toko, setToko] = useState({});
const [identitas, setIdentitas] = useState({});
useEffect(() => {
const init = async () => {
@ -71,7 +78,7 @@ export const Konfirmasi = observer(() => {
key: "userData_name",
},
{
title: "Picture",
title: "Foto Identitas",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
@ -83,15 +90,30 @@ export const Konfirmasi = observer(() => {
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
title: "Foto Toko",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
// <Image
// src={`${appConfig.apiUrl}/config/image/${text}`}
// style={{ width: "5vw" }}
// alt={record.id}
// />
<Button
onClick={async () => {
// await store.transaction.getDataHistoryTopUp(record.id);
// await store.transaction.getDetailHistoryTransaction(record.id);
// await store.authentication.getProfit(record.id);
//await store.transaction.getDataHistoryTransaction()
// history.push(LINKS.USER_DETAIL.replace(":id", record.id));
// console.log(record.id);
setToko(record);
setVisibleModalToko(true);
}}
>
Lihat Foto
</Button>
),
},
{
title: "Action",
@ -279,6 +301,20 @@ export const Konfirmasi = observer(() => {
Apply
</Button>,
];
const gambar = [
{
mobil:
"https://www.toyota.astra.co.id/sites/default/files/2021-11/4-avanza-silver-mica-metallic.png",
},
{
mobil:
"https://foto.kontan.co.id/B0DdG0ycDkrB5FyHTkyjMhz4opk=/smart/2021/04/22/1618664119p.jpg",
},
{
mobil:
"https://static.wixstatic.com/media/bce131_b85b43380cb44ad493776b810c0389ac~mv2.png/v1/fill/w_688,h_408,al_c/bce131_b85b43380cb44ad493776b810c0389ac~mv2.png",
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
@ -444,12 +480,41 @@ export const Konfirmasi = observer(() => {
{PAYBACK_STATUS[item.status]}
</Tag>
)}
<Button
style={{ marginRight: 10, marginTop: 7 }}
onClick={async () => {
// await store.transaction.getDataHistoryTopUp(record.id);
// await store.transaction.getDetailHistoryTransaction(record.id);
// await store.authentication.getProfit(record.id);
//await store.transaction.getDataHistoryTransaction()
// history.push(LINKS.USER_DETAIL.replace(":id", record.id));
// console.log(record.id);
setIdentitas(item);
setVisibleModalIdentitas(true);
}}
>
Foto Identitas
</Button>
<Button
onClick={async () => {
// await store.transaction.getDataHistoryTopUp(record.id);
// await store.transaction.getDetailHistoryTransaction(record.id);
// await store.authentication.getProfit(record.id);
//await store.transaction.getDataHistoryTransaction()
// history.push(LINKS.USER_DETAIL.replace(":id", record.id));
// console.log(record.id);
setToko(item);
setVisibleModalToko(true);
}}
>
Foto Toko
</Button>
</p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
{/* <p
style={{
fontSize: 9,
margin: 0,
@ -459,7 +524,7 @@ export const Konfirmasi = observer(() => {
src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
style={{ width: "10vw" }}
/>
</p>
</p> */}
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
@ -471,6 +536,144 @@ export const Konfirmasi = observer(() => {
</div>
</Card>
<Modal
visible={
visibleModalToko === true ? visibleModalToko : VisibleModalIdentitas
}
//title={`Are you sure buy ${barang?.product_name}?`}
okText={"Confirm"}
onCancel={() => {
form.resetFields();
setVisibleModalToko(false);
setVisibleModalIdentitas(false);
}}
width={1000}
footer={false}
// footer={footerLayoutFilter}
// footer={[
// <Button
// key="back"
// style={{
// backgroundColor: "#e74e5e",
// color: "#fff",
// }}
// onClick={() => {
// form.resetFields();
// handleCancel();
// }}
// >
// Cancel
// </Button>,
// <Button
// key="Buy Prod"
// style={{
// backgroundColor: "#4e79e7",
// color: "#fff",
// }}
// onClick={() => {
// form
// .validateFields()
// .then((values) => {
// console.log(values, "isi form");
// handleBuyProduct(values, barang.product_code);
// form.resetFields();
// })
// .catch((info) => {
// console.error("Validate Failed:", info);
// });
// }}
// >
// Buy Prod
// </Button>,
// <Button
// key="Buy Stag"
// type="primary"
// onClick={() => {
// form
// .validateFields()
// .then((values) => {
// console.log(values, "isi form");
// handleBuyStag(values, barang.product_code);
// form.resetFields();
// })
// .catch((info) => {
// console.error("Validate Failed:", info);
// });
// }}
// >
// Buy Staging
// </Button>,
// ]}
// cancelText="Cancel"
// onCancel={() => {
// form.resetFields();
// handleCancel();
// }}
// onOk={() => {
// form
// .validateFields()
// .then((values) => {
// console.log(values, "isi form");
// handleBuyProduct(values, item.product_code);
// form.resetFields();
// })
// .catch((info) => {
// console.error("Validate Failed:", info);
// });
// }}
>
{visibleModalToko === true ? (
<Row>
{gambar.map((gmbr, idx) => (
<Card
style={
store.ui.mediaQuery.isDesktop
? {
width: "29vw",
borderColor: "salmon",
marginLeft: "10px",
}
: {
width: "75vw",
borderColor: "salmon",
marginBottom: "10px",
}
}
>
<Image src={`${gmbr.mobil}`} alt={idx} />
</Card>
))}
</Row>
) : (
<Image
src={`${appConfig.apiUrl}/config/image/${identitas.image_prove}`}
alt={identitas.id}
/>
)}
{/* <Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Destination"
rules={[
{
required: true,
message: "Please input Destination Number!",
},
// {
// pattern: /^(?:\d*)$/,
// message: "Value should contain just number",
// },
// {
// pattern: /^[\d]{1,12}$/,
// message: "Value should be 1 - 12 character",
// },
]}
>
<Input />
</Form.Item>
</Form> */}
</Modal>
{/* <Modal
visible={store.payback.visibleModalFilterPayback}
title={"Filter"}
footer={footerLayoutFilter}
@ -522,7 +725,7 @@ export const Konfirmasi = observer(() => {
</Form>
</Col>
</Row>
</Modal>
</Modal> */}
</div>
);
});

38
src/pages/Membership/MembershipModal.js
View File

@ -81,7 +81,9 @@ export const MembershipModal = ({
);
};
const handleCancel1 = () => { setPreviewVisible(false) };
const handleCancel1 = () => {
setPreviewVisible(false);
};
const beforeUpload = (file) => {
let isLt2M;
@ -112,20 +114,36 @@ export const MembershipModal = ({
};
const uploadHandler = async (args) => {
// if (fileList === "") {
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);
//setResponseFilename(res.body.filename);
console.log(initialData.image_identity)
initialData.image_identity !== ""
? file === ""
? setResponseFilename(initialData.image_identity)
: setResponseFilename(res.body.filename)
: setResponseFilename(res.body.filename);
setFileList([
{
uid: "-1",
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
},
]);
{
uid: "-1",
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
},
]);
setLoading(false);
// } else {
// const file = args.file;
// const res = await store.payback.uploadImages(file);
// console.log(res, "ini respon 1");
// setImage(`${appConfig.apiUrl}/config/image/${initialData.image_identity}`);
// setResponseFilename(initialData.image_identity);
// setFileList([initialData.image_identity]);
// setLoading(false);
// }
};
const uploadHandlerStore = async (args) => {
@ -141,7 +159,7 @@ export const MembershipModal = ({
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
}
},
]);
setLoadingStore(false);

2
src/pages/Product/Category.js
View File

@ -46,7 +46,7 @@ export const Category = observer(() => {
];
return (
<div className={[""].join(" ")}>
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{ marginBottom: 20 }}>

2
src/pages/Product/Product.js
View File

@ -177,7 +177,7 @@ export const Product = observer(() => {
};
return (
<div className={[""].join(" ")}>
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ||