Add modal dialog

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js

@@ -1,26 +1,35 @@
 import React from "react";
 import { Box, Text } from "asc-web-components";
+import ConsumerModalDialog from "./modal-dialog";
 
 const ConsumerItem = (props) => {
+
+    const { name, description, dialogVisible, consumers, onModalClose, onToggleClick } = props;
+
     return (
         <>
             <Box displayProp="flex" flexDirection="column" marginProp="16px">
                 <Box displayProp="flex" justifyContent="space-between" widthProp="100%">
                     <Box displayProp="flex">
                         <Text>
-                            {props.name} logo
+                            {name} logo
                         </Text>
                     </Box>
-                    <Box>
+                    <Box onClick={onToggleClick}>
                         toggle
                         </Box>
                 </Box>
                 <Box displayProp="flex" marginProp="10px 10px 10px auto">
                     <Text>
-                        {props.description}
+                        {description}
                     </Text>
                 </Box>
             </Box>
+            {dialogVisible && <ConsumerModalDialog
+                dialogVisible={dialogVisible}
+                onModalClose={onModalClose}
+                consumers={consumers}
+            />}
         </>
     )
 }

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js

@@ -14,7 +14,7 @@ export const consumers = [
     {
         name: "Telegram",
         description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
-        innerDescription: "",
+        innerDescription: "Описание",
         tokens: ["Токен бота", "Имя бота"]
     }
 ]

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modal-dialog.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { ModalDialog, Text, Button, TextInput } from "asc-web-components";
+
+const ConsumerModalDialog = (props) => {
+    const { consumers, name, innerDescription } = props;
+    const getConsumerName = (key) => {
+        return consumers.find((c,i) => i === key).name;
+    }
+    return (
+        <ModalDialog
+            visible={props.dialogVisible}
+            headerContent={
+                `${name}`
+            }
+        bodyContent={[<TextInput placeholder={name} />, <Text>{innerDescription}</Text>]}
+            footerContent={[<Button primary size="big" label="Send" />]}
+            onClose={props.onModalClose}
+        />
+    )
+}
+
+export default ConsumerModalDialog;

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js

@@ -9,33 +9,52 @@ class ThirdPartyServices extends React.Component {
         super(props);
         this.state = {
             consumers: consumers,
+            selectedConsumer: -1,
             dialogVisible: false
         }
     }
 
     onToggleClick = () => {
-        this.setState( {
+        this.setState({
             dialogVisible: true
         })
     }
 
+    onModalClose = () => {
+        this.setState({
+            dialogVisible: false
+        })
+    }
+
     titleDescription = "Ключи авторизации позволяют подключить портал ONLYOFFICE к сторонним сервисам, таким как Twitter, Facebook, Dropbox и т.д. Подключите портал к Facebook, Twitter или Linkedin, если Вы не хотите каждый раз при входе вводить свои учетные данные на портале. Привяжите портал к таким сервисам, как Dropbox, OneDrive и т.д. чтобы перенести документы из всех этих хранилищ в модуль Документы ONLYOFFICE."
 
     render() {
+
+        const { consumers, selectedConsumer, dialogVisible } = this.state;
+        const { titleDescription, onModalClose, onToggleClick } = this;
+
         return (
             <>
                 <Box displayProp="flex" flexDirection="column">
                     <Box marginProp="10px">
-                        <Text>{this.titleDescription}</Text>
+                        <Text>{titleDescription}</Text>
                     </Box>
                     <Box displayProp="flex">
                         <Box displayProp="flex" widthProp="100%">
-                            {this.state.consumers
-                                .map((c) =>
+                            {consumers
+                                .map((consumer, i) =>
                                     <ConsumerItem
-                                        name={c.name}
-                                        description={c.description}
-                                        onToggleClick={this.onToggleClick} />
+                                        key={i}
+                                        name={consumer.name}
+                                        description={consumer.description}
+
+                                        consumers={consumers}
+                                        dialogVisible={dialogVisible}
+                                        selectedConsumer={selectedConsumer}
+
+                                        onModalClose={onModalClose}
+                                        onToggleClick={onToggleClick}
+                                    />
                                 )}
                         </Box>
                     </Box>