fixed routing SettingsTree

products/ASC.Files/Client/src/App.js

@@ -4,11 +4,11 @@ import { Router, Switch, Redirect } from "react-router-dom";
 import { Loader } from "asc-web-components";
 import Home from "./components/pages/Home";
 import DocEditor from "./components/pages/DocEditor";
-import Settings from "./components/pages/Settings";
 
 import { history, PrivateRoute, PublicRoute, Login, Error404, StudioLayout, Offline } from "asc-web-common";
 
 const VersionHistory = React.lazy(() => import('./components/pages/VersionHistory'));
+const Settings = React.lazy(() => import('./components/pages/Settings'));
 
 const withStudioLayout = Component => props => <StudioLayout><Component {...props} /></StudioLayout>;
 

products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import { TreeMenu, TreeNode, Icons } from "asc-web-components";
 import styled from "styled-components";       
 import { history, utils } from "asc-web-common";
@@ -32,6 +33,13 @@ class PureTreeSettings extends React.Component {
     super(props);
   }
 
+  componentDidMount() {
+    const { match, setSelectedSetting, setExpandSettingsTree } = this.props;
+    const { setting } = match.params;
+    setSelectedSetting([setting]);
+    setExpandSettingsTree(['settings']);
+  }
+
   switcherIcon = (obj) => {
     if (obj.isLeaf) {
       return null;
@@ -48,15 +56,21 @@ class PureTreeSettings extends React.Component {
     const path = section[0];
 
     if(path === 'settings') {
-      setSelectedSetting(['common-settings']);
+      setSelectedSetting(['common']);
       setExpandSettingsTree(section);
-      return history.push('/products/files/settings/common-settings');
+      return history.push('/products/files/settings/common');
     } 
     
     setSelectedSetting(section);
     return history.push(`/products/files/settings/${path}`);    
   }
 
+  onExpand = (data) => {
+    const { setExpandSettingsTree, setSelectedSetting } = this.props;
+    setSelectedSetting(['common']);
+    setExpandSettingsTree(data);
+  }
+
   renderTreeNode = () => {
     const { t } = this.props;
     return (
@@ -70,14 +84,14 @@ class PureTreeSettings extends React.Component {
         <TreeNode
           className="settings-node"
           id='common-settings'
-          key='common-settings'
+          key='common'
           isLeaf={true}
           title={t('treeSettingsCommonSettings')}
         />
         <TreeNode
           className="settings-node"
           id='admin-settings'
-          key='admin-settings'
+          key='admin'
           isLeaf={true}
           title={t('treeSettingsAdminSettings')}
         />
@@ -85,7 +99,7 @@ class PureTreeSettings extends React.Component {
         selectable={true}
           className="settings-node"
           id='connected-clouds'
-          key='connected-clouds'
+          key='thirdParty'
           isLeaf={true}
           title={t('treeSettingsConnectedCloud')}
         />
@@ -109,7 +123,7 @@ class PureTreeSettings extends React.Component {
         switcherIcon={this.switcherIcon}
         onSelect={this.onSelect}
         showIcon={true}
-        onExpand={() => console.log('expand')}
+        onExpand={this.onExpand}
       >
         {nodes}
       </StyledTreeMenu>
@@ -143,4 +157,4 @@ export default connect(
   mapStateToProps, { 
     setSelectedSetting,
     setExpandSettingsTree 
-  })(TreeSettings);
+  })(withRouter(TreeSettings));

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

@@ -24,6 +24,10 @@ class SectionBodyContent extends React.Component {
     super(props);
   }
 
+  componentDidMount() {
+    this.props.onLoading(false);
+  }
+
   renderAdminSettings = () => {
     const {
       setting,
@@ -46,7 +50,7 @@ class SectionBodyContent extends React.Component {
         <ToggleButton
           isDisabled={true}
           className="toggle-btn"
-          label={t('thirdParty')}
+          label={t('thirdPartyBtn')}
           onChange={(e)=>console.log(e)}
           isChecked={thirdParty}
         />
@@ -130,11 +134,11 @@ class SectionBodyContent extends React.Component {
     const { setting } = this.props;
     let content;
 
-    if(setting === 'admin-settings')
+    if(setting === 'admin')
       content = this.renderAdminSettings();
-    if(setting === 'common-settings') 
+    if(setting === 'common') 
       content = this.renderCommonSettings();
-    if(setting === 'connected-clouds')
+    if(setting === 'thirdParty')
       content = this.renderAdminSettings();
 
     return content;

products/ASC.Files/Client/src/components/pages/Settings/index.js

@@ -24,6 +24,7 @@ class PureSettings extends React.Component {
     super(props)
 
     this.state = {
+      isLoading: false,
       intermediateVersion: false,
       thirdParty: false,
       originalCopy: false,
@@ -36,8 +37,13 @@ class PureSettings extends React.Component {
     }
   }
 
+  onLoading = status => {
+    console.log(status)
+    this.setState({ isLoading: status });
+  };
+
   render() {
-    console.log('render settings');
+    console.log('Settings render()');
     const { 
       intermediateVersion,
       thirdParty,
@@ -59,11 +65,14 @@ class PureSettings extends React.Component {
         </PageLayout.ArticleHeader>
 
         <PageLayout.ArticleMainButton>
-          <ArticleMainButtonContent />
+          <ArticleMainButtonContent onLoading={this.onLoading} />
         </PageLayout.ArticleMainButton>
 
         <PageLayout.ArticleBody>
-          <ArticleBodyContent />
+          <ArticleBodyContent 
+            onLoading={this.onLoading}
+            isLoading={this.state.isLoading}
+          />
         </PageLayout.ArticleBody>
 
         <PageLayout.SectionHeader>
@@ -83,6 +92,7 @@ class PureSettings extends React.Component {
             updateOrCreate={updateOrCreate}
             keepIntermediate={keepIntermediate}
             t={t}
+            onLoading={this.onLoading}
             isCheckedThirdParty={this.isCheckedThirdParty}
             isCheckedIntermediate={this.isCheckedIntermediate}
           />

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

@@ -4,12 +4,12 @@
   "treeSettingsAdminSettings": "Admin Settings",
   "treeSettingsConnectedCloud": "Connected Clouds",
 
-  "common-settings": "Common Settings",
-  "admin-settings": "Admin Settings",
-  "connected-clouds": "Connected Clouds",
+  "common": "Common Settings",
+  "admin": "Admin Settings",
+  "thirdParty": "Connected Clouds",
 
   "intermediateVersion": "Keep all saved intermediate versions",
-  "thirdParty": "Allow users to connect third-party storages",
+  "thirdPartyBtn": "Allow users to connect third-party storages",
 
   "originalCopy": "Save the file copy in the original format as well",
   "displayNotification": "Display notification when moving the element to the trash",

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

@@ -4,12 +4,12 @@
   "treeSettingsAdminSettings": "Настройки администратора",
   "treeSettingsConnectedCloud": "Подключенные облака",
 
-  "common-settings": "Общие Настройки",
-  "admin-settings": "Настройки администратора",
-  "connected-clouds": "Подключенные облака",
+  "common": "Общие Настройки",
+  "admin": "Настройки администратора",
+  "thirdParty": "Подключенные облака",
 
   "intermediateVersion": "Хранить все сохраненные промежуточные версии",
-  "thirdParty": "Разрешить пользователям подключать сторонние хранилища",
+  "thirdPartyBtn": "Разрешить пользователям подключать сторонние хранилища",
   
   "originalCopy": "Сохранять также копию файла в исходном формате",
   "displayNotification": "Показывать оповещение при перемещении элемента в корзину",