IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/restore-files-convertation' of github.com:ONLYOFFICE/AppServer into feature/restore-files-convertation

Browse Source
This commit is contained in:
Viktor Fomin 2021-06-09 15:02:44 +03:00
commit fdc71ec359
7 changed files with 137 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-common/components/FloatingButton/FloatingButton.js
View File

@ -27,7 +27,7 @@ const FloatingButton = ({ id, className, style, ...rest }) => {
return (
<StyledCircleWrap
id={id}
className={className}
className={`${className} not-selectable`}
style={style}
icon={icon}
onClick={onClick}

3
products/ASC.Files/Client/src/components/panels/UploadPanel/FileList.js
View File

@ -4,6 +4,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as List } from "react-window";
import RowWrapper from "./RowWrapper";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
const FileList = ({ uploadDataFiles }) => {
//console.log("FileList render");
@ -33,4 +34,4 @@ export default inject(({ uploadDataStore }) => {
return {
uploadDataFiles: files,
};
})(observer(FileList));
})(withTranslation("UploadPanel")(observer(FileList)));

12
products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js
View File

@ -67,6 +67,7 @@ const FileRow = (props) => {
item,
uploaded,
cancelCurrentUpload,
cancelCurrentFileConversion,
//onMediaClick,
currentFileUploadProgress,
conversationProgress,
@ -78,8 +79,11 @@ const FileRow = (props) => {
const onCancelCurrentUpload = (e) => {
//console.log("cancel upload ", e);
const id = e.currentTarget.dataset.id;
return cancelCurrentUpload(id);
const { id, action, fileId } = e.currentTarget.dataset;
return action === "convert"
? cancelCurrentFileConversion(fileId)
: cancelCurrentUpload(id);
};
// const onMediaClick = (id) => {
@ -140,6 +144,8 @@ const FileRow = (props) => {
<div
className="upload_panel-icon"
data-id={item.uniqueId}
data-file-id={item.fileId}
data-action={item.action}
onClick={onCancelCurrentUpload}
>
<LoadingButton isConversion percent={conversationProgress} />
@ -199,6 +205,7 @@ export default inject(
uploaded,
primaryProgressDataStore,
cancelCurrentUpload,
cancelCurrentFileConversion,
} = uploadDataStore;
const { loadingFile: file } = primaryProgressDataStore;
const isMedia = mediaViewersFormatsStore.isMediaOrImage(ext);
@ -224,6 +231,7 @@ export default inject(
loadingFile,
cancelCurrentUpload,
cancelCurrentFileConversion,
};
}
)(observer(FileRow));

5
products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js
View File

@ -1,9 +1,10 @@
import React from "react";
import styled, { css, keyframes } from "styled-components";
import globalColors from "@appserver/components/utils/globalColors";
const backgroundColor = "none";
const color = "#2DA7DB";
const convertColor = "#20d21f";
const color = globalColors.blueMain;
const convertColor = globalColors.hoverSuccess;
const StyledCircleWrap = styled.div`
width: 16px;

29
products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
View File

@ -28,13 +28,20 @@ class UploadPanelComponent extends React.Component {
converted,
clearUploadData,
uploadPanelVisible,
clearUploadedFiles,
setUploadPanelVisible,
clearPrimaryProgressData,
} = this.props;
setUploadPanelVisible(!uploadPanelVisible);
if (uploaded && converted) {
clearUploadData();
clearPrimaryProgressData();
if (uploaded) {
if (converted) {
clearUploadData();
clearPrimaryProgressData();
} else {
clearUploadedFiles();
}
}
};
componentDidMount() {
@ -63,6 +70,8 @@ class UploadPanelComponent extends React.Component {
/* sharingPanelVisible, */ uploaded,
converted,
uploadDataFiles,
cancelUpload,
cancelConversion,
} = this.props;
const visible = uploadPanelVisible;
@ -84,21 +93,21 @@ class UploadPanelComponent extends React.Component {
</Heading>
<div className="upload_panel-icons-container">
<div className="upload_panel-remove-icon">
{uploaded ? (
{uploaded && converted ? (
<IconButton
size="20"
iconName="images/clear.active.react.svg"
color="#A3A9AE"
isClickable={true}
isClickable
onClick={this.clearUploadPanel}
/>
) : (
<IconButton
size="20"
iconName="images/button.cancel.react.svg"
color="#A3A9AE"
isClickable={true}
onClick={this.props.cancelUpload}
color={uploaded ? "#BCDF7E" : "#A3A9AE"}
isClickable
onClick={uploaded ? cancelConversion : cancelUpload}
/>
)}
</div>
@ -136,6 +145,8 @@ export default inject(({ /* dialogsStore, */ uploadDataStore }) => {
converted,
clearUploadData,
cancelUpload,
cancelConversion,
clearUploadedFiles,
uploadPanelVisible,
setUploadPanelVisible,
files,
@ -153,6 +164,8 @@ export default inject(({ /* dialogsStore, */ uploadDataStore }) => {
setUploadPanelVisible,
clearUploadData,
cancelUpload,
cancelConversion,
clearUploadedFiles,
uploadDataFiles: files,
clearPrimaryProgressData,
};

13
products/ASC.Files/Client/src/pages/Home/index.js
View File

@ -26,13 +26,10 @@ import MediaViewer from "./MediaViewer";
import DragTooltip from "../../components/DragTooltip";
import { observer, inject } from "mobx-react";
import config from "../../../package.json";
import globalColors from "@appserver/components/utils/globalColors";
const color = "#2DA7DB";
const convertColor = "#20d21f";
//#BCDF7E
//#20d21f
//#b9d21f
const color = globalColors.blueMain;
const convertColor = globalColors.hoverSuccess;
class PureHome extends React.Component {
componentDidMount() {
@ -249,9 +246,11 @@ class PureHome extends React.Component {
dragging,
uploaded,
converted,
} = this.props;
const primaryProgressBarColor = uploaded ? convertColor : color;
const primaryProgressBarColor =
uploaded && !converted ? convertColor : color;
return (
<>

117
products/ASC.Files/Client/src/store/UploadDataStore.js
View File

@ -104,6 +104,18 @@ class UploadDataStore {
this.converted = true;
};
clearUploadedFiles = () => {
const uploadData = {
filesSize: 0,
uploadStatus: null,
uploadedFiles: 0,
percent: 0,
files: this.files.filter((x) => x.action !== "uploaded"),
};
this.setUploadData(uploadData);
};
getUploadedFile = (id) => {
return this.files.filter((f) => f.uniqueId === id);
};
@ -130,6 +142,29 @@ class UploadDataStore {
this.setUploadData(newUploadData);
};
cancelConversion = () => {
let newFiles = [];
for (let i = 0; i < this.files.length; i++) {
if (this.files[i].action === "converted" || this.files[i].error) {
newFiles.push(this.files[i]);
}
}
const newUploadData = {
files: newFiles,
filesToConversion: [],
filesSize: this.filesSize,
uploadedFiles: this.uploadedFiles,
percent: 100,
uploaded: true,
converted: true,
};
if (newUploadData.files.length === 0) this.setUploadPanelVisible(false);
this.setUploadData(newUploadData);
};
cancelCurrentUpload = (id) => {
const newFiles = this.files.filter((el) => el.uniqueId !== id);
@ -144,6 +179,26 @@ class UploadDataStore {
this.setUploadData(newUploadData);
};
cancelCurrentFileConversion = (fileId) => {
const { convertItem, setConvertItem } = this.dialogsStore;
convertItem && setConvertItem(null);
const files = this.files.filter((el) => el.fileId + "" !== fileId);
const filesToConversion = this.filesToConversion.filter(
(el) => el.fileId + "" !== fileId
);
const newUploadData = {
files,
filesToConversion,
filesSize: this.filesSize,
uploadedFiles: this.uploadedFiles,
percent: this.percent,
};
this.setUploadData(newUploadData);
};
convertFile = (file) => {
const alreadyConverting = this.files.some(
(item) => item.fileId === file.fileId
@ -162,9 +217,13 @@ class UploadDataStore {
};
getNewPercent = (uploadedSize, indexOfFile) => {
const newTotalSize = sumBy(this.files, (f) => (f.file ? f.file.size : 0));
const newTotalSize = sumBy(this.files, (f) =>
f.file && f.action !== "converted" ? f.file.size : 0
);
const totalUploadedFiles = this.files.filter((_, i) => i < indexOfFile);
const totalUploadedSize = sumBy(totalUploadedFiles, (f) => f.file.size);
const totalUploadedSize = sumBy(totalUploadedFiles, (f) =>
f.file && f.action !== "converted" ? f.file.size : 0
);
const newPercent =
((uploadedSize + totalUploadedSize) / newTotalSize) * 100;
@ -200,8 +259,6 @@ class UploadDataStore {
this.primaryProgressDataStore.setPrimaryProgressBarData(
alert ? { ...data, ...{ alert } } : data
);
} else if (alert) {
this.primaryProgressDataStore.setPrimaryProgressBarData({ alert });
}
};
@ -209,18 +266,22 @@ class UploadDataStore {
const conversionFilesLength = this.filesToConversion.length;
return !percent
? (fileIndex / conversionFilesLength) * 100
: percent / conversionFilesLength;
: percent / conversionFilesLength + this.primaryProgressDataStore.percent;
};
startConversion = async () => {
this.converted = false;
const { convertItem, setConvertItem } = this.dialogsStore;
runInAction(() => (this.converted = false));
convertItem && setConvertItem(null);
this.setConversionPercent(0);
let index = 1;
for (let conversionItem of this.filesToConversion) {
let index = 0;
let len = this.filesToConversion.length;
let filesToConversion = this.filesToConversion;
while (index < len) {
const conversionItem = this.filesToConversion[index];
const { fileId, toFolderId } = conversionItem;
const data = await convertFile(fileId);
@ -238,8 +299,8 @@ class UploadDataStore {
error = res && res[0] && res[0].error;
if (error.length) {
const percent = this.getConversationPercent(100 * index);
this.setConversionPercent(percent, true);
const percent = this.getConversationPercent(100);
this.setConversionPercent(percent, !!error);
runInAction(() => {
const file = this.files.find((file) => file.fileId === fileId);
@ -256,21 +317,22 @@ class UploadDataStore {
conversionItem.action = "converted";
this.refreshFiles(toFolderId, false);
const percent = this.getConversationPercent(100 * index);
this.setConversionPercent(percent);
const percent = this.getConversationPercent(100, index);
this.setConversionPercent(percent, !!error);
break;
} else {
const percent = this.getConversationPercent(
progress * index,
index - 1
);
const percent = this.getConversationPercent(progress, index);
this.setConversionPercent(percent);
}
}
}
index++;
filesToConversion = this.filesToConversion;
len = filesToConversion.length;
}
if (this.uploaded) {
this.finishUploadFiles();
} else {
@ -336,10 +398,9 @@ class UploadDataStore {
this.convertFilesSize = convertSize;
if (
this.tempConversionFiles.length &&
!this.dialogsStore.convertDialogVisible
)
//console.log("this.tempConversionFiles", this.tempConversionFiles);
if (this.tempConversionFiles.length)
this.dialogsStore.setConvertDialogVisible(true);
//const showConvertDialog = uploadStatus === "pending";
@ -350,7 +411,7 @@ class UploadDataStore {
uploadedFiles: this.uploadedFiles,
percent: this.percent,
uploaded: false,
converted: !this.tempConversionFiles.length,
converted: !!this.tempConversionFiles.length,
};
if (this.uploaded && newFiles.length) {
@ -453,7 +514,7 @@ class UploadDataStore {
const { toFolderId, needConvert } = currentFile;
if (needConvert) {
currentFile.action = "convert";
runInAction(() => (currentFile.action = "convert"));
if (!this.filesToConversion.length || this.converted) {
this.filesToConversion.push(currentFile);
this.startConversion();
@ -496,6 +557,16 @@ class UploadDataStore {
this.finishUploadFiles();
} else {
runInAction(() => (this.uploaded = true));
const uploadedFiles = this.files.filter((x) => x.action === "uploaded");
const totalErrorsCount = sumBy(uploadedFiles, (f) => (f.error ? 1 : 0));
if (totalErrorsCount > 0)
console.log("Upload errors: ", totalErrorsCount);
setTimeout(() => {
if (!this.uploadPanelVisible && !totalErrorsCount) {
this.clearUploadedFiles();
}
}, TIMEOUT);
}
};