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'; ...@@ -17,6 +17,7 @@ import {SortDirection} from 'model/Page';
import SubsetFilters from './c/SubsetFilters'; import SubsetFilters from './c/SubsetFilters';
import CreateSubsetButton from './c/CreateSubsetButton'; import CreateSubsetButton from './c/CreateSubsetButton';
import ContentLayout from 'ui/layout/ContentLayout'; import ContentLayout from 'ui/layout/ContentLayout';
import PageTitle from 'ui/common/PageTitle';
import { PageContents } from 'ui/layout/PageLayout'; import { PageContents } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader'; import PagedLoader from 'ui/common/PagedLoader';
...@@ -108,6 +109,7 @@ class DashboardPage extends React.Component<IDashboardPageProps> { ...@@ -108,6 +109,7 @@ class DashboardPage extends React.Component<IDashboardPageProps> {
<ContentLayout left={ <ContentLayout left={
<SubsetFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } t={ t }/> <SubsetFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } t={ t }/>
} customHeaderHeight> } customHeaderHeight>
<PageTitle title={ t('subsets.dashboard.p.browse.title') }/>
<PaginationComponent <PaginationComponent
pageObj={ paged } pageObj={ paged }
onSortChange={ this.onSortChange } onSortChange={ this.onSortChange }
......
...@@ -9,7 +9,6 @@ import FilteredPage from 'model/FilteredPage'; ...@@ -9,7 +9,6 @@ import FilteredPage from 'model/FilteredPage';
import { parse } from 'query-string'; import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode'; import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import { import {
setEditMode, addToEditList, deleteAll, publishAll, approveAll, removeFromEditList, unpublishAll, onPageChange, setEditMode, addToEditList, deleteAll, publishAll, approveAll, removeFromEditList, unpublishAll, onPageChange,
selectAll, unselectAll, selectAll, unselectAll,
...@@ -19,6 +18,7 @@ import MyDataCards from './c/MyDataCards'; ...@@ -19,6 +18,7 @@ import MyDataCards from './c/MyDataCards';
import DashboardActionsButton from './c/DashboardActionsButton'; import DashboardActionsButton from './c/DashboardActionsButton';
import ContentLayout from 'ui/layout/ContentLayout'; import ContentLayout from 'ui/layout/ContentLayout';
import DashboardFilters from './c/Filters'; import DashboardFilters from './c/Filters';
import PageTitle from 'ui/common/PageTitle';
// TODO fix props // TODO fix props
interface IDataPublishedContainerProps extends React.ClassAttributes<any> { interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
...@@ -34,7 +34,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> { ...@@ -34,7 +34,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
listMyData: any; listMyData: any;
dataClassName: string; dataClassName: string;
renderDataLink: any; renderDataLink: any;
setPageTitle: (title: string) => void;
addToEditList: (item: any) => void; addToEditList: (item: any) => void;
removeFromEditList: (item: any) => void; removeFromEditList: (item: any) => void;
onPageChange: () => void; onPageChange: () => void;
...@@ -85,8 +84,6 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps ...@@ -85,8 +84,6 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
public componentWillMount() { public componentWillMount() {
const { pagination, tab, paged } = this.props; const { pagination, tab, paged } = this.props;
// console.log(`willM ${filterCode}`, filters[filterCode]); // console.log(`willM ${filterCode}`, filters[filterCode]);
const { title, setPageTitle } = this.props;
setPageTitle(title);
this.setState({ tab }); this.setState({ tab });
if (!paged) { if (!paged) {
this.loadData(null, tab, pagination.page, pagination.size, pagination.sort, pagination.dir); this.loadData(null, tab, pagination.page, pagination.size, pagination.sort, pagination.dir);
...@@ -113,13 +110,14 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps ...@@ -113,13 +110,14 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
} }
public render() { 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 actionHandlers = this.getActionHandlers();
const Filters = filterComponent ? filterComponent : DashboardFilters; const Filters = filterComponent ? filterComponent : DashboardFilters;
return ( return (
<ContentLayout customHeaderHeight left={ <Filters initialValues={ paged && paged.filter } onSubmit={ this.onFilter }/> }> <ContentLayout customHeaderHeight left={ <Filters initialValues={ paged && paged.filter } onSubmit={ this.onFilter }/> }>
<PageTitle title={ title }/>
<MyDataCards <MyDataCards
tab={ tab } tab={ tab }
filterComponent={ filterComponent } filterComponent={ filterComponent }
...@@ -206,7 +204,6 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -206,7 +204,6 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
selectAll, selectAll,
unselectAll, unselectAll,
setEditMode, setEditMode,
setPageTitle,
filterCodeToUrl, filterCodeToUrl,
}, dispatch); }, 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 * as React from 'react';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Hidden from '@material-ui/core/Hidden'; import Hidden from '@material-ui/core/Hidden';
import { connect } from 'react-redux';
import { setPageTitle } from 'actions/pageTitle';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import { bindActionCreators } from 'redux';
interface IContentHeader extends React.ClassAttributes<any> { interface IContentHeader extends React.ClassAttributes<any> {
title: string; title: string;
subTitle?: string; subTitle?: string;
setPageTitle: (title: string) => void;
t: any; t: any;
} }
...@@ -17,15 +13,6 @@ class ContentHeader extends React.Component<IContentHeader , any> { ...@@ -17,15 +13,6 @@ class ContentHeader extends React.Component<IContentHeader , any> {
public constructor(props: any) { public constructor(props: any) {
super(props); 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() { public render() {
...@@ -49,9 +36,6 @@ class ContentHeader extends React.Component<IContentHeader , any> { ...@@ -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'; ...@@ -2,12 +2,12 @@ import * as React from 'react';
import {translate} from 'react-i18next'; import {translate} from 'react-i18next';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Markdown from 'ui/common/markdown';
/*tslint:disable*/ /*tslint:disable*/
const styles = (theme) => ({ const styles = (theme) => ({
subHeader: { subHeader: {
display: 'flex', display: 'flex',
backgroundColor: '#D4D2C7',
borderBottom: '1px solid #B2AFA6', borderBottom: '1px solid #B2AFA6',
'& > div': { '& > div': {
marginTop: 'auto', marginTop: 'auto',
...@@ -20,6 +20,16 @@ const styles = (theme) => ({ ...@@ -20,6 +20,16 @@ const styles = (theme) => ({
}, },
}, },
}, },
secondary: {
backgroundColor: '#D4D2C7',
},
headerTextPrimary: {
color: '#fff',
fontWeight: 700,
},
headerTextSecondary: {
color: '#000',
},
flexGrow: { flexGrow: {
display: 'flex' as 'flex', display: 'flex' as 'flex',
alignItems: 'center' as 'center', alignItems: 'center' as 'center',
...@@ -73,6 +83,7 @@ interface IContentHeaderWithButtonProps extends React.ClassAttributes<any> { ...@@ -73,6 +83,7 @@ interface IContentHeaderWithButtonProps extends React.ClassAttributes<any> {
title: string; title: string;
buttons: any; buttons: any;
t: any; t: any;
isSecondary?: boolean;
} }
class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonProps, any> { class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonProps, any> {
...@@ -82,13 +93,13 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr ...@@ -82,13 +93,13 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr
} }
public render() { public render() {
const {classes, title, buttons, t} = this.props; const {classes, title, buttons, t, isSecondary = false} = this.props;
return ( 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> <Grid item>
<h3 className="lh-35 m-0"> <h3 className={ `lh-35 m-0 ${isSecondary ? classes.headerTextSecondary : classes.headerTextPrimary}` }>
{ typeof title === 'string' ? t(title) : title } { typeof title === 'string' ? <Markdown basic source={ t(title) }/> : title }
</h3> </h3>
</Grid> </Grid>
<Grid item className={ `float-right ${classes.flexGrow}` }> <Grid item className={ `float-right ${classes.flexGrow}` }>
...@@ -99,4 +110,5 @@ class ContentHeaderWithButton extends React.Component<IContentHeaderWithButtonPr ...@@ -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'; ...@@ -9,8 +9,8 @@ import confirm from 'utilities/confirmAlert';
// UI // UI
import renderRoutes from 'ui/renderRoutes'; import renderRoutes from 'ui/renderRoutes';
import PageTitle from 'ui/common/PageTitle';
import {navigateTo} from 'actions/navigation'; import {navigateTo} from 'actions/navigation';
import {setPageTitle} from 'actions/pageTitle';
interface IStepperProps<T> extends React.ClassAttributes<any> { interface IStepperProps<T> extends React.ClassAttributes<any> {
location: any; location: any;
...@@ -29,7 +29,6 @@ interface IStepperProps<T> extends React.ClassAttributes<any> { ...@@ -29,7 +29,6 @@ interface IStepperProps<T> extends React.ClassAttributes<any> {
deleteItem: (item: T) => Promise<T>; deleteItem: (item: T) => Promise<T>;
createItem: () => void; createItem: () => void;
navigateTo: (path: string) => void; navigateTo: (path: string) => void;
setPageTitle: (title: string) => void;
route: any; route: any;
match: any; match: any;
t: any; t: any;
...@@ -90,8 +89,6 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> { ...@@ -90,8 +89,6 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> {
public constructor(props: any) { public constructor(props: any) {
super(props); super(props);
const {pageTitle, setPageTitle, t} = this.props;
setPageTitle(t(pageTitle));
} }
public componentWillMount() { public componentWillMount() {
...@@ -118,6 +115,7 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> { ...@@ -118,6 +115,7 @@ class StepperTemplate<T, P> extends React.Component<IStepperProps<T> & P, any> {
return ( return (
<div> <div>
<PageTitle title={ t(pageTitle) } />
{ {
renderRoutes(route.routes, match.path, renderRoutes(route.routes, match.path,
{ {
...@@ -152,7 +150,6 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -152,7 +150,6 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
navigateTo, navigateTo,
setPageTitle,
}, dispatch); }, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(StepperTemplate)); export default translate()(connect(mapStateToProps, mapDispatchToProps)(StepperTemplate));
......
...@@ -3,12 +3,11 @@ import { connect } from 'react-redux'; ...@@ -3,12 +3,11 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
// import { filterCodeToUrl } from 'actions/filterCode'; // import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PageTitle from 'ui/common/PageTitle';
interface IAdminDashProps extends React.ClassAttributes<any> { interface IAdminDashProps extends React.ClassAttributes<any> {
setPageTitle: (title: string) => void;
title: string; title: string;
} }
...@@ -16,8 +15,6 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> { ...@@ -16,8 +15,6 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> {
constructor(props) { constructor(props) {
super(props); super(props);
const { setPageTitle, title } = this.props;
setPageTitle(title);
} }
...@@ -25,7 +22,8 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> { ...@@ -25,7 +22,8 @@ class AdministrationDashboard extends React.Component<IAdminDashProps, void> {
console.log('Rendering admin??'); console.log('Rendering admin??');
return ( return (
<div> <div>
<ContentHeaderWithButton title="You're root, have fun!" /> <PageTitle title="You're root, have fun!"/>
<ContentHeaderWithButton title="You're root, have fun!"/>
</div> </div>
); );
} }
...@@ -36,7 +34,7 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -36,7 +34,7 @@ const mapStateToProps = (state, ownProps) => ({
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle, // not now
}, dispatch); }, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(AdministrationDashboard); export default connect(mapStateToProps, mapDispatchToProps)(AdministrationDashboard);
...@@ -4,9 +4,9 @@ import { bindActionCreators } from 'redux'; ...@@ -4,9 +4,9 @@ import { bindActionCreators } from 'redux';
import { parse } from 'query-string'; import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode'; import { filterCodeToUrl } from 'actions/filterCode';
import { setPageTitle } from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PageTitle from 'ui/common/PageTitle';
import { BaseMyDataPage } from './MyDataPage'; import { BaseMyDataPage } from './MyDataPage';
...@@ -15,7 +15,6 @@ interface IAdminDashProps extends React.ClassAttributes<any> { ...@@ -15,7 +15,6 @@ interface IAdminDashProps extends React.ClassAttributes<any> {
createPartner: any; createPartner: any;
createDescriptor: any; createDescriptor: any;
createDescriptorList: any; createDescriptorList: any;
setPageTitle: (title: string) => void;
title: string; title: string;
history: any; history: any;
} }
...@@ -23,14 +22,13 @@ interface IAdminDashProps extends React.ClassAttributes<any> { ...@@ -23,14 +22,13 @@ interface IAdminDashProps extends React.ClassAttributes<any> {
class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> { class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
constructor(props) { constructor(props) {
super(props); super(props);
const { setPageTitle, title } = this.props;
setPageTitle(title);
} }
public render() { public render() {
return ( return (
<div> <div>
<PageTitle title="What do you want to do?"/>
<ContentHeaderWithButton title="What do you want to do?"/> <ContentHeaderWithButton title="What do you want to do?"/>
</div> </div>
); );
...@@ -49,7 +47,6 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -49,7 +47,6 @@ const mapStateToProps = (state, ownProps) => ({
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
filterCodeToUrl, filterCodeToUrl,
}, dispatch); }, dispatch);
......
...@@ -5,10 +5,10 @@ import {bindActionCreators} from 'redux'; ...@@ -5,10 +5,10 @@ import {bindActionCreators} from 'redux';
import { parse } from 'query-string'; import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode'; import { filterCodeToUrl } from 'actions/filterCode';
import {setPageTitle} from 'actions/pageTitle';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton'; import BackButton from 'ui/common/buttons/BackButton';
import PageTitle from 'ui/common/PageTitle';
interface IDataPublishedContainerProps extends React.ClassAttributes<any> { interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
title: string; title: string;
...@@ -22,7 +22,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> { ...@@ -22,7 +22,6 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
preFilter?: object; preFilter?: object;
basePath: string; basePath: string;
filterCodeToUrl: any; filterCodeToUrl: any;
setPageTitle: (title: string) => void;
} }
class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps & any, any> { class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps & any, any> {
...@@ -99,8 +98,6 @@ class DP extends BaseMyDataPage<any> { ...@@ -99,8 +98,6 @@ class DP extends BaseMyDataPage<any> {
constructor(props) { constructor(props) {
super(props); super(props);
const { title, setPageTitle } = this.props;
setPageTitle(title);
} }
public render() { public render() {
...@@ -108,6 +105,7 @@ class DP extends BaseMyDataPage<any> { ...@@ -108,6 +105,7 @@ class DP extends BaseMyDataPage<any> {
return ( return (
<div> <div>
<PageTitle title={ title }/>
<ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/> <ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/>
</div> </div>
); );
...@@ -128,7 +126,6 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -128,7 +126,6 @@ const mapStateToProps = (state, ownProps) => ({
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
setPageTitle,
filterCodeToUrl, filterCodeToUrl,
}, dispatch); }, dispatch);
......
...@@ -27,6 +27,7 @@ import Number from 'ui/common/Number'; ...@@ -27,6 +27,7 @@ import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer'; import GridContainer from 'ui/layout/GridContainer';
import CropCard from 'crop/ui/c/CropCard'; import CropCard from 'crop/ui/c/CropCard';
import ActivityPostCard from 'cms/ui/c/ActivityPostCard'; import ActivityPostCard from 'cms/ui/c/ActivityPostCard';
import PageTitle from 'ui/common/PageTitle';
const styles = (theme) => ({ const styles = (theme) => ({
/* tslint:disable */