Reformat all project files to use the prettier config file.
This commit is contained in:
@@ -1,117 +1,111 @@
|
||||
import {UploadOutlined} from "@ant-design/icons";
|
||||
import {notification, Progress, Result, Space, Upload} from "antd";
|
||||
import React, {useMemo, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { notification, Progress, Result, Space, Upload } from "antd";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
||||
import formatBytes from "../../utils/formatbytes";
|
||||
import {handleUpload} from "./documents-upload.utility";
|
||||
import { handleUpload } from "./documents-upload.utility";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
export function DocumentsUploadComponent({
|
||||
children,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
jobId,
|
||||
tagsArray,
|
||||
billId,
|
||||
callbackAfterUpload,
|
||||
totalSize,
|
||||
ignoreSizeLimit = false,
|
||||
}) {
|
||||
const {t} = useTranslation();
|
||||
const [fileList, setFileList] = useState([]);
|
||||
children,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
jobId,
|
||||
tagsArray,
|
||||
billId,
|
||||
callbackAfterUpload,
|
||||
totalSize,
|
||||
ignoreSizeLimit = false
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [fileList, setFileList] = useState([]);
|
||||
|
||||
const pct = useMemo(() => {
|
||||
return parseInt(
|
||||
(totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100
|
||||
);
|
||||
}, [bodyshop, totalSize]);
|
||||
|
||||
if (pct > 100 && !ignoreSizeLimit)
|
||||
return (
|
||||
<Result
|
||||
status="error"
|
||||
title={t("documents.labels.storageexceeded_title")}
|
||||
subTitle={t("documents.labels.storageexceeded")}
|
||||
/>
|
||||
);
|
||||
|
||||
const handleDone = (uid) => {
|
||||
setTimeout(() => {
|
||||
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
|
||||
}, 2000);
|
||||
};
|
||||
const pct = useMemo(() => {
|
||||
return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
|
||||
}, [bodyshop, totalSize]);
|
||||
|
||||
if (pct > 100 && !ignoreSizeLimit)
|
||||
return (
|
||||
<Upload.Dragger
|
||||
multiple={true}
|
||||
fileList={fileList}
|
||||
onChange={(f) => {
|
||||
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
|
||||
setFileList(f.fileList);
|
||||
}}
|
||||
beforeUpload={(file, fileList) => {
|
||||
if (ignoreSizeLimit) return true;
|
||||
const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
|
||||
const shouldStopUpload =
|
||||
(totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >=
|
||||
1;
|
||||
<Result
|
||||
status="error"
|
||||
title={t("documents.labels.storageexceeded_title")}
|
||||
subTitle={t("documents.labels.storageexceeded")}
|
||||
/>
|
||||
);
|
||||
|
||||
//Check to see if old files plus newly uploaded ones will be too much.
|
||||
if (shouldStopUpload) {
|
||||
notification.open({
|
||||
key: "cannotuploaddocuments",
|
||||
type: "error",
|
||||
message: t("documents.labels.upload_limitexceeded_title"),
|
||||
description: t("documents.labels.upload_limitexceeded"),
|
||||
});
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
customRequest={(ev) =>
|
||||
handleUpload(ev, {
|
||||
bodyshop: bodyshop,
|
||||
uploaded_by: currentUser.email,
|
||||
jobId: jobId,
|
||||
billId: billId,
|
||||
tagsArray: tagsArray,
|
||||
callback: callbackAfterUpload,
|
||||
})
|
||||
}
|
||||
accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
|
||||
// showUploadList={false}
|
||||
>
|
||||
{children || (
|
||||
<>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<UploadOutlined/>
|
||||
</p>
|
||||
<p className="ant-upload-text">
|
||||
Click or drag files to this area to upload.
|
||||
</p>
|
||||
{!ignoreSizeLimit && (
|
||||
<Space wrap className="ant-upload-text">
|
||||
<Progress type="dashboard" percent={pct} size="small"/>
|
||||
<span>
|
||||
const handleDone = (uid) => {
|
||||
setTimeout(() => {
|
||||
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<Upload.Dragger
|
||||
multiple={true}
|
||||
fileList={fileList}
|
||||
onChange={(f) => {
|
||||
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
|
||||
setFileList(f.fileList);
|
||||
}}
|
||||
beforeUpload={(file, fileList) => {
|
||||
if (ignoreSizeLimit) return true;
|
||||
const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
|
||||
const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
|
||||
|
||||
//Check to see if old files plus newly uploaded ones will be too much.
|
||||
if (shouldStopUpload) {
|
||||
notification.open({
|
||||
key: "cannotuploaddocuments",
|
||||
type: "error",
|
||||
message: t("documents.labels.upload_limitexceeded_title"),
|
||||
description: t("documents.labels.upload_limitexceeded")
|
||||
});
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
customRequest={(ev) =>
|
||||
handleUpload(ev, {
|
||||
bodyshop: bodyshop,
|
||||
uploaded_by: currentUser.email,
|
||||
jobId: jobId,
|
||||
billId: billId,
|
||||
tagsArray: tagsArray,
|
||||
callback: callbackAfterUpload
|
||||
})
|
||||
}
|
||||
accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
|
||||
// showUploadList={false}
|
||||
>
|
||||
{children || (
|
||||
<>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<UploadOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag files to this area to upload.</p>
|
||||
{!ignoreSizeLimit && (
|
||||
<Space wrap className="ant-upload-text">
|
||||
<Progress type="dashboard" percent={pct} size="small" />
|
||||
<span>
|
||||
{t("documents.labels.usage", {
|
||||
percent: pct,
|
||||
used: formatBytes(totalSize),
|
||||
total: formatBytes(bodyshop && bodyshop.jobsizelimit),
|
||||
percent: pct,
|
||||
used: formatBytes(totalSize),
|
||||
total: formatBytes(bodyshop && bodyshop.jobsizelimit)
|
||||
})}
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Upload.Dragger>
|
||||
);
|
||||
</Space>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Upload.Dragger>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, null)(DocumentsUploadComponent);
|
||||
|
||||
Reference in New Issue
Block a user