From 8e7324330a75eeec49513d4d75a3619a37fb59e9 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Mon, 5 Apr 2021 12:39:51 +0300 Subject: [PATCH] Web: Files: fix after merge --- .../pages/Home/Section/Body/FIleItem.js | 18 +- .../pages/Home/Section/Body/FilesContainer.js | 5 +- .../pages/Home/Section/Body/FilesContent.js | 1 - .../Body/FilesRow/FilesRowContainer.js | 44 -- .../sub-components/BadgesFileTile.js | 4 +- .../Home/Section/Body/FilesTileContent.js | 500 ------------------ .../pages/Home/Section/Body/index.js | 7 +- 7 files changed, 14 insertions(+), 565 deletions(-) delete mode 100644 products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContainer.js delete mode 100644 products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FIleItem.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FIleItem.js index a08c18fe8a..648def719a 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FIleItem.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FIleItem.js @@ -232,7 +232,6 @@ const FileItem = (props) => { export default inject( ( { - initFilesStore, filesStore, treeFoldersStore, selectedFolderStore, @@ -243,13 +242,6 @@ export default inject( }, { item } ) => { - const { - dragging, - setDragging, - setStartDrag, - setTooltipPosition, - } = initFilesStore; - const { type: actionType, extension: actionExtension, @@ -265,7 +257,15 @@ export default inject( setCopyPanelVisible, } = dialogsStore; - const { selection, canShare, fileActionStore } = filesStore; + const { + selection, + canShare, + fileActionStore, + dragging, + setDragging, + setStartDrag, + setTooltipPosition, + } = filesStore; const { isRootFolder, id: selectedFolderId } = selectedFolderStore; diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContainer.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContainer.js index 5955f863b4..ce9f60b3b2 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContainer.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContainer.js @@ -53,9 +53,8 @@ const FilesContainer = (props) => { ); }; -export default inject(({ auth, initFilesStore, filesStore }) => { - const { filesList } = filesStore; - const { isLoading } = initFilesStore; +export default inject(({ auth, filesStore }) => { + const { filesList, isLoading } = filesStore; const { isLoaded } = auth; return { diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js index eccf9a79ba..92d86d8175 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js @@ -1,7 +1,6 @@ import React from "react"; import { withRouter } from "react-router"; import { Trans, withTranslation } from "react-i18next"; -import styled from "styled-components"; import { isMobile } from "react-device-detect"; import { inject, observer } from "mobx-react"; diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContainer.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContainer.js deleted file mode 100644 index 520cffd019..0000000000 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContainer.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { inject, observer } from "mobx-react"; -import RowContainer from "@appserver/components/row-container"; -import { Consumer } from "@appserver/components/utils/context"; -import SimpleFilesRow from "./SimpleFilesRow"; -import Loaders from "@appserver/common/components/Loaders"; -import { isMobile } from "react-device-detect"; - -const FilesRowContainer = (props) => { - const { isLoaded, isLoading } = props; - return !isLoaded || (isMobile && isLoading) ? ( - - ) : ( - - {(context) => ( - - {props.filesList.map((item) => { - return ( - - ); - })} - - )} - - ); -}; - -export default inject(({ auth, filesStore }) => { - const { filesList, isLoading } = filesStore; - - return { - filesList, - isLoading, - isLoaded: auth.isLoaded, - }; -})(observer(FilesRowContainer)); diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/BadgesFileTile.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/BadgesFileTile.js index 656ba87bce..bb8a09affe 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/BadgesFileTile.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/BadgesFileTile.js @@ -5,8 +5,8 @@ import Badge from "@appserver/components/badge"; import { inject, observer } from "mobx-react"; import FileActionsConvertEditDocIcon from "../../../../../../../../public/images/file.actions.convert.edit.doc.react.svg"; import FileActionsLockedIcon from "../../../../../../../../public/images/file.actions.locked.react.svg"; -import AccessEditIcon from "../../../../../../../../public/images/access.edit.react.svg"; -import FileActionsConvertIcon from "../../../../../../../../public/images/access.edit.react.svg"; +import AccessEditIcon from "../../../../../../../../../../../public/images/access.edit.react.svg"; +import FileActionsConvertIcon from "../../../../../../../../../../../public/images/access.edit.react.svg"; import commonIconsStyles from "@appserver/components/utils/common-icons-style"; const StyledBadgesFileTile = styled.div` diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js deleted file mode 100644 index d91fecbb35..0000000000 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js +++ /dev/null @@ -1,500 +0,0 @@ -import React from "react"; -import { withRouter } from "react-router"; -import { Trans, withTranslation } from "react-i18next"; -import styled from "styled-components"; -import Badge from "@appserver/components/badge"; -import Link from "@appserver/components/link"; -import Text from "@appserver/components/text"; -import { markAsRead } from "@appserver/common/api/files"; -import { FileAction, AppServerConfig } from "@appserver/common/constants"; -import toastr from "studio/toastr"; -import { getTitleWithoutExst } from "../../../../../helpers/files-helpers"; -import { NewFilesPanel } from "../../../../panels"; -import EditingWrapperComponent from "./EditingWrapperComponent"; -import TileContent from "./TileContent"; -import { isMobile } from "react-device-detect"; -import { inject, observer } from "mobx-react"; -import CheckIcon from "../../../../../../public/images/check.react.svg"; -import CrossIcon from "../../../../../../../../../public/images/cross.react.svg"; -import config from "../../../../../../package.json"; -import { combineUrl } from "@appserver/common/utils"; - -const SimpleFilesTileContent = styled(TileContent)` - .rowMainContainer { - height: auto; - max-width: 100%; - align-self: flex-end; - - a { - word-break: break-word; - } - } - - .mainIcons { - align-self: flex-end; - } - - .badge-ext { - margin-left: -8px; - margin-right: 8px; - } - - .badge { - margin-right: 8px; - } - - .badges { - display: flex; - align-items: center; - } - - .share-icon { - margin-top: -4px; - padding-right: 8px; - } - - @media (max-width: 1024px) { - display: inline-flex; - height: auto; - - & > div { - margin-top: 0; - } - } -`; - -const okIcon = ( - -); - -const cancelIcon = ( - -); - -class FilesTileContent extends React.PureComponent { - constructor(props) { - super(props); - let titleWithoutExt = getTitleWithoutExst(props.item); - - if (props.fileAction.id === -1) { - titleWithoutExt = this.getDefaultName(props.fileAction.extension); - } - - this.state = { - itemTitle: titleWithoutExt, - editingId: props.fileAction.id, - showNewFilesPanel: false, - newFolderId: [], - newItems: props.item.new, - //loading: false - }; - } - - completeAction = (e) => { - //this.setState({ loading: false }, () =>) - this.props.onEditComplete(e); - }; - - updateItem = (e) => { - const { - fileAction, - updateFile, - renameFolder, - item, - setIsLoading, - } = this.props; - - const { itemTitle } = this.state; - const originalTitle = getTitleWithoutExst(item); - - setIsLoading(true); - if (originalTitle === itemTitle) return this.completeAction(e); - - item.fileExst - ? updateFile(fileAction.id, itemTitle) - .then(() => this.completeAction(e)) - .finally(() => setIsLoading(false)) - : renameFolder(fileAction.id, itemTitle) - .then(() => this.completeAction(e)) - .finally(() => setIsLoading(false)); - }; - - createItem = (e) => { - const { createFile, item, setIsLoading, createFolder } = this.props; - const { itemTitle } = this.state; - - setIsLoading(true); - - if (itemTitle.trim() === "") return this.completeAction(); - - !item.fileExst - ? createFolder(item.parentId, itemTitle) - .then(() => this.completeAction(e)) - .finally(() => { - toastr.success( - - New folder {{ itemTitle }} is created - - ); - return setIsLoading(false); - }) - : createFile(item.parentId, `${itemTitle}.${item.fileExst}`) - .then(() => this.completeAction(e)) - .finally(() => { - const exst = item.fileExst; - toastr.success( - - New file {{ itemTitle }}.{{ exst }} is created - - ); - return setIsLoading(false); - }); - }; - - componentDidUpdate(prevProps) { - const { fileAction } = this.props; - if (fileAction) { - if (fileAction.id !== prevProps.fileAction.id) { - this.setState({ editingId: fileAction.id }); - } - } - } - - renameTitle = (e) => { - this.setState({ itemTitle: e.target.value }); - }; - - cancelUpdateItem = (e) => { - //this.setState({ loading: false }); - this.completeAction(e); - }; - - onClickUpdateItem = () => { - this.props.fileAction.type === FileAction.Create - ? this.createItem() - : this.updateItem(); - }; - - onKeyUpUpdateItem = (e) => { - if (e.keyCode === 13) { - this.props.fileAction.type === FileAction.Create - ? this.createItem() - : this.updateItem(); - } - - if (e.keyCode === 27) return this.cancelUpdateItem(); - }; - - onFilesClick = () => { - const { id, fileExst, viewUrl, providerKey } = this.props.item; - const { - filter, - parentFolder, - setIsLoading, - onMediaFileClick, - fetchFiles, - canWebEdit, - openDocEditor, - isVideo, - isImage, - isSound, - expandedKeys, - addExpandedKeys, - } = this.props; - if (!fileExst) { - setIsLoading(true); - - if (!expandedKeys.includes(parentFolder + "")) { - addExpandedKeys(parentFolder + ""); - } - - fetchFiles(id, filter) - .catch((err) => { - toastr.error(err); - setIsLoading(false); - }) - .finally(() => setIsLoading(false)); - } else { - if (canWebEdit) { - return openDocEditor(id, providerKey); - } - - const isOpenMedia = isImage || isSound || isVideo; - - if (isOpenMedia) { - onMediaFileClick(id); - return; - } - - return window.open(viewUrl, "_blank"); - } - }; - - onMobileRowClick = (e) => { - if (!isMobile) return; - - this.onFilesClick(); - }; - - getStatusByDate = () => { - const { culture, t, item, sectionWidth } = this.props; - const { created, updated, version, fileExst } = item; - - const title = - version > 1 - ? t("TitleModified") - : fileExst - ? t("TitleUploaded") - : t("TitleCreated"); - - const date = fileExst ? updated : created; - const dateLabel = new Date(date).toLocaleString(culture); - const mobile = (sectionWidth && sectionWidth <= 375) || isMobile; - - return mobile ? dateLabel : `${title}: ${dateLabel}`; - }; - - getDefaultName = (format) => { - const { t } = this.props; - - switch (format) { - case "docx": - return t("NewDocument"); - case "xlsx": - return t("NewSpreadsheet"); - case "pptx": - return t("NewPresentation"); - default: - return t("NewFolder"); - } - }; - - onShowVersionHistory = (e) => { - const { homepage, history } = this.props; - const fileId = e.currentTarget.dataset.id; - - history.push( - combineUrl(AppServerConfig.proxyURL, homepage, `/${fileId}/history`) - ); - }; - - onBadgeClick = () => { - const { showNewFilesPanel } = this.state; - const { - item, - treeFolders, - setTreeFolders, - rootFolderId, - newItems, - filter, - fetchFiles, - } = this.props; - if (item.fileExst) { - markAsRead([], [item.id]) - .then(() => { - const data = treeFolders; - const dataItem = data.find((x) => x.id === rootFolderId); - dataItem.newItems = newItems ? dataItem.newItems - 1 : 0; //////newItems - setTreeFolders(data); - fetchFiles(this.props.selectedFolderId, filter.clone()); - }) - .catch((err) => toastr.error(err)); - } else { - const newFolderId = this.props.selectedFolderPathParts; - newFolderId.push(item.id); - this.setState({ - showNewFilesPanel: !showNewFilesPanel, - newFolderId, - }); - } - }; - - onShowNewFilesPanel = () => { - const { showNewFilesPanel } = this.state; - this.setState({ showNewFilesPanel: !showNewFilesPanel }); - }; - - render() { - const { item, fileAction, isTrashFolder, folders } = this.props; - const { - itemTitle, - editingId, - showNewFilesPanel, - newItems, - newFolderId, - } = this.state; - const { fileExst, id } = item; - - const titleWithoutExt = getTitleWithoutExst(item); - - const isEdit = id === editingId && fileExst === fileAction.extension; - const linkStyles = isTrashFolder - ? { noHover: true } - : { onClick: this.onFilesClick }; - const showNew = item.new && item.new > 0; - - return isEdit ? ( - - ) : ( - <> - {showNewFilesPanel && ( - - )} - - - {titleWithoutExt} - - <> - {fileExst ? ( -
- - {fileExst} - -
- ) : ( -
- {!!showNew && ( - - )} -
- )} - - - - ); - } -} - -export default inject( - ( - { auth, filesStore, formatsStore, treeFoldersStore, selectedFolderStore }, - { item } - ) => { - const { culture } = auth.settingsStore; - const { - iconFormatsStore, - mediaViewersFormatsStore, - docserviceStore, - } = formatsStore; - const { - folders, - fetchFiles, - filter, - newRowItems, - createFile, - updateFile, - renameFolder, - createFolder, - setIsLoading, - isLoading, - dragging, - } = filesStore; - - const { - treeFolders, - setTreeFolders, - isRecycleBinFolder, - expandedKeys, - addExpandedKeys, - } = treeFoldersStore; - - const { type, extension, id } = filesStore.fileActionStore; - - const fileAction = { type, extension, id }; - - const canWebEdit = docserviceStore.canWebEdit(item.fileExst); - const isVideo = mediaViewersFormatsStore.isVideo(item.fileExst); - const isImage = iconFormatsStore.isImage(item.fileExst); - const isSound = iconFormatsStore.isSound(item.fileExst); - - return { - culture, - homepage: config.homepage, - fileAction, - folders, - rootFolderId: selectedFolderStore.pathParts, - selectedFolderId: selectedFolderStore.id, - selectedFolderPathParts: selectedFolderStore.pathParts, - newItems: selectedFolderStore.new, - parentFolder: selectedFolderStore.parentId, - isLoading, - treeFolders, - isTrashFolder: isRecycleBinFolder, - filter, - dragging, - canWebEdit, - isVideo, - isImage, - isSound, - newRowItems, - expandedKeys, - - setIsLoading, - fetchFiles, - setTreeFolders, - createFile, - createFolder, - updateFile, - renameFolder, - addExpandedKeys, - }; - } -)(withRouter(withTranslation("Home")(observer(FilesTileContent)))); diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js index dd50243ccf..53bc000533 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js @@ -19,8 +19,6 @@ const SectionBodyContent = (props) => { isEmptyFilesList, folderId, dragging, - startDrag, - setStartDrag, setDragging, startDrag, setStartDrag, @@ -164,15 +162,12 @@ export default inject( filesList, dragging, setDragging, - startDrag, - setStartDrag, isLoading, viewAs, setTooltipPosition, startDrag, setStartDrag, - } = initFilesStore; - const { firstLoad, fileActionStore, filesList } = filesStore; + } = filesStore; return { dragging,