Commit 07eee292 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '374-pagelayout' into 'master'

Resolve "PageLayout"

Closes #374

See merge request !298
parents 701a5586 70f2614a
Pipeline #6817 passed with stages
in 7 minutes and 42 seconds
import { COLLAPSE_SIDEBAR } from 'constants/layout';
export const collapseSidebar = (isOpen: boolean) => (dispatch) => {
dispatch({type: COLLAPSE_SIDEBAR, payload: isOpen});
};
export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
......@@ -12,6 +12,7 @@ import Authorize from 'ui/common/authorized/Authorize';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import CropCard from './c/CropCard';
import Button from '@material-ui/core/Button';
import PageLayout from 'ui/layout/PageLayout';
interface IBrowsePageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -33,7 +34,7 @@ class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
const { crops, createCrop, t } = this.props;
return (
<div>
<PageLayout>
<Authorize role="ROLE_ADMINISTRATOR">
<ContentHeaderWithButton title="What do you want to do?" buttons={ <Button variant="raised" onClick={ createCrop }>{ t('common:action.add', { what: t('label.crop') }) }</Button> } />
</Authorize>
......@@ -44,7 +45,7 @@ class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
</Grid>
)) }
</Grid>
</div>
</PageLayout>
);
}
}
......
......@@ -11,6 +11,7 @@ import { Crop } from 'model/crop.model';
import confirm from 'utilities/confirmAlert';
import CropForm from './c/CropForm';
import PageLayout from 'ui/layout/PageLayout';
interface IDescriptorEditPageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -68,13 +69,13 @@ class CropEditPage extends React.Component<IDescriptorEditPageProps, any> {
}
return (
<Grid container spacing={ 0 } className="back-gray p-20">
<PageLayout>
<Grid item xs={ 12 }>
<Paper className="p-20 mb-10">
<CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } />
</Paper>
</Grid>
</Grid>
</PageLayout>
);
}
......
......@@ -19,8 +19,11 @@ import PaginationComponent from 'ui/common/pagination';
import DatasetFilters from './c/Filters';
import DatasetCard from './c/Card';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PageLayout from 'ui/layout/PageLayout';
import Grid from '@material-ui/core/Grid';
import ContentHeader from 'ui/common/heading/ContentHeader';
import {ScrollToTopOnMount} from 'ui/common/page/scrollers';
const styles = (theme) => ({
filterSection: theme.leftPanel.root,
......@@ -107,62 +110,45 @@ class BrowsePage extends React.Component<IDatasetsProps, any> {
protected renderDataset = (d: Dataset) => <DatasetCard className="m-20" dataset={ d } key={ d.uuid } />;
public render() {
const {classes, paged, pagination} = this.props;
const { paged, pagination} = this.props;
const stillLoading: boolean = (! paged || ! paged.content);
return (
<div>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<DatasetFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
</Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 } className="back-gray">
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.dataset"
sortOptions={ Dataset.SORT_OPTIONS }
infinite
/>
</Grid>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="dataset"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PagedLoader
paged={ paged }
loadPage={ this.loadNextPage }
roughItemHeight={ 200 }
itemRenderer={ this.renderDataset }
/>
</Grid>
</Grid>
}
</Grid>
</Grid>
<Grid container spacing={ 0 } className="back-gray-yellow">
<Grid item md={ 3 } lg={ 2 } />
<Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.dataset"
sortOptions={ Dataset.SORT_OPTIONS }
infinite
/>
</Grid>
</Grid>
<PageLayout sidebar={
<DatasetFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
}>
<ScrollToTopOnMount />
<ContentHeader title="Datasets" subtitle="Datasets published by Genesys partners" />
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.dataset"
sortOptions={ Dataset.SORT_OPTIONS }
infinite
/>
</Grid>
</div>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="dataset"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PagedLoader
paged={ paged }
loadPage={ this.loadNextPage }
roughItemHeight={ 200 }
itemRenderer={ this.renderDataset }
/>
</Grid>
</Grid>
}
</PageLayout>
);
}
}
......
......@@ -8,6 +8,7 @@ import { deleteDataset, publishDataset, rejectDataset, approveDataset } from 'da
import { loadDataset } from 'datasets/actions/public';
import { Dataset } from 'model/dataset.model';
import PageLayout from 'ui/layout/PageLayout';
import BackButton from 'ui/common/buttons/BackButton';
import Loading from 'ui/common/Loading';
import DatasetDisplay from './c/DatasetDisplay';
......@@ -55,7 +56,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
const stillLoading: boolean = (! dataset || (uuid && dataset && dataset.uuid !== uuid));
return (
<div className="back-gray">
<PageLayout>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
<h4 className="font-bold lh-35 m-0">{ t('p.dataset.title') }</h4>
......@@ -80,7 +81,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
<BackButton defaultTarget="/datasets" defaultBackText={ t('common:action.backTo', { where: t('common:label.list') }) }/>
</Grid>
</Grid>
</div>
</PageLayout>
);
}
}
......
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Grid from '@material-ui/core/Grid';
import { log } from 'utilities/debug';
import confirm from 'utilities/confirmAlert';
......@@ -14,6 +13,7 @@ import { Dataset } from 'model/dataset.model';
import renderRoutes from 'ui/renderRoutes';
import steps from './steps';
import TopSection from 'ui/common/stepper/TopSection';
import PageLayout from 'ui/layout/PageLayout';
interface IDatasetProps extends React.ClassAttributes<any> {
classes: any;
......@@ -99,13 +99,13 @@ class DatasetStepper extends React.Component<IDatasetProps, any> {
}
return (
<Grid container spacing={ 0 }>
<PageLayout>
<TopSection pageTitle={ pageTitle } subTitle="Publish your datasets" />
{
renderRoutes(route.routes, match.path, { stillLoading, onGotoStep: this.gotoStep, onDelete: this.onDelete, onPublish: this.onPublish })
}
<BottomSection/>
</Grid>
</PageLayout>
);
}
......
......@@ -21,6 +21,8 @@ import PaginationComponent from 'ui/common/pagination';
import DescriptorListCard from 'descriptorlists/ui/c/Card';
import DescriptorListFilters from './c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
const styles = (theme) => ({
filterSection: theme.leftPanel.root,
......@@ -113,60 +115,45 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
)
public render() {
const {classes, paged, pagination} = this.props;
const {paged, pagination} = this.props;
const stillLoading: boolean = (! paged || ! paged.content);
return (
<Grid container spacing={ 0 }>
<ScrollToTopOnMount />
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<PageLayout sidebar={
<DescriptorListFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
</Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 } className="back-gray">
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptorlist"
sortOptions={ DescriptorList.SORT_OPTIONS }
infinite
/>
</Grid>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="descriptorList"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PagedLoader
paged={ paged }
loadPage={ this.loadNextPage }
roughItemHeight={ 200 }
itemRenderer={ this.renderDescriptorList }
/>
</Grid>
</Grid>
}
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptorlist"
sortOptions={ DescriptorList.SORT_OPTIONS }
infinite
/>
</Grid>
</Grid>
</Grid>
}>
<ScrollToTopOnMount />
<ContentHeader title="Descriptor lists" subtitle="Compilations of crop descriptors" />
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptorlist"
sortOptions={ DescriptorList.SORT_OPTIONS }
infinite
/>
</Grid>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="descriptorList"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PagedLoader
paged={ paged }
loadPage={ this.loadNextPage }
roughItemHeight={ 200 }
itemRenderer={ this.renderDescriptorList }
/>
</Grid>
</Grid>
}
</PageLayout>
);
}
}
......
......@@ -13,6 +13,7 @@ import Loading from 'ui/common/Loading';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import PageLayout from 'ui/layout/PageLayout';
import DescriptorListDisplay from './c/DescriptorListDisplay';
interface IDescriptorListPageProps extends React.ClassAttributes<any> {
......@@ -57,7 +58,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
const stillLoading: boolean = (! descriptorList || (uuid && (descriptorList.uuid !== uuid)));
return (
<div>
<PageLayout>
<ScrollToTopOnMount />
<ContentHeaderWithButton title="Descriptor list details" buttons={ <BackButton defaultTarget="/descriptorlists" /> } />
{ stillLoading ? <Loading className={ classes.contentContainer } /> :
......@@ -73,7 +74,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
/>
</span>
}
</div>
</PageLayout>
);
}
}
......
import * as React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import Grid from '@material-ui/core/Grid';
import { log } from 'utilities/debug';
import confirm from 'utilities/confirmAlert';
......@@ -17,6 +16,7 @@ import renderRoutes from 'ui/renderRoutes';
import {loadMyPartners} from 'partners/actions/dashboard';
import {Partner} from 'model/partner.model';
import steps from './steps';
import PageLayout from 'ui/layout/PageLayout';
interface IDescriptorListProps extends React.ClassAttributes<any> {
loadDescriptorList: any;
......@@ -107,13 +107,13 @@ class DescriptorListStepper extends React.Component<IDescriptorListProps, any> {
const stillLoading: boolean = (! descriptorList || (uuid && (descriptorList.uuid !== uuid)));
return (
<Grid container spacing={ 0 }>
<PageLayout>
<TopSection pageTitle={ pageTitle } subTitle="Publish your descriptor list" tab="descriptorlists"/>
{
renderRoutes(route.routes, match.path, { stillLoading, onGotoStep: this.gotoStep, onDelete: this.onDelete, onPublish: this.onPublish })
}
<BottomSection/>
</Grid>
</PageLayout>
);
}
}
......
......@@ -20,6 +20,8 @@ import DescriptorFilters from 'descriptors/ui/c/Filters';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Grid from '@material-ui/core/Grid';
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -101,7 +103,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
}
public render() {
const { classes, paged, pagination, loadDescriptors } = this.props;
const { paged, pagination, loadDescriptors } = this.props;
const stillLoading: boolean = (! paged || ! paged.content);
......@@ -112,55 +114,38 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
);
return (
<div className="back-gray ">
<PageLayout sidebar={
<DescriptorFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
}>
<ContentHeader title="Descriptor definitions" subtitle="Genesys Catalog of published descriptor definitions" />
<ScrollToTopOnMount />
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.leftPanel }>
<DescriptorFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
</Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptor"
infinite
sortOptions={ Descriptor.SORT_OPTIONS }
/>
</Grid>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="descriptor"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-20">
<PagedLoader
paged={ paged }
loadPage={ loadNextPage }
roughItemHeight={ 600 }
itemRenderer={ renderDescriptor } />
</Grid>
}
</Grid>
</Grid>
<Grid container spacing={ 0 } className="back-gray-yellow">
<Grid item md={ 2 }/>
<Grid item xs={ 12 } md={ 10 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptor"
infinite
sortOptions={ Descriptor.SORT_OPTIONS }
/>
</Grid>
</Grid>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.descriptor"
infinite
sortOptions={ Descriptor.SORT_OPTIONS }
/>
</Grid>
</div>
<Grid item xs={ 12 }>
<PrettyFilters
prefix="descriptor"
filterObj={ pagination.filter }
onSubmit={ this.applyFilters }
/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-20">
<PagedLoader
paged={ paged }
loadPage={ loadNextPage }
roughItemHeight={ 600 }
itemRenderer={ renderDescriptor }
/>
</Grid>
}
</PageLayout>
);
}
}
......
......@@ -26,6 +26,7 @@ import VocabularyCard from 'vocabulary/ui/c/VocabularyCard';
import DescriptorScale from 'descriptors/ui/c/DescriptorScale';
import BackButton from 'ui/common/buttons/BackButton';
import Permissions from 'ui/common/permission/Permissions';
import PageLayout from 'ui/layout/PageLayout';
import Grid from '@material-ui/core/Grid';
import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
......@@ -136,7 +137,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
// const terms: VocabularyTerm[] = descriptor ? (descriptor.terms || (descriptor.vocabulary ? descriptor.vocabulary.terms : null)) : null;
// <PropertiesItem title="Publisher:">{ descriptor.publisher || <i>Not specified</i> }</PropertiesItem>
return (
<div>
<PageLayout>
<ScrollToTopOnMount />
<ContentHeaderWithButton title="Descriptor details" buttons={ <BackButton defaultTarget="/descriptors" /> } />
{ stillLoading ? <Loading /> :
......@@ -284,7 +285,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</Grid>
</Grid>
}
</div>
</PageLayout>
);
}
}
......
......@@ -15,6 +15,7 @@ import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import PageLayout from 'ui/layout/PageLayout';
interface IDescriptorEditPageProps extends React.ClassAttributes<any> {
classes: any;
......@@ -73,7 +74,7 @@ class DescriptorEditPage extends React.Component<IDescriptorEditPageProps, any>
}
return (
<div>
<PageLayout>
<ContentHeaderWithButton title="Data publication" buttons={ <BackButton defaultTarget="/dashboard/descriptors" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/>
<Grid container spacing={ 0 } className="p-20 back-gray">
<Grid item xs={ 12 }>
......@@ -85,7 +86,7 @@ class DescriptorEditPage extends React.Component<IDescriptorEditPageProps, any>
) }
</Grid>
</Grid>
</div>
</PageLayout>
);
}
}
......
......@@ -20,6 +20,9 @@ import PartnerCard from './c/PartnerCard';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Grid from '@material-ui/core/Grid';
import PageLayout from 'ui/layout/PageLayout';
import {ScrollToTopOnMount} from 'ui/common/page/scrollers';
import ContentHeader from 'ui/common/heading/ContentHeader';
interface IBrowsePageProps extends React.ClassAttributes<any> {
login: any;
......@@ -111,63 +114,45 @@ class PartnerListPage extends React.Component<IBrowsePageProps, any> {
public render() {
const { classes, paged, pagination } = this.props;
const { paged, pagination } = this.props;
const stillLoading: boolean = (! paged || ! paged.content);
return (
<div className="back-gray">
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<PartnerFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
</Grid>
<Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
displayName="label.partner"
sortOptions={ Partner.SORT_OPTIONS }
infinite
/>
</Grid>
<Grid item xs={ 12 }>
<PrettyFilters