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

Web: Settings: Backup: Added third party storage component.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-05-06 14:42:31 +03:00
parent 2ecf3c8f9f
commit 6aca6e9944
3 changed files with 140 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/asc-web-common/api/settings/index.js
View File

@ -250,3 +250,11 @@ export function getCommonThirdPartyList() {
};
return request(options);
}
export function getBackupStorage() {
const options = {
method: "get",
url: "/settings/storage/backup",
};
return request(options);
}

38
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/manual-backup.js
View File

@ -7,13 +7,12 @@ import Button from "@appserver/components/button";
import Checkbox from "@appserver/components/checkbox";
import { inject, observer } from "mobx-react";
import FileInputWithFolderPath from "@appserver/components/file-input-with-folder-path";
import ThirdPartyModule from "./sub-components/thirdPartyModule";
import OperationsDialog from "files/OperationsDialog";
import { getBackupProgress, startBackup } from "@appserver/common/api/portal";
import toastr from "@appserver/components/toast/toastr";
import { toast } from "react-toastify";
import ThirdPartyModule from "./sub-components/thirdPartyModule";
import DocumentsModule from "./sub-components/documentsModule";
import ThirdPartyStorageModule from "./sub-components/thirdPartyStorageModule";
const StyledComponent = styled.div`
${commonSettingsStyles}
@ -223,38 +222,7 @@ class ManualBackup extends React.Component {
setInterval={this.setInterval}
/>
<div className="category-item-wrapper temporary-storage">
<div className="category-item-heading">
<Text className="inherit-title-link header">
{t("ThirdPartyStorage")}
</Text>
</div>
<Text className="category-item-description">
{t("ThirdPartyStorageDescription")}
</Text>
<Text className="category-item-description note_description">
{t("ThirdPartyStorageNoteDescription")}
</Text>
{/* <div className="backup-include_mail">
<Checkbox
name={"backupMailThirdPartyStorage"}
isChecked={backupMailThirdPartyStorage}
label={t("IncludeMail")}
onChange={this.onClickCheckbox}
/>
</div> */}
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={() => console.log("click")}
primary
isDisabled={!maxProgress}
size="medium"
tabIndex={10}
/>
</div>
</div>
<ThirdPartyStorageModule maxProgress={maxProgress} />
</StyledComponent>
);
}

129
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/thirdPartyStorageModule.js Normal file
View File

@ -0,0 +1,129 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import Text from "@appserver/components/text";
import { inject, observer } from "mobx-react";
import Box from "@appserver/components/box";
import Link from "@appserver/components/link";
import ComboBox from "@appserver/components/combobox";
import { getBackupStorage } from "@appserver/common/api/settings";
class ThirdPartyStorageModule extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
availableOptions: [],
availableStorage: [],
selectedOption: "",
isLoading: false,
};
}
componentDidMount() {
this.setState(
{
isLoading: true,
},
function () {
getBackupStorage()
.then((storageBackup) => this.getOptions(storageBackup))
.finally(() => this.setState({ isLoading: false }));
}
);
}
getOptions = (storageBackup) => {
let options = [];
let availableStorage = [];
//debugger;
for (let item = 0; item < storageBackup.length; item++) {
let obj = {
[storageBackup[item].title]: storageBackup[item].isSet,
};
let titleObj = {
key: item,
label: storageBackup[item].title,
disabled: false,
};
options.push(titleObj);
availableStorage.push(obj);
if (storageBackup[item].id === "GoogleCloud") {
this.setState({
selectedOption: storageBackup[item].title,
});
}
}
this.setState({
availableOptions: options,
availableStorage: availableStorage,
});
};
render() {
const { maxProgress, t, helpUrlCreatingBackup, storageBackup } = this.props;
const {
availableOptions,
availableStorage,
selectedOption,
isLoading,
} = this.state;
console.log("availableOptions", availableOptions);
console.log("availableStorage", availableStorage);
return isLoading ? (
<></>
) : (
<div className="category-item-wrapper temporary-storage">
<div className="category-item-heading">
<Text className="inherit-title-link header">
{t("ThirdPartyStorage")}
</Text>
</div>
<Text className="category-item-description">
{t("ThirdPartyStorageDescription")}
</Text>
<Text className="category-item-description note_description">
{t("ThirdPartyStorageNoteDescription")}
</Text>
<ComboBox
options={availableOptions}
selectedOption={{ key: 0, label: selectedOption }}
onSelect={() => ""}
isDisabled={false}
noBorder={false}
scaled={true}
scaledOptions={true}
dropDownMaxHeight={300}
className="team-template_text-input"
/>
<Box marginProp="16px 0 16px 0">
<Link
color="#316DAA"
target="_blank"
isHovered={true}
href={helpUrlCreatingBackup}
>
{t("LearnMore")}
</Link>
</Box>
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={() => console.log("click")}
primary
isDisabled={!maxProgress}
size="medium"
tabIndex={10}
/>
</div>
</div>
);
}
}
export default inject(({ auth }) => {
const { helpUrlCreatingBackup } = auth.settingsStore;
return {
helpUrlCreatingBackup,
};
})(withTranslation("Settings")(observer(ThirdPartyStorageModule)));