Commit 3d8edb37 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Viacheslav Pavlov
Browse files

Page titles not set

Added missing titles
fixed stepper pages
now titles are set by specific entity title not by generic "page type"
contentHeaderWithButton now sets it's background color depending on it's type
fixed vocabulary public routes
PageTitle introduced, setPageTitle now used only by PageTitle component
parent deee86d3
......@@ -17,6 +17,7 @@ import {SortDirection} from 'model/Page';
import SubsetFilters from './c/SubsetFilters';
import CreateSubsetButton from './c/CreateSubsetButton';
import ContentLayout from 'ui/layout/ContentLayout';
import PageTitle from 'ui/common/PageTitle';
import { PageContents } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
......@@ -108,6 +109,7 @@ class DashboardPage extends React.Component<IDashboardPageProps> {
<ContentLayout left={
<SubsetFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } t={ t }/>
} customHeaderHeight>
<PageTitle title={ t('subsets.dashboard.p.browse.title') }/>
<PaginationComponent
pageObj={ paged }
onSortChange={ this.onSortChange }
......
......@@ -9,7 +9,6 @@ import FilteredPage from 'model/FilteredPage';
import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import {
setEditMode, addToEditList, deleteAll, publishAll, approveAll, removeFromEditList, unpublishAll, onPageChange,
selectAll, unselectAll,
......@@ -19,6 +18,7 @@ import MyDataCards from './c/MyDataCards';
import DashboardActionsButton from './c/DashboardActionsButton';
import ContentLayout from 'ui/layout/ContentLayout';
import DashboardFilters from './c/Filters';
import PageTitle from 'ui/common/PageTitle';
// TODO fix props
interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
......@@ -34,7 +34,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
listMyData: any;
dataClassName: string;
renderDataLink: any;
setPageTitle: (title: string) => void;
addToEditList: (item: any) => void;
removeFromEditList: (item: any) => void;
onPageChange: () => void;
......@@ -85,8 +84,6 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
public componentWillMount() {
const { pagination, tab, paged } = this.props;
// console.log(`willM ${filterCode}`, filters[filterCode]);
const { title, setPageTitle } = this.props;
setPageTitle(title);
this.setState({ tab });
if (!paged) {
this.loadData(null, tab, pagination.page, pagination.size, pagination.sort, pagination.dir);
......@@ -113,13 +110,14 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
}
public render() {
const { tab, filterComponent, basePath, pagination, addToEditList, removeFromEditList, isEditMode, setEditMode, editList, paged, dataClassName, renderDataLink } = this.props;
const { tab, filterComponent, basePath, pagination, addToEditList, removeFromEditList, isEditMode, setEditMode, editList, paged, dataClassName, renderDataLink, title } = this.props;
const actionHandlers = this.getActionHandlers();
const Filters = filterComponent ? filterComponent : DashboardFilters;
return (
<ContentLayout customHeaderHeight left={ <Filters initialValues={ paged && paged.filter } onSubmit={ this.onFilter }/> }>
<PageTitle title={ title }/>
<MyDataCards
tab={ tab }
filterComponent={ filterComponent }
......@@ -206,7 +204,6 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
selectAll,
unselectAll,
setEditMode,
setPageTitle,
filterCodeToUrl,
}, dispatch);
......
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { setPageTitle } from 'actions/pageTitle';
interface IPageTitleProps extends React.ClassAttributes<any> {
title: string;
setPageTitle?: (title: string) => void;
}
class PageTitle extends React.Component<IPageTitleProps> {
public constructor(props) {
super(props);
const { setPageTitle, title } = props;
if (title && setPageTitle) {
setPageTitle(title.split('*').join(''));
}
}
public componentWillReceiveProps(nextProps): void {
const { setPageTitle, title } = nextProps;
const { title: oldTitle } = this.props;
if (title !== oldTitle) {
if (title && setPageTitle) {
setPageTitle(title.split('*').join(''));
}
}
}
public componentDidUpdate(prevProps, prevState, snapshot) {
const { title: oldTitle } = prevProps;
const { title, setPageTitle} = this.props;
if (title && setPageTitle) {
if (title !== oldTitle) {
setPageTitle(title.split('*').join(''));
}
}
}
public render() {
return null;
}
}
const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
}, dispatch);
export default connect(null, mapDispatchToProps)(PageTitle);
import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import Hidden from '@material-ui/core/Hidden';
import { connect } from 'react-redux';
import { setPageTitle } from 'actions/pageTitle';
import { translate } from 'react-i18next';
import { bindActionCreators } from 'redux';
interface IContentHeader extends React.ClassAttributes<any> {
title: string;
subTitle?: string;
setPageTitle: (title: string) => void;
t: any;
}
......@@ -17,15 +13,6 @@ class ContentHeader extends React.Component<IContentHeader , any> {
public constructor(props: any) {
super(props);
const {title, setPageTitle, t} = this.props;
setPageTitle(t(title));
}
public componentWillReceiveProps(nextProps) {
const {title, setPageTitle, t} = this.props;
if (t && title) {
setPageTitle(t(title));
}
}
public render() {
......@@ -49,9 +36,6 @@ class ContentHeader extends React.Component<IContentHeader , any> {
}
}
const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
}, dispatch);
export default connect(null, mapDispatchToProps)(translate()(ContentHeader));
export default translate()(ContentHeader);
......@@ -2,12 +2,12 @@ import * as React from 'react';
import {translate} from 'react-i18next';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Markdown from 'ui/common/markdown';
/*tslint:disable*/
const styles = (theme) => ({
subHeader: {
display: 'flex',
backgroundColor: '#D4D2C7',
borderBottom: '1px solid #B2AFA6',
'& > div': {
marginTop: 'auto',
......@@ -20,6 +20,16 @@ const styles = (theme) => ({
},
},
},
secondary: {
backgroundColor: '#D4D2C7',
},
headerTextPrimary: {
color: '#fff',
fontWeight: 700,
},
headerTextSecondary: {
color: '#000',
},
flexGrow: {
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
......@@ -73,6 +83,7 @@ interface IContentHeaderWithButtonProps extends React.ClassAttributes<any> {
title: string;
buttons: any;
t: any;
isSecondary?: boolean;
}
class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonProps, any> {
......@@ -82,13 +93,13 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
}
public render() {
const {classes, title, buttons, t} = this.props;
const {classes, title, buttons, t, isSecondary = false} = this.props;
return (
<Grid container spacing={ 0 } item xs={ 12 } className={ classes.subHeader }>
<Grid container spacing={ 0 } item xs={ 12 } className={ `${classes.subHeader} ${isSecondary ? classes.secondary : 'back-green'}` }>
<Grid item>
<h3 className="lh-35 m-0">
{ typeof title === 'string' ? t(title) : title }
<h3 className={ `lh-35 m-0 ${isSecondary ? classes.headerTextSecondary : classes.headerTextPrimary}` }>
{ typeof title === 'string' ? <Markdown basic source={ t(title) }/> : title }
</h3>
</Grid>
<Grid item className={ `float-right ${classes.flexGrow}` }>
......@@ -99,4 +110,5 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
}
}
export default translate()(withStyles(styles)(ContentHeaderWithButton));
export default translate()(withStyles(styles)(ContentHeaderWithButton));
......@@ -9,8 +9,8 @@ import confirm from 'utilities/confirmAlert';
// UI
import renderRoutes from 'ui/renderRoutes';
import PageTitle from 'ui/common/PageTitle';
import {navigateTo} from 'actions/navigation';
import {setPageTitle} from 'actions/pageTitle';
interface IStepperProps<T> extends React.ClassAttributes<any> {
location: any;
......@@ -29,7 +29,6 @@ interface IStepperProps<T> extends React.ClassAttributes<any> {
deleteItem: (item: T) => Promise<T>;
createItem: () => void;
navigateTo: (path: string) => void;
setPageTitle: (title: string) => void;
route: any;
match: any;
t: any;
......@@ -90,8 +89,6 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> {
public constructor(props: any) {
super(props);
const {pageTitle, setPageTitle, t} = this.props;
setPageTitle(t(pageTitle));
}
public componentWillMount() {
......@@ -118,6 +115,7 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> {
return (
<div>
<PageTitle title={ t(pageTitle) } />
{
renderRoutes(route.routes, match.path,
{
......@@ -152,7 +150,6 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => bindActionCreators({
navigateTo,
setPageTitle,
}, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(StepperTemplate));
......
......@@ -3,12 +3,11 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PageTitle from 'ui/common/PageTitle';
interface IAdminDashProps extends React.ClassAttributes<any> {
setPageTitle: (title: string) => void;
title: string;
}
......@@ -16,8 +15,6 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> {
constructor(props) {
super(props);
const { setPageTitle, title } = this.props;
setPageTitle(title);
}
......@@ -25,7 +22,8 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> {
console.log('Rendering admin??');
return (
<div>
<ContentHeaderWithButton title="You're root, have fun!" />
<PageTitle title="You're root, have fun!"/>
<ContentHeaderWithButton title="You're root, have fun!"/>
</div>
);
}
......@@ -36,7 +34,7 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
// not now
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(AdministrationDashboard);
......@@ -4,9 +4,9 @@ import { bindActionCreators } from 'redux';
import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PageTitle from 'ui/common/PageTitle';
import { BaseMyDataPage } from './MyDataPage';
......@@ -15,7 +15,6 @@ interface IAdminDashProps extends React.ClassAttributes<any> {
createPartner: any;
createDescriptor: any;
createDescriptorList: any;
setPageTitle: (title: string) => void;
title: string;
history: any;
}
......@@ -23,14 +22,13 @@ interface IAdminDashProps extends React.ClassAttributes<any> {
class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
constructor(props) {
super(props);
const { setPageTitle, title } = this.props;
setPageTitle(title);
}
public render() {
return (
<div>
<PageTitle title="What do you want to do?"/>
<ContentHeaderWithButton title="What do you want to do?"/>
</div>
);
......@@ -49,7 +47,6 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
filterCodeToUrl,
}, dispatch);
......
......@@ -5,10 +5,10 @@ import {bindActionCreators} from 'redux';
import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode';
import {setPageTitle} from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import PageTitle from 'ui/common/PageTitle';
interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
title: string;
......@@ -22,7 +22,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
preFilter?: object;
basePath: string;
filterCodeToUrl: any;
setPageTitle: (title: string) => void;
}
class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps & any, any> {
......@@ -99,8 +98,6 @@ class DP extends BaseMyDataPage<any> {
constructor(props) {
super(props);
const { title, setPageTitle } = this.props;
setPageTitle(title);
}
public render() {
......@@ -108,6 +105,7 @@ class DP extends BaseMyDataPage<any> {
return (
<div>
<PageTitle title={ title }/>
<ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/>
</div>
);
......@@ -128,7 +126,6 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
filterCodeToUrl,
}, dispatch);
......
......@@ -27,6 +27,7 @@ import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer';
import CropCard from 'crop/ui/c/CropCard';
import ActivityPostCard from 'cms/ui/c/ActivityPostCard';
import PageTitle from 'ui/common/PageTitle';
const styles = (theme) => ({
/* tslint:disable */
......@@ -302,6 +303,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
return (
<PageLayout classes={ {root: classes.root } } withFooter>
<PageTitle title={ t('common.Genesys PGR') }/>
<ContentHeader title={ t('common.Genesys PGR') } />
<Grid container spacing={ 0 } className={ classes.background }>
<div className={ classes.backgroundImageWrapper }>
......
......@@ -132,7 +132,8 @@
"confirm": "Do you wish to set a new FTP password for this account?"
},
"profile": {
"title": "User profile"
"title": "User profile",
"profile": "{{fullName}} profile information"
}
}
},
......
......@@ -14,6 +14,7 @@ import PageLayout from 'ui/layout/PageLayout';
import LoginForm from './c/LoginForm';
import Grid from '@material-ui/core/Grid';
import Card, { CardHeader, CardContent } from 'ui/common/Card';
import PageTitle from 'ui/common/PageTitle';
interface ILoginContainerProps extends React.ClassAttributes<any> {
login: any;
......@@ -69,7 +70,8 @@ class LoginContainer extends React.Component<ILoginContainerProps, void> {
const {t} = this.props;
return (
<PageLayout withFooter>
<ContentHeader title="user.public.p.login.title" subTitle="user.public.p.login.subTitle" />
<PageTitle title={ t('user.public.p.login.title') }/>
<ContentHeader title={ t('user.public.p.login.title') } subTitle="user.public.p.login.subTitle" />
<Grid container spacing={ 0 } justify="center" className="back-gray p-20">
<Grid item xs={ 12 } md={ 5 } lg={ 4 } xl={ 3 }>
<Card>
......
......@@ -13,6 +13,7 @@ import {log} from 'utilities/debug';
import Grid from '@material-ui/core/Grid';
import PageLayout from 'ui/layout/PageLayout';
import Card, {CardContent, CardHeader} from 'ui/common/Card';
import PageTitle from 'ui/common/PageTitle';
import ContentHeader from 'ui/common/heading/ContentHeader';
import RegistrationForm from './c/RegistrationForm';
......@@ -48,7 +49,8 @@ class LoginContainer extends React.Component<ILoginContainerProps> {
const { captchaClientKey, t } = this.props;
return (
<PageLayout withFooter>
<ContentHeader title="user.public.p.registration.title"/>
<PageTitle title={ t('user.public.p.registration.title') }/>
<ContentHeader title={ t('user.public.p.registration.title') }/>
<Grid container spacing={ 0 } justify="center" className="back-gray p-20">
<Grid item xs={ 12 } md={ 5 } lg={ 4 } xl={ 3 }>
<Card>
......
......@@ -22,6 +22,7 @@ import ContentLayout from 'ui/layout/ContentLayout';
import PaginationComponent from 'ui/common/pagination';
import withWidth from '@material-ui/core/withWidth';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
import PageTitle from 'ui/common/PageTitle';
const mobile = ['xs'] as Breakpoint[];
......@@ -35,19 +36,20 @@ class BrowsePage extends BrowsePageTemplate<User> {
}
public render() {
const { paged, loadMoreData, width } = this.props;
const { paged, loadMoreData, width, t } = this.props;
const renderUser = (user: User, index: number) => {
return <UserCard key={ user.uuid } index={ index } user={ user } />;
};
const isMobile = mobile.indexOf(width) !== -1;
const title = isMobile ? 'user.admin.p.browse.mobileTitle' : 'user.admin.p.browse.title';
const title = isMobile ? t('user.admin.p.browse.mobileTitle') : t('user.admin.p.browse.title');
return (
<ContentLayout left={
<UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
} customHeaderHeight>
<PageTitle title={ title } />
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
......
......@@ -15,8 +15,9 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import Loading from 'ui/common/Loading';
import ActionButton from 'ui/common/buttons/ActionButton';
import BackButton from 'ui/common/buttons/BackButton';
import PageTitle from 'ui/common/PageTitle';
import {PageContents} from 'ui/layout/PageLayout';
import UserProfileCard from '../c/UserProfileCard';
import UserProfileCard from 'user/ui/c/UserProfileCard';
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
......@@ -53,8 +54,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
return user === null ? (<Loading/>) : (
<div>
<PageTitle title={ user ? t('user.dashboard.p.profile.profile', {fullName: user.fullName}) : t('common:label.loading', { what: t('user.dashboard.p.profile.title') }) }/>
<ContentHeaderWithButton
title={ t(`user.admin.p.display.title`) }
title={ user ? t('user.dashboard.p.profile.profile', {fullName: user.fullName}) : t('common:label.loading', { what: t('user.dashboard.p.profile.title') }) }
buttons={
<div>
{ user.accountLocked ? <ActionButton title="user.admin.p.display.unlock" action={ () => lockAccount(user.uuid, false) }/>
......
......@@ -17,6 +17,7 @@ import Card, { CardContent} from 'ui/common/Card';
import UserForm from './c/UserForm';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import {PageContents} from 'ui/layout/PageLayout';
import PageTitle from 'ui/common/PageTitle';
interface IEditPageProps extends React.ClassAttributes<any> {
t: any;
......@@ -66,6 +67,7 @@ class EditUserPage extends React.Component<IEditPageProps, any> {
return user === null ? (<Loading/>) : (
<div>
<PageTitle title={ t(`user.admin.p.edit.title`) }/>
<ContentHeaderWithButton title={ t(`user.admin.p.edit.title`) } />
<PageContents className="pt-1rem">
<Card>
......
......@@ -17,7 +17,7 @@ const UserProfileCard = ({userProfile, admin = false, t, className, ...other}: {
return (
<div className={ className }>
<Card square>
<CardHeader title={ userProfile.fullName } />
<CardHeader title={ t('user.dashboard.p.profile.title') } />
<CardContent>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
......
......@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { setPageTitle } from 'actions/pageTitle';
import { changePassword, loadUserProfile } from 'user/actions/dashboard';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
......@@ -12,9 +11,10 @@ import Loading from 'ui/common/Loading';
import PasswordForm from './c/PasswordForm';
import {AccountType, User} from 'model/user/User';
import { PageContents } from 'ui/layout/PageLayout';
import PageTitle from 'ui/common/PageTitle';
interface IChangePasswordProps extends React.ClassAttributes<any> {
setPageTitle: (title: string) => void;
title: string;
changePassword: (newPassword: string, oldPassword: string) => void;
loadUserProfile: () => void;
......@@ -30,8 +30,6 @@ class ChangePasswordPage extends React.Component<IChangePasswordProps, void> {
constructor(props) {
super(props);
const { setPageTitle, title} = this.props;
setPageTitle(title);
}
public componentWillMount() {
......@@ -56,12 +54,15 @@ class ChangePasswordPage extends React.Component<IChangePasswordProps, void> {
<div>
{ userProfile.accountType === AccountType.LOCAL ?
<div>
<PageTitle title={ t('user.dashboard.p.changePassword.title') }/>
<ContentHeaderWithButton title={ t('user.dashboard.p.changePassword.title') } />
<Card>
<CardContent>
<PasswordForm t={ t } onSubmit={ this.onChangePassword } />
</CardContent>
</Card>
<PageContents className="mt-15">
<Card>
<CardContent>
<PasswordForm t={ t } onSubmit={ this.onChangePassword } />
</CardContent>
</Card>
</PageContents>
</div>
: <ContentHeaderWithButton title={ t('user.dashboard.p.changePassword.unableChange') } />
}
......@@ -78,7 +79,6 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => bindActionCreators({