IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web.Client: Settings: Article, Header: refactoring

Browse Source
This commit is contained in:
Daniil Senkiv 2019-10-28 11:03:41 +03:00
parent 18da5ca606
commit ca3137ba09
4 changed files with 153 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web/ASC.Web.Client/src/components/pages/Settings/Article/Body/index.js
View File

@ -8,6 +8,7 @@ import {
} from "asc-web-components";
import { setNewSelectedNode } from '../../../../../store/auth/actions';
import { withRouter } from "react-router";
import { settingsTree } from '../../../../../helpers/constants';
const getItems = data => {
return data.map(item => {
@ -42,10 +43,7 @@ const getItems = data => {
const getObjectForState = (key, title, subtitle, link) => {
const selectedInfo = {
selectedKey: key,
selectedTitle: title,
selectedSubtitle: subtitle,
selectedLink: link,
selectedKey: key
};
return selectedInfo;
}
@ -82,17 +80,27 @@ const getKeyByLink = (data, linkArr) => {
return '0-0';
}
const getSelectedLinkByKey = key => {
const length = key.length;
if (length === 1) {
return '/' + settingsTree[key].link;
}
else if (length === 3) {
return '/' + settingsTree[key[0]].link + '/' + settingsTree[key[0]].children[key[2]].link;
}
}
class ArticleBodyContent extends React.Component {
constructor(props) {
super(props);
const { data, selectedKeys, match, history } = props;
const { selectedKeys, match, history } = props;
const fullSettingsUrl = props.match.url;
const locationPathname = props.location.pathname;
if (locationPathname === fullSettingsUrl) {
const newPath = match.path + this.getSelectedLinkByKey(selectedKeys[0]);
const newPath = match.path + getSelectedLinkByKey(selectedKeys[0]);
history.push(newPath);
return;
}
@ -102,19 +110,17 @@ class ArticleBodyContent extends React.Component {
const resultPath = locationPathname.slice(fullSettingsUrlLength + 1);
const arrayOfParams = resultPath.split('/');
const key = getKeyByLink(data, arrayOfParams);
const title = this.getSelectedTitleByKey(key[0]);
const subtitle = this.getSelectedTitleByKey(key);
const link = this.getSelectedLinkByKey(key);
const key = getKeyByLink(settingsTree, arrayOfParams);
const link = getSelectedLinkByKey(key);
this.sendNewSelectedData([key], title, subtitle, link);
this.sendNewSelectedData([key]);
const path = match.path + link;
history.push(path);
}
componentDidUpdate() {
const { selectedKeys, match, history } = this.props;
const settingsPath = this.getSelectedLinkByKey(selectedKeys[0]);
const settingsPath = getSelectedLinkByKey(selectedKeys[0]);
const newPath = match.path + settingsPath;
history.push(newPath);
}
@ -124,10 +130,6 @@ class ArticleBodyContent extends React.Component {
return true;
}
if (!utils.array.isArrayEqual(nextProps.data, this.props.data)) {
return true;
}
return false;
}
@ -137,29 +139,8 @@ class ArticleBodyContent extends React.Component {
setNewSelectedNode(data);
}
getSelectedTitleByKey = key => {
const { data } = this.props;
const length = key.length;
if (length === 1) {
return data[key].title;
}
else if (length === 3) {
return data[key[0]].children[key[2]].title;
}
}
getSelectedLinkByKey = key => {
const { data } = this.props;
const length = key.length;
if (length === 1) {
return '/' + data[key].link;
}
else if (length === 3) {
return '/' + data[key[0]].link + '/' + data[key[0]].children[key[2]].link;
}
}
onSelect = value => {
const { data, selectedKeys } = this.props;
const { selectedKeys } = this.props;
if (value) {
if (utils.array.isArrayEqual(value, selectedKeys)) {
@ -168,17 +149,11 @@ class ArticleBodyContent extends React.Component {
}
const selectedKey = value[0];
if (selectedKey.length === 3) {
const selectedTitle = this.getSelectedTitleByKey(selectedKey[0]);
const selectedSubtitle = this.getSelectedTitleByKey(selectedKey);
const selectedLink = this.getSelectedLinkByKey(selectedKey);
this.sendNewSelectedData(value, selectedTitle, selectedSubtitle, selectedLink);
this.sendNewSelectedData(value);
}
else if (selectedKey.length === 1 && (selectedKey.toString() !== selectedKeys.toString()[0] || selectedKeys.toString()[2] !== '0')) {
const selectedKeys = data[value].children ? [`${value.toString()}-0`] : value;
const selectedTitle = this.getSelectedTitleByKey(selectedKey);
const selectedSubtitle = this.getSelectedTitleByKey(selectedKeys[0]);
const selectedLink = this.getSelectedLinkByKey(selectedKeys[0]);
this.sendNewSelectedData(selectedKeys, selectedTitle, selectedSubtitle, selectedLink);
const selectedKeys = settingsTree[value].children ? [`${value.toString()}-0`] : value;
this.sendNewSelectedData(selectedKeys);
}
}
};
@ -199,7 +174,7 @@ class ArticleBodyContent extends React.Component {
};
render() {
const { data, selectedKeys } = this.props;
const { selectedKeys } = this.props;
console.log("SettingsTreeMenu", this.props);
@ -216,7 +191,7 @@ class ArticleBodyContent extends React.Component {
onSelect={this.onSelect}
selectedKeys={selectedKeys}
>
{getItems(data)}
{getItems(settingsTree)}
</TreeMenu>
);
};
@ -224,11 +199,7 @@ class ArticleBodyContent extends React.Component {
function mapStateToProps(state) {
return {
data: state.auth.settings.settingsTree.list,
selectedKeys: state.auth.settings.settingsTree.selectedKey,
selectedTitle: state.auth.settings.settingsTree.selectedTitle,
selectedSubtitle: state.auth.settings.settingsTree.selectedSubtitle,
selectedLink: state.auth.settings.settingsTree.selectedLink,
selectedKeys: state.auth.settings.settingsTree.selectedKey
};
}

16
web/ASC.Web.Client/src/components/pages/Settings/Section/Header/index.js
View File

@ -3,6 +3,7 @@ import { connect } from "react-redux";
import { withRouter } from "react-router";
import { Text, utils } from 'asc-web-components';
import styled from 'styled-components';
import { settingsTree } from '../../../../../helpers/constants';
const Header = styled(Text.ContentHeader)`
margin-left: 16px;
@ -13,18 +14,29 @@ const Header = styled(Text.ContentHeader)`
}
`;
const getSelectedTitleByKey = key => {
const length = key.length;
if (length === 1) {
return settingsTree[key].title;
}
else if (length === 3) {
return settingsTree[key[0]].children[key[2]].title;
}
};
const SectionHeaderContent = props => {
const header = getSelectedTitleByKey(props.selectedKey)
return (
<Header truncate={true}>
{props.header}
{header}
</Header>
);
};
function mapStateToProps(state) {
return {
header: state.auth.settings.settingsTree.selectedSubtitle
selectedKey: state.auth.settings.settingsTree.selectedKey[0]
};
}

113
web/ASC.Web.Client/src/helpers/constants.js
View File

@ -53,3 +53,116 @@ export const EmployeeStatus = Object.freeze({
Active: 1,
Disabled: 2
});
export const settingsTree = [
{
title: 'Common',
key: '0',
icon: 'SettingsIcon',
link: 'common',
children: [
{
title: 'Customization',
key: '0-0',
icon: '',
link: 'customization',
},
{
title: 'Modules & tools',
key: '0-1',
icon: '',
link: 'modules-and-tools',
},
{
title: 'White label',
key: '0-2',
icon: '',
link: 'white-label',
},
]
},
{
title: 'Security',
key: '1',
icon: 'SettingsIcon',
link: 'security',
children: [
{
title: 'Portal Access',
key: '1-0',
icon: '',
link: 'portal-access',
},
{
title: 'Access Rights',
key: '1-1',
icon: '',
link: 'access-rights',
},
{
title: 'Login History',
key: '1-2',
icon: '',
link: 'login-history',
},
{
title: 'Audit Trail',
key: '1-3',
icon: '',
link: 'audit-trail',
},
]
},
{
title: 'Data Management',
key: '2',
icon: 'SettingsIcon',
link: 'data-management',
children: [
{
title: 'Migration',
key: '2-0',
icon: '',
link: 'migration',
},
{
title: 'Backup',
key: '2-1',
icon: '',
link: 'backup',
},
{
title: 'Portal Deactivation/Deletion',
key: '2-2',
icon: '',
link: 'portal-deactivation-deletion',
},
]
},
{
title: 'Integration',
key: '3',
icon: 'SettingsIcon',
link: 'integration',
children: [
{
title: 'Third-Party Services',
key: '3-0',
icon: '',
link: 'third-party-services',
},
{
title: 'SMTP Settings',
key: '3-1',
icon: '',
link: 'smtp-settings',
}
]
},
{
title: 'Statistics',
key: '4',
icon: 'SettingsIcon',
link: 'statistics',
},
];

118
web/ASC.Web.Client/src/store/auth/reducer.js
View File

@ -5,118 +5,6 @@ import {
import isEmpty from 'lodash/isEmpty';
import config from "../../../package.json";
const settingsTree = [
{
title: 'Common',
key: '0',
icon: 'SettingsIcon',
link: 'common',
children: [
{
title: 'Customization',
key: '0-0',
icon: '',
link: 'customization',
},
{
title: 'Modules & tools',
key: '0-1',
icon: '',
link: 'modules-and-tools',
},
{
title: 'White label',
key: '0-2',
icon: '',
link: 'white-label',
},
]
},
{
title: 'Security',
key: '1',
icon: 'SettingsIcon',
link: 'security',
children: [
{
title: 'Portal Access',
key: '1-0',
icon: '',
link: 'portal-access',
},
{
title: 'Access Rights',
key: '1-1',
icon: '',
link: 'access-rights',
},
{
title: 'Login History',
key: '1-2',
icon: '',
link: 'login-history',
},
{
title: 'Audit Trail',
key: '1-3',
icon: '',
link: 'audit-trail',
},
]
},
{
title: 'Data Management',
key: '2',
icon: 'SettingsIcon',
link: 'data-management',
children: [
{
title: 'Migration',
key: '2-0',
icon: '',
link: 'migration',
},
{
title: 'Backup',
key: '2-1',
icon: '',
link: 'backup',
},
{
title: 'Portal Deactivation/Deletion',
key: '2-2',
icon: '',
link: 'portal-deactivation-deletion',
},
]
},
{
title: 'Integration',
key: '3',
icon: 'SettingsIcon',
link: 'integration',
children: [
{
title: 'Third-Party Services',
key: '3-0',
icon: '',
link: 'third-party-services',
},
{
title: 'SMTP Settings',
key: '3-1',
icon: '',
link: 'smtp-settings',
}
]
},
{
title: 'Statistics',
key: '4',
icon: 'SettingsIcon',
link: 'statistics',
},
];
const initialState = {
isAuthenticated: false,
@ -142,11 +30,7 @@ const initialState = {
timePattern: "h:mm tt"
},
settingsTree: {
list: settingsTree,
selectedKey: ['0-0'],
selectedTitle: 'Common',
selectedSubtitle: 'Customization',
selectedLink: '/common/customization',
selectedKey: ['0-0']
}
}/*,
password: null*/