Web: Files: fixed ThirdParty
This commit is contained in:
parent
ca94ae28cd
commit
f3f4cfd0b2
@ -25,6 +25,7 @@ import filesActionsStore from "./store/FilesActionsStore";
|
||||
import "./custom.scss";
|
||||
import i18n from "./i18n";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
import Panels from "./components/FilesPanels";
|
||||
//import { regDesktop } from "@appserver/common/src/desktop";
|
||||
|
||||
const Error404 = React.lazy(() => import("studio/Error404"));
|
||||
@ -81,6 +82,7 @@ class FilesContent extends React.Component {
|
||||
|
||||
return (
|
||||
<Router history={history}>
|
||||
<Panels />
|
||||
<Switch>
|
||||
<PrivateRoute
|
||||
exact
|
||||
|
@ -95,7 +95,7 @@ const PureThirdPartyListContainer = ({
|
||||
nextCloudConnectItem,
|
||||
webDavConnectItem,
|
||||
setConnectItem,
|
||||
setShowThirdPartyPanel,
|
||||
setThirdPartyDialogVisible,
|
||||
setSelectedNode,
|
||||
setSelectedFolder,
|
||||
getOAuthToken,
|
||||
@ -134,11 +134,12 @@ const PureThirdPartyListContainer = ({
|
||||
setConnectItem(data);
|
||||
}
|
||||
|
||||
redirectAction();
|
||||
onShowConnectPanel();
|
||||
};
|
||||
|
||||
const onShowConnectPanel = () => {
|
||||
setShowThirdPartyPanel((prev) => !prev);
|
||||
//setThirdPartyDialogVisible((prev) => !prev); TODO:
|
||||
setThirdPartyDialogVisible(true);
|
||||
redirectAction();
|
||||
};
|
||||
|
||||
@ -208,13 +209,12 @@ export default inject(
|
||||
settingsStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
dialogsStore,
|
||||
}) => {
|
||||
const { setIsLoading } = initFilesStore;
|
||||
const { setSelectedFolder } = selectedFolderStore;
|
||||
const { setSelectedNode } = treeFoldersStore;
|
||||
const {
|
||||
setConnectItem,
|
||||
setShowThirdPartyPanel,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
@ -225,6 +225,8 @@ export default inject(
|
||||
openConnectWindow,
|
||||
} = settingsStore.thirdPartyStore;
|
||||
|
||||
const { setConnectItem, setThirdPartyDialogVisible } = dialogsStore;
|
||||
|
||||
return {
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
@ -237,7 +239,7 @@ export default inject(
|
||||
setSelectedFolder,
|
||||
setSelectedNode,
|
||||
setConnectItem,
|
||||
setShowThirdPartyPanel,
|
||||
setThirdPartyDialogVisible,
|
||||
getOAuthToken,
|
||||
openConnectWindow,
|
||||
};
|
||||
|
@ -5,7 +5,7 @@ import {
|
||||
UploadPanel,
|
||||
OperationsPanel,
|
||||
VersionHistoryPanel,
|
||||
} from "../../../panels";
|
||||
} from "../panels";
|
||||
import {
|
||||
ThirdPartyMoveDialog,
|
||||
ConnectDialog,
|
||||
@ -13,7 +13,8 @@ import {
|
||||
EmptyTrashDialog,
|
||||
DeleteDialog,
|
||||
DownloadDialog,
|
||||
} from "../../../dialogs";
|
||||
ThirdPartyDialog,
|
||||
} from "../dialogs";
|
||||
|
||||
const Panels = (props) => {
|
||||
const {
|
||||
@ -29,6 +30,7 @@ const Panels = (props) => {
|
||||
deleteDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
thirdPartyDialogVisible,
|
||||
} = props;
|
||||
|
||||
return [
|
||||
@ -60,6 +62,7 @@ const Panels = (props) => {
|
||||
deleteDialogVisible && <DeleteDialog key="delete-dialog" />,
|
||||
emptyTrashDialogVisible && <EmptyTrashDialog key="empty-trash-dialog" />,
|
||||
downloadDialogVisible && <DownloadDialog key="download-dialog" />,
|
||||
thirdPartyDialogVisible && <ThirdPartyDialog key="thirdparty-dialog" />,
|
||||
];
|
||||
};
|
||||
|
||||
@ -76,6 +79,9 @@ export default inject(
|
||||
deleteDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
thirdPartyDialogVisible,
|
||||
|
||||
connectItem, //TODO:
|
||||
} = dialogsStore;
|
||||
|
||||
const { uploadPanelVisible } = uploadDataStore;
|
||||
@ -88,12 +94,14 @@ export default inject(
|
||||
copyPanelVisible,
|
||||
moveToPanelVisible,
|
||||
thirdPartyMoveDialogVisible,
|
||||
connectDialogVisible,
|
||||
//connectDialogVisible,
|
||||
connectDialogVisible: connectDialogVisible || !!connectItem, //TODO:
|
||||
deleteThirdPartyDialogVisible,
|
||||
versionHistoryPanelVisible,
|
||||
deleteDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
thirdPartyDialogVisible,
|
||||
};
|
||||
}
|
||||
)(observer(Panels));
|
@ -317,7 +317,13 @@ const ConnectDialog = withTranslation("ConnectDialog")(
|
||||
);
|
||||
|
||||
export default inject(
|
||||
({ filesStore, settingsStore, treeFoldersStore, selectedFolderStore }) => {
|
||||
({
|
||||
filesStore,
|
||||
settingsStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
dialogsStore,
|
||||
}) => {
|
||||
const {
|
||||
providers,
|
||||
getOAuthToken,
|
||||
@ -336,7 +342,7 @@ export default inject(
|
||||
} = treeFoldersStore;
|
||||
const { id, folders } = selectedFolderStore;
|
||||
const {
|
||||
connectDialogVisible,
|
||||
connectDialogVisible: visible,
|
||||
setConnectDialogVisible,
|
||||
connectItem: item,
|
||||
} = dialogsStore;
|
||||
@ -348,7 +354,7 @@ export default inject(
|
||||
myFolderId,
|
||||
commonFolderId,
|
||||
providers,
|
||||
visible: connectDialogVisible,
|
||||
visible,
|
||||
item,
|
||||
|
||||
fetchFiles,
|
||||
|
@ -0,0 +1,272 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Trans } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import Text from "@appserver/components/text";
|
||||
import Link from "@appserver/components/link";
|
||||
|
||||
const StyledServicesBlock = styled.div`
|
||||
display: grid;
|
||||
column-gap: 55px;
|
||||
row-gap: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(auto-fill, 158px);
|
||||
padding-top: 24px;
|
||||
|
||||
.service-item {
|
||||
border: 1px solid #d1d1d1;
|
||||
width: 158px;
|
||||
height: 40px;
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid #d1d1d1;
|
||||
width: 158px;
|
||||
height: 40px;
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.service-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const ServiceItem = (props) => {
|
||||
const { capability, t, ...rest } = props;
|
||||
|
||||
const capabilityName = capability[0];
|
||||
const capabilityLink = capability[1] ? capability[1] : "";
|
||||
|
||||
const dataProps = {
|
||||
"data-link": capabilityLink,
|
||||
"data-title": capabilityName,
|
||||
};
|
||||
|
||||
return <img {...dataProps} {...rest} alt="" />;
|
||||
};
|
||||
|
||||
const ThirdPartyDialog = (props) => {
|
||||
const {
|
||||
t,
|
||||
isAdmin,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
sharePointConnectItem,
|
||||
nextCloudConnectItem,
|
||||
ownCloudConnectItem,
|
||||
oneDriveConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
webDavConnectItem,
|
||||
visible,
|
||||
setThirdPartyDialogVisible,
|
||||
openConnectWindow,
|
||||
getOAuthToken,
|
||||
setConnectDialogVisible,
|
||||
setConnectItem,
|
||||
} = props;
|
||||
|
||||
const onClose = () => {
|
||||
setThirdPartyDialogVisible(false);
|
||||
};
|
||||
|
||||
const showOAuthModal = (token, serviceData) => {
|
||||
this.props.setConnectDialogVisible(true);
|
||||
this.props.setConnectItem({
|
||||
title: serviceData.title,
|
||||
provider_key: serviceData.title,
|
||||
link: serviceData.link,
|
||||
token,
|
||||
});
|
||||
};
|
||||
|
||||
const onShowService = (e) => {
|
||||
const item = e.currentTarget.dataset;
|
||||
const showAccountSetting = !e.currentTarget.dataset.link;
|
||||
if (!showAccountSetting) {
|
||||
let authModal = window.open(
|
||||
"",
|
||||
"Authorization",
|
||||
"height=600, width=1020"
|
||||
);
|
||||
openConnectWindow(item.title, authModal).then((modal) =>
|
||||
getOAuthToken(modal).then((token) => showOAuthModal(token, item))
|
||||
);
|
||||
}
|
||||
|
||||
setConnectDialogVisible(true);
|
||||
setConnectItem(item);
|
||||
setThirdPartyDialogVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalDialog
|
||||
visible={visible}
|
||||
scale={false}
|
||||
displayType="auto"
|
||||
zIndex={310}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<Text as="div">
|
||||
{t("ConnectDescription")}
|
||||
{isAdmin && (
|
||||
<Trans i18nKey="ConnectAdminDescription" ns="Settings">
|
||||
For successful connection enter the necessary data at
|
||||
<Link isHovered href="/settings/integration/third-party-services">
|
||||
this page
|
||||
</Link>
|
||||
</Trans>
|
||||
)}
|
||||
</Text>
|
||||
<StyledServicesBlock>
|
||||
{googleConnectItem && (
|
||||
<ServiceItem
|
||||
capability={googleConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_google-drive.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{boxConnectItem && (
|
||||
<ServiceItem
|
||||
capability={boxConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_box.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{dropboxConnectItem && (
|
||||
<ServiceItem
|
||||
capability={dropboxConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_dropbox.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{sharePointConnectItem && (
|
||||
<ServiceItem
|
||||
capability={sharePointConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_sharepoint.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{oneDriveConnectItem && (
|
||||
<ServiceItem
|
||||
capability={oneDriveConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_onedrive.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{sharePointConnectItem && (
|
||||
<ServiceItem
|
||||
capability={sharePointConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_onedrive-for-business.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{nextCloudConnectItem && (
|
||||
<ServiceItem
|
||||
capability={webDavConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_nextcloud.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{ownCloudConnectItem && (
|
||||
<ServiceItem
|
||||
capability={webDavConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_owncloud.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{kDriveConnectItem && (
|
||||
<ServiceItem
|
||||
capability={kDriveConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_kdrive.svg"
|
||||
/>
|
||||
)}
|
||||
{yandexConnectItem && (
|
||||
<ServiceItem
|
||||
capability={yandexConnectItem}
|
||||
onClick={onShowService}
|
||||
src="images/services/logo_yandex_ru.svg"
|
||||
/>
|
||||
)}
|
||||
{webDavConnectItem && (
|
||||
<Text
|
||||
onClick={onShowService}
|
||||
className="service-item service-text"
|
||||
data-title={webDavConnectItem[0]}
|
||||
>
|
||||
{t("ConnextOtherAccount")}
|
||||
</Text>
|
||||
)}
|
||||
</StyledServicesBlock>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, settingsStore, dialogsStore }) => {
|
||||
const {
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
oneDriveConnectItem,
|
||||
nextCloudConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
ownCloudConnectItem,
|
||||
webDavConnectItem,
|
||||
sharePointConnectItem,
|
||||
getOAuthToken,
|
||||
openConnectWindow,
|
||||
} = settingsStore.thirdPartyStore;
|
||||
const {
|
||||
setThirdPartyDialogVisible,
|
||||
thirdPartyDialogVisible: visible,
|
||||
setConnectDialogVisible,
|
||||
setConnectItem,
|
||||
} = dialogsStore;
|
||||
|
||||
return {
|
||||
visible,
|
||||
isAdmin: auth.isAdmin,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
oneDriveConnectItem,
|
||||
nextCloudConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
ownCloudConnectItem,
|
||||
webDavConnectItem,
|
||||
sharePointConnectItem,
|
||||
|
||||
setConnectDialogVisible,
|
||||
setConnectItem,
|
||||
setThirdPartyDialogVisible,
|
||||
getOAuthToken,
|
||||
openConnectWindow,
|
||||
};
|
||||
})(withTranslation("Settings")(observer(ThirdPartyDialog)));
|
@ -5,6 +5,7 @@ import ConvertDialog from "./ConvertDialog";
|
||||
import DeleteThirdPartyDialog from "./DeleteThirdPartyDialog";
|
||||
import ConnectDialog from "./ConnectDialog";
|
||||
import ThirdPartyMoveDialog from "./ThirdPartyMoveDialog";
|
||||
import ThirdPartyDialog from "./ThirdPartyDialog";
|
||||
|
||||
export {
|
||||
EmptyTrashDialog,
|
||||
@ -14,4 +15,5 @@ export {
|
||||
DeleteThirdPartyDialog,
|
||||
ConnectDialog,
|
||||
ThirdPartyMoveDialog,
|
||||
ThirdPartyDialog,
|
||||
};
|
||||
|
@ -24,7 +24,6 @@ import {
|
||||
|
||||
import { ConvertDialog } from "../../dialogs";
|
||||
import { getFilterByLocation } from "../../../helpers/converters";
|
||||
import Panels from "./Panels";
|
||||
import MediaViewer from "./MediaViewer";
|
||||
import { observer, inject } from "mobx-react";
|
||||
|
||||
@ -227,7 +226,6 @@ class PureHome extends React.Component {
|
||||
<ConvertDialog visible={convertDialogVisible} />
|
||||
)}
|
||||
|
||||
<Panels />
|
||||
<MediaViewer />
|
||||
<PageLayout
|
||||
withBodyScroll
|
||||
|
@ -1,18 +1,13 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import Button from "@appserver/components/button";
|
||||
import Text from "@appserver/components/text";
|
||||
import Link from "@appserver/components/link";
|
||||
import Box from "@appserver/components/box";
|
||||
import Row from "@appserver/components/row";
|
||||
import RowContainer from "@appserver/components/row-container";
|
||||
|
||||
import { withTranslation } from "react-i18next";
|
||||
import EmptyFolderContainer from "../../../Home/Section/Body/EmptyContainer/EmptyContainer";
|
||||
import { Trans } from "react-i18next";
|
||||
import { DeleteThirdPartyDialog, ConnectDialog } from "../../../../dialogs";
|
||||
import BoxIcon from "../../../../../../public/images/icon_box.react.svg";
|
||||
import DropBoxIcon from "../../../../../../public/images/icon_dropbox.react.svg";
|
||||
import GoogleDriveIcon from "../../../../../../public/images/icon_google_drive.react.svg";
|
||||
@ -26,56 +21,6 @@ import YandexDiskIcon from "../../../../../../public/images/icon_yandex_disk.rea
|
||||
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const StyledServicesBlock = styled.div`
|
||||
display: grid;
|
||||
column-gap: 55px;
|
||||
row-gap: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(auto-fill, 158px);
|
||||
padding-top: 24px;
|
||||
|
||||
.service-item {
|
||||
border: 1px solid #d1d1d1;
|
||||
width: 158px;
|
||||
height: 40px;
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid #d1d1d1;
|
||||
width: 158px;
|
||||
height: 40px;
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.service-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const ServiceItem = (props) => {
|
||||
const { capability, t, ...rest } = props;
|
||||
|
||||
const capabilityName = capability[0];
|
||||
const capabilityLink = capability[1] ? capability[1] : "";
|
||||
|
||||
const dataProps = {
|
||||
"data-link": capabilityLink,
|
||||
"data-title": capabilityName,
|
||||
};
|
||||
|
||||
return <img {...dataProps} {...rest} alt="" />;
|
||||
};
|
||||
|
||||
const StyledBoxIcon = styled(BoxIcon)`
|
||||
${commonIconsStyles}
|
||||
`;
|
||||
@ -106,111 +51,35 @@ const StyledWebDavIcon = styled(WebDavIcon)`
|
||||
const StyledYandexDiskIcon = styled(YandexDiskIcon)`
|
||||
${commonIconsStyles}
|
||||
`;
|
||||
|
||||
const linkStyles = {
|
||||
isHovered: true,
|
||||
type: "action",
|
||||
fontWeight: "600",
|
||||
color: "#555f65",
|
||||
className: "empty-folder_link",
|
||||
display: "flex",
|
||||
};
|
||||
|
||||
class ConnectClouds extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showThirdPartyDialog: props.showThirdPartyPanel,
|
||||
showAccountSettingDialog: !!props.connectItem,
|
||||
showDeleteDialog: false,
|
||||
loginValue: "",
|
||||
passwordValue: "",
|
||||
folderNameValue: "",
|
||||
selectedServiceData: props.connectItem,
|
||||
removeItem: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const visible = !!this.props.connectItem;
|
||||
const prevVisible = !!prevProps.connectItem;
|
||||
|
||||
if (this.props.showThirdPartyPanel !== prevProps.showThirdPartyPanel) {
|
||||
this.props.showThirdPartyPanel &&
|
||||
this.setState({
|
||||
showThirdPartyDialog: true,
|
||||
});
|
||||
}
|
||||
|
||||
if (visible !== prevVisible) {
|
||||
visible &&
|
||||
this.setState({
|
||||
showAccountSettingDialog: true,
|
||||
selectedServiceData: this.props.connectItem,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showOAuthModal = (token, serviceData) => {
|
||||
this.setState({
|
||||
showAccountSettingDialog: true,
|
||||
selectedServiceData: {
|
||||
title: serviceData.title,
|
||||
provider_key: serviceData.title,
|
||||
link: serviceData.link,
|
||||
token,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
onShowService = (e) => {
|
||||
console.log("onShowService", e.currentTarget.dataset);
|
||||
const selectedServiceData = e.currentTarget.dataset;
|
||||
const showAccountSettingDialog = !e.currentTarget.dataset.link;
|
||||
if (!showAccountSettingDialog) {
|
||||
let authModal = window.open(
|
||||
"",
|
||||
"Authorization",
|
||||
"height=600, width=1020"
|
||||
);
|
||||
this.props
|
||||
.openConnectWindow(selectedServiceData.title, authModal)
|
||||
.then((modal) =>
|
||||
this.props
|
||||
.getOAuthToken(modal)
|
||||
.then((token) => this.showOAuthModal(token, selectedServiceData))
|
||||
);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
showThirdPartyDialog: !this.state.showThirdPartyDialog,
|
||||
showAccountSettingDialog,
|
||||
selectedServiceData,
|
||||
});
|
||||
};
|
||||
|
||||
onShowThirdPartyDialog = () => {
|
||||
this.setState(
|
||||
{ showThirdPartyDialog: !this.state.showThirdPartyDialog },
|
||||
() =>
|
||||
this.props.showThirdPartyPanel &&
|
||||
this.props.setShowThirdPartyPanel(false)
|
||||
);
|
||||
};
|
||||
|
||||
onShowAccountSettingDialog = () => {
|
||||
this.setState(
|
||||
{
|
||||
showAccountSettingDialog: !this.state.showAccountSettingDialog,
|
||||
selectedServiceData: null,
|
||||
},
|
||||
() => this.props.connectItem && this.props.setConnectItem(null)
|
||||
);
|
||||
this.props.setThirdPartyDialogVisible(true);
|
||||
};
|
||||
|
||||
onDeleteThirdParty = (e) => {
|
||||
const { id, title } = e.currentTarget.dataset;
|
||||
const removeItem = { id, title };
|
||||
|
||||
this.setState({
|
||||
showDeleteDialog: !this.state.showDeleteDialog,
|
||||
removeItem,
|
||||
});
|
||||
};
|
||||
|
||||
onShowDeleteDialog = () => {
|
||||
this.setState({ showDeleteDialog: !this.state.showDeleteDialog });
|
||||
this.props.setDeleteThirdPartyDialogVisible(true);
|
||||
this.props.setRemoveItem({ id, title });
|
||||
};
|
||||
|
||||
onChangeThirdPartyInfo = (e) => {
|
||||
@ -222,14 +91,16 @@ class ConnectClouds extends React.Component {
|
||||
|
||||
const { corporate, provider_id, customer_title } = providerItem;
|
||||
|
||||
const selectedServiceData = {
|
||||
const item = {
|
||||
title: capabilitiesItem ? capabilitiesItem[0] : customer_title,
|
||||
link: capabilitiesItem ? capabilitiesItem[1] : " ",
|
||||
corporate: corporate,
|
||||
provider_id: provider_id,
|
||||
provider_key: key,
|
||||
};
|
||||
this.setState({ selectedServiceData, showAccountSettingDialog: true });
|
||||
|
||||
this.props.setConnectItem(item);
|
||||
this.props.setConnectDialogVisible(true);
|
||||
};
|
||||
|
||||
getThirdPartyIcon = (iconName) => {
|
||||
@ -248,7 +119,6 @@ class ConnectClouds extends React.Component {
|
||||
return <StyledKDriveIcon size="big" />;
|
||||
case "Yandex":
|
||||
return <StyledYandexDiskIcon size="big" />;
|
||||
/*--------------------------------------------*/
|
||||
case "OwnCloud":
|
||||
return <StyledOwnCloudIcon size="big" />;
|
||||
case "NextCloud":
|
||||
@ -285,37 +155,7 @@ class ConnectClouds extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
showThirdPartyDialog,
|
||||
showAccountSettingDialog,
|
||||
showDeleteDialog,
|
||||
selectedServiceData,
|
||||
removeItem,
|
||||
} = this.state;
|
||||
const {
|
||||
t,
|
||||
providers,
|
||||
isAdmin,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
sharePointConnectItem,
|
||||
oneDriveConnectItem,
|
||||
nextCloudConnectItem,
|
||||
ownCloudConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
webDavConnectItem,
|
||||
} = this.props;
|
||||
|
||||
const linkStyles = {
|
||||
isHovered: true,
|
||||
type: "action",
|
||||
fontWeight: "600",
|
||||
color: "#555f65",
|
||||
className: "empty-folder_link",
|
||||
display: "flex",
|
||||
};
|
||||
const { t, providers } = this.props;
|
||||
|
||||
const buttons = (
|
||||
<div className="empty-folder_container-links empty-connect_container-links">
|
||||
@ -411,192 +251,38 @@ class ConnectClouds extends React.Component {
|
||||
buttons={buttons}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showThirdPartyDialog && (
|
||||
<ModalDialog
|
||||
visible={showThirdPartyDialog}
|
||||
scale={false}
|
||||
displayType="auto"
|
||||
zIndex={310}
|
||||
onClose={this.onShowThirdPartyDialog}
|
||||
>
|
||||
<ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<Text as="div">
|
||||
{t("ConnectDescription")}
|
||||
{isAdmin && (
|
||||
<Trans i18nKey="ConnectAdminDescription" ns="Settings">
|
||||
For successful connection enter the necessary data at
|
||||
<Link
|
||||
isHovered
|
||||
href="/settings/integration/third-party-services"
|
||||
>
|
||||
this page
|
||||
</Link>
|
||||
</Trans>
|
||||
)}
|
||||
</Text>
|
||||
<StyledServicesBlock>
|
||||
{googleConnectItem && (
|
||||
<ServiceItem
|
||||
capability={googleConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_google-drive.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{boxConnectItem && (
|
||||
<ServiceItem
|
||||
capability={boxConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_box.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{dropboxConnectItem && (
|
||||
<ServiceItem
|
||||
capability={dropboxConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_dropbox.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{sharePointConnectItem && (
|
||||
<ServiceItem
|
||||
capability={sharePointConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_sharepoint.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{oneDriveConnectItem && (
|
||||
<ServiceItem
|
||||
capability={oneDriveConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_onedrive.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{sharePointConnectItem && (
|
||||
<ServiceItem
|
||||
capability={sharePointConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_onedrive-for-business.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{nextCloudConnectItem && (
|
||||
<ServiceItem
|
||||
capability={webDavConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_nextcloud.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{ownCloudConnectItem && (
|
||||
<ServiceItem
|
||||
capability={webDavConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_owncloud.svg"
|
||||
/>
|
||||
)}
|
||||
|
||||
{kDriveConnectItem && (
|
||||
<ServiceItem
|
||||
capability={kDriveConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_kdrive.svg"
|
||||
/>
|
||||
)}
|
||||
{yandexConnectItem && (
|
||||
<ServiceItem
|
||||
capability={yandexConnectItem}
|
||||
onClick={this.onShowService}
|
||||
src="images/services/logo_yandex_ru.svg"
|
||||
/>
|
||||
)}
|
||||
{webDavConnectItem && (
|
||||
<Text
|
||||
onClick={this.onShowService}
|
||||
className="service-item service-text"
|
||||
data-title={webDavConnectItem[0]}
|
||||
>
|
||||
{t("ConnextOtherAccount")}
|
||||
</Text>
|
||||
)}
|
||||
</StyledServicesBlock>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
)}
|
||||
{showAccountSettingDialog && (
|
||||
<ConnectDialog
|
||||
visible={showAccountSettingDialog}
|
||||
onClose={this.onShowAccountSettingDialog}
|
||||
item={selectedServiceData}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showDeleteDialog && (
|
||||
<DeleteThirdPartyDialog
|
||||
onClose={this.onShowDeleteDialog}
|
||||
visible={showDeleteDialog}
|
||||
removeItem={removeItem}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default inject(
|
||||
({ auth, filesStore, settingsStore, treeFoldersStore }) => {
|
||||
const {
|
||||
providers,
|
||||
connectItem,
|
||||
capabilities,
|
||||
setConnectItem,
|
||||
showThirdPartyPanel,
|
||||
setShowThirdPartyPanel,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
oneDriveConnectItem,
|
||||
nextCloudConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
ownCloudConnectItem,
|
||||
webDavConnectItem,
|
||||
getOAuthToken,
|
||||
openConnectWindow,
|
||||
} = settingsStore.thirdPartyStore;
|
||||
({ filesStore, settingsStore, treeFoldersStore, dialogsStore }) => {
|
||||
const { providers, capabilities } = settingsStore.thirdPartyStore;
|
||||
const { fetchFiles, filter } = filesStore;
|
||||
const { setSelectedNode, myFolder, commonFolder } = treeFoldersStore;
|
||||
const {
|
||||
setConnectItem,
|
||||
setThirdPartyDialogVisible,
|
||||
setDeleteThirdPartyDialogVisible,
|
||||
setRemoveItem,
|
||||
setConnectDialogVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
return {
|
||||
isAdmin: auth.isAdmin,
|
||||
filter,
|
||||
providers,
|
||||
showThirdPartyPanel,
|
||||
connectItem,
|
||||
capabilities,
|
||||
googleConnectItem,
|
||||
boxConnectItem,
|
||||
dropboxConnectItem,
|
||||
oneDriveConnectItem,
|
||||
nextCloudConnectItem,
|
||||
kDriveConnectItem,
|
||||
yandexConnectItem,
|
||||
ownCloudConnectItem,
|
||||
webDavConnectItem,
|
||||
myDirectoryFolders: myFolder && myFolder.folders,
|
||||
commonDirectoryFolders: commonFolder && commonFolder.folders,
|
||||
|
||||
fetchFiles,
|
||||
setSelectedNode,
|
||||
setThirdPartyDialogVisible,
|
||||
setConnectDialogVisible,
|
||||
setConnectItem,
|
||||
setShowThirdPartyPanel,
|
||||
getOAuthToken,
|
||||
openConnectWindow,
|
||||
setDeleteThirdPartyDialogVisible,
|
||||
setRemoveItem,
|
||||
};
|
||||
}
|
||||
)(withTranslation("Settings")(observer(ConnectClouds)));
|
||||
|
@ -11,9 +11,10 @@ class DialogsStore {
|
||||
deleteDialogVisible = false;
|
||||
downloadDialogVisible = false;
|
||||
emptyTrashDialogVisible = false;
|
||||
thirdPartyDialogVisible = false;
|
||||
|
||||
connectItem = null;
|
||||
removeItem = null;
|
||||
connectItem = null;
|
||||
shareItem = null;
|
||||
|
||||
constructor() {
|
||||
@ -39,11 +40,8 @@ class DialogsStore {
|
||||
|
||||
setConnectDialogVisible = (connectDialogVisible) => {
|
||||
if (!connectDialogVisible) this.setConnectItem(null);
|
||||
this.connectDialogVisible = connectDialogVisible;
|
||||
};
|
||||
|
||||
setConnectItem = (connectItem) => {
|
||||
this.connectItem = connectItem;
|
||||
this.connectDialogVisible = connectDialogVisible;
|
||||
};
|
||||
|
||||
setRemoveItem = (removeItem) => {
|
||||
@ -73,6 +71,14 @@ class DialogsStore {
|
||||
setShareItem = (shareItem) => {
|
||||
this.shareItem = shareItem;
|
||||
};
|
||||
|
||||
setConnectItem = (connectItem) => {
|
||||
this.connectItem = connectItem;
|
||||
};
|
||||
|
||||
setThirdPartyDialogVisible = (thirdPartyDialogVisible) => {
|
||||
this.thirdPartyDialogVisible = thirdPartyDialogVisible;
|
||||
};
|
||||
}
|
||||
|
||||
export default new DialogsStore();
|
||||
|
@ -4,14 +4,11 @@ import api from "@appserver/common/api";
|
||||
class ThirdPartyStore {
|
||||
capabilities = [];
|
||||
providers = [];
|
||||
connectItem = null;
|
||||
showThirdPartyPanel = false; //TODO: move to panel?
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
capabilities: observable,
|
||||
providers: observable,
|
||||
connectItem: observable,
|
||||
|
||||
googleConnectItem: computed,
|
||||
boxConnectItem: computed,
|
||||
@ -28,8 +25,6 @@ class ThirdPartyStore {
|
||||
setThirdPartyCapabilities: action,
|
||||
fetchThirdPartyProviders: action,
|
||||
deleteThirdParty: action,
|
||||
setConnectItem: action,
|
||||
setShowThirdPartyPanel: action,
|
||||
getOAuthToken: action,
|
||||
openConnectWindow: action,
|
||||
});
|
||||
@ -45,14 +40,6 @@ class ThirdPartyStore {
|
||||
|
||||
deleteThirdParty = (id) => api.files.deleteThirdParty(id);
|
||||
|
||||
setConnectItem = (connectItem) => {
|
||||
this.connectItem = connectItem;
|
||||
};
|
||||
|
||||
setShowThirdPartyPanel = (showThirdPartyPanel) => {
|
||||
this.showThirdPartyPanel = showThirdPartyPanel;
|
||||
};
|
||||
|
||||
fetchThirdPartyProviders = async () => {
|
||||
this.providers = await api.files.getThirdPartyList();
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user