Commit c299d620 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '142-dashboard-catalog-pages' into 'master'

Dashboard: Catalog pages

Closes #142

See merge request genesys-pgr/genesys-ui!141
parents 616fc07b 8a749d5a
......@@ -18,6 +18,8 @@ import {
// import PageLayout from 'ui/layout/PageLayout';
import MyDataTable from './c/MyDataTable';
import DashboardActionsButton from './c/DashboardActionsButton';
import ContentLayout from 'ui/layout/ContentLayout';
import DashboardFilters from './c/Filters';
// import ContentHeader from 'ui/common/heading/ContentHeader';
// TODO fix props
......@@ -109,8 +111,10 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
const { tab, filterComponent, basePath, pagination, addToEditList, removeFromEditList, isEditMode, setEditMode, editList, paged, dataClassName, renderDataLink } = this.props;
const actionHandlers = this.getActionHandlers();
const Filters = filterComponent ? filterComponent : DashboardFilters;
return (
<div>
<ContentLayout customHeaderHeight left={ <Filters initialValues={ pagination.filter } onSubmit={ this.onFilter }/> }>
<MyDataTable
tab={ tab }
filterComponent={ filterComponent }
......@@ -129,7 +133,7 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
{ ...actionHandlers }
/>
<DashboardActionsButton tab={ tab }/>
</div>
</ContentLayout>
);
}
......
......@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
import withStyles from '@material-ui/core/styles/withStyles';
import Authorize from 'ui/common/authorized/Authorize';
import { translate } from 'react-i18next';
import ButtonBar from 'ui/common/buttons/ButtonBar';
const styles = () => ({
hidden: {
......@@ -39,7 +40,7 @@ class DashboardActionsArea extends React.Component<IDasboardActionsAreaProps, an
public render() {
const { mainButtonTitle, cancelButtonTitle, actions, classes, isEditMode, t } = this.props;
return (
<div>
<ButtonBar>
<Button variant="contained" className={ isEditMode ? classes.hidden : '' } onClick={ this.onShowClick }> { mainButtonTitle || t('common:action.show') } </Button>
{ actions && actions.map((action, i) => (
!action.admin ?
......@@ -49,7 +50,7 @@ class DashboardActionsArea extends React.Component<IDasboardActionsAreaProps, an
</Authorize>
)) }
<Button variant="contained" className={ !isEditMode ? classes.hidden : '' } onClick={ this.onShowClick }> { cancelButtonTitle || t('common:action.cancel') } </Button>
</div>
</ButtonBar>
);
}
......
......@@ -8,15 +8,12 @@ import Dataset from 'model/catalog/Dataset';
import DescriptorList from 'model/catalog/DescriptorList';
import Descriptor from 'model/catalog/Descriptor';
import Tabs, { Tab } from 'ui/common/Tabs';
import { Table } from 'ui/common/tables';
import PaginationComponent from 'ui/common/pagination';
import { ContentContainer } from 'ui/layout/Container';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import DashboardTableRow from './DashboardTableRow';
import DashboardFilters from './Filters';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Loading from 'ui/common/Loading';
......@@ -81,9 +78,9 @@ class MyDataTable extends React.Component<IMyDataTableProps> {
public render() {
const {tab, editList, isEditMode, setEditState, basePath, paged, filterComponent, classes, t } = this.props;
const {tab, editList, isEditMode, setEditState, paged, t } = this.props;
const {publishAllAction, unpublishAllAction, deleteAllAction, approveAllAction, selectAll, unselectAll} = this.props;
const {pagination, onFilter, onSortChange, promiseListData} = this.props;
const {onSortChange, promiseListData} = this.props;
const actions = [
{ title: t('dashboard.action.submitSelected'), action: publishAllAction },
......@@ -93,33 +90,29 @@ class MyDataTable extends React.Component<IMyDataTableProps> {
];
const sortOptions = defaultSortOptions;
const Filters = filterComponent ? filterComponent : DashboardFilters;
const query = pagination.filterCode ? `?filter=${pagination.filterCode}` : '';
return(
<div>
<Tabs tab={ tab } actions={
<DashboardActionsArea
mainButtonTitle={ t('common:action.edit') }
isEditMode={ isEditMode }
actions={ actions }
onShow={ () => setEditState(true) }
onHide={ () => setEditState(false) }
/>
}>
<Tab name="datasets" to={ `${basePath}/datasets${query}` }>{ t('datasets.common.modelName_plural') }</Tab>
<Tab name="descriptors" to={ `${basePath}/descriptors${query}` }>{ t('descriptors.common.modelName_plural') }</Tab>
<Tab name="descriptorlists" to={ `${basePath}/descriptorlists${query}` }>{ t('descriptorlists.common.modelName_plural') }</Tab>
</Tabs>
<ScrollToTopOnMount/>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<Filters initialValues={ pagination.filter } onSubmit={ onFilter }/>
</Grid>
{ !paged ? <Loading/> :
<Grid item xs={ 12 } md={ 9 } lg={ 10 } className="back-gray">
<PaginationComponent displayName="records" pageObj={ paged } onSortChange={ onSortChange } sortOptions={ sortOptions } infinite/>
<Grid item xs={ 12 } className="back-gray">
<PaginationComponent
displayName="records"
pageObj={ paged }
onSortChange={ onSortChange }
sortOptions={ sortOptions }
infinite
actions={
<DashboardActionsArea
mainButtonTitle={ t('common:action.edit') }
isEditMode={ isEditMode }
actions={ actions }
onShow={ () => setEditState(true) }
onHide={ () => setEditState(false) }
/>
}
/>
<Grid container spacing={ 0 }>
<ContentContainer>
<Paper>
......
......@@ -29,11 +29,12 @@ const styles = (theme) => ({
},
},
menuItem: {
padding: '6px 0',
padding: '0',
'& > div, & > span': {
width: '100%',
margin: '0 !important',
},
height: '100%',
'& button': {
width: '100%',
height: '100%',
......
......@@ -16,6 +16,7 @@ interface IPaginationComponentProps extends React.ClassAttributes<any> {
classes: any;
t: any;
actions?: any;
width: Breakpoint;
pageObj: Page<any>;
onSortChange: (sortBy?: string, dir?: string) => void;
......@@ -56,7 +57,24 @@ const styles = (theme) => ({
height: '17px',
},
},
actionSortArea: {
[theme.breakpoints.down('sm')]: {
height: '100%',
alignItems: 'center' as 'center',
},
display: 'flex' as 'flex',
justifyContent: 'flex-end' as 'flex-end',
alignItems: 'baseline' as 'baseline',
},
actions: {
margin: 0,
'& button': {
margin: '0 4px',
},
},
showResults: {
height: '100%',
float: 'right',
marginTop: '12px',
marginLeft: '12px',
......@@ -82,7 +100,8 @@ const styles = (theme) => ({
border: '1px #e8e6e0 solid',
borderRadius: '3px',
padding: '2px 0 0 7px',
margin: '9px 0 0 4px',
margin: 'auto 8px',
height: 'auto' as 'auto',
'&:before': {
content: 'none',
},
......@@ -140,7 +159,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
}
public render() {
const { t, classes, displayName, pageObj, sortOptions } = this.props;
const { t, classes, displayName, pageObj, sortOptions, actions } = this.props;
let { sortBy } = this.props;
......@@ -180,6 +199,8 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
{ t(pageObj && pageObj.totalElements < 10000 ? 'common:paginate.numberOfItems' : 'common:paginate.estimatedNumberOfItems',
{ count: pageObj ? pageObj.totalElements : '', what: t(displayName || 'common:label.item', { count: pageObj ? pageObj.totalElements : 0 }) }) }
</div>
<div className={ classes.actionSortArea }>
{ actions && <span className={ classes.actions }>{ actions }</span> }
{ sortOptions && (
<Select
value={ sortBy }
......@@ -219,6 +240,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
}
</Select>
) }
</div>
</Grid>
</Grid>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment