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

Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces

Browse Source
This commit is contained in:
Vladislav Makhov 2021-03-03 14:54:37 +03:00
commit 34c1816aa5
36 changed files with 1465 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
View File

@ -10,7 +10,7 @@ import {
StyledFilterItemContent,
StyledCloseButtonBlock,
} from "../StyledFilterInput";
import GroupSelector from "people/GroupSelector";
import GroupSelector from "people/GroupSelector"; //TODO: Move GroupSelector out of FilterItem
import PeopleSelector from "../../PeopleSelector";
class FilterItem extends React.Component {

2
packages/asc-web-common/components/PageLayout/page-layout.stories.js
View File

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import styled from "@emotion/styled";
import NavMenu from "../NavMenu";
import Main from "../Main";
import Main from "studio/Main";
import PageLayout from ".";
import history from "../../history";
import Headline from "../Headline";

2
packages/asc-web-common/components/PageLayout/sub-components/section-body.js
View File

@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import equal from "fast-deep-equal/react";
import { LayoutContextConsumer } from "../../Layout/context";
import { LayoutContextConsumer } from "studio/Layout/context";
import { isMobile } from "react-device-detect";
import { inject, observer } from "mobx-react";

2
packages/asc-web-common/components/PageLayout/sub-components/section-header.js
View File

@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
import equal from "fast-deep-equal/react";
import classnames from "classnames";
import PropTypes from "prop-types";
import { LayoutContextConsumer } from "../../Layout/context";
import { LayoutContextConsumer } from "studio/Layout/context";
import { isMobile } from "react-device-detect";
import { tablet, desktop } from "@appserver/components/utils/device";

4
packages/asc-web-common/components/index.js
View File

@ -4,9 +4,6 @@ export { default as ExternalRedirect } from "./ExternalRedirect";
export { default as Headline } from "./Headline";
export { default as PeopleSelector } from "./PeopleSelector";
export { default as AdvancedSelector } from "./AdvancedSelector";
export { default as Layout } from "./Layout";
export { default as ScrollToTop } from "./Layout/ScrollToTop";
export * from "./Layout/context";
export { default as PageLayout } from "./PageLayout";
export { default as ErrorContainer } from "./ErrorContainer";
export { default as ErrorBoundary } from "./ErrorBoundary";
@ -14,5 +11,4 @@ export { default as FilterInput } from "./FilterInput";
export { default as MediaViewer } from "./MediaViewer";
export { default as toastr } from "./Toast";
export { default as NavMenu } from "./NavMenu";
export { default as Main } from "./Main";
export { default as Loaders } from "./Loaders";

12
packages/asc-web-components/row/index.js
View File

@ -20,12 +20,12 @@ class Row extends React.Component {
this.rowRef = React.createRef();
}
shouldComponentUpdate(nextProps) {
if (this.props.needForUpdate) {
return this.props.needForUpdate(this.props, nextProps);
}
return !equal(this.props, nextProps);
}
// shouldComponentUpdate(nextProps) {
// if (this.props.needForUpdate) {
// return this.props.needForUpdate(this.props, nextProps);
// }
// return !equal(this.props, nextProps);
// }
componentDidMount() {
if (this.props.selectItem) {

17
products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js
View File

@ -29,6 +29,7 @@ const PureConnectDialogContainer = (props) => {
getOAuthToken,
saveThirdParty,
openConnectWindow,
setConnectDialogVisible,
} = props;
const { corporate, title, link, token, provider_id, provider_key } = item;
@ -71,10 +72,10 @@ const PureConnectDialogContainer = (props) => {
setCustomerTitleValue(e.target.value);
};
const onChangeMakeShared = () => setMakeShared(!isCorporate);
const onClose = useCallback(() => !isLoading && props.onClose(), [
isLoading,
props,
]);
const onClose = useCallback(() => {
!isLoading && setConnectDialogVisible(false);
}, [isLoading, setConnectDialogVisible]);
const onSave = useCallback(() => {
const isTitleValid = !!customerTitle.trim();
@ -334,6 +335,11 @@ export default inject(
fetchTreeFolders,
} = treeFoldersStore;
const { id, folders } = selectedFolderStore;
const {
connectDialogVisible,
setConnectDialogVisible,
connectItem: item,
} = dialogsStore;
return {
selectedFolderId: id,
@ -342,6 +348,8 @@ export default inject(
myFolderId,
commonFolderId,
providers,
visible: connectDialogVisible,
item,
fetchFiles,
setTreeFolders,
@ -350,6 +358,7 @@ export default inject(
openConnectWindow,
fetchThirdPartyProviders,
fetchTreeFolders,
setConnectDialogVisible,
};
}
)(observer(ConnectDialog));

28
products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
View File

@ -106,7 +106,6 @@ class DeleteDialogComponent extends React.Component {
const {
isRecycleBinFolder,
isPrivacy,
onClose,
t,
setSecondaryProgressBarData,
clearSecondaryProgressData,
@ -129,7 +128,7 @@ class DeleteDialogComponent extends React.Component {
i++;
}
onClose();
this.onClose();
if (folderIds.length || fileIds.length) {
setSecondaryProgressBarData({
icon: "trash",
@ -173,8 +172,17 @@ class DeleteDialogComponent extends React.Component {
}
};
onClose = () => {
const { confirmDelete, setDeleteDialogVisible } = this.props;
if (confirmDelete) {
setDeleteDialogVisible(false);
} else {
//this.onDelete(); // TODO: header onDelete action, need move to actions
}
};
render() {
const { onClose, visible, t, isLoading } = this.props;
const { visible, t, isLoading } = this.props;
const { filesList, foldersList, selection } = this.state;
const checkedSelections = selection.filter((x) => x.checked === true);
@ -200,7 +208,7 @@ class DeleteDialogComponent extends React.Component {
return (
<ModalDialogContainer>
<ModalDialog visible={visible} onClose={onClose}>
<ModalDialog visible={visible} onClose={this.onClose}>
<ModalDialog.Header>{t("ConfirmationTitle")}</ModalDialog.Header>
<ModalDialog.Body>
<div className="modal-dialog-content">
@ -257,7 +265,7 @@ class DeleteDialogComponent extends React.Component {
key="CancelButton"
label={t("CancelButton")}
size="medium"
onClick={onClose}
onClick={this.onClose}
isLoading={isLoading}
/>
</ModalDialog.Footer>
@ -276,6 +284,8 @@ export default inject(
uploadDataStore,
treeFoldersStore,
selectedFolderStore,
dialogsStore,
settingsStore,
}) => {
const { isLoading } = initFilesStore;
const { secondaryProgressDataStore } = uploadDataStore;
@ -293,6 +303,11 @@ export default inject(
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const {
deleteDialogVisible: visible,
setDeleteDialogVisible,
} = dialogsStore;
return {
currentFolderId: selectedFolderStore.id,
selection,
@ -302,11 +317,14 @@ export default inject(
isPrivacy: isPrivacyFolder,
filter,
isRootFolder: selectedFolderStore.isRootFolder,
visible,
confirmDelete: settingsStore.confirmDelete,
fetchFiles,
setTreeFolders,
setSecondaryProgressBarData,
clearSecondaryProgressData,
setDeleteDialogVisible,
};
}
)(withRouter(observer(DeleteDialog)));

18
products/ASC.Files/Client/src/components/dialogs/DeleteThirdPartyDialog/index.js
View File

@ -18,12 +18,13 @@ class DeleteThirdPartyDialogComponent extends React.Component {
toastr.success(t("SuccessDeleteThirdParty", { service: removeItem.title }));
};
onClose = () => this.props.setDeleteThirdPartyDialogVisible(false);
onDeleteThirdParty = () => {
const {
setThirdPartyProviders,
removeItem,
providers,
onClose,
fetchFiles,
currentFolderId,
commonId,
@ -54,14 +55,14 @@ class DeleteThirdPartyDialogComponent extends React.Component {
}
})
.catch((err) => toastr.error(err))
.finally(() => onClose());
.finally(() => this.onClose());
};
render() {
const { onClose, visible, t, removeItem } = this.props;
const { visible, t, removeItem } = this.props;
return (
<ModalDialog visible={visible} zIndex={310} onClose={onClose}>
<ModalDialog visible={visible} zIndex={310} onClose={this.onClose}>
<ModalDialog.Header>{t("DeleteThirdParty")}</ModalDialog.Header>
<ModalDialog.Body>
{t("DeleteThirdPartyAlert", { service: removeItem.title })}
@ -95,17 +96,26 @@ export default inject(
commonFolderId,
} = treeFoldersStore;
const {
deleteThirdPartyDialogVisible: visible,
setDeleteThirdPartyDialogVisible,
removeItem,
} = dialogsStore;
return {
currentFolderId: selectedFolderStore.id,
treeFolders,
myId: myFolderId,
commonId: commonFolderId,
providers,
visible,
removeItem,
fetchFiles,
setTreeFolders,
setThirdPartyProviders,
deleteThirdParty,
setDeleteThirdPartyDialogVisible,
};
}
)(withRouter(observer(DeleteThirdPartyDialog)));

56
products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
View File

@ -55,6 +55,8 @@ class DownloadDialogComponent extends React.Component {
};
}
onClose = () => this.props.setDownloadDialogVisible(false);
getTitleLabel = (format) => {
switch (format) {
case 0:
@ -130,8 +132,7 @@ class DownloadDialogComponent extends React.Component {
onDownload = () => {
const {
onDownloadProgress,
onClose,
//onDownloadProgress,
t,
setSecondaryProgressBarData,
clearSecondaryProgressData,
@ -151,8 +152,8 @@ class DownloadDialogComponent extends React.Component {
});
downloadFormatFiles(fileConvertIds, folderIds)
.then((res) => {
onClose();
onDownloadProgress(res[0]);
this.onClose();
//onDownloadProgress(res[0]); //TODO: fix download action
})
.catch((err) => {
setSecondaryProgressBarData({
@ -410,7 +411,7 @@ class DownloadDialogComponent extends React.Component {
};
render() {
const { onClose, visible, t } = this.props;
const { visible, t } = this.props;
const {
documentsTitleFormat,
spreadsheetsTitleFormat,
@ -436,7 +437,7 @@ class DownloadDialogComponent extends React.Component {
return (
<ModalDialogContainer>
<ModalDialog visible={visible} onClose={onClose}>
<ModalDialog visible={visible} onClose={this.onClose}>
<ModalDialog.Header>{t("DownloadAs")}</ModalDialog.Header>
<ModalDialog.Body>
<Text>{t("ChooseFormatText")}</Text>
@ -564,7 +565,7 @@ class DownloadDialogComponent extends React.Component {
key="CancelButton"
label={t("CancelButton")}
size="medium"
onClick={onClose}
onClick={this.onClose}
//isLoading={isLoading}
/>
</ModalDialog.Footer>
@ -578,21 +579,30 @@ const DownloadDialog = withTranslation("DownloadDialog")(
DownloadDialogComponent
);
export default inject(({ filesStore, uploadDataStore, formatsStore }) => {
const { secondaryProgressDataStore } = uploadDataStore;
const { sortedFiles } = filesStore;
const { getFileIcon, getFolderIcon } = formatsStore.iconFormatsStore;
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
export default inject(
({ filesStore, uploadDataStore, formatsStore, dialogsStore }) => {
const { secondaryProgressDataStore } = uploadDataStore;
const { sortedFiles } = filesStore;
const { getFileIcon, getFolderIcon } = formatsStore.iconFormatsStore;
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
return {
sortedFiles,
const {
downloadDialogVisible: visible,
setDownloadDialogVisible,
} = dialogsStore;
setSecondaryProgressBarData,
clearSecondaryProgressData,
getFileIcon,
getFolderIcon,
};
})(withRouter(observer(DownloadDialog)));
return {
sortedFiles,
visible,
setSecondaryProgressBarData,
clearSecondaryProgressData,
getFileIcon,
getFolderIcon,
setDownloadDialogVisible,
};
}
)(withRouter(observer(DownloadDialog)));

19
products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
View File

@ -12,7 +12,6 @@ import { inject, observer } from "mobx-react";
const EmptyTrashDialogComponent = (props) => {
const {
onClose,
visible,
t,
filter,
@ -21,8 +20,11 @@ const EmptyTrashDialogComponent = (props) => {
isLoading,
clearSecondaryProgressData,
fetchFiles,
setEmptyTrashDialogVisible,
} = props;
const onClose = () => setEmptyTrashDialogVisible(false);
const loopEmptyTrash = useCallback(
(id) => {
const successMessage = t("SuccessEmptyTrash");
@ -148,7 +150,13 @@ const EmptyTrashDialog = withTranslation("EmptyTrashDialog")(
);
export default inject(
({ initFilesStore, filesStore, uploadDataStore, selectedFolderStore }) => {
({
initFilesStore,
filesStore,
uploadDataStore,
selectedFolderStore,
dialogsStore,
}) => {
const { isLoading } = initFilesStore;
const { secondaryProgressDataStore } = uploadDataStore;
const { fetchFiles, filter } = filesStore;
@ -157,14 +165,21 @@ export default inject(
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const {
emptyTrashDialogVisible: visible,
setEmptyTrashDialogVisible,
} = dialogsStore;
return {
currentFolderId: selectedFolderStore.id,
isLoading,
filter,
visible,
fetchFiles,
setSecondaryProgressBarData,
clearSecondaryProgressData,
setEmptyTrashDialogVisible,
};
}
)(withRouter(observer(EmptyTrashDialog)));

21
products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js
View File

@ -5,6 +5,7 @@ import { withTranslation } from "react-i18next";
import ModalDialog from "@appserver/components/modal-dialog";
import Text from "@appserver/components/text";
import Button from "@appserver/components/button";
import { inject, observer } from "mobx-react";
const StyledOperationDialog = styled.div`
.operation-button {
@ -14,14 +15,16 @@ const StyledOperationDialog = styled.div`
const PureThirdPartyMoveContainer = ({
t,
onClose,
visible,
startMoveOperation,
startCopyOperation,
provider,
setThirdPartyMoveDialogVisible,
}) => {
const zIndex = 310;
const onClose = () => setThirdPartyMoveDialogVisible(false);
return (
<StyledOperationDialog>
<ModalDialog visible={visible} zIndex={zIndex} onClose={onClose}>
@ -58,6 +61,18 @@ const PureThirdPartyMoveContainer = ({
);
};
export default withTranslation("ThirdPartyMoveDialog")(
PureThirdPartyMoveContainer
export default inject(({ filesStore, dialogsStore }) => {
const {
thirdPartyMoveDialogVisible: visible,
setThirdPartyMoveDialogVisible,
} = dialogsStore;
const { selection } = filesStore;
return {
visible,
setThirdPartyMoveDialogVisible,
provider: selection[0].providerKey,
};
})(
withTranslation("ThirdPartyMoveDialog")(observer(PureThirdPartyMoveContainer))
);

94
products/ASC.Files/Client/src/components/pages/Home/Panels/index.js
View File

@ -1,27 +1,99 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { SharingPanel, UploadPanel } from "../../../panels";
import {
SharingPanel,
UploadPanel,
OperationsPanel,
VersionHistoryPanel,
} from "../../../panels";
import {
ThirdPartyMoveDialog,
ConnectDialog,
DeleteThirdPartyDialog,
EmptyTrashDialog,
DeleteDialog,
DownloadDialog,
} from "../../../dialogs";
const Panels = (props) => {
const { uploadPanelVisible, sharingPanelVisible /*selection*/ } = props;
const {
uploadPanelVisible,
sharingPanelVisible,
ownerPanelVisible,
copyPanelVisible,
moveToPanelVisible,
thirdPartyMoveDialogVisible,
connectDialogVisible,
deleteThirdPartyDialogVisible,
versionHistoryPanelVisible,
deleteDialogVisible,
downloadDialogVisible,
emptyTrashDialogVisible,
} = props;
return [
uploadPanelVisible && <UploadPanel key="upload-panel" />,
sharingPanelVisible && (
<SharingPanel
key="sharing-panel"
// selection={selection}
uploadPanelVisible={uploadPanelVisible}
/>
),
ownerPanelVisible && <ChangeOwnerPanel key="change-owner-panel" />,
(moveToPanelVisible || copyPanelVisible) && (
<OperationsPanel key="operation-panel" isCopy={copyPanelVisible} />
),
thirdPartyMoveDialogVisible && (
<ThirdPartyMoveDialog
key="thirdparty-move-dialog"
startMoveOperation={this.startMoveOperation} //TODO: added actions to dialog
startCopyOperation={this.startCopyOperation} //TODO: added actions to dialog
/>
),
connectDialogVisible && <ConnectDialog key="connect-dialog" />,
deleteThirdPartyDialogVisible && (
<DeleteThirdPartyDialog key="thirdparty-delete-dialog" />
),
versionHistoryPanelVisible && (
<VersionHistoryPanel key="version-history-panel" />
),
deleteDialogVisible && <DeleteDialog key="delete-dialog" />,
emptyTrashDialogVisible && <EmptyTrashDialog key="empty-trash-dialog" />,
downloadDialogVisible && <DownloadDialog key="download-dialog" />,
];
};
export default inject(({ dialogsStore, uploadDataStore }) => {
const { sharingPanelVisible } = dialogsStore;
const { uploadPanelVisible } = uploadDataStore;
export default inject(
({ dialogsStore, uploadDataStore, versionHistoryStore }) => {
const {
sharingPanelVisible,
ownerPanelVisible,
copyPanelVisible,
moveToPanelVisible,
thirdPartyMoveDialogVisible,
connectDialogVisible,
deleteThirdPartyDialogVisible,
deleteDialogVisible,
downloadDialogVisible,
emptyTrashDialogVisible,
} = dialogsStore;
return {
sharingPanelVisible,
uploadPanelVisible,
};
})(observer(Panels));
const { uploadPanelVisible } = uploadDataStore;
const { isVisible: versionHistoryPanelVisible } = versionHistoryStore;
return {
sharingPanelVisible,
uploadPanelVisible,
ownerPanelVisible,
copyPanelVisible,
moveToPanelVisible,
thirdPartyMoveDialogVisible,
connectDialogVisible,
deleteThirdPartyDialogVisible,
versionHistoryPanelVisible,
deleteDialogVisible,
downloadDialogVisible,
emptyTrashDialogVisible,
};
}
)(observer(Panels));

37
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContainer.js Normal file
View File

@ -0,0 +1,37 @@
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";
const FilesRowContainer = (props) => {
return (
<Consumer>
{(context) => (
<RowContainer
className="files-row-container"
draggable
useReactWindow={false}
>
{props.filesList.map((item) => {
return (
<SimpleFilesRow
key={item.id}
item={item}
sectionWidth={context.sectionWidth}
/>
);
})}
</RowContainer>
)}
</Consumer>
);
};
export default inject(({ filesStore }) => {
const { filesList } = filesStore;
return {
filesList,
};
})(observer(FilesRowContainer));

28
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRowContent.js → products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContent.js
View File

@ -7,6 +7,7 @@ import Text from "@appserver/components/text";
import RowContent from "@appserver/components/row-content";
import IconButton from "@appserver/components/icon-button";
import Badge from "@appserver/components/badge";
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
import {
convertFile,
markAsRead,
@ -14,23 +15,21 @@ import {
} from "@appserver/common/api/files";
import { FileAction, ShareAccessRights } from "@appserver/common/constants";
import toastr from "@appserver/common/components/Toast";
import FavoriteIcon from "../../../../../../public/images/favorite.react.svg";
import FileActionsConvertEditDocIcon from "../../../../../../public/images/file.actions.convert.edit.doc.react.svg";
import FileActionsLockedIcon from "../../../../../../public/images/file.actions.locked.react.svg";
import CheckIcon from "../../../../../../public/images/check.react.svg";
import CrossIcon from "../../../../../../../../../public/images/cross.react.svg";
import { TIMEOUT } from "../../../../../helpers/constants";
import { getTitleWithoutExst } from "../../../../../helpers/files-helpers";
import { NewFilesPanel } from "../../../../panels";
import { ConvertDialog } from "../../../../dialogs";
import EditingWrapperComponent from "./EditingWrapperComponent";
import FavoriteIcon from "../../../../../../../public/images/favorite.react.svg";
import FileActionsConvertEditDocIcon from "../../../../../../../public/images/file.actions.convert.edit.doc.react.svg";
import FileActionsLockedIcon from "../../../../../../../public/images/file.actions.locked.react.svg";
import CheckIcon from "../../../../../../../public/images/check.react.svg";
import CrossIcon from "../../../../../../../../../../public/images/cross.react.svg";
import { TIMEOUT } from "../../../../../../helpers/constants";
import { setEncryptionAccess } from "../../../../../../helpers/desktop";
import { getTitleWithoutExst } from "../../../../../../helpers/files-helpers";
import { NewFilesPanel } from "../../../../../panels";
import { ConvertDialog } from "../../../../../dialogs";
import EditingWrapperComponent from "../EditingWrapperComponent";
import { isMobile } from "react-device-detect";
//import { setEncryptionAccess } from "../../../../../helpers/desktop";
import { observer, inject } from "mobx-react";
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
const sideColor = "#A3A9AE";
const StyledCheckIcon = styled(CheckIcon)`
${commonIconsStyles}
path {
@ -627,7 +626,7 @@ class FilesRowContent extends React.PureComponent {
/>
)}
{locked && (
<Icons.FileActionsLockedIcon
<Icons.FileActionsLockedIcon // TODO: Icons
className="badge lock-file"
size="small"
isfill={true}
@ -825,6 +824,7 @@ export default inject(
return {
isDesktop: isDesktopClient,
homepage,
viewer: auth.userStore.user,
culture,
fileAction,
folders,

715
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/SimpleFilesRow.js Normal file
View File

@ -0,0 +1,715 @@
import React from "react";
import { ReactSVG } from "react-svg";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import IconButton from "@appserver/components/icon-button";
import Text from "@appserver/components/text";
import DragAndDrop from "@appserver/components/drag-and-drop";
import Row from "@appserver/components/row";
import FilesRowContent from "./FilesRowContent";
import { lockFile } from "@appserver/common/api/files"; //TODO: move to actions
const StyledSimpleFilesRow = styled(Row)`
margin-top: -2px;
${(props) =>
!props.contextOptions &&
`
& > div:last-child {
width: 0px;
}
`}
.share-button-icon {
margin-right: 7px;
margin-top: -1px;
}
.share-button:hover,
.share-button-icon:hover {
cursor: pointer;
color: #657077;
path {
fill: #657077;
}
}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@media (max-width: 1312px) {
.share-button {
padding-top: 3px;
}
}
.styled-element {
margin-right: 1px;
margin-bottom: 2px;
}
`;
const EncryptedFileIcon = styled.div`
background: url("images/security.svg") no-repeat 0 0 / 16px 16px transparent;
height: 16px;
position: absolute;
width: 16px;
margin-top: 14px;
margin-left: ${(props) => (props.isEdit ? "40px" : "12px")};
`;
const svgLoader = () => <div style={{ width: "24px" }}></div>;
const SimpleFilesRow = (props) => {
const {
t,
item,
sectionWidth,
actionType,
actionExtension,
isPrivacy,
isRecycleBin,
dragging,
selected,
setSelected,
selectFile,
deselectFile,
checked,
canShare,
isFolder,
draggable,
isRootFolder,
setSelection,
providers,
capabilities,
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setConnectDialogVisible,
showDeleteThirdPartyDialog,
setConnectItem,
setRemoveItem,
setMoveToPanelVisible,
setCopyPanelVisible,
} = props;
const {
id,
title,
fileExst,
shared,
access,
value,
contextOptions,
icon,
providerKey,
} = item;
const isThirdPartyFolder = providerKey && isRootFolder;
const onContentRowSelect = (checked, file) => {
if (!file) return;
selected === "close" && setSelected("none");
if (checked) {
selectFile(file);
} else {
deselectFile(file);
}
};
const onClickShare = () => setSharingPanelVisible(true);
const onOwnerChange = () => setChangeOwnerPanelVisible(true);
const onMoveAction = () => setMoveToPanelVisible(true);
const onCopyAction = () => setCopyPanelVisible(true);
const getSharedButton = (shared) => {
const color = shared ? "#657077" : "#a3a9ae";
return (
<Text
className="share-button"
as="span"
title={t("Share")}
fontSize="12px"
fontWeight={600}
color={color}
display="inline-flex"
onClick={onClickShare}
>
<IconButton
className="share-button-icon"
color={color}
hoverColor="#657077"
size={18}
iconName="CatalogSharedIcon"
/>
{t("Share")}
</Text>
);
};
const getItemIcon = (isEdit) => {
return (
<>
<ReactSVG
beforeInjection={(svg) => {
svg.setAttribute("style", "margin-top: 4px");
isEdit && svg.setAttribute("style", "margin: 4px 0 0 28px");
}}
src={icon}
loading={svgLoader}
/>
{isPrivacy && fileExst && <EncryptedFileIcon isEdit={isEdit} />}
</>
);
};
const onOpenLocation = () => {
/*const { filter, selection } = this.props;
const { folderId, checked, id, isFolder } = selection[0];
const item = selection[0];
const locationId = isFolder ? id : folderId;
const locationFilter = isFolder ? filter : null;
return this.props
.fetchFiles(locationId, locationFilter)
.then(() => (isFolder ? null : this.onContentRowSelect(!checked, item)));*/
};
const showVersionHistory = (e) => {
/*const {
homepage,
history,
setIsLoading,
setIsVerHistoryPanel,
setVerHistoryFileId,
isTabletView,
} = this.props;
const fileId = e.currentTarget.dataset.id;
if (!isTabletView) {
setIsLoading(true);
setVerHistoryFileId(fileId);
setIsVerHistoryPanel(true);
} else {
history.push(`${homepage}/${fileId}/history`);
}*/
};
const finalizeVersion = (e) => {
/*const { selectedFolderId, filter, setIsLoading, fetchFiles } = this.props;
const fileId = e.currentTarget.dataset.id;
//const version = (e.currentTarget.dataset.version)++;
setIsLoading(true);
finalizeVersion(fileId, 0, false)
.then((data) => {
return fetchFiles(selectedFolderId, filter).catch((err) =>
toastr.error(err)
);
})
.finally(() => setIsLoading(false));*/
};
const onClickFavorite = (e) => {
/*const {
markItemAsFavorite,
removeItemFromFavorite,
getFileInfo,
fetchFavoritesFolder,
isFavorites,
selectedFolderId,
setSelected,
//selection,
t,
} = this.props;
const { action, id } = e.currentTarget.dataset;
//let data = selection.map(item => item.id)
switch (action) {
case "mark":
return markItemAsFavorite([id])
.then(() => getFileInfo(id))
.then(() => toastr.success(t("MarkedAsFavorite")))
.catch((e) => toastr.error(e));
case "remove":
return removeItemFromFavorite([id])
.then(() => {
return isFavorites
? fetchFavoritesFolder(selectedFolderId)
: getFileInfo(id);
})
.then(() => toastr.success(t("RemovedFromFavorites")))
.then(() => setSelected("close"))
.catch((e) => toastr.error(e));
default:
return;
}*/
};
const lockFile = (e) => {
// const {
// selection,
// /*files,*/ selectedFolderId,
// filter,
// setIsLoading,
// fetchFiles,
// } = this.props;
// let fileId, isLockedFile;
// const file = selection[0];
// if (file) {
// fileId = file.id;
// isLockedFile = !file.locked;
// } else {
// const { id, locked } = e.currentTarget.dataset;
// fileId = Number(id);
// isLockedFile = !Boolean(locked);
// }
// //TODO: move lockFile to actions
// lockFile(fileId, isLockedFile).then((res) => {
// /*const newFiles = files;
// const indexOfFile = newFiles.findIndex(x => x.id === res.id);
// newFiles[indexOfFile] = res;*/
// setIsLoading(true);
// fetchFiles(selectedFolderId, filter)
// .catch((err) => toastr.error(err))
// .finally(() => setIsLoading(false));
// });
};
const onClickLinkForPortal = () => {
/*const { homepage, selection } = this.props;
const item = selection[0];
const isFile = !!item.fileExst;
const { t } = this.props;
copy(
isFile
? item.canOpenPlayer
? `${window.location.href}&preview=${item.id}`
: item.webUrl
: `${window.location.origin + homepage}/filter?folder=${item.id}`
);
toastr.success(t("LinkCopySuccess"));*/
};
const onClickLinkEdit = (e) => {
// const { id, providerKey } = e.currentTarget.dataset;
// return this.openDocEditor(id, providerKey);
};
const onClickDownload = () => {
// return window.open(this.props.selection[0].viewUrl, "_blank");
};
const onDuplicate = () => {
/*const {
selection,
selectedFolderId,
setSecondaryProgressBarData,
t,
} = this.props;
const folderIds = [];
const fileIds = [];
selection[0].fileExst
? fileIds.push(selection[0].id)
: folderIds.push(selection[0].id);
const conflictResolveType = 2; //Skip = 0, Overwrite = 1, Duplicate = 2
const deleteAfter = false;
setSecondaryProgressBarData({
icon: "duplicate",
visible: true,
percent: 0,
label: t("CopyOperation"),
alert: false,
});
this.copyTo(
selectedFolderId,
folderIds,
fileIds,
conflictResolveType,
deleteAfter
);*/
};
const onClickRename = () => {
/*const { id, fileExst } = this.props.selection[0];
this.setState({ editingId: id }, () => {
this.props.setAction({
type: FileAction.Rename,
extension: fileExst,
id,
});
});*/
};
const onChangeThirdPartyInfo = (e) => {
const provider = providers.find((x) => x.provider_key === providerKey);
const capabilityItem = capabilities.find((x) => x[0] === providerKey);
const capability = {
title: capabilityItem ? capabilityItem[0] : provider.customer_title,
link: capabilityItem ? capabilityItem[1] : " ",
};
setConnectDialogVisible(true);
setConnectItem({ ...provider, ...capability });
};
const onClickDelete = (e) => {
const splitItem = id.split("-");
if (isThirdPartyFolder) {
setRemoveItem({ id: splitItem[splitItem.length - 1], title });
showDeleteThirdPartyDialog(true);
return;
}
const item = this.props.selection[0];
item.fileExst
? this.onDeleteFile(item.id, item.folderId)
: this.onDeleteFolder(item.id, item.parentId);
};
const getFilesContextOptions = (options, item) => {
const isSharable = item.access !== 1 && item.access !== 0;
return options.map((option) => {
switch (option) {
case "open":
return {
key: option,
label: t("Open"),
icon: "CatalogFolderIcon",
onClick: onOpenLocation,
disabled: false,
};
case "show-version-history":
return {
key: option,
label: t("ShowVersionHistory"),
icon: "HistoryIcon",
onClick: showVersionHistory,
disabled: false,
"data-id": item.id,
};
case "finalize-version":
return {
key: option,
label: t("FinalizeVersion"),
icon: "HistoryFinalizedIcon",
onClick: finalizeVersion,
disabled: false,
"data-id": item.id,
"data-version": item.version,
};
case "separator0":
case "separator1":
case "separator2":
case "separator3":
return { key: option, isSeparator: true };
case "open-location":
return {
key: option,
label: t("OpenLocation"),
icon: "DownloadAsIcon",
onClick: onOpenLocation,
disabled: false,
};
case "mark-as-favorite":
return {
key: option,
label: t("MarkAsFavorite"),
icon: "FavoritesIcon",
onClick: onClickFavorite,
disabled: false,
"data-action": "mark",
"data-id": item.id,
"data-title": item.title,
};
case "block-unblock-version":
return {
key: option,
label: t("UnblockVersion"),
icon: "LockIcon",
onClick: lockFile,
disabled: false,
};
case "sharing-settings":
return {
key: option,
label: t("SharingSettings"),
icon: "CatalogSharedIcon",
onClick: onClickShare,
disabled: isSharable,
};
case "send-by-email":
return {
key: option,
label: t("SendByEmail"),
icon: "MailIcon",
disabled: true,
};
case "owner-change":
return {
key: option,
label: t("ChangeOwner"),
icon: "CatalogUserIcon",
onClick: onOwnerChange,
disabled: false,
};
case "link-for-portal-users":
return {
key: option,
label: t("LinkForPortalUsers"),
icon: "InvitationLinkIcon",
onClick: onClickLinkForPortal,
disabled: false,
};
case "edit":
return {
key: option,
label: t("Edit"),
icon: "AccessEditIcon",
onClick: onClickLinkEdit,
disabled: false,
"data-id": item.id,
"data-provider-key": item.providerKey,
};
case "preview":
return {
key: option,
label: t("Preview"),
icon: "EyeIcon",
onClick: onClickLinkEdit,
disabled: true,
"data-id": item.id,
"data-provider-key": item.providerKey,
};
case "view":
return {
key: option,
label: t("View"),
icon: "EyeIcon",
//onClick: this.onMediaFileClick,
disabled: false,
};
case "download":
return {
key: option,
label: t("Download"),
icon: "DownloadIcon",
onClick: onClickDownload,
disabled: false,
};
case "move":
return {
key: option,
label: t("MoveTo"),
icon: "MoveToIcon",
onClick: onMoveAction,
disabled: false,
};
case "copy":
return {
key: option,
label: t("Copy"),
icon: "CopyIcon",
onClick: onCopyAction,
disabled: false,
};
case "duplicate":
return {
key: option,
label: t("Duplicate"),
icon: "CopyIcon",
onClick: onDuplicate,
disabled: false,
};
case "rename":
return {
key: option,
label: t("Rename"),
icon: "RenameIcon",
onClick: onClickRename,
disabled: false,
};
case "change-thirdparty-info":
return {
key: option,
label: t("ThirdPartyInfo"),
icon: "AccessEditIcon",
onClick: onChangeThirdPartyInfo,
disabled: false,
};
case "delete":
return {
key: option,
label: isThirdPartyFolder ? t("DeleteThirdParty") : t("Delete"),
icon: "CatalogTrashIcon",
onClick: onClickDelete,
disabled: false,
};
case "remove-from-favorites":
return {
key: option,
label: t("RemoveFromFavorites"),
icon: "FavoritesIcon",
onClick: onClickFavorite,
disabled: false,
"data-action": "remove",
"data-id": item.id,
"data-title": item.title,
};
default:
break;
}
return undefined;
});
};
const onSelectItem = () => {
selected === "close" && setSelected("none");
setSelection([item]);
};
const editingId = null; // TODO: move editingId to store
const isMobile = sectionWidth < 500;
const isEdit =
!!actionType && editingId === id && fileExst === actionExtension;
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: getFilesContextOptions(contextOptions, item),
}
: {};
const checkedProps = isEdit || id <= 0 ? {} : { checked };
const element = getItemIcon(isEdit || id <= 0);
const sharedButton =
!canShare || (isPrivacy && !fileExst) || isEdit || id <= 0 || isMobile
? null
: getSharedButton(shared);
const displayShareButton = isMobile ? "26px" : !canShare ? "38px" : "96px";
let className = isFolder && access < 2 && !isRecycleBin ? " dropable" : "";
if (draggable) className += " draggable";
return (
<DragAndDrop
className={className}
//onDrop={this.onDrop.bind(this, item)}
//onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && access < 2}
{...contextOptionsProps}
value={value}
//{...props}
>
<StyledSimpleFilesRow
sectionWidth={sectionWidth}
key={id}
data={item}
element={element}
contentElement={sharedButton}
onSelect={onContentRowSelect}
editing={editingId}
isPrivacy={isPrivacy}
{...checkedProps}
{...contextOptionsProps}
//needForUpdate={this.needForUpdate}
selectItem={onSelectItem}
contextButtonSpacerWidth={displayShareButton}
>
<FilesRowContent item={item} sectionWidth={sectionWidth} />
</StyledSimpleFilesRow>
</DragAndDrop>
);
};
export default inject(
(
{
initFilesStore,
filesStore,
treeFoldersStore,
selectedFolderStore,
dialogsStore,
settingsStore,
},
{ item }
) => {
const { dragging } = initFilesStore;
const { type, extension, id } = filesStore.fileActionStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
const {
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setConnectDialogVisible,
setConnectItem,
setRemoveItem,
showDeleteThirdPartyDialog,
setMoveToPanelVisible,
setCopyPanelVisible,
} = dialogsStore;
const {
selected,
setSelected,
selectFile,
deselectFile,
selection,
canShare,
setSelection,
} = filesStore;
const { isRootFolder } = selectedFolderStore;
const { providers, capabilities } = settingsStore.thirdPartyStore;
const selectedItem = selection.find(
(x) => x.id === item.id && x.fileExst === item.fileExst
);
const isFolder = selectedItem ? false : item.fileExst ? false : true;
const draggable =
selectedItem && isRecycleBinFolder && selectedItem.id !== id;
return {
dragging,
actionType: type,
actionExtension: extension,
isPrivacy: isPrivacyFolder,
isRecycleBin: isRecycleBinFolder,
isRootFolder,
canShare,
selected,
setSelected,
selectFile,
deselectFile,
setSelection,
checked: selection.some((el) => el.id === item.id),
isFolder,
draggable,
providers,
capabilities,
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setConnectDialogVisible,
setConnectItem,
setRemoveItem,
showDeleteThirdPartyDialog,
setMoveToPanelVisible,
setCopyPanelVisible,
};
}
)(withTranslation()(observer(SimpleFilesRow)));

77
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/FilesTileContainer.js Normal file
View File

@ -0,0 +1,77 @@
import React from "react";
const FilesTileContainer = (props) => {
return;
<>
{/*<TileContainer
className="tileContainer"
draggable
useReactWindow={false}
headingFolders={t("Folders")}
headingFiles={t("Files")}
>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const isEdit =
!!fileActionType &&
editingId === item.id &&
item.fileExst === fileActionExtension;
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: this.getFilesContextOptions(
contextOptions,
item
),
}
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0);
let classNameProp =
isFolder && item.access < 2 && !isRecycleBin
? { className: " dropable" }
: {};
if (item.draggable) classNameProp.className += " draggable";
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
isFolder={isFolder}
>
<Tile
key={item.id}
item={item}
isFolder={!item.fileExst}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
viewAs={viewAs}
{...checkedProps}
{...contextOptionsProps}
//needForUpdate={this.needForUpdate}
>
<FilesTileContent
item={item}
viewer={viewer}
culture={culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
openDocEditor={this.openDocEditor}
/>
</Tile>
</DragAndDrop>
);
})}
</TileContainer>*/}
</>;
};
export default FilesTileContainer;

538
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -3,29 +3,29 @@ import { withRouter } from "react-router";
import { ReactSVG } from "react-svg";
import { withTranslation, Trans } from "react-i18next";
//import equal from "fast-deep-equal/react";
import copy from "copy-to-clipboard";
//import copy from "copy-to-clipboard";
import styled from "styled-components";
import queryString from "query-string";
import Row from "@appserver/components/row";
import RowContainer from "@appserver/components/row-container";
//import Row from "@appserver/components/row";
//import RowContainer from "@appserver/components/row-container";
import Link from "@appserver/components/link";
import IconButton from "@appserver/components/icon-button";
import DragAndDrop from "@appserver/components/drag-and-drop";
//import DragAndDrop from "@appserver/components/drag-and-drop";
import Box from "@appserver/components/box";
import Text from "@appserver/components/text";
import { Consumer } from "@appserver/components/utils/context";
//import { Consumer } from "@appserver/components/utils/context";
import EmptyFolderContainer from "./EmptyFolderContainer";
import FilesRowContent from "./FilesRowContent";
import FilesTileContent from "./FilesTileContent";
import TileContainer from "./TileContainer";
import Tile from "./Tile";
//import FilesRowContent from "./FilesRowContent";
//import FilesTileContent from "./FilesTileContent";
//import TileContainer from "./TileContainer";
//import Tile from "./Tile";
import FilesFilter from "@appserver/common/api/files/filter";
import {
deleteFile,
getProgress,
deleteFolder,
lockFile,
finalizeVersion,
//lockFile,
//finalizeVersion,
copyToFolder,
moveToFolder,
} from "@appserver/common/api/files";
@ -35,7 +35,7 @@ import toastr from "@appserver/common/components/Toast";
import Loaders from "@appserver/common/components/Loaders";
import { TIMEOUT } from "../../../../../helpers/constants";
import { loopTreeFolders } from "../../../../../helpers/files-helpers";
import { OperationsPanel, VersionHistoryPanel } from "../../../../panels";
//import { OperationsPanel, VersionHistoryPanel } from "../../../../panels";
import { isMobile } from "react-device-detect";
import {
DeleteThirdPartyDialog,
@ -44,6 +44,9 @@ import {
} from "../../../../dialogs";
import { observer, inject } from "mobx-react";
import FilesRowContainer from "./FilesRow/FilesRowContainer";
import FilesTileContainer from "./FilesTile/FilesTileContainer";
//import { getFilterByLocation } from "../../../../../helpers/converters";
//import config from "../../../../../../package.json";
@ -85,7 +88,7 @@ const CustomTooltip = styled.div`
}
`;
const SimpleFilesRow = styled(Row)`
/*const SimpleFilesRow = styled(Row)`
margin-top: -2px;
${(props) =>
!props.contextOptions &&
@ -120,7 +123,7 @@ const SimpleFilesRow = styled(Row)`
margin-right: 1px;
margin-bottom: 2px;
}
`;
`;*/
const EncryptedFileIcon = styled.div`
background: url("images/security.svg") no-repeat 0 0 / 16px 16px transparent;
@ -137,15 +140,17 @@ class SectionBodyContent extends React.Component {
this.state = {
editingId: null,
showMoveToPanel: false,
showCopyPanel: false,
showDeleteThirdPartyDialog: false,
connectDialogVisible: false,
showThirdPartyMoveDialog: false,
//showMoveToPanel: false,
//showCopyPanel: false,
//showDeleteThirdPartyDialog: false,
//connectDialogVisible: false,
//showThirdPartyMoveDialog: false,
isDrag: false,
canDrag: true,
removeItem: null,
connectItem: null,
//removeItem: null,
//connectItem: null,
};
this.tooltipRef = React.createRef();
@ -181,16 +186,18 @@ class SectionBodyContent extends React.Component {
document.removeEventListener("drop", this.onDropEvent);
}
// componentDidUpdate(prevProps, prevState) {
// Object.entries(this.props).forEach(([key, val]) =>
// prevProps[key] !== val && console.log(`Prop '${key}' changed`)
// );
// if (this.state) {
// Object.entries(this.state).forEach(([key, val]) =>
// prevState[key] !== val && console.log(`State '${key}' changed`)
// );
// }
// }
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(
([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(
([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
componentDidUpdate(prevProps) {
const { folderId } = this.props;
@ -258,7 +265,7 @@ class SectionBodyContent extends React.Component {
// return false;
// }
onOpenLocation = () => {
/* onOpenLocation = () => {
const { filter, selection } = this.props;
const { folderId, checked, id, isFolder } = selection[0];
const item = selection[0];
@ -268,9 +275,9 @@ class SectionBodyContent extends React.Component {
return this.props
.fetchFiles(locationId, locationFilter)
.then(() => (isFolder ? null : this.onContentRowSelect(!checked, item)));
};
}; */
onClickFavorite = (e) => {
/* onClickFavorite = (e) => {
const {
markItemAsFavorite,
removeItemFromFavorite,
@ -303,9 +310,9 @@ class SectionBodyContent extends React.Component {
default:
return;
}
};
}; */
onClickRename = () => {
/* onClickRename = () => {
const { id, fileExst } = this.props.selection[0];
this.setState({ editingId: id }, () => {
@ -315,9 +322,9 @@ class SectionBodyContent extends React.Component {
id,
});
});
};
}; */
onChangeThirdPartyInfo = (e) => {
/* onChangeThirdPartyInfo = (e) => {
const providerKey = e.currentTarget.dataset.providerKey;
const provider = this.props.providers.find(
(x) => x.provider_key === providerKey
@ -332,12 +339,12 @@ class SectionBodyContent extends React.Component {
const connectItem = { ...provider, ...capability };
this.setState({ connectItem, connectDialogVisible: true });
};
}; */
onEditComplete = (id, isFolder) => {
const {
selectedFolderId,
fileAction,
fileActionType,
filter,
folders,
files,
@ -352,8 +359,8 @@ class SectionBodyContent extends React.Component {
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
fileActionType === FileAction.Create ||
fileActionType === FileAction.Rename
) {
setIsLoading(true);
fetchFiles(selectedFolderId, filter)
@ -372,7 +379,7 @@ class SectionBodyContent extends React.Component {
setAction({ type: null, id: null, extension: null });
setIsLoading(false);
});
fileAction.type === FileAction.Rename &&
fileActionType === FileAction.Rename &&
this.onSelectItem(selectedItem);
});
}
@ -382,7 +389,7 @@ class SectionBodyContent extends React.Component {
//});
};
onClickDelete = (e) => {
/* onClickDelete = (e) => {
const { isThirdParty, id, title } = e.currentTarget.dataset;
const splitItem = id.split("-");
@ -398,7 +405,7 @@ class SectionBodyContent extends React.Component {
item.fileExst
? this.onDeleteFile(item.id, item.folderId)
: this.onDeleteFolder(item.id, item.parentId);
};
}; */
onDeleteFile = (fileId, currentFolderId) => {
const {
@ -515,14 +522,14 @@ class SectionBodyContent extends React.Component {
});
};
onClickShare = () =>
this.props.setSharingPanelVisible(!this.props.sharingPanelVisible);
/* onClickShare = () =>
this.props.setSharingPanelVisible(!this.props.sharingPanelVisible); */
onOwnerChange = () => {
/* onOwnerChange = () => {
this.props.setChangeOwnerPanelVisible(true);
};
}; */
onClickLinkForPortal = () => {
/* onClickLinkForPortal = () => {
const { homepage, selection } = this.props;
const item = selection[0];
const isFile = !!item.fileExst;
@ -536,11 +543,11 @@ class SectionBodyContent extends React.Component {
);
toastr.success(t("LinkCopySuccess"));
};
}; */
onClickDownload = () => {
/* onClickDownload = () => {
return window.open(this.props.selection[0].viewUrl, "_blank");
};
}; */
openDocEditor = (id, providerKey = null, tab = null, url = null) => {
if (providerKey) {
@ -560,12 +567,12 @@ class SectionBodyContent extends React.Component {
}
};
onClickLinkEdit = (e) => {
/* onClickLinkEdit = (e) => {
const { id, providerKey } = e.currentTarget.dataset;
return this.openDocEditor(id, providerKey);
};
}; */
showVersionHistory = (e) => {
/* showVersionHistory = (e) => {
const {
homepage,
history,
@ -584,47 +591,47 @@ class SectionBodyContent extends React.Component {
} else {
history.push(`${homepage}/${fileId}/history`);
}
};
}; */
onHistoryAction = () => {
const { isVersionHistoryPanel, setIsVerHistoryPanel } = this.props;
// onHistoryAction = () => {
// const { isVersionHistoryPanel, setIsVerHistoryPanel } = this.props;
setIsVerHistoryPanel(!isVersionHistoryPanel);
};
// setIsVerHistoryPanel(!isVersionHistoryPanel);
// };
lockFile = (e) => {
const {
selection,
/*files,*/ selectedFolderId,
filter,
setIsLoading,
fetchFiles,
} = this.props;
// lockFile = (e) => {
// const {
// selection,
// /*files,*/ selectedFolderId,
// filter,
// setIsLoading,
// fetchFiles,
// } = this.props;
let fileId, isLockedFile;
const file = selection[0];
// let fileId, isLockedFile;
// const file = selection[0];
if (file) {
fileId = file.id;
isLockedFile = !file.locked;
} else {
const { id, locked } = e.currentTarget.dataset;
fileId = Number(id);
isLockedFile = !Boolean(locked);
}
// if (file) {
// fileId = file.id;
// isLockedFile = !file.locked;
// } else {
// const { id, locked } = e.currentTarget.dataset;
// fileId = Number(id);
// isLockedFile = !Boolean(locked);
// }
lockFile(fileId, isLockedFile).then((res) => {
/*const newFiles = files;
const indexOfFile = newFiles.findIndex(x => x.id === res.id);
newFiles[indexOfFile] = res;*/
setIsLoading(true);
fetchFiles(selectedFolderId, filter)
.catch((err) => toastr.error(err))
.finally(() => setIsLoading(false));
});
};
// lockFile(fileId, isLockedFile).then((res) => {
// /*const newFiles = files;
// const indexOfFile = newFiles.findIndex(x => x.id === res.id);
// newFiles[indexOfFile] = res;*/
// setIsLoading(true);
// fetchFiles(selectedFolderId, filter)
// .catch((err) => toastr.error(err))
// .finally(() => setIsLoading(false));
// });
// };
finalizeVersion = (e) => {
/* finalizeVersion = (e) => {
const { selectedFolderId, filter, setIsLoading, fetchFiles } = this.props;
const fileId = e.currentTarget.dataset.id;
@ -640,18 +647,18 @@ class SectionBodyContent extends React.Component {
);
})
.finally(() => setIsLoading(false));
};
}; */
onMoveAction = () =>
this.setState({ showMoveToPanel: !this.state.showMoveToPanel });
onCopyAction = () =>
this.setState({ showCopyPanel: !this.state.showCopyPanel });
onShowDeleteThirdParty = () => {
// onMoveAction = () =>
// this.setState({ showMoveToPanel: !this.state.showMoveToPanel });
// onCopyAction = () =>
// this.setState({ showCopyPanel: !this.state.showCopyPanel });
/* onShowDeleteThirdParty = () => {
this.setState({
showDeleteThirdPartyDialog: !this.state.showDeleteThirdPartyDialog,
});
};
onDuplicate = () => {
}; */
/* onDuplicate = () => {
const {
selection,
selectedFolderId,
@ -680,22 +687,22 @@ class SectionBodyContent extends React.Component {
conflictResolveType,
deleteAfter
);
};
}; */
onCloseConnectDialog = () => {
/* onCloseConnectDialog = () => {
this.setState({
connectItem: null,
connectDialogVisible: !this.state.connectDialogVisible,
});
};
}; */
onCloseThirdPartyMoveDialog = () => {
/* onCloseThirdPartyMoveDialog = () => {
this.setState({
showThirdPartyMoveDialog: !this.state.showThirdPartyMoveDialog,
});
};
}; */
getFilesContextOptions = (options, item) => {
/*getFilesContextOptions = (options, item) => {
const { t, isRootFolder } = this.props;
const isSharable = item.access !== 1 && item.access !== 0;
@ -900,7 +907,7 @@ class SectionBodyContent extends React.Component {
return undefined;
});
};
};*/
/*needForUpdate = (currentProps, nextProps) => {
if (currentProps.widthProp !== nextProps.widthProp) {
@ -1632,7 +1639,7 @@ class SectionBodyContent extends React.Component {
setSelection([item]);
};
getSharedButton = (shared) => {
/* getSharedButton = (shared) => {
const color = shared ? "#657077" : "#a3a9ae";
return (
<Text
@ -1655,7 +1662,7 @@ class SectionBodyContent extends React.Component {
{this.props.t("Share")}
</Text>
);
};
}; */
renderFileMoveTooltip = () => {
const { selection, iconOfDraggedFile } = this.props;
@ -1705,9 +1712,11 @@ class SectionBodyContent extends React.Component {
const {
viewer,
parentId,
culture,
//culture,
selection,
fileAction,
fileActionType,
fileActionExtension,
fileActionId,
isRecycleBin,
isPrivacy,
isEncryptionSupport,
@ -1730,16 +1739,16 @@ class SectionBodyContent extends React.Component {
//console.log("Section body", this.props);
const {
editingId,
showMoveToPanel,
showCopyPanel,
showDeleteThirdPartyDialog,
removeItem,
connectDialogVisible,
connectItem,
showThirdPartyMoveDialog,
} = this.state;
// const {
// editingId,
// showMoveToPanel,
// showCopyPanel,
// showDeleteThirdPartyDialog,
// removeItem,
// connectDialogVisible,
// connectItem,
// showThirdPartyMoveDialog,
// } = this.state;
let fileMoveTooltip;
if (dragging) {
@ -1773,7 +1782,7 @@ class SectionBodyContent extends React.Component {
const { authorType, search, withSubfolders, filterType } = filter;
const isFiltered = authorType || search || !withSubfolders || filterType;
return (!fileAction.id && items.length === 0) || null ? (
return (!fileActionId && items.length === 0) || null ? (
firstLoad ? (
<Loaders.Rows />
) : isFiltered ? (
@ -1787,38 +1796,38 @@ class SectionBodyContent extends React.Component {
<Loaders.Rows />
) : (
<>
{showMoveToPanel && (
{/* showMoveToPanel && (
<OperationsPanel
visible={showMoveToPanel}
onClose={this.onMoveAction}
/>
)}
) */}
{showCopyPanel && (
{/* {showCopyPanel && (
<OperationsPanel
isCopy
visible={showCopyPanel}
onClose={this.onCopyAction}
/>
)}
)} */}
{showDeleteThirdPartyDialog && (
{/* showDeleteThirdPartyDialog && (
<DeleteThirdPartyDialog
onClose={this.onShowDeleteThirdParty}
visible={showDeleteThirdPartyDialog}
removeItem={removeItem}
/>
)}
) */}
{connectDialogVisible && (
{/* connectDialogVisible && (
<ConnectDialog
visible={connectDialogVisible}
item={connectItem}
onClose={this.onCloseConnectDialog}
/>
)}
) */}
{showThirdPartyMoveDialog && (
{/* showThirdPartyMoveDialog && (
<ThirdPartyMoveDialog
visible={showThirdPartyMoveDialog}
onClose={this.onCloseThirdPartyMoveDialog}
@ -1826,184 +1835,18 @@ class SectionBodyContent extends React.Component {
startCopyOperation={this.startCopyOperation}
provider={selection[0].providerKey}
/>
)}
) */}
{isVersionHistoryPanel && (
{/* isVersionHistoryPanel && (
<VersionHistoryPanel
visible={isVersionHistoryPanel}
onClose={this.onHistoryAction}
history={history}
/>
)}
) */}
<CustomTooltip ref={this.tooltipRef}>{fileMoveTooltip}</CustomTooltip>
{viewAs === "tile" ? (
<TileContainer
className="tileContainer"
draggable
useReactWindow={false}
headingFolders={t("Folders")}
headingFiles={t("Files")}
>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const isEdit =
!!fileAction.type &&
editingId === item.id &&
item.fileExst === fileAction.extension;
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: this.getFilesContextOptions(
contextOptions,
item
),
}
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0);
let classNameProp =
isFolder && item.access < 2 && !isRecycleBin
? { className: " dropable" }
: {};
if (item.draggable) classNameProp.className += " draggable";
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
isFolder={isFolder}
>
<Tile
key={item.id}
item={item}
isFolder={!item.fileExst}
element={element}
onSelect={this.onContentRowSelect}
editing={editingId}
viewAs={viewAs}
{...checkedProps}
{...contextOptionsProps}
//needForUpdate={this.needForUpdate}
>
<FilesTileContent
item={item}
viewer={viewer}
culture={culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
openDocEditor={this.openDocEditor}
/>
</Tile>
</DragAndDrop>
);
})}
</TileContainer>
) : (
<Consumer>
{(context) => (
<RowContainer
className="files-row-container"
draggable
useReactWindow={false}
>
{items.map((item) => {
const {
checked,
isFolder,
value,
contextOptions,
canShare,
} = item;
const sectionWidth = context.sectionWidth;
const isEdit =
!!fileAction.type &&
editingId === item.id &&
item.fileExst === fileAction.extension;
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: this.getFilesContextOptions(
contextOptions,
item
),
}
: {};
const checkedProps =
isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(
item,
isEdit || item.id <= 0
);
const sharedButton =
!canShare ||
(isPrivacy && !item.fileExst) ||
isEdit ||
item.id <= 0 ||
sectionWidth < 500
? null
: this.getSharedButton(item.shared);
const displayShareButton =
sectionWidth < 500 ? "26px" : !canShare ? "38px" : "96px";
let classNameProp =
isFolder && item.access < 2 && !isRecycleBin
? { className: " dropable" }
: { className: "" };
if (item.draggable) classNameProp.className += " draggable";
return (
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
{...contextOptionsProps}
value={value}
>
<SimpleFilesRow
sectionWidth={sectionWidth}
key={item.id}
data={item}
element={element}
contentElement={sharedButton}
onSelect={this.onContentRowSelect}
editing={editingId}
isPrivacy={isPrivacy}
{...checkedProps}
{...contextOptionsProps}
//needForUpdate={this.needForUpdate}
selectItem={this.onSelectItem.bind(this, item)}
contextButtonSpacerWidth={displayShareButton}
>
<FilesRowContent
sectionWidth={sectionWidth}
isMobile={isMobile}
item={item}
viewer={viewer}
culture={culture}
onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick}
onClickFavorite={this.onClickFavorite}
onClickLock={this.lockFile}
openDocEditor={this.openDocEditor}
/>
</SimpleFilesRow>
</DragAndDrop>
);
})}
</RowContainer>
)}
</Consumer>
)}
{viewAs === "tile" ? <FilesTileContainer /> : <FilesRowContainer />}
{playlist.length > 0 && mediaViewerVisible && (
<MediaViewer
currentFileId={currentMediaFileId}
@ -2047,14 +1890,14 @@ export default inject(
treeFoldersStore,
selectedFolderStore,
}) => {
const { providers, capabilities } = settingsStore.thirdPartyStore;
//const { providers, capabilities } = settingsStore.thirdPartyStore;
const { mediaViewersFormatsStore, iconFormatsStore } = formatsStore;
const { secondaryProgressDataStore, loopFilesOperations } = uploadDataStore;
const {
homepage,
culture,
//homepage,
//culture,
isEncryptionSupport,
isTabletView,
//isTabletView,
organizationName,
isDesktopClient,
} = auth.settingsStore;
@ -2064,7 +1907,7 @@ export default inject(
setIsLoading,
viewAs,
dragItem,
setDragItem,
//setDragItem,
privacyInstructions,
tooltipValue,
} = initFilesStore;
@ -2084,16 +1927,16 @@ export default inject(
fileActionStore,
addFileToRecentlyViewed,
updateFile,
currentFolderCount,
//updateFile,
//currentFolderCount,
iconOfDraggedFile,
markItemAsFavorite,
removeItemFromFavorite,
fetchFavoritesFolder,
getFileInfo,
//markItemAsFavorite,
//removeItemFromFavorite,
//fetchFavoritesFolder,
//getFileInfo,
} = filesStore;
const { getFileIcon, getFolderIcon } = iconFormatsStore;
//const { getFileIcon, getFolderIcon } = iconFormatsStore;
const {
treeFolders,
@ -2108,25 +1951,28 @@ export default inject(
isPrivacyFolder,
} = treeFoldersStore;
const { type, extension, id, setAction } = fileActionStore;
const fileAction = { type, extension, id };
const {
type: fileActionType,
extension: fileActionExtension,
id: fileActionId,
setAction,
} = fileActionStore;
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const {
sharingPanelVisible,
setChangeOwnerPanelVisible,
setSharingPanelVisible,
} = dialogsStore;
// const {
// sharingPanelVisible,
// setChangeOwnerPanelVisible,
// setSharingPanelVisible,
// } = dialogsStore;
const {
isVisible: isVersionHistoryPanel,
setIsVerHistoryPanel,
setVerHistoryFileId,
} = versionHistoryStore;
// const {
// isVisible: isVersionHistoryPanel,
// setIsVerHistoryPanel,
// setVerHistoryFileId,
// } = versionHistoryStore;
const { images, media } = mediaViewersFormatsStore;
const {
@ -2137,15 +1983,17 @@ export default inject(
return {
isAdmin: auth.isAdmin,
homepage,
culture,
//homepage,
//culture,
isEncryptionSupport,
isTabletView,
//isTabletView,
viewer: auth.userStore.user,
organizationName,
isDesktop: isDesktopClient,
dragging,
fileAction,
fileActionType,
fileActionExtension,
fileActionId,
files,
folders,
selected,
@ -2169,15 +2017,15 @@ export default inject(
dragItem,
currentMediaFileId,
mediaViewerVisible,
sharingPanelVisible,
isVersionHistoryPanel,
//sharingPanelVisible,
//isVersionHistoryPanel,
privacyInstructions,
isRootFolder: selectedFolderStore.isRootFolder,
mediaViewerImageFormats: images,
mediaViewerMediaFormats: media,
providers,
capabilities,
currentFolderCount,
//providers,
//capabilities,
//currentFolderCount,
iconOfDraggedFile,
tooltipValue,
@ -2190,23 +2038,23 @@ export default inject(
selectFile,
deselectFile,
setTreeFolders,
setDragItem,
//setDragItem,
setMediaViewerData,
setSecondaryProgressBarData,
setChangeOwnerPanelVisible,
setSharingPanelVisible,
//setChangeOwnerPanelVisible,
//setSharingPanelVisible,
clearSecondaryProgressData,
setIsVerHistoryPanel,
setVerHistoryFileId,
//setIsVerHistoryPanel,
//setVerHistoryFileId,
addFileToRecentlyViewed,
updateFile,
markItemAsFavorite,
removeItemFromFavorite,
fetchFavoritesFolder,
getFileInfo,
//updateFile,
//markItemAsFavorite,
//removeItemFromFavorite,
//fetchFavoritesFolder,
//getFileInfo,
loopFilesOperations,
getFileIcon,
getFolderIcon,
//getFileIcon,
//getFolderIcon,
};
}
)(withRouter(withTranslation("Home")(observer(SectionBodyContent))));

96
products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -20,11 +20,11 @@ import IconButton from "@appserver/components/icon-button";
import { tablet, desktop } from "@appserver/components/utils/device";
import { Consumer } from "@appserver/components/utils/context";
import { TIMEOUT } from "../../../../../helpers/constants";
import {
EmptyTrashDialog,
DeleteDialog,
DownloadDialog,
} from "../../../../dialogs";
// import {
// EmptyTrashDialog,
// DeleteDialog,
// DownloadDialog,
// } from "../../../../dialogs";
import { OperationsPanel } from "../../../../panels";
import { inject, observer } from "mobx-react";
import { loopTreeFolders } from "../../../../../helpers/files-helpers";
@ -159,11 +159,10 @@ class SectionHeaderContent extends React.Component {
super(props);
this.state = {
showDeleteDialog: false,
showDownloadDialog: false,
showEmptyTrashDialog: false,
showMoveToPanel: false,
showCopyPanel: false,
//showDeleteDialog: false,
//showDownloadDialog: false,
//showEmptyTrashDialog: false,
//showCopyPanel: false,
};
}
@ -230,12 +229,10 @@ class SectionHeaderContent extends React.Component {
toastr.success(t("LinkCopySuccess"));
};
onMoveAction = () =>
this.setState({ showMoveToPanel: !this.state.showMoveToPanel });
onCopyAction = () =>
this.setState({ showCopyPanel: !this.state.showCopyPanel });
onMoveAction = () => this.props.setMoveToPanelVisible(true);
onCopyAction = () => this.props.setCopyPanelVisible(true);
//TODO: move to action, fix download dialog
loop = (data) => {
const url = data.url;
getProgress()
@ -317,8 +314,7 @@ class SectionHeaderContent extends React.Component {
renameAction = () => toastr.info("renameAction click");
onOpenSharingPanel = () =>
this.props.setSharingPanelVisible(!this.props.sharingPanelVisible);
onOpenSharingPanel = () => this.props.setSharingPanelVisible(true);
loopDeleteOperation = (id) => {
const {
@ -432,17 +428,17 @@ class SectionHeaderContent extends React.Component {
}
};
onDeleteAction = () => {
//console.log(this.props.confirmDelete);
if (this.props.confirmDelete) {
this.setState({ showDeleteDialog: !this.state.showDeleteDialog });
} else {
this.onDelete();
}
};
//TODO: move to actions, fix delete dialog
// onDeleteAction = () => {
// //console.log(this.props.confirmDelete);
// if (this.props.confirmDelete) {
// this.setState({ showDeleteDialog: !this.state.showDeleteDialog });
// } else {
// this.onDelete();
// }
// };
onEmptyTrashAction = () =>
this.setState({ showEmptyTrashDialog: !this.state.showEmptyTrashDialog });
onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true);
getContextOptionsFolder = () => {
const { t } = this.props;
@ -639,9 +635,9 @@ class SectionHeaderContent extends React.Component {
const {
t,
selection,
//selection,
isHeaderVisible,
isRecycleBin,
//isRecycleBin,
isHeaderChecked,
isHeaderIndeterminate,
isRootFolder,
@ -652,11 +648,10 @@ class SectionHeaderContent extends React.Component {
} = this.props;
const {
showDeleteDialog,
showEmptyTrashDialog,
showDownloadDialog,
showMoveToPanel,
showCopyPanel,
//showDeleteDialog,
//showEmptyTrashDialog,
//showDownloadDialog,
//showCopyPanel,
} = this.state;
const menuItems = this.getMenuItems();
@ -695,7 +690,7 @@ class SectionHeaderContent extends React.Component {
<>
{!isRootFolder && (
<IconButton
iconName="ArrowPathIcon"
iconName="/static/images/arrow.path.react.svg"
size="17"
color="#A3A9AE"
hoverColor="#657077"
@ -756,7 +751,7 @@ class SectionHeaderContent extends React.Component {
</div>
)}
{showDeleteDialog && (
{/* {showDeleteDialog && (
<DeleteDialog
isRecycleBin={isRecycleBin}
visible={showDeleteDialog}
@ -770,31 +765,31 @@ class SectionHeaderContent extends React.Component {
visible={showEmptyTrashDialog}
onClose={this.onEmptyTrashAction}
/>
)}
)} */}
{showMoveToPanel && (
{/* showMoveToPanel && (
<OperationsPanel
isCopy={false}
visible={showMoveToPanel}
onClose={this.onMoveAction}
/>
)}
) */}
{showCopyPanel && (
{/* {showCopyPanel && (
<OperationsPanel
isCopy={true}
visible={showCopyPanel}
onClose={this.onCopyAction}
/>
)}
)} */}
{showDownloadDialog && (
{/* {showDownloadDialog && (
<DownloadDialog
visible={showDownloadDialog}
onClose={this.downloadAsAction}
onDownloadProgress={this.loop}
/>
)}
)} */}
</StyledContainer>
)}
</Consumer>
@ -811,7 +806,7 @@ export default inject(
dialogsStore,
treeFoldersStore,
selectedFolderStore,
settingsStore,
//settingsStore,
}) => {
const { setIsLoading } = initFilesStore;
const { secondaryProgressDataStore } = uploadDataStore;
@ -838,7 +833,12 @@ export default inject(
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = secondaryProgressDataStore;
const { sharingPanelVisible, setSharingPanelVisible } = dialogsStore;
const {
setSharingPanelVisible,
setMoveToPanelVisible,
setCopyPanelVisible,
setEmptyTrashDialogVisible,
} = dialogsStore;
return {
isAdmin: auth.isAdmin,
@ -851,7 +851,6 @@ export default inject(
isRecycleBin: isRecycleBinFolder,
isPrivacy: isPrivacyFolder,
filter,
sharingPanelVisible,
canCreate,
isItemsSelected: !!selection.length,
isHeaderVisible,
@ -863,7 +862,7 @@ export default inject(
isThirdPartySelection,
isWebEditSelected,
isTabletView: auth.settingsStore.isTabletView,
confirmDelete: settingsStore.confirmDelete,
//confirmDelete: settingsStore.confirmDelete,
treeFolders: treeFoldersStore.treeFolders,
setSelected,
setAction,
@ -872,6 +871,9 @@ export default inject(
setSecondaryProgressBarData,
setSharingPanelVisible,
clearSecondaryProgressData,
setMoveToPanelVisible,
setCopyPanelVisible,
setEmptyTrashDialogVisible,
};
}
)(withTranslation("Home")(withRouter(observer(SectionHeaderContent))));

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

@ -209,7 +209,6 @@ class PureHome extends React.Component {
fileActionId,
firstLoad,
isHeaderVisible,
showOwnerChangePanel,
primaryProgressDataVisible,
primaryProgressDataPercent,
@ -228,8 +227,6 @@ class PureHome extends React.Component {
<ConvertDialog visible={convertDialogVisible} />
)}
{showOwnerChangePanel && <ChangeOwnerPanel />}
<Panels />
<PageLayout
withBodyScroll
@ -294,10 +291,6 @@ class PureHome extends React.Component {
const Home = withTranslation("Home")(PureHome);
Home.propTypes = {
history: PropTypes.object.isRequired,
};
export default inject(
({
auth,
@ -346,10 +339,7 @@ export default inject(
isSecondaryProgressFinished: isProgressFinished,
} = secondaryProgressDataStore;
const {
convertDialogVisible,
ownerPanelVisible: showOwnerChangePanel,
} = dialogsStore;
const { convertDialogVisible } = dialogsStore;
const { setUploadPanelVisible, startUpload } = uploadDataStore;
@ -379,7 +369,6 @@ export default inject(
secondaryProgressDataStoreAlert,
convertDialogVisible,
showOwnerChangePanel,
selectionLength,
isProgressFinished,
selectionTitle,

2
products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js
View File

@ -34,7 +34,7 @@ const SectionHeaderContent = (props) => {
return (
<StyledContainer>
<IconButton
iconName="ArrowPathIcon"
iconName="/static/images/arrow.path.react.svg"
size="17"
color="#A3A9AE"
hoverColor="#657077"

71
products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
View File

@ -1,5 +1,4 @@
import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import ModalDialog from "@appserver/components/modal-dialog";
import { withTranslation } from "react-i18next";
@ -16,42 +15,42 @@ class OperationsPanelComponent extends React.Component {
this.state = {
showProviderDialog: false,
operationPanelVisible: props.visible,
providerKey: "",
destFolderId: null,
};
}
onClose = () => {
const { isCopy, setMoveToPanelVisible, setCopyPanelVisible } = this.props;
isCopy ? setCopyPanelVisible(false) : setMoveToPanelVisible(false);
};
onSelect = (folder, treeNode) => {
const { currentFolderId, onClose, selection, isCopy } = this.props;
const { currentFolderId, selection, isCopy } = this.props;
const destFolderId = isNaN(+folder[0]) ? folder[0] : +folder[0];
const provider = selection.find((x) => x.providerKey);
const isProviderFolder = selection.find((x) => !x.providerKey);
if (currentFolderId === destFolderId) {
return onClose();
return this.onClose();
} else {
provider &&
!isProviderFolder &&
!isCopy &&
treeNode.node.props.providerKey !== provider.providerKey
? this.setState({
providerKey: provider.providerKey,
operationPanelVisible: false,
showProviderDialog: true,
destFolderId,
})
? this.setState(
{
providerKey: provider.providerKey,
showProviderDialog: true,
destFolderId,
},
() => this.onClose()
)
: this.startOperation(isCopy, destFolderId);
}
};
componentDidUpdate(prevProps) {
if (this.props.visible !== prevProps.visible) {
this.setState({ operationPanelVisible: this.props.visible });
}
}
startMoveOperation = () => {
this.startOperation(false);
};
@ -67,7 +66,6 @@ class OperationsPanelComponent extends React.Component {
selection,
setSecondaryProgressBarData,
currentFolderId,
onClose,
} = this.props;
const destFolderId = folderId ? folderId : this.state.destFolderId;
@ -77,7 +75,7 @@ class OperationsPanelComponent extends React.Component {
const fileIds = [];
if (currentFolderId === destFolderId) {
return onClose();
return this.onClose();
} else {
const isProviderFolder = selection.find((x) => !x.providerKey);
const items =
@ -94,7 +92,7 @@ class OperationsPanelComponent extends React.Component {
folderIds.push(item.id);
}
}
onClose();
this.onClose();
setSecondaryProgressBarData({
icon: isCopy ? "duplicate" : "move",
visible: true,
@ -112,7 +110,7 @@ class OperationsPanelComponent extends React.Component {
);
}
onClose();
this.onClose();
};
render() {
@ -123,13 +121,9 @@ class OperationsPanelComponent extends React.Component {
isCopy,
isRecycleBin,
operationsFolders,
onClose,
visible,
} = this.props;
const {
showProviderDialog,
operationPanelVisible,
providerKey,
} = this.state;
const { showProviderDialog, providerKey } = this.state;
const zIndex = 310;
const expandedKeys = this.props.expandedKeys.map((item) => item.toString());
@ -139,19 +133,19 @@ class OperationsPanelComponent extends React.Component {
{showProviderDialog && (
<ThirdPartyMoveDialog
visible={showProviderDialog}
onClose={onClose}
onClose={this.onClose}
startMoveOperation={this.startMoveOperation}
startCopyOperation={this.startCopyOperation}
provider={providerKey}
/>
)}
<StyledAsidePanel visible={operationPanelVisible}>
<StyledAsidePanel visible={visible}>
<ModalDialog
visible={operationPanelVisible}
visible={visible}
displayType="aside"
zIndex={zIndex}
onClose={onClose}
onClose={this.onClose}
>
<ModalDialog.Header>
{isRecycleBin ? t("Restore") : isCopy ? t("Copy") : t("Move")}
@ -172,22 +166,17 @@ class OperationsPanelComponent extends React.Component {
}
}
OperationsPanelComponent.propTypes = {
onClose: PropTypes.func,
visible: PropTypes.bool,
};
const OperationsPanel = withTranslation("OperationsPanel")(
OperationsPanelComponent
);
export default inject(
({
auth,
filesStore,
uploadDataStore,
treeFoldersStore,
selectedFolderStore,
dialogsStore,
}) => {
const {
secondaryProgressDataStore,
@ -197,6 +186,13 @@ export default inject(
const { isRecycleBinFolder, operationsFolders } = treeFoldersStore;
const { setSecondaryProgressBarData } = secondaryProgressDataStore;
const {
moveToPanelVisible,
copyPanelVisible,
setCopyPanelVisible,
setMoveToPanelVisible,
} = dialogsStore;
return {
expandedKeys: selectedFolderStore.pathParts,
currentFolderId: selectedFolderStore.id,
@ -204,9 +200,12 @@ export default inject(
isRecycleBin: isRecycleBinFolder,
filter,
operationsFolders,
visible: copyPanelVisible || moveToPanelVisible,
setSecondaryProgressBarData,
itemOperationToFolder,
setCopyPanelVisible,
setMoveToPanelVisible,
};
}
)(withRouter(observer(OperationsPanel)));

5
products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
View File

@ -335,7 +335,7 @@ class SharingPanelComponent extends React.Component {
setShareDataItems = (shareDataItems) => this.setState({ shareDataItems });
onClose = () => {
this.props.setSharingPanelVisible(!this.props.sharingPanelVisible);
this.props.setSharingPanelVisible(false);
this.props.selectUploadedFile([]);
};
@ -604,7 +604,7 @@ export default inject(
setShareFiles,
} = filesStore;
const { isPrivacyFolder } = treeFoldersStore;
const { sharingPanelVisible, setSharingPanelVisible } = dialogsStore;
const { setSharingPanelVisible } = dialogsStore;
const {
uploadSelection,
selectUploadedFile,
@ -621,7 +621,6 @@ export default inject(
selection: uploadPanelVisible ? uploadSelection : selection,
isLoading,
isPrivacy: isPrivacyFolder,
sharingPanelVisible,
uploadSelection,
canShareOwnerChange,

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

@ -12,16 +12,11 @@ const ShareButton = (props) => {
if (isShared) color = "#657077";
const onOpenSharingPanel = () => {
const {
setSharingPanelVisible,
sharingPanelVisible,
selectUploadedFile,
uploadedFile,
} = props;
const { setSharingPanelVisible, selectUploadedFile, uploadedFile } = props;
const file = uploadedFile[0].fileInfo;
selectUploadedFile([file]);
setSharingPanelVisible(!sharingPanelVisible);
setSharingPanelVisible(true);
};
return (
@ -36,13 +31,12 @@ const ShareButton = (props) => {
};
export default inject(({ dialogsStore, uploadDataStore }, { uniqueId }) => {
const { sharingPanelVisible, setSharingPanelVisible } = dialogsStore;
const { setSharingPanelVisible } = dialogsStore;
const { selectUploadedFile, getUploadedFile } = uploadDataStore;
const uploadedFile = getUploadedFile(uniqueId);
return {
sharingPanelVisible,
uploadedFile,
setSharingPanelVisible,

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

@ -56,7 +56,11 @@ class UploadPanelComponent extends React.Component {
render() {
//console.log("UploadPanel render");
const { t, uploadPanelVisible, sharingPanelVisible, uploaded } = this.props;
const {
t,
uploadPanelVisible,
/* sharingPanelVisible, */ uploaded,
} = this.props;
const visible = uploadPanelVisible;
const zIndex = 310;
@ -113,7 +117,7 @@ class UploadPanelComponent extends React.Component {
</StyledBody>
</StyledContent>
</Aside>
{sharingPanelVisible && <SharingPanel />}
{/* sharingPanelVisible && <SharingPanel /> */}
</StyledAsidePanel>
);
}
@ -122,7 +126,7 @@ class UploadPanelComponent extends React.Component {
const UploadPanel = withTranslation("UploadPanel")(UploadPanelComponent);
export default inject(({ dialogsStore, uploadDataStore }) => {
const { sharingPanelVisible } = dialogsStore;
//const { sharingPanelVisible } = dialogsStore;
const {
uploaded,
@ -133,7 +137,7 @@ export default inject(({ dialogsStore, uploadDataStore }) => {
} = uploadDataStore;
return {
sharingPanelVisible,
//sharingPanelVisible,
uploadPanelVisible,
uploaded,

17
products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js
View File

@ -5,6 +5,7 @@ import Heading from "@appserver/components/heading";
import Aside from "@appserver/components/aside";
import Loaders from "@appserver/common/components/Loaders";
import { withTranslation } from "react-i18next";
import history from "@appserver/common/history";
import {
StyledVersionHistoryPanel,
StyledContent,
@ -23,14 +24,12 @@ class PureVersionHistoryPanel extends React.Component {
}
redirectToPage = (fileId) => {
const { history, homepage, setIsVerHistoryPanel } = this.props;
setIsVerHistoryPanel(false);
history.replace(`${homepage}/${fileId}/history`);
this.onClose();
history.replace(`${this.props.homepage}/${fileId}/history`);
};
onClosePanelHandler = () => {
this.props.onClose();
onClose = () => {
this.props.setIsVerHistoryPanel(false);
};
render() {
@ -45,7 +44,7 @@ class PureVersionHistoryPanel extends React.Component {
isLoading={true}
>
<Backdrop
onClick={this.onClosePanelHandler}
onClick={this.onClose}
visible={visible}
zIndex={zIndex}
isAside={true}
@ -87,8 +86,6 @@ const VersionHistoryPanel = withTranslation("VersionHistory")(
VersionHistoryPanel.propTypes = {
fileId: PropTypes.string,
visible: PropTypes.bool,
onClose: PropTypes.func,
};
export default inject(({ auth, initFilesStore, versionHistoryStore }) => {
@ -99,6 +96,7 @@ export default inject(({ auth, initFilesStore, versionHistoryStore }) => {
versions,
setIsVerHistoryPanel,
setVerHistoryFileId,
isVisible: visible,
} = versionHistoryStore;
return {
@ -107,6 +105,7 @@ export default inject(({ auth, initFilesStore, versionHistoryStore }) => {
isLoading,
fileId,
versions,
visible,
setIsVerHistoryPanel,
setVerHistoryFileId,

63
products/ASC.Files/Client/src/store/DialogsStore.js
View File

@ -1,18 +1,22 @@
import { makeObservable, action, observable } from "mobx";
import { makeAutoObservable } from "mobx";
class DialogsStore {
sharingPanelVisible = false;
ownerPanelVisible = false;
moveToPanelVisible = false;
copyPanelVisible = false;
deleteThirdPartyDialogVisible = false;
connectDialogVisible = false;
thirdPartyMoveDialogVisible = false;
deleteDialogVisible = false;
downloadDialogVisible = false;
emptyTrashDialogVisible = false;
connectItem = null;
removeItem = null;
constructor() {
makeObservable(this, {
sharingPanelVisible: observable,
ownerPanelVisible: observable,
setSharingPanelVisible: action,
setChangeOwnerPanelVisible: action,
});
makeAutoObservable(this);
}
setSharingPanelVisible = (sharingPanelVisible) => {
@ -22,6 +26,47 @@ class DialogsStore {
setChangeOwnerPanelVisible = (ownerPanelVisible) => {
this.ownerPanelVisible = ownerPanelVisible;
};
setMoveToPanelVisible = (moveToPanelVisible) => {
this.moveToPanelVisible = moveToPanelVisible;
};
setCopyPanelVisible = (copyPanelVisible) => {
this.copyPanelVisible = copyPanelVisible;
};
setConnectDialogVisible = (connectDialogVisible) => {
if (!connectDialogVisible) this.setConnectItem(null);
this.connectDialogVisible = connectDialogVisible;
};
setConnectItem = (connectItem) => {
this.connectItem = connectItem;
};
setRemoveItem = (removeItem) => {
this.removeItem = removeItem;
};
setDeleteThirdPartyDialogVisible = (deleteThirdPartyDialogVisible) => {
this.deleteThirdPartyDialogVisible = deleteThirdPartyDialogVisible;
};
setThirdPartyMoveDialogVisible = (thirdPartyMoveDialogVisible) => {
this.thirdPartyMoveDialogVisible = thirdPartyMoveDialogVisible;
};
setDeleteDialogVisible = (deleteDialogVisible) => {
this.deleteDialogVisible = deleteDialogVisible;
};
setDownloadDialogVisible = (downloadDialogVisible) => {
this.downloadDialogVisible = downloadDialogVisible;
};
setEmptyTrashDialogVisible = (emptyTrashDialogVisible) => {
this.emptyTrashDialogVisible = emptyTrashDialogVisible;
};
}
export default new DialogsStore();

122
products/ASC.Files/Client/src/store/FilesStore.js
View File

@ -43,8 +43,8 @@ const {
isPresentation,
getFileIcon,
getFolderIcon,
getIcon,
} = iconFormatsStore;
const { getIcon } = iconFormatsStore;
const {
canWebEdit,
canWebComment,
@ -91,6 +91,8 @@ class FilesStore {
selectionTitle: computed,
currentFilesCount: computed,
canShare: computed,
setFirstLoad: action,
setFiles: action,
setFolders: action,
@ -321,35 +323,7 @@ class FilesStore {
this.selection = this.selection.filter((x) => x.id !== id);
};
isCanShare = () => {
const folderType = selectedFolderStore.rootFolderType;
const isVisitor = (userStore.user && userStore.user.isVisitor) || false;
if (isVisitor) {
return false;
}
switch (folderType) {
case FolderType.USER:
return true;
case FolderType.SHARE:
return false;
case FolderType.COMMON:
return isAdmin;
case FolderType.TRASH:
return false;
case FolderType.Favorites:
return false;
case FolderType.Recent:
return false;
case FolderType.Privacy:
return true;
default:
return false;
}
};
getFilesContextOptions = (item, canOpenPlayer, canShare) => {
getFilesContextOptions = (item, canOpenPlayer) => {
const options = [];
const isVisitor = (userStore.user && userStore.user.isVisitor) || false;
@ -391,7 +365,8 @@ class FilesStore {
//TODO: use canShare selector
if (
/*!(isRecentFolder || isFavoritesFolder || isVisitor) && */ canShare
/*!(isRecentFolder || isFavoritesFolder || isVisitor) && */ this
.canShare
) {
options.push("sharing-settings");
}
@ -400,7 +375,7 @@ class FilesStore {
options.push("send-by-email");
}
this.canShareOwnerChange && options.push("owner-change");
//this.canShareOwnerChange && options.push("owner-change");
options.push("link-for-portal-users");
if (!isVisitor) {
@ -512,6 +487,34 @@ class FilesStore {
return filesLength + foldersLength;
};
get canShare() {
const folderType = selectedFolderStore.rootFolderType;
const isVisitor = (userStore.user && userStore.user.isVisitor) || false;
if (isVisitor) {
return false;
}
switch (folderType) {
case FolderType.USER:
return true;
case FolderType.SHARE:
return false;
case FolderType.COMMON:
return isAdmin;
case FolderType.TRASH:
return false;
case FolderType.Favorites:
return false;
case FolderType.Recent:
return false;
case FolderType.Privacy:
return true;
default:
return false;
}
}
get currentFilesCount() {
const serviceFilesCount = this.getServiceFilesCount();
const filesCount = this.getFilesCount();
@ -595,15 +598,9 @@ class FilesStore {
};
get filesList() {
const items =
this.folders && this.files
? [...this.folders, ...this.files]
: this.folders
? this.folders
: this.files
? this.files
: [];
//return [...this.folders, ...this.files];
const items = [...this.folders, ...this.files];
const newItem = items.map((item) => {
const {
access,
@ -637,36 +634,17 @@ class FilesStore {
item.fileExst
);
const canShare = this.isCanShare();
const contextOptions = this.getFilesContextOptions(item, canOpenPlayer);
const contextOptions = this.getFilesContextOptions(
item,
canOpenPlayer,
canShare
);
const checked = this.isFileSelected(this.selection, id, parentId);
//let value = fileExst ? `file_${id}` : `folder_${id}`;
//value += draggable ? "_draggable" : "";
const selectedItem = this.selection.find(
(x) => x.id === id && x.fileExst === fileExst
);
const isFolder = selectedItem ? false : fileExst ? false : true;
const isRecycleBinFolder = treeFoldersStore.isRecycleBinFolder;
const draggable =
selectedItem &&
isRecycleBinFolder &&
selectedItem.id !== this.fileActionStore.id;
let value = fileExst ? `file_${id}` : `folder_${id}`;
value += draggable ? "_draggable" : "";
const isCanWebEdit = canWebEdit(item.fileExst);
//const isCanWebEdit = canWebEdit(item.fileExst);
const icon = getIcon(24, fileExst, providerKey);
return {
access,
checked,
//checked,
comment,
contentLength,
contextOptions,
@ -680,27 +658,27 @@ class FilesStore {
foldersCount,
icon,
id,
isFolder,
//isFolder,
locked,
new: item.new,
parentId,
pureContentLength,
rootFolderType,
selectedItem,
//selectedItem,
shared,
title,
updated,
updatedBy,
value,
//value,
version,
versionGroup,
viewUrl,
webUrl,
providerKey,
draggable,
canOpenPlayer,
canWebEdit: isCanWebEdit,
canShare,
//draggable,
//canOpenPlayer,
//canWebEdit: isCanWebEdit,
//canShare,
};
});
@ -774,7 +752,7 @@ class FilesStore {
}
get isOnlyFoldersSelected() {
return this.selection.every((selected) => selected.isFolder === true);
return this.selection.every((selected) => selected.fileExst !== undefined);
}
get isThirdPartySelection() {

6
web/ASC.Web.Client/src/Shell.jsx
View File

@ -3,13 +3,13 @@ import styled from "styled-components";
import { Router, Switch } from "react-router-dom";
import { inject, observer } from "mobx-react";
import NavMenu from "./components/NavMenu";
import Main from "@appserver/common/components/Main";
import Main from "./components/Main";
import Box from "@appserver/components/box";
import PrivateRoute from "@appserver/common/components/PrivateRoute";
import PublicRoute from "@appserver/common/components/PublicRoute";
import ErrorBoundary from "@appserver/common/components/ErrorBoundary";
import Layout from "@appserver/common/components/Layout";
import ScrollToTop from "@appserver/common/components/Layout/ScrollToTop";
import Layout from "./components/Layout";
import ScrollToTop from "./components/Layout/ScrollToTop";
import history from "@appserver/common/history";
import toastr from "@appserver/common/components/Toast";
import RectangleLoader from "@appserver/common/components/Loaders/RectangleLoader";

0
packages/asc-web-common/components/Layout/MobileLayout.js → web/ASC.Web.Client/src/components/Layout/MobileLayout.js
View File

0
packages/asc-web-common/components/Layout/ScrollToTop.js → web/ASC.Web.Client/src/components/Layout/ScrollToTop.js
View File

0
packages/asc-web-common/components/Layout/context.js → web/ASC.Web.Client/src/components/Layout/context.js
View File

0
packages/asc-web-common/components/Layout/index.js → web/ASC.Web.Client/src/components/Layout/index.js
View File

0
packages/asc-web-common/components/Main/index.js → web/ASC.Web.Client/src/components/Main/index.js
View File

2
web/ASC.Web.Client/src/components/NavMenu/index.js
View File

@ -12,7 +12,7 @@ import { I18nextProvider, withTranslation } from "react-i18next";
import { withRouter } from "react-router";
import Loaders from "@appserver/common/components/Loaders";
import { LayoutContextConsumer } from "@appserver/common/components/Layout/context";
import { LayoutContextConsumer } from "../Layout/context";
import { isMobile } from "react-device-detect";
import { inject, observer } from "mobx-react";
import i18n from "./i18n";

3
web/ASC.Web.Client/webpack.config.js
View File

@ -124,6 +124,9 @@ const config = {
"./Error401": "./src/components/pages/Errors/401",
"./Error403": "./src/components/pages/Errors/403",
"./Error520": "./src/components/pages/Errors/520",
"./Layout": "./src/components/Layout",
"./Layout/context": "./src/components/Layout/context.js",
"./Main": "./src/components/Main",
},
shared: {
...deps,