Refactoring
This commit is contained in:
Vladislav Makhov
parent
f3991a0900
commit
e67148864d
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import { Box, Text, ToggleButton, Icons } from "asc-web-components";
|
||||
import ConsumerModalDialog from "./modal-dialog";
|
||||
import ConsumerModalDialog from "./consumerModalDialog";
|
||||
|
||||
class ConsumerItem extends React.Component {
|
||||
constructor(props) {
|
||||
@ -19,7 +19,7 @@ class ConsumerItem extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { name, description, dialogVisible, consumers, onModalClose, onToggleClick, selectedConsumer } = this.props;
|
||||
const { dialogVisible, consumer, consumers, onModalClose, selectedConsumer } = this.props;
|
||||
const { toggleActive } = this.state;
|
||||
const { onModalButtonClick } = this;
|
||||
|
||||
@ -28,12 +28,13 @@ class ConsumerItem extends React.Component {
|
||||
<Box displayProp="flex" flexDirection="column">
|
||||
<Box displayProp="flex" justifyContent="space-between" widthProp="100%" marginProp="21px 0 0 0">
|
||||
<div>
|
||||
{React.createElement(Icons[`${name}Icon`], { size: "scale" })}
|
||||
<Text>{consumer.name}</Text>
|
||||
{/* {React.createElement(Icons[`${name}Icon`], { size: "scale" })} */}
|
||||
</div>
|
||||
</Box>
|
||||
<Box displayProp="flex" marginProp="21px 0 0 0">
|
||||
<Text>
|
||||
{description}
|
||||
{consumer.instruction}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -28,20 +28,20 @@ const ConsumerModalDialog = (props) => {
|
||||
return consumers.find((consumer) => consumer.name === selectedConsumer).name;
|
||||
}
|
||||
const getInnerDescription = () => {
|
||||
return consumers.find((consumer) => consumer.name === selectedConsumer).innerDescription;
|
||||
return consumers.find((consumer) => consumer.name === selectedConsumer).instruction;
|
||||
}
|
||||
const getInputFields = () => {
|
||||
return consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
.tokens
|
||||
.map((token, i) =>
|
||||
.props
|
||||
.map((prop, i) =>
|
||||
<React.Fragment key={i}>
|
||||
<Box displayProp="flex" flexDirection="column">
|
||||
<Box>
|
||||
<Text isBold={true}>{token}:</Text>
|
||||
<Text isBold={true}>{prop.title}:</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput placeholder={token} isAutoFocussed={i === 0 && true} />
|
||||
<TextInput placeholder={prop.title} isAutoFocussed={i === 0 && true} />
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
@ -6,7 +6,7 @@ const StyledToggle = styled(ToggleButton)`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
class ConsumerItemToggle extends React.Component {
|
||||
class ConsumerToggle extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -22,33 +22,32 @@ class ConsumerItemToggle extends React.Component {
|
||||
})
|
||||
// TODO: api -> service off -> toastr
|
||||
}
|
||||
|
||||
// this.setState({
|
||||
// toggleActive: true
|
||||
// });
|
||||
else {
|
||||
this.props.onToggleClick();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const { name, onModalOpen } = this.props;
|
||||
const { name, onModalOpen, canSet } = this.props;
|
||||
const { toggleActive } = this.state;
|
||||
const { onToggleClick } = this;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box marginProp="28px 0 0 0">
|
||||
<StyledToggle onChange={onToggleClick}
|
||||
isChecked={toggleActive} />
|
||||
<StyledToggle
|
||||
onChange={onToggleClick}
|
||||
isDisabled={!canSet}
|
||||
isChecked={!canSet ? true : toggleActive}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ConsumerItemToggle;
|
||||
export default ConsumerToggle;
|
||||
@ -1,26 +0,0 @@
|
||||
export const consumers = [
|
||||
{
|
||||
name: "Amazon",
|
||||
description: "Подключите Amazon AWS S3 для резервного копирования и хранения данных портала.",
|
||||
innerDescription: "Добавив Amazon AWS S3, вы сможете использовать его для создания резервных копий портала, чтобы предотвратить потерю данных. Также используйте его для хранения данных и статического содержимого портала.",
|
||||
tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
|
||||
},
|
||||
{
|
||||
name: "Bitly",
|
||||
description: "Подключите это приложение для сокращения пригласительных ссылок на портал и ссылок для доступа к файлам в модуле \"Документы\" с помощью сервиса Bitly.",
|
||||
innerDescription: "Добавив сервис Bitly, Вы будуте получать сокращенные ссылки для приглашения новых пользователей на портал ONLYOFFICE и сокращенные ссылки для документов в модуле \"Документы\", к которым был предоставлен доступ для внешних пользователей.",
|
||||
tokens: ["login", "apiKey"]
|
||||
},
|
||||
{
|
||||
name: "Box",
|
||||
description: "Подключите приложение для управления файлами и папками Box.",
|
||||
innerDescription: "Добавив приложение сервиса Box, Вы сможете подключить свой аккаунт Box в модуле \"Документы\". Это позволит загружать и создавать новые файлы в Box, редактировать существующие, копировать и удалять их, предоставлять доступ к файлам и папкам для пользователей портала ONLYOFFICE.",
|
||||
tokens: ["Box ID", "Ключ Box"]
|
||||
},
|
||||
{
|
||||
name: "Telegram",
|
||||
description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
|
||||
innerDescription: "Добавив приложение сервиса Telegram Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Telegram.",
|
||||
tokens: ["Токен бота", "Имя бота"]
|
||||
}
|
||||
]
|
||||
@ -1,11 +1,12 @@
|
||||
import React from "react";
|
||||
import { consumers } from "./sub-components/consumers";
|
||||
import { connect } from "react-redux";
|
||||
import { getConsumers } from '../../../../../store/settings/actions';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Box, Text, Link } from "asc-web-components";
|
||||
import ConsumerItem from "./sub-components/consumerItem";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { connect } from "react-redux";
|
||||
import ConsumerItemToggle from "./sub-components/consumerItemToggle";
|
||||
import styled from "styled-components";
|
||||
import ConsumerToggle from "./sub-components/consumerToggle";
|
||||
|
||||
const RootContainer = styled(Box)`
|
||||
|
||||
@ -31,12 +32,16 @@ class ThirdPartyServices extends React.Component {
|
||||
document.title = `${t("ThirdPartyAuthorization")} – ${t("OrganizationName")}`;
|
||||
|
||||
this.state = {
|
||||
consumers: consumers,
|
||||
selectedConsumer: "",
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { getConsumers } = this.props;
|
||||
getConsumers();
|
||||
}
|
||||
|
||||
onModalOpen = () => {
|
||||
this.setState({
|
||||
dialogVisible: true,
|
||||
@ -54,8 +59,8 @@ class ThirdPartyServices extends React.Component {
|
||||
|
||||
render() {
|
||||
|
||||
const { t } = this.props;
|
||||
const { consumers, selectedConsumer, dialogVisible } = this.state;
|
||||
const { t, consumers } = this.props;
|
||||
const { selectedConsumer, dialogVisible } = this.state;
|
||||
const { titleDescription, onModalOpen, onModalClose } = this;
|
||||
|
||||
const consumerRefs = consumers.reduce((acc, consumer) => {
|
||||
@ -102,16 +107,17 @@ class ThirdPartyServices extends React.Component {
|
||||
<Box displayProp="flex" className="consumer-item-container">
|
||||
<ConsumerItem
|
||||
ref={el => (consumerRefs[i] = el)}
|
||||
name={consumer.name}
|
||||
description={consumer.description}
|
||||
consumer={consumer}
|
||||
consumers={consumers}
|
||||
|
||||
dialogVisible={dialogVisible}
|
||||
selectedConsumer={selectedConsumer}
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
<ConsumerItemToggle
|
||||
<ConsumerToggle
|
||||
ref={el => (toggleRefs[i] = el)}
|
||||
name={consumer.name}
|
||||
canSet={consumer.canSet}
|
||||
onToggleClick={() => {
|
||||
this.setState({ selectedConsumer: consumer.name })
|
||||
onModalOpen()
|
||||
@ -127,4 +133,9 @@ class ThirdPartyServices extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(null, null)(withTranslation()(ThirdPartyServices));
|
||||
const mapStateToProps = (state) => {
|
||||
const { consumers } = state.settings.integration;
|
||||
return { consumers }
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, { getConsumers })(withTranslation()(ThirdPartyServices));
|
||||
Loading…
Reference in New Issue
Block a user