Web: Files: moved editCompleteAction to store

This commit is contained in:
Nikita Gopienko 2021-03-05 11:46:16 +03:00
parent 1c40701376
commit 25a2daeab5
4 changed files with 121 additions and 149 deletions

View File

@ -10,7 +10,7 @@ const Icon = ({ size, primary, icon, isHovered }) => (
<div className="btnIcon">
{icon &&
React.cloneElement(icon, {
isfill: true,
//isfill: true,
size: size === "large" ? "large" : size === "big" ? "medium" : "small",
color: icon.props.color
? isHovered

View File

@ -115,8 +115,8 @@ class FilesRowContent extends React.PureComponent {
super(props);
let titleWithoutExt = getTitleWithoutExst(props.item);
if (props.fileAction.id === -1) {
titleWithoutExt = this.getDefaultName(props.fileAction.extension);
if (props.fileActionId === -1) {
titleWithoutExt = this.getDefaultName(props.fileActionExt);
}
this.state = {
@ -129,70 +129,18 @@ class FilesRowContent extends React.PureComponent {
};
}
onSelectItem = (item) => {
const { selected, setSelected, setSelection } = this.props;
selected === "close" && setSelected("none");
setSelection([item]);
};
//TODO: move to actions, used in files row content and tile
onEditComplete = (id, isFolder) => {
const {
selectedFolderId,
fileAction,
filter,
folders,
files,
treeFolders,
setTreeFolders,
setIsLoading,
fetchFiles,
setAction,
} = this.props;
const selectedItem = this.props.item;
const items = [...folders, ...files];
const item = items.find((o) => o.id === id && !o.fileExst); //TODO maybe need files find and folders find, not at one function?
if (
fileAction.type === FileAction.Create ||
fileAction.type === FileAction.Rename
) {
setIsLoading(true);
fetchFiles(selectedFolderId, filter)
.then((data) => {
const newItem = (item && item.id) === -1 ? null : item; //TODO not add new folders?
if (isFolder) {
const path = data.selectedFolder.pathParts;
const newTreeFolders = treeFolders;
const folders = data.selectedFolder.folders;
loopTreeFolders(path, newTreeFolders, folders, null, newItem);
setTreeFolders(newTreeFolders);
}
})
.finally(() => {
setAction({ type: null, id: null, extension: null });
setIsLoading(false);
fileAction.type === FileAction.Rename &&
this.onSelectItem(selectedItem);
});
}
//this.setState({ editingId: null }, () => {
// setAction({type: null});
//});
};
completeAction = (id) => {
this.onEditComplete(id, !this.props.item.fileExst);
const { item } = this.props;
this.props.editCompleteAction(id, !item.fileExst, /* item */);
};
updateItem = (e) => {
updateItem = () => {
const {
fileAction,
updateFile,
renameFolder,
item,
setIsLoading,
fileActionId,
} = this.props;
const { itemTitle } = this.state;
@ -203,15 +151,15 @@ class FilesRowContent extends React.PureComponent {
this.setState({
itemTitle: originalTitle,
});
return this.completeAction(fileAction.id);
return this.completeAction(fileActionId);
}
item.fileExst
? updateFile(fileAction.id, itemTitle)
.then(() => this.completeAction(fileAction.id))
? updateFile(fileActionId, itemTitle)
.then(() => this.completeAction(fileActionId))
.finally(() => setIsLoading(false))
: renameFolder(fileAction.id, itemTitle)
.then(() => this.completeAction(fileAction.id))
: renameFolder(fileActionId, itemTitle)
.then(() => this.completeAction(fileActionId))
.finally(() => setIsLoading(false));
};
@ -292,7 +240,7 @@ class FilesRowContent extends React.PureComponent {
};
// componentDidUpdate(prevProps) {
// const { fileAction, item, newRowItems, setNewRowItems } = this.props;
// const { item, newRowItems, setNewRowItems } = this.props;
// const itemId = item.id.toString();
// if (newRowItems.length && newRowItems.includes(itemId)) {
@ -303,8 +251,8 @@ class FilesRowContent extends React.PureComponent {
// }
// if (fileAction) {
// if (fileAction.id !== prevProps.fileAction.id) {
// this.setState({ editingId: fileAction.id });
// if (fileActionId !== prevProps.fileActionId) {
// this.setState({ editingId: fileActionId });
// }
// }
// }
@ -330,7 +278,7 @@ class FilesRowContent extends React.PureComponent {
};
onClickUpdateItem = (e) => {
this.props.fileAction.type === FileAction.Create
this.props.fileActionType === FileAction.Create
? this.createItem(e)
: this.updateItem(e);
};
@ -546,14 +494,14 @@ class FilesRowContent extends React.PureComponent {
const {
t,
item,
fileAction,
isTrashFolder,
folders,
isLoading,
isMobile,
canWebEdit,
/* canConvert,*/
sectionWidth,
fileActionId,
fileActionExt,
} = this.props;
const {
itemTitle,
@ -585,7 +533,7 @@ class FilesRowContent extends React.PureComponent {
const accessToEdit =
item.access === ShareAccessRights.FullAccess ||
item.access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
const isEdit = id === fileAction.id && fileExst === fileAction.extension;
const isEdit = id === fileActionId && fileExst === fileActionExt;
const linkStyles =
isTrashFolder || window.innerWidth <= 1024
@ -618,7 +566,6 @@ class FilesRowContent extends React.PureComponent {
visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel}
folderId={newFolderId}
folders={folders}
/>
)}
<SimpleFilesRowContent
@ -818,14 +765,11 @@ export default inject(
uploadDataStore,
treeFoldersStore,
selectedFolderStore,
filesActionsStore,
},
{ item }
) => {
const {
replaceFileStream,
getEncryptionAccess,
setEncryptionAccess,
} = auth;
const { replaceFileStream, setEncryptionAccess } = auth;
const { homepage, culture, isDesktopClient } = auth.settingsStore;
const { setIsLoading, isLoading } = initFilesStore;
const { secondaryProgressDataStore } = uploadDataStore;
@ -836,8 +780,6 @@ export default inject(
} = formatsStore;
const {
files,
folders,
fetchFiles,
filter,
setNewRowItems,
@ -847,9 +789,6 @@ export default inject(
renameFolder,
createFolder,
openDocEditor,
selected,
setSelected,
setSelection
} = filesStore;
const {
@ -861,9 +800,12 @@ export default inject(
addExpandedKeys,
} = treeFoldersStore;
const { type, extension, id, setAction } = filesStore.fileActionStore;
const {
type: fileActionType,
extension: fileActionExt,
id: fileActionId,
} = filesStore.fileActionStore;
const fileAction = { type, extension, id };
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
@ -880,9 +822,9 @@ export default inject(
homepage,
viewer: auth.userStore.user,
culture,
fileAction,
files,
folders,
fileActionId,
fileActionType,
fileActionExt,
selectedFolderId: selectedFolderStore.id,
selectedFolderPathParts: selectedFolderStore.pathParts,
newItems: selectedFolderStore.new,
@ -899,7 +841,6 @@ export default inject(
isSound,
newRowItems,
expandedKeys,
selected,
setIsLoading,
fetchFiles,
@ -912,13 +853,10 @@ export default inject(
updateFile,
renameFolder,
replaceFileStream,
getEncryptionAccess,
setEncryptionAccess,
addExpandedKeys,
openDocEditor,
setAction,
setSelected,
setSelection
editCompleteAction: filesActionsStore.editCompleteAction,
};
}
)(withRouter(withTranslation("Home")(observer(FilesRowContent))));

View File

@ -10,6 +10,7 @@ import Row from "@appserver/components/row";
import FilesRowContent from "./FilesRowContent";
import history from "@appserver/common/history";
import toastr from "@appserver/components/toast";
import { FileAction } from "@appserver/common/constants";
import { lockFile, finalizeVersion } from "@appserver/common/api/files"; //TODO: move to actions
@ -108,7 +109,7 @@ const SimpleFilesRow = (props) => {
removeItemFromFavorite,
getFileInfo,
fetchFavoritesFolder,
actionId
actionId,
} = props;
const {

View File

@ -1,15 +1,15 @@
import { makeAutoObservable } from "mobx";
import store from "studio/store";
import dialogsStore from "./DialogsStore";
import uploadDataStore from "./UploadDataStore";
import treeFoldersStore from "./TreeFoldersStore";
import filesStore from "./FilesStore";
import selectedFolderStore from "./SelectedFolderStore";
import initFilesStore from "./InitFilesStore";
import { removeFiles, getProgress } from "@appserver/common/api/files";
import { FileAction } from "@appserver/common/constants";
import { TIMEOUT } from "../helpers/constants";
import { loopTreeFolders } from "../helpers/files-helpers";
const { confirmDelete } = store.auth.settingsStore;
const { secondaryProgressDataStore } = uploadDataStore;
class FilesActionStore {
@ -18,10 +18,51 @@ class FilesActionStore {
}
deleteAction = (translations) => {
if (confirmDelete) {
dialogsStore.setDeleteDialogVisible(false);
} else {
return this.onDelete(translations);
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
const { selection } = filesStore;
const deleteAfter = true; //Delete after finished TODO: get from settings
const immediately = isRecycleBinFolder || isPrivacyFolder ? true : false; //Don't move to the Recycle Bin
const folderIds = [];
const fileIds = [];
let i = 0;
while (selection.length !== i) {
if (selection[i].fileExst) {
fileIds.push(selection[i].id);
} else {
folderIds.push(selection[i].id);
}
i++;
}
if (folderIds.length || fileIds.length) {
setSecondaryProgressBarData({
icon: "trash",
visible: true,
label: translations.deleteOperation,
percent: 0,
alert: false,
});
removeFiles(folderIds, fileIds, deleteAfter, immediately)
.then((res) => {
const id = res[0] && res[0].id ? res[0].id : null;
this.loopDeleteOperation(id, translations);
})
.catch((err) => {
setSecondaryProgressBarData({
visible: true,
alert: true,
});
//toastr.error(err);
setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
});
}
};
@ -80,55 +121,6 @@ class FilesActionStore {
});
};
onDelete = (translations) => {
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
const { selection } = filesStore;
const deleteAfter = true; //Delete after finished TODO: get from settings
const immediately = isRecycleBinFolder || isPrivacyFolder ? true : false; //Don't move to the Recycle Bin
const folderIds = [];
const fileIds = [];
let i = 0;
while (selection.length !== i) {
if (selection[i].fileExst) {
fileIds.push(selection[i].id);
} else {
folderIds.push(selection[i].id);
}
i++;
}
if (folderIds.length || fileIds.length) {
setSecondaryProgressBarData({
icon: "trash",
visible: true,
label: translations.deleteOperation,
percent: 0,
alert: false,
});
removeFiles(folderIds, fileIds, deleteAfter, immediately)
.then((res) => {
const id = res[0] && res[0].id ? res[0].id : null;
this.loopDeleteOperation(id, translations);
})
.catch((err) => {
setSecondaryProgressBarData({
visible: true,
alert: true,
});
//toastr.error(err);
setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
});
}
};
getDownloadProgress = (data, label) => {
const url = data.url;
@ -163,6 +155,47 @@ class FilesActionStore {
setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
});
};
editCompleteAction = (id, isFolder /* selectedItem */) => {
const { fetchFiles, filter, folders, files, fileActionStore } = filesStore;
const { type, setAction } = fileActionStore;
const { treeFolders, setTreeFolders } = treeFoldersStore;
const { setIsLoading } = initFilesStore;
const items = [...folders, ...files];
const item = items.find((o) => o.id === id && !o.fileExst); //TODO: maybe need files find and folders find, not at one function?
if (type === FileAction.Create || type === FileAction.Rename) {
setIsLoading(true);
fetchFiles(selectedFolderStore.id, filter)
.then((data) => {
const newItem = (item && item.id) === -1 ? null : item; //TODO: not add new folders?
if (isFolder) {
const path = data.selectedFolder.pathParts;
const newTreeFolders = treeFolders;
const folders = data.selectedFolder.folders;
loopTreeFolders(path, newTreeFolders, folders, null, newItem);
setTreeFolders(newTreeFolders);
}
})
.finally(() => {
setAction({ type: null, id: null, extension: null });
setIsLoading(false);
//uncomment if need to select item
//type === FileAction.Rename && this.onSelectItem(selectedItem);
// onSelectItem = (item) => {
// const { selected, setSelected, setSelection } = this.props;
// selected === "close" && setSelected("none");
// setSelection([item]);
// };
});
}
//this.setState({ editingId: null }, () => {
// setAction({type: null});
//});
};
}
export default new FilesActionStore();