feat: add upload excel product functions
This commit is contained in:
caturbgs
parent
edc6d3e317
commit
d591615e66
|
|
@ -1,22 +1,19 @@
|
|||
import React, { useContext, useEffect } from "react";
|
||||
import { Button, Card, Col, Input, message, Row, Upload } from "antd";
|
||||
import {
|
||||
FilterOutlined,
|
||||
PlusSquareOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ProductComponent } from "../../component/ProductComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import { ModalLoaderContext } from "../../utils/modal";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, message, Row, Upload} from "antd";
|
||||
import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {ProductComponent} from "../../component/ProductComponent";
|
||||
import {LINKS} from "../../routes/app";
|
||||
import {ModalLoaderContext} from "../../utils/modal";
|
||||
|
||||
const { Search } = Input;
|
||||
const {Search} = Input;
|
||||
|
||||
export const Product = observer(() => {
|
||||
const store = useStore();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
|
|
@ -49,36 +46,97 @@ export const Product = observer(() => {
|
|||
},
|
||||
{
|
||||
route: LINKS.PRODUCT,
|
||||
name: <span style={{ fontWeight: "bold" }}>Product</span>,
|
||||
name: <span style={{fontWeight: "bold"}}>Product</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
let isLt2M;
|
||||
let allowedFile = [
|
||||
"text/csv", "application/csv",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
"application/vnd.ms-excel.sheet.binary.macroEnabled.12",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.ms-excel.sheet.macroEnabled.12"
|
||||
];
|
||||
let isValid = allowedFile.includes(file.type);
|
||||
if (!isValid) {
|
||||
message.error("You can only upload Excel file!");
|
||||
}
|
||||
isLt2M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt2M) {
|
||||
message.error("File must smaller than 10MB!");
|
||||
}
|
||||
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
|
||||
};
|
||||
|
||||
const uploadHandler = async (args) => {
|
||||
const file = args.file;
|
||||
const responseUpload = await store.product.uploadExcel(file);
|
||||
|
||||
if (responseUpload.status === 201) {
|
||||
message.success("Success upload excel!");
|
||||
} else {
|
||||
message.error("Failed upload excel!");
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const responseUploadProduct = await handleUploadProduct(responseUpload);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setLoading(false)
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadProduct = async (data) => {
|
||||
const response = await store.product.uploadProduct({fileName: data.body.filename});
|
||||
|
||||
if (response.status === 201) {
|
||||
message.success("Success Create Product by Excel!");
|
||||
} else {
|
||||
message.error("Failed Create Product by Excel!");
|
||||
setLoading(false);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
const loadingState = (
|
||||
<div>
|
||||
{loading ? <LoadingOutlined/> : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} />
|
||||
<Card>
|
||||
{store.authentication.userData.role !== "Admin" && (
|
||||
<div>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
store.product.visibleModalFilterProduct = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div
|
||||
style={{
|
||||
display: store.ui.mediaQuery.isMobile ? "" : "flex",
|
||||
justifyContent: "flex-end",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
{/* <Search
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
{store.authentication.userData.role !== "Admin" && (
|
||||
<div>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
store.product.visibleModalFilterProduct = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div
|
||||
style={{
|
||||
display: store.ui.mediaQuery.isMobile ? "" : "flex",
|
||||
justifyContent: "flex-end",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
{/* <Search
|
||||
placeholder="input search text"
|
||||
style={{
|
||||
width: store.ui.mediaQuery.isMobile ? 160 : 200,
|
||||
|
|
@ -87,32 +145,36 @@ export const Product = observer(() => {
|
|||
}}
|
||||
/> */}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: store.ui.mediaQuery.isMobile ? "" : "flex",
|
||||
justifyContent: "flex-end",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
<Upload>
|
||||
<Button
|
||||
disabled={store.product.uploadBtnProduct}
|
||||
style={{
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
|
||||
}}
|
||||
icon={<UploadOutlined />}
|
||||
<div
|
||||
style={{
|
||||
display: store.ui.mediaQuery.isMobile ? "" : "flex",
|
||||
justifyContent: "flex-end",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
Upload Product
|
||||
</Button>
|
||||
</Upload>
|
||||
{/* <Button
|
||||
onClick={() => (store.product.visibleModalProduct = true)}
|
||||
>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
<Upload
|
||||
showUploadList={false}
|
||||
onChange={handleChange}
|
||||
beforeUpload={(file) => beforeUpload(file)}
|
||||
customRequest={(args) => uploadHandler(args)}
|
||||
onRemove={(file) => {
|
||||
setLoading(false);
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
disabled={loading}
|
||||
style={{
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
|
||||
}}
|
||||
icon={<UploadOutlined/>}
|
||||
>
|
||||
Upload Product
|
||||
</Button>
|
||||
</Upload>
|
||||
{loadingState}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,6 +107,24 @@ export class Product {
|
|||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadExcel(data) {
|
||||
try {
|
||||
const response = await http.upload(data);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadProduct(data) {
|
||||
try {
|
||||
const response = await http.post('/product/upload-product').send(data);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user