Refactoring
This commit is contained in:
parent
657901777f
commit
1ff8b7b3a1
@ -103,70 +103,59 @@ class ConsumerModalDialog extends React.Component {
|
||||
color="#316DAA"
|
||||
isHovered={false}
|
||||
target="_blank"
|
||||
href={"http://support.onlyoffice.com/"}
|
||||
href="http://support.onlyoffice.com/"
|
||||
>
|
||||
Support Team
|
||||
</Link>
|
||||
</Trans>
|
||||
);
|
||||
|
||||
const getConsumerData = (key) => {
|
||||
return consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)[key];
|
||||
}
|
||||
|
||||
const getConsumerName = () => {
|
||||
return consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
.name;
|
||||
};
|
||||
const getInnerDescription = () => {
|
||||
return consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
.instruction;
|
||||
};
|
||||
const getInputFields = () => {
|
||||
return consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
.props
|
||||
.map((prop, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<Box
|
||||
displayProp="flex"
|
||||
flexDirection="column"
|
||||
marginProp="0 0 16px 0"
|
||||
>
|
||||
<Box marginProp="0 0 4px 0">
|
||||
<Text isBold={true}>
|
||||
{prop.title}:
|
||||
const setConsumerData = (key) => {
|
||||
return key === "props"
|
||||
?
|
||||
consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)[key]
|
||||
.map((prop, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<Box
|
||||
displayProp="flex"
|
||||
flexDirection="column"
|
||||
marginProp="0 0 16px 0"
|
||||
>
|
||||
<Box marginProp="0 0 4px 0">
|
||||
<Text isBold={true}>
|
||||
{prop.title}:
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput
|
||||
scale
|
||||
name={prop.name}
|
||||
placeholder={prop.title}
|
||||
isAutoFocussed={i === 0 && true}
|
||||
tabIndex={1}
|
||||
value={Object.values(this.state)[i]}
|
||||
isDisabled={isLoading}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput
|
||||
scale
|
||||
name={prop.name}
|
||||
placeholder={prop.title}
|
||||
isAutoFocussed={i === 0 && true}
|
||||
tabIndex={1}
|
||||
value={Object.values(this.state)[i]}
|
||||
isDisabled={isLoading}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
));
|
||||
</React.Fragment>
|
||||
))
|
||||
:
|
||||
consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)[key]
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalDialogContainer>
|
||||
<ModalDialog
|
||||
visible={dialogVisible}
|
||||
headerContent={`${getConsumerName()}`}
|
||||
headerContent={`${setConsumerData("name")}`}
|
||||
bodyContent={[
|
||||
<Text>{getInnerDescription()}</Text>,
|
||||
<Text>{setConsumerData("instruction")}</Text>,
|
||||
<Text>{bodyDescription}</Text>,
|
||||
<React.Fragment>{getInputFields()}</React.Fragment>,
|
||||
<React.Fragment>{setConsumerData("props")}</React.Fragment>,
|
||||
<Text>{bottomDescription}</Text>,
|
||||
]}
|
||||
footerContent={[
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Box, Text, Link } from "asc-web-components";
|
||||
import { Box, Text, Link, toastr } from "asc-web-components";
|
||||
import { utils } from "asc-web-components";
|
||||
import ConsumerItem from "./sub-components/consumerItem";
|
||||
import ConsumerModalDialog from "./sub-components/consumerModalDialog";
|
||||
@ -91,13 +91,45 @@ class ThirdPartyServices extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
updateConsumerValues = (obj, isFill) => {
|
||||
this.onChangeLoading(true);
|
||||
|
||||
const prop = [];
|
||||
|
||||
let i = 0;
|
||||
let objLength = Object.keys(obj.props).length;
|
||||
for (i = 0; i < objLength; i++) {
|
||||
prop.push({
|
||||
name: isFill ? Object.keys(obj)[i] : obj.props[i].name,
|
||||
value: isFill ? Object.values(obj)[i] : ""
|
||||
});
|
||||
}
|
||||
const data = {
|
||||
name: isFill ? this.state.selectedConsumer : obj.name,
|
||||
props: prop,
|
||||
};
|
||||
this.props.sendConsumerNewProps(data)
|
||||
.then(() => {
|
||||
this.onChangeLoading(false);
|
||||
isFill
|
||||
?
|
||||
toastr.success("Consumer properties successfully update")
|
||||
:
|
||||
toastr.success("Consumer successfully deactivated")
|
||||
})
|
||||
.catch((error) => {
|
||||
this.onChangeLoading(false);
|
||||
toastr.error(error);
|
||||
})
|
||||
.finally(isFill && this.onModalClose());
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t, i18n, consumers, sendConsumerNewProps } = this.props;
|
||||
const { selectedConsumer, dialogVisible, isLoading } = this.state;
|
||||
const {
|
||||
onModalClose,
|
||||
onModalOpen,
|
||||
onToggleClick,
|
||||
setConsumer,
|
||||
onChangeLoading,
|
||||
} = this;
|
||||
@ -145,7 +177,6 @@ class ThirdPartyServices extends React.Component {
|
||||
onChangeLoading={onChangeLoading}
|
||||
onModalClose={onModalClose}
|
||||
onModalOpen={onModalOpen}
|
||||
onToggleClick={onToggleClick}
|
||||
setConsumer={setConsumer}
|
||||
sendConsumerNewProps={sendConsumerNewProps}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user