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

Web: Files: added thirdParty api, added new thirdParty dialogs

Browse Source
This commit is contained in:
Nikita Gopienko 2020-11-10 12:50:07 +03:00
parent 1da1cde38e
commit fa2a510a8a
8 changed files with 265 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
products/ASC.Files/Client/src/components/Article/Body/index.js
View File

@ -131,7 +131,7 @@ class ArticleBodyContent extends React.Component {
onTreeDrop={onTreeDrop}
/>
<TreeSettings />
КНОПКА
Add account
</>
)}
</>

189
products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js
View File

@ -1,4 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import {
Box,
@ -8,13 +9,21 @@ import {
Button,
Row,
Icons,
toastr,
} from "asc-web-components";
import { Loaders, store } from "asc-web-common";
import { withTranslation } from "react-i18next";
import EmptyFolderContainer from "../../../Home/Section/Body/EmptyFolderContainer";
import { createI18N } from "../../../../../helpers/i18n";
import { Trans } from "react-i18next";
import { getConnectedCloud } from "../../../../../store/files/actions";
import {
getConnectedCloud,
deleteThirdParty,
} from "../../../../../store/files/actions";
import ConnectedDialog from "./ConnectedDialog";
const { isAdmin } = store.auth.selectors;
const i18n = createI18N({
page: "SectionBodyContent",
localesPath: "pages/Settings",
@ -53,26 +62,19 @@ const ServiceItem = (props) => {
const capabilityAuthKey = capability[1];
const capabilityLink = capability[2] ? capability[2] : "";
/*
<img
src="images/services/logo_nextcloud.svg"
alt=""
{...imageProps}
/>
<img
src="images/services/logo_owncloud.svg"
alt=""
{...imageProps}
/>
*/
const dataProps = {
"data-link": capabilityLink,
"data-auth_key": capabilityAuthKey,
"data-title": capabilityName,
};
switch (capabilityName) {
case "Box":
return (
<img
src="images/services/logo_box.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
@ -81,9 +83,8 @@ const ServiceItem = (props) => {
return (
<img
src="images/services/logo_dropbox.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
@ -92,9 +93,8 @@ const ServiceItem = (props) => {
return (
<img
src="images/services/logo_google-drive.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
@ -103,9 +103,8 @@ const ServiceItem = (props) => {
return (
<img
src="images/services/logo_onedrive.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
@ -115,16 +114,14 @@ const ServiceItem = (props) => {
<>
<img
src="images/services/logo_onedrive-for-business.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
<img
src="images/services/logo_sharepoint.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
</>
@ -134,9 +131,8 @@ const ServiceItem = (props) => {
return (
<img
src="images/services/logo_kdrive.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
@ -145,23 +141,31 @@ const ServiceItem = (props) => {
return (
<img
src="images/services/logo_yandex_ru.svg"
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
alt=""
{...dataProps}
{...rest}
/>
);
case "WebDav":
return (
<Text
data-link={`${capabilityLink}`}
data-title={`${capabilityName}`}
{...rest}
className="service-item service-text"
>
{t("ConnextOtherAccount")}
</Text>
<>
<img
src="images/services/logo_nextcloud.svg"
alt=""
{...dataProps}
{...rest}
/>
<img
src="images/services/logo_owncloud.svg"
alt=""
{...dataProps}
{...rest}
/>
<Text {...dataProps} {...rest} className="service-item service-text">
{t("ConnextOtherAccount")}
</Text>
</>
);
default:
@ -176,12 +180,15 @@ class ConnectClouds extends React.Component {
this.state = {
connectDialogVisible: false,
showAccountSettingDialog: false,
showDeleteDialog: false,
providers: [],
capabilities: [],
loginValue: "",
passwordValue: "",
folderNameValue: "",
selectedService: "",
selectedServiceData: null,
removeItemId: null,
providersLoading: true,
};
}
@ -190,16 +197,25 @@ class ConnectClouds extends React.Component {
this.setState({
providers: res.providers,
capabilities: res.capabilities,
providersLoading: false,
});
});
}
onShowService = (e) => {
const selectedServiceData = e.currentTarget.dataset;
const showAccountSettingDialog = !e.currentTarget.dataset.link;
if (!showAccountSettingDialog) {
window.open(
selectedServiceData.link,
selectedServiceData.title,
"width=1020,height=600"
);
}
this.setState({
connectDialogVisible: !this.state.connectDialogVisible,
selectedService: e.currentTarget.dataset.title,
showAccountSettingDialog,
selectedServiceData,
});
};
@ -210,16 +226,57 @@ class ConnectClouds extends React.Component {
onShowAccountSettingDialog = () => {
this.setState({
showAccountSettingDialog: !this.state.showAccountSettingDialog,
selectedServiceData: null,
});
};
onShowDeleteDialog = (e) => {
const removeItemId = e.currentTarget.dataset.id;
this.setState({
showDeleteDialog: !this.state.showDeleteDialog,
removeItemId,
});
};
onChangeThirdPartyInfo = (e) => {
const key = e.currentTarget.dataset.key;
const capabilitiesItem = this.state.capabilities.find((x) => x[0] === key);
const providerItem = this.state.providers.find(
(x) => x.provider_key === key
);
const selectedServiceData = {
title: capabilitiesItem[0],
auth_key: capabilitiesItem[1],
link: capabilitiesItem[2],
corporate: providerItem.corporate,
provider_id: providerItem.provider_id,
provider_key: key,
};
this.setState({ selectedServiceData, showAccountSettingDialog: true });
};
onDeleteThirdParty = () => {
const id = this.state.removeItemId;
const providers = this.state.providers.filter((x) => x.id === id);
deleteThirdParty(+id)
.then(() => this.setState({ showDeleteDialog: false, providers }))
.catch((err) => {
toastr(err);
this.setState({ showDeleteDialog: false });
});
};
render() {
const {
connectDialogVisible,
providers,
capabilities,
showAccountSettingDialog,
selectedService,
showDeleteDialog,
selectedServiceData,
providersLoading,
} = this.state;
const { t, isAdmin } = this.props;
@ -232,11 +289,6 @@ class ConnectClouds extends React.Component {
display: "flex",
};
const imageProps = {
onClick: this.onShowService,
className: "service-item",
};
const buttons = (
<div className="empty-folder_container-links empty-connect_container-links">
<img
@ -266,16 +318,18 @@ class ConnectClouds extends React.Component {
{providers.map((item, index) => {
return (
<Row
key={index} //item.provider.id
key={index}
element={<Icons.NavLogoIcon size="big" />}
contextOptions={[
{
label: "Change connection settings",
onClick: () => console.log("Change connection settings"),
"data-key": item.provider_key,
label: t("ThirdPartyInfo"),
onClick: this.onChangeThirdPartyInfo,
},
{
label: "Disconnect third party",
onClick: () => console.log("Disconnect third party"),
"data-id": item.provider_id,
label: t("DeleteThirdParty"),
onClick: this.onShowDeleteDialog,
},
]}
>
@ -314,6 +368,8 @@ class ConnectClouds extends React.Component {
);
})}
</>
) : providersLoading ? (
<Loaders.Rows />
) : (
<EmptyFolderContainer
headerText={t("ConnectAccounts")}
@ -351,7 +407,8 @@ class ConnectClouds extends React.Component {
{capabilities.map((capability, key) => (
<ServiceItem
capability={capability}
{...imageProps}
onClick={this.onShowService}
className="service-item"
t={t}
key={key}
/>
@ -360,18 +417,42 @@ class ConnectClouds extends React.Component {
</ModalDialog.Body>
</ModalDialog>
)}
{showAccountSettingDialog && (
<ConnectedDialog
visible={showAccountSettingDialog}
onClose={this.onShowAccountSettingDialog}
t={t}
selectedService={selectedService}
item={selectedServiceData}
/>
)}
{showDeleteDialog && (
<ModalDialog
visible={showDeleteDialog}
zIndex={310}
onClose={this.onShowDeleteDialog}
>
<ModalDialog.Header>{t("DeleteThirdParty")}</ModalDialog.Header>
<ModalDialog.Body>{t("DeleteThirdPartyAlert")}</ModalDialog.Body>
<ModalDialog.Footer>
<Button
label={t("SaveButton")}
size="big"
primary
onClick={this.onDeleteThirdParty}
/>
</ModalDialog.Footer>
</ModalDialog>
)}
</>
);
}
}
export default ConnectClouds;
function mapStateToProps(state) {
return {
isAdmin: isAdmin(state),
};
}
export default connect(mapStateToProps, {})(withTranslation()(ConnectClouds));

88
products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedDialog.js
View File

@ -3,11 +3,13 @@ import styled from "styled-components";
import {
ModalDialog,
TextInput,
PasswordInput,
Button,
Checkbox,
Text,
utils,
} from "asc-web-components";
import { saveThirdParty } from "../../../../../store/files/actions";
const { tablet } = utils.device;
@ -24,8 +26,7 @@ const StyledConnectedDialog = styled.div`
}
.dialog-form-text {
line-height: 32px;
width: 160px;
min-width: 110px;
min-width: 160px;
text-align: right;
padding-right: 8px;
@ -37,56 +38,89 @@ const StyledConnectedDialog = styled.div`
`;
const ConnectedDialog = (props) => {
const { onClose, visible, t, selectedService } = props;
const { onClose, visible, t, item } = props;
const { corporate, title, link, auth_key, provider_id, provider_key } = item;
const [urlValue, setUrlValue] = useState("");
const [loginValue, setLoginValue] = useState("");
const [passwordValue, setPasswordValue] = useState("");
const [folderNameValue, setFolderNameValue] = useState("");
const [makeShared, setMakeShared] = useState(false);
const [customerTitle, setCustomerTitleValue] = useState(title);
const [isCorporate, setMakeShared] = useState(!!corporate);
const onChangeUrl = (e) => setUrlValue(e.target.value);
const onChangeLogin = (e) => setLoginValue(e.target.value);
const onChangePassword = (e) => setPasswordValue(e.target.value);
const onChangeFolderName = (e) => setFolderNameValue(e.target.value);
const onChangeMakeShared = (e) => setMakeShared(!makeShared);
const onChangeFolderName = (e) => setCustomerTitleValue(e.target.value);
const onChangeMakeShared = (e) => setMakeShared(!isCorporate);
const onSave = () => {
alert("onSave");
saveThirdParty(
urlValue,
loginValue,
passwordValue,
auth_key,
isCorporate,
customerTitle,
provider_key,
provider_id
);
};
const showUrlField =
selectedService === "WebDav" || selectedService === "SharePoint";
const onReconnect = () => {
window.open(link, title, "width=1020,height=600");
};
const isAccount = !!link;
const showUrlField = title === "WebDav" || title === "SharePoint";
return (
<StyledConnectedDialog>
<ModalDialog visible={visible} zIndex={310} onClose={onClose}>
<ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
<ModalDialog.Body>
{showUrlField && (
{isAccount ? (
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("ConnectionUrl")}</Text>
<TextInput scale value={urlValue} onChange={onChangeUrl} />
<Text className="dialog-form-text">{t("Account")}</Text>
<Button
label={t("Reconnect")}
size="medium"
onClick={onReconnect}
scale
/>
</div>
) : (
<>
{showUrlField && (
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("ConnectionUrl")}</Text>
<TextInput scale value={urlValue} onChange={onChangeUrl} />
</div>
)}
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("Login")}</Text>
<TextInput scale value={loginValue} onChange={onChangeLogin} />
</div>
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("Password")}</Text>
<PasswordInput
hideNewPasswordButton
isDisableTooltip
isTextTooltipVisible
passwordSettings={{ minLength: 0 }}
scale
value={passwordValue}
onChange={onChangePassword}
/>
</div>
</>
)}
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("Login")}</Text>
<TextInput scale value={loginValue} onChange={onChangeLogin} />
</div>
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("Password")}</Text>
<TextInput
scale
value={passwordValue}
onChange={onChangePassword}
/>
</div>
<div className="dialog-form-container">
<Text className="dialog-form-text">{t("ConnectFolderTitle")}</Text>
<TextInput
scale
value={folderNameValue}
value={`${customerTitle} ${t("Directory")}`}
onChange={onChangeFolderName}
/>
</div>
@ -94,7 +128,7 @@ const ConnectedDialog = (props) => {
<Text className="dialog-form-text" />
<Checkbox
label={t("ConnectMakeShared")}
isChecked={makeShared}
isChecked={isCorporate}
onChange={onChangeMakeShared}
/>
</div>

3
products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js
View File

@ -168,8 +168,7 @@ const SectionBodyContent = ({
if (setting === "admin" && isAdmin) content = renderAdminSettings();
if (setting === "common") content = renderCommonSettings();
if (setting === "thirdParty" && enableThirdParty)
content = <ConnectClouds isAdmin={isAdmin} t={t} />;
if (setting === "thirdParty" && enableThirdParty) content = <ConnectClouds />;
return isLoading ? null : (!enableThirdParty && setting === "thirdParty") ||
(!isAdmin && setting === "admin") ? (

8
products/ASC.Files/Client/src/components/pages/Settings/locales/en/translation.json
View File

@ -38,5 +38,11 @@
"Password": "Password",
"ConnectFolderTitle": "Folder title",
"ConnectMakeShared": "Make shared and put into the 'Common' folder",
"ConnectionUrl": "Connection url"
"ConnectionUrl": "Connection url",
"DeleteThirdParty": "Delete third party",
"ThirdPartyInfo": "Change the third party info",
"DeleteThirdPartyAlert": "Are you sure you want to remove the Google directory from the 'Documents' module? This will not affect your google.com account in any way.",
"Account": "Account",
"Reconnect": "Reconnect",
"Directory": "directory"
}

8
products/ASC.Files/Client/src/components/pages/Settings/locales/ru/translation.json
View File

@ -38,5 +38,11 @@
"Password": "Пароль",
"ConnectFolderTitle": "Название папки",
"ConnectMakeShared": "Сделать доступным и поместить в папку 'Общие'",
"ConnectionUrl": "URL-адрес подключения"
"ConnectionUrl": "URL-адрес подключения",
"DeleteThirdParty": "Отключить сторонний ресурс",
"ThirdPartyInfo": "Изменить настройки подключения",
"DeleteThirdPartyAlert": "Вы действительно хотите удалить Каталог Google из модуля 'Документы'? Это никак не повлияет на Ваш аккаунт Google Drive.",
"Account": "Аккаунт",
"Reconnect": "Подключить повторно",
"Directory": "каталог"
}

26
products/ASC.Files/Client/src/store/files/actions.js
View File

@ -612,6 +612,32 @@ export function setEnableThirdParty(data, setting) {
};
}
export function deleteThirdParty(id) {
return files.deleteThirdParty(id);
}
export function saveThirdParty(
url,
login,
password,
token,
isCorporate,
customerTitle,
providerKey,
providerId
) {
return files.saveThirdParty(
url,
login,
password,
token,
isCorporate,
customerTitle,
providerKey,
providerId
);
}
export function setForceSave(data, setting) {
return (dispatch) => {
return files

27
web/ASC.Web.Common/src/api/files/index.js
View File

@ -565,6 +565,33 @@ export function getThirdPartyList() {
return request({ method: "get", url: "files/thirdparty" });
}
export function saveThirdParty(
url,
login,
password,
token,
isCorporate,
customerTitle,
providerKey,
providerId
) {
const data = {
url,
login,
password,
token,
isCorporate,
customerTitle,
providerKey,
providerId,
};
return request({ method: "post", url: "files/thirdparty", data });
}
export function deleteThirdParty(providerId) {
return request({ method: "delete", url: `files/thirdparty/${providerId}` });
}
export function getThirdPartyCapabilities() {
return request({ method: "get", url: "files/thirdparty/capabilities" });
}