added Routing, refactoring

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

@@ -22,7 +22,7 @@ const App = ({ settings }) => {
         >
           <Switch>
             <Redirect exact from="/" to={`${homepage}`} />
-            <PrivateRoute exact path={[homepage, `${homepage}/filter`]} component={withStudioLayout(Home)} />
+            <PrivateRoute exact path={[homepage, `${homepage}/filter`, `${homepage}/settings/:setting`]} component={withStudioLayout(Home)} />
             <PrivateRoute exact path={`${homepage}/doceditor`} component={DocEditor} />
             <PrivateRoute exact path={`${homepage}/:fileId/history`} component={withStudioLayout(VersionHistory)} />
             <PublicRoute exact path={["/login","/login/error=:error", "/login/confirmed-email=:confirmedEmail"]} component={Login} />

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

@@ -1,10 +1,16 @@
 import React from "react";
-import { TreeMenu, TreeNode, Icons, toastr, utils, Badge } from "asc-web-components";
+import { TreeMenu, TreeNode, Icons } from "asc-web-components";
 import styled from "styled-components";       
-import { api, constants } from "asc-web-common";
-const { files } = api;
-const { FolderType, ShareAccessRights } = constants;
+import { history, utils } from "asc-web-common";
+import { withTranslation, I18nextProvider } from "react-i18next";
+import { createI18N } from "../../../helpers/i18n";
 
+const i18n = createI18N({
+  page: "SettingsTree",
+  localesPath: "pages/Settings"
+})
+
+const { changeLanguage } = utils;
 
 const StyledTreeMenu = styled(TreeMenu)`
   margin-top: 20px !important;
@@ -17,16 +23,12 @@ const StyledTreeMenu = styled(TreeMenu)`
     background: #DFE2E3 !important;
   }
 
-  .rc-tree-switcher.rc-tree-switcher-noop {
-    visibility: hidden;
-  }
-
   .settings-node {
-    margin-left: 9px !important;
+    margin-left: 8px !important;
   }
 `;
 
-class TreeSettings extends React.Component {
+class PureTreeSettings extends React.Component {
   constructor(props) {
     super(props);
 
@@ -36,6 +38,9 @@ class TreeSettings extends React.Component {
   }
 
   switcherIcon = (obj) => {
+    if (obj.isLeaf) {
+      return null;
+    }
     if(obj.expanded) {
       return <Icons.ExpanderDownIcon size="scale" isfill color="dimgray" />;
     } else {
@@ -43,8 +48,9 @@ class TreeSettings extends React.Component {
     }
   }
 
-  onSelect = (e, r) => {
-    console.log(e, r)
+  onSelect = (section) => {
+    const path = section[0];
+    return history.push(`/products/files/settings/${path}`);
   }
 
   renderTreeNode = () => {
@@ -53,28 +59,31 @@ class TreeSettings extends React.Component {
       <TreeNode
         id="settings"
         key="settings"
-        title={t('settingsMenuTitle')}
+        title={t('treeSettingsMenuTitle')}
+        isLeaf={false}
         icon={<Icons.SettingsIcon size="scale" isfill color="dimgray" />}
       >
         <TreeNode
           className="settings-node"
           id='common-settings'
           key='common-settings'
-          title={t('settingCommonSettings')}
-
-        ></TreeNode>
+          isLeaf={true}
+          title={t('treeSettingsCommonSettings')}
+        />
         <TreeNode
           className="settings-node"
           id='admin-settings'
           key='admin-settings'
-          title={t('settingsAdminSettings')}
-        ></TreeNode>
+          isLeaf={true}
+          title={t('treeSettingsAdminSettings')}
+        />
         <TreeNode
           className="settings-node"
-          id='connected-cloud'
-          key='connected-cloud'
-          title={t('settingsConnectedCloud')}
-        ></TreeNode>
+          id='connected-clouds'
+          key='connected-clouds'
+          isLeaf={true}
+          title={t('treeSettingsConnectedCloud')}
+        />
       </TreeNode>
     );
   }
@@ -86,11 +95,12 @@ class TreeSettings extends React.Component {
 
     return (
       <StyledTreeMenu
+        defaultExpandParent={false}
         className="settings-tree-menu"
         switcherIcon={this.switcherIcon}
         onSelect={this.onSelect}
-        onClick={()=>console.log('111')}
         showIcon={true}
+        onExpand={() => console.log('expand')}
       >
         {nodes}
       </StyledTreeMenu>
@@ -98,4 +108,15 @@ class TreeSettings extends React.Component {
   }
 }
 
+const TreeSettingsContainer = withTranslation()(PureTreeSettings);
+
+const TreeSettings = props => {
+  changeLanguage(i18n);
+  return (
+    <I18nextProvider i18n={i18n}>
+      <TreeSettingsContainer { ...props } />
+    </I18nextProvider>
+  );
+}
+
 export default TreeSettings;

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { toastr, utils } from "asc-web-components";
-import { withTranslation, I18nextProvider } from "react-i18next";
 import TreeFolders from "./TreeFolders";
 import TreeSettings from './TreeSettings';
 import {
@@ -15,12 +14,8 @@ import {
 import store from "../../../store/store";
 import isEqual from "lodash/isEqual";
 import { NewFilesPanel } from "../../panels";
-import i18n from "../i18n";
-import { utils as commonUtils } from 'asc-web-common';
 
-const { changeLanguage } = commonUtils;
-
-class PureArticleBodyContent extends React.Component {
+class ArticleBodyContent extends React.Component {
   state = {
     expandedKeys: this.props.filter.treeFolders,
     data: this.props.data,
@@ -59,7 +54,7 @@ class PureArticleBodyContent extends React.Component {
   }
 
   onSelect = data => {
-    const { selectedKeys, filter, onLoading } = this.props;
+    const { selectedKeys, filter, onLoading, setSettingsPath } = this.props;
     if (selectedKeys[0] !== data[0]) {
       onLoading(true);
       const newFilter = filter.clone();
@@ -104,7 +99,6 @@ class PureArticleBodyContent extends React.Component {
       isShare,
       setDragging,
       onTreeDrop,
-      t
     } = this.props;
 
     const { showNewFilesPanel, expandedKeys, newFolderId } = this.state;
@@ -148,19 +142,12 @@ class PureArticleBodyContent extends React.Component {
           onBadgeClick={this.onShowNewFilesPanel}
           onTreeDrop={onTreeDrop}
         />
-        <TreeSettings t={t}/>
+        <TreeSettings/>
       </>
     );
   }
 }
 
-const ArticleBodyContentContainer = withTranslation()(PureArticleBodyContent);
-
-const ArticleBodyContent = (props) => {
-  changeLanguage(i18n);
-  return (<I18nextProvider i18n={i18n}><ArticleBodyContentContainer {...props} /></I18nextProvider>);
-};
-
 function mapStateToProps(state) {
   const { treeFolders, selectedFolder, filter, selection, dragging, updateTreeNew } = state.files;
   const currentFolderId = selectedFolder.id.toString();

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

@@ -6,10 +6,5 @@
   "NewFolder": "New Folder",
   "UploadFiles": "Upload files",
   "UploadFolder": "Upload folder",
-  "UploadingLabel": "Uploading files: {{file}} of {{totalFiles}}",
-
-  "settingsMenuTitle": "Settings",
-  "settingCommonSettings": "Common Settings",
-  "settingsAdminSettings": "Admin Settings",
-  "settingsConnectedCloud": "Connected Clouds"
+  "UploadingLabel": "Uploading files: {{file}} of {{totalFiles}}"
 }

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

@@ -6,10 +6,5 @@
   "NewFolder": "Новая папка",
   "UploadFiles": "Загрузить файлы",
   "UploadFolder": "Загрузить папку",
-  "UploadingLabel": "Загружено файлов: {{file}} из {{totalFiles}}",
-
-  "settingsMenuTitle": "Настройки",
-  "settingCommonSettings": "Общие настройки",
-  "settingsAdminSettings": "Настройки администратора",
-  "settingsConnectedCloud": "Подключенные облака"
+  "UploadingLabel": "Загружено файлов: {{file}} из {{totalFiles}}"
 }

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { withRouter } from "react-router";
+import { withRouter, Route, Switch } from "react-router";
 import { RequestLoader, Checkbox, toastr } from "asc-web-components";
-import { PageLayout, utils } from "asc-web-common";
+import { PageLayout, utils, history, PrivateRoute } from "asc-web-common";
 import { withTranslation, I18nextProvider } from "react-i18next";
 import {
   ArticleBodyContent,
@@ -16,6 +16,7 @@ import {
   SectionHeaderContent,
   SectionPagingContent
 } from "./Section";
+import Settings from '../Settings';
 import {
   clearProgressData,
   deselectFile,
@@ -399,6 +400,10 @@ class PureHome extends React.Component {
     }
   }
 
+  onSelectSettings = (data) => {
+    console.log(data);
+  } 
+
   render() {
     const {
       isHeaderVisible,
@@ -478,8 +483,9 @@ class PureHome extends React.Component {
               onTreeDrop={this.onDrop}
             />
           </PageLayout.ArticleBody>
-
             <PageLayout.SectionHeader>
+              <Switch>
+                <PrivateRoute path="/products/files/filter" component={() => (
                   <SectionHeaderContent
                     isHeaderVisible={isHeaderVisible}
                     isHeaderIndeterminate={isHeaderIndeterminate}
@@ -491,13 +497,22 @@ class PureHome extends React.Component {
                     isLoading={isLoading}
                     loopFilesOperations={this.loopFilesOperations}
                   />
+                )} />
+              </Switch>
             </PageLayout.SectionHeader>
             
             <PageLayout.SectionFilter>
+              <Switch>
+                <PrivateRoute path="/products/files/filter" component={() => (
                   <SectionFilterContent  onLoading={this.onLoading} />
+                )} />
+              </Switch>
             </PageLayout.SectionFilter>
             
             <PageLayout.SectionBody>
+              <Switch>
+                <PrivateRoute exact path="/products/files/settings/:setting" component={Settings} />
+                <PrivateRoute path="/products/files/filter" component={() => (
                   <SectionBodyContent
                     selected={selected}
                     isLoading={isLoading}
@@ -506,6 +521,8 @@ class PureHome extends React.Component {
                     loopFilesOperations={this.loopFilesOperations}
                     onDropZoneUpload={this.onDrop}
                   />
+                )} />
+              </Switch>
             </PageLayout.SectionBody>
 
             <PageLayout.SectionPaging>

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+
+import { 
+  Box,
+  ToggleButton 
+} from 'asc-web-components';
+
+const StyledSettings = styled(Box)`
+  .toggle-btn-container {
+    display: block;
+  }
+`;
+
+class Settings extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      intermediateVersion: false,
+      thirdParty: false
+    }
+  }
+
+  isCheckedIntermediate = () => {
+    this.setState({
+      intermediateVersion: !this.state.intermediateVersion
+    })
+  }
+
+  isCheckedThirdParty = () => {
+    this.setState({
+      thirdParty: !this.state.thirdParty
+    })
+  }
+ 
+  renderAdminSettings = () => {
+    const { 
+      intermediateVersion, 
+      thirdParty 
+    } = this.state;
+    return (
+      <StyledSettings>
+        <Box className="toggle-btn-container">
+        <ToggleButton 
+          label="Keep all saved intermediate versions"
+          onChange={this.isCheckedIntermediate}
+          isChecked={intermediateVersion}
+        />
+        </Box>
+        <br />
+        <Box className="toggle-btn-container">
+        <ToggleButton
+          label="Allow users to connect third-party storages"
+          onChange={this.isCheckedThirdParty}
+          isChecked={thirdParty}
+        />
+        </Box>
+      </StyledSettings>
+    )
+  }
+
+  renderCommonSettings = () => {
+
+  }
+
+  renderClouds = () => {
+
+  }
+
+  renderSettings = setting => {
+    switch (setting) {
+      case "common-settings":
+        return this.renderCommonSettings();
+      case "admin-settings":
+        return this.renderAdminSettings();
+      case "connected-clouds":
+        return this.renderClouds();
+      default:
+        return this.renderCommonSettings();
+    }
+  }
+
+  render() {
+    const { settingsPath, match } = this.props;
+    const { setting } = match.params;
+    const content = this.renderSettings(setting);
+
+    return (
+      <>
+      {content}
+      </>
+    );
+  }
+} 
+
+function mapStateToProps(state) {
+  const { settingsPath } = state.files;
+  return { settingsPath };
+}
+
+export default connect(mapStateToProps)(Settings);

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

@@ -0,0 +1,6 @@
+{
+  "treeSettingsMenuTitle": "Settings",
+  "treeSettingsCommonSettings": "Common Settings",
+  "treeSettingsAdminSettings": "Admin Settings",
+  "treeSettingsConnectedCloud": "Connected Clouds"
+}

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

@@ -0,0 +1,6 @@
+{
+  "treeSettingsMenuTitle": "Настройки",
+  "treeSettingsCommonSettings": "Общие настройки",
+  "treeSettingsAdminSettings": "Настройки администратора",
+  "treeSettingsConnectedCloud": "Подключенные облака"
+}