scripts/apps/settings/settings.tsx
import React from 'react';
import {connectServices} from 'core/helpers/ReactRenderAsync';
import {capitalize} from 'lodash';
import {coreMenuGroups} from 'core/activity/activity';
import {gettext} from 'core/utils';
interface IProps {
$route: any;
superdesk: any;
pageTitle: any;
}
interface IState {
loading: boolean;
flatMenuItems: Array<any>;
}
class SettingsComponent extends React.Component<IProps, IState> {
constructor(props) {
super(props);
this.state = {
loading: true,
flatMenuItems: [],
};
}
componentDidMount() {
const {$route, pageTitle, superdesk} = this.props;
const currentRoute = $route.current;
pageTitle.setUrl(capitalize(gettext('Settings')));
if (currentRoute.$$route.label !== 'Settings') {
pageTitle.setWorkspace(capitalize(gettext(currentRoute.$$route.label)));
} else {
pageTitle.setWorkspace(null);
}
superdesk.getMenu(superdesk.MENU_SETTINGS).then((flatMenuItems) => {
this.setState({
flatMenuItems: flatMenuItems.sort((a, b) =>
b.settings_menu_group.priority - a.settings_menu_group.priority),
loading: false,
});
});
}
render() {
if (this.state.loading) {
return null;
}
const menuItemsByGroup = this.state.flatMenuItems.reduce((accumulator, item) => {
if (item.hasOwnProperty('settings_menu_group') === false) {
throw new Error('Settings items must have a group');
}
if (Array.isArray(accumulator[item.settings_menu_group.id]) !== true) {
accumulator[item.settings_menu_group.id] = [];
}
accumulator[item.settings_menu_group.id].push(item);
return accumulator;
}, {});
const listToRender = [];
const blockToRender = [];
let reactKey = 0;
const currentRoute = this.props.$route.current;
for (const key in menuItemsByGroup) {
menuItemsByGroup[key] = menuItemsByGroup[key].sort((a, b) => {
let textA = a.label.toLowerCase();
let textB = b.label.toLowerCase();
// to sort alphabetically
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
});
const groupLabel = coreMenuGroups[key].getLabel();
listToRender.push(
<li key={++reactKey} className="sd-left-nav__group-header">{groupLabel}</li>,
);
let blockGroupHeading = (
<div
key={++reactKey}
className="sd-card__header sd-card__header--with-thumb sd-card__header--gradient-1"
>
<div className="sd-card__thumbnail sd-card__thumbnail--size-s">
<h4 className="sd-card__thumbnail-heading">{groupLabel}</h4>
</div>
</div>
);
let blockListItems = [];
menuItemsByGroup[key].forEach((item) => {
const className = 'sd-left-nav__btn'
+ (currentRoute._id === item._id ? ' sd-left-nav__btn--active' : '');
listToRender.push(
(
<li key={++reactKey}>
<a href={'#' + item.href} className={className}>
{gettext(item.label)}
</a>
</li>
),
);
blockListItems.push(
<a
key={++reactKey}
href={'#' + item.href}
className="text-link"
>
{gettext(item.label)}
</a>,
);
});
blockToRender.push(<div className="sd-card" key={++reactKey}>
{blockGroupHeading}
<div className="sd-card__content sd-padding-all--3">
<div className="text-link__group">
{blockListItems}
</div>
</div>
</div>);
}
const defaultSettingsPage = (
<div className="sd-page__content sd-page__content--centered-dashboard">
<div className="sd-grid-list sd-grid-list--auto-fit">{blockToRender}</div>
</div>
);
return (
<div className="sd-page">
<nav className="sd-page__sidebar sd-left-nav">
<ul>{listToRender}</ul>
</nav>
<section className="sd-page__main-content">
{currentRoute.$$route.label === 'Settings' ? defaultSettingsPage : this.props.children}
</section>
</div>
);
}
}
export const Settings = connectServices(SettingsComponent, ['$route', 'superdesk', 'pageTitle']);