Skip to content
GitLab
Commit 200e45e4 authored by Matija Obreza's avatar Matija Obreza
Browse files

Dashboard filters

parent 41240111
Hide whitespace changes
Inline Side-by-side
src/constants/dashboard.ts 0 → 100644
View file @ 200e45e4
export const DASHBOARD_FILTERFORM = 'Form/DASHBOARD_FILTERFORM';
src/ui/pages/dashboard/DashboardPage.tsx
View file @ 200e45e4
......@@ -4,6 +4,7 @@ import Grid from 'material-ui/Grid';
import { bindActionCreators } from 'redux';
import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode';
import { createPartner } from 'actions/partner';
import { createDataset, listMyDatasets } from 'actions/dataset';
import { createDescriptor, listMyDescriptors } from 'actions/descriptors';
......@@ -56,29 +57,11 @@ class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
this.props.history.push('/dashboard/data-published');
}
protected onPaginationChange = (page, results, sortBy, dir) => {
const { history, location } = this.props;
const params = new URLSearchParams(location.search);
params.set('p', page);
params.set('l', results);
if (sortBy) {
params.set('s', sortBy);
} else {
params.delete('s');
}
if (dir) {
params.set('d', dir);
} else {
params.delete('d');
}
location.search = params.toString();
history.push(location);
}
public render() {
const {tab, datasets, descriptors, descriptorLists, createPartner, createDescriptor, createDescriptorList} = this.props;
const {tab, datasets, descriptors, descriptorLists, createPartner, createDescriptor, createDescriptorList, filter, filterCode} = this.props;
// console.log('Dash', tab, filterCode, filter);
let paged: Page<any> = datasets as Page<Dataset>;
......@@ -125,7 +108,7 @@ class AdministrationDashboard extends BaseMyDataPage<IAdminDashProps> {
</Grid>
</div>
<MyDataTable tab={ tab } basePath="/dashboard"
<MyDataTable tab={ tab } basePath="/dashboard" filterCode={ filterCode } filter={ filter } onFilter={ this.onFilter }
paged={ paged } onPaginationChange={ this.onPaginationChange }/>
</div>
);
......@@ -139,6 +122,8 @@ const mapStateToProps = (state, ownProps) => ({
pageSize: +parse(ownProps.location.search).l || 20, // page size
pageSort: parse(ownProps.location.search).s || 'lastModifiedDate', // page sort
pageDir: parse(ownProps.location.search).d || 'DESC', // page sort direction
filterCode: parse(ownProps.location.search).filter, // filter code
filter: state.filterCode.filters && parse(ownProps.location.search).filter && state.filterCode.filters[parse(ownProps.location.search).filter] || null,
datasets: state.datasets.paged,
descriptors: state.descriptors.paged,
descriptorLists: state.descriptorList.paged,
......@@ -153,6 +138,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
listDescriptors: listMyDescriptors,
listDescriptorLists: listMyDescriptorLists,
setPageTitle,
filterCodeToUrl,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(AdministrationDashboard);
src/ui/pages/dashboard/MyDataPage.tsx
View file @ 200e45e4
......@@ -8,6 +8,7 @@ import {Descriptor, DescriptorList} from 'model/descriptor.model';
import {Page} from 'model/common.model';
import { parse } from 'query-string';
import { filterCodeToUrl } from 'actions/filterCode';
import {listMyDatasets} from 'actions/dataset';
import {listMyDescriptors} from 'actions/descriptors';
import {listMyDescriptorLists} from 'actions/descriptorList';
......@@ -24,11 +25,14 @@ interface IDataPublishedContainerProps extends React.ClassAttributes<any> {
pageSize: number;
pageSort?: string;
pageDir?: string;
filterCode?: string;
filter: any;
datasets: Page<Dataset>;
descriptors: Page<Descriptor>;
descriptorLists: Page<DescriptorList>;
preFilter?: object;
basePath: string;
filterCodeToUrl: any;
listDescriptorLists: any;
listDescriptors: any;
listDatasets: any;
......@@ -44,18 +48,19 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
const pageSize = parse(search).l;
const pageSort = parse(search).s;
const pageDir = parse(search).d;
const filterCode = parse(search).filter;
switch (tab) {
case 'descriptors': return listMyDescriptors(pageCurrent, pageSize, pageSort, {}, pageDir);
case 'descriptorlists': return listMyDescriptorLists(pageCurrent, pageSize, pageSort, {}, pageDir);
case 'descriptors': return listMyDescriptors(pageCurrent, pageSize, pageSort, filterCode || {}, pageDir);
case 'descriptorlists': return listMyDescriptorLists(pageCurrent, pageSize, pageSort, filterCode || {}, pageDir);
case 'datasets':
default: return listMyDatasets(pageCurrent, pageSize, pageSort, {}, pageDir);
default: return listMyDatasets(pageCurrent, pageSize, pageSort, filterCode || {}, pageDir);
}
},
];
constructor(props) {
super(props);
this.state = {tab: ''};
this.state = {tab: '', filterCode: props.filterCode};
}
public componentDidMount() {
......@@ -64,8 +69,9 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
public componentWillMount() {
const {tab, pageCurrent, pageSize, pageSort, pageDir} = this.props;
// console.log(`willM ${filterCode}`, filters[filterCode]);
this.loadData(tab, pageCurrent, pageSize, pageSort, pageDir);
this.loadData(null, tab, pageCurrent, pageSize, pageSort, pageDir);
}
public componentWillUnmount() {
......@@ -73,9 +79,18 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
}
public componentWillReceiveProps(nextProps) {
const {tab, pageCurrent, pageSize, pageSort, pageDir} = nextProps;
const {filterCodeToUrl} = this.props;
const paged = this.getPaged(nextProps);
this.loadData(tab, pageCurrent, pageSize, pageSort, pageDir);
if (paged) {
filterCodeToUrl(paged.filterCode);
}
const {tab} = nextProps;
if (tab !== this.state.tab) {
const {pageCurrent, pageSize, pageSort, pageDir} = nextProps;
this.loadData(null, tab, pageCurrent, pageSize, pageSort, pageDir);
}
}
public componentWillUpdate(nextProps, nextState) {
......@@ -86,6 +101,15 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
// noop
}
protected getPaged(props) {
switch (props.tab) {
case 'descriptorlists': return props.descriptorLists;
case 'descriptors': return props.descriptors;
case 'datasets':
default: return props.datasets;
}
}
protected onPaginationChange = (page, results, sortBy, dir) => {
const { history, location } = this.props;
const params = new URLSearchParams(location.search);
......@@ -104,28 +128,38 @@ class BaseMyDataPage<T> extends React.Component<T & IDataPublishedContainerProps
location.search = params.toString();
history.push(location);
const { tab } = this.props;
this.loadData(null, tab, page, results, sortBy, dir);
}
protected loadData(tab, page, size, sortBy, dir) {
const {listDatasets, listDescriptors, listDescriptorLists, preFilter} = this.props;
protected onFilter = (newFilters) => {
this.setState({...this.state, filter: newFilters});
const filters = preFilter;
const {tab, pageCurrent, pageSize, pageSort, pageDir} = this.props;
this.loadData(newFilters, tab, pageCurrent, pageSize, pageSort, pageDir);
}
if (this.state.tab !== tab || this.state.pageCurrent !== page || this.state.pageSize !== size || this.state.pageSort !== sortBy || this.state.pageDir !== dir) {
protected loadData(filter, tab, page, size, sortBy, dir) {
const {listDatasets, listDescriptors, listDescriptorLists, preFilter, filterCode} = this.props;
const newFilters = filter && { ...preFilter, ...filter };
// console.log(`Filters code=${filterCode}`, newFilters, preFilter);
if (newFilters || this.state.tab !== tab || this.state.pageCurrent !== page || this.state.pageSize !== size || this.state.pageSort !== sortBy || this.state.pageDir !== dir) {
// console.log('Reloading');
this.setState(update(this.state, {
tab: {$set: tab},
pageCurrent: {$set: page},
pageSize: {$set: size},
pageSort: {$set: sortBy},
pageDir: {$set: dir},
filterCode: {$set: filterCode},
}));
switch (tab) {
case 'descriptors': listDescriptors(page, size, sortBy, filters, dir); break;
case 'descriptorlists': listDescriptorLists(page, size, sortBy, filters, dir); break;
case 'descriptors': listDescriptors(page, size, sortBy, newFilters || filterCode, dir); break;
case 'descriptorlists': listDescriptorLists(page, size, sortBy, newFilters || filterCode, dir); break;
case 'datasets':
default: listDatasets(page, size, sortBy, filters, dir); break;
default: listDatasets(page, size, sortBy, newFilters || filterCode, dir); break;
}
} else {
// noop
......@@ -142,21 +176,14 @@ class DP extends BaseMyDataPage<any> {
}
public render() {
const {title, tab, basePath, datasets, descriptors, descriptorLists} = this.props;
const {title, tab, basePath, filterCode, filter} = this.props;
let paged: Page<any> = datasets;
switch (tab) {
case 'descriptorlists': paged = descriptorLists; break;
case 'descriptors': paged = descriptors; break;
case 'datasets':
default: break;
}
const paged = this.getPaged(this.props);
return (
<div>
<ContentHeaderWithButton title={ title } buttons={ <BackButton defaultTarget="/dashboard" defaultBackText="BACK TO DASHBOARD" preferDefaultTarget="true" /> }/>
<MyDataTable tab={ tab } basePath={ basePath }
<MyDataTable tab={ tab } basePath={ basePath } filterCode={ filterCode } filter={ filter } onFilter={ this.onFilter }
paged={ paged } onPaginationChange={ this.onPaginationChange } />
</div>
);
......@@ -172,6 +199,8 @@ const mapStateToProps = (state, ownProps) => ({
pageSize: +parse(ownProps.location.search).l || 20, // page size
pageSort: parse(ownProps.location.search).s, // page sort
pageDir: parse(ownProps.location.search).d, // page sort direction
filterCode: parse(ownProps.location.search).filter, // filter code
filter: state.filterCode.filters && parse(ownProps.location.search).filter && state.filterCode.filters[parse(ownProps.location.search).filter] || null,
datasets: state.datasets.paged,
descriptors: state.descriptors.paged,
descriptorLists: state.descriptorList.paged,
......@@ -182,6 +211,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
listDescriptors: listMyDescriptors,
listDescriptorLists: listMyDescriptorLists,
setPageTitle,
filterCodeToUrl,
}, dispatch);
const MyDataPage = connect(
......
src/ui/pages/dashboard/c/Filters.tsx 0 → 100644
View file @ 200e45e4
import * as React from 'react';
import { reduxForm } from 'redux-form';
import { DASHBOARD_FILTERFORM } from 'constants/dashboard';
import FiltersBlock from 'ui/common/filter/FiltersBlock';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
import CropFilter from 'ui/catalog/crop/CropFilter';
import TextFilter from 'ui/common/filter/TextFilter';
import Authorize from 'ui/common/authorized/Authorize';
import PartnerFilter from 'ui/catalog/partner/PartnerFilter';
const DashboardFilters = ({handleSubmit, initialize, ...other}) => (
<FiltersBlock title="Filters" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
<Authorize role="ROLE_ADMINISTRATOR">
<PartnerFilter name="owner" label="Select owner" className="p-20" />
</Authorize>
<CollapsibleComponentSearch title="Crop">
<CropFilter />
</CollapsibleComponentSearch>
</FiltersBlock>
);
export default reduxForm({
enableReinitialize: true,
form: DASHBOARD_FILTERFORM,
})(DashboardFilters);
src/ui/pages/dashboard/c/MyDataTable.tsx
View file @ 200e45e4
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import {Page} from 'model/common.model';
......@@ -10,17 +11,28 @@ import {DatasetLink, DescriptorLink, DescriptorListLink} from 'ui/catalog/Links'
import PrettyDate from 'ui/common/time/PrettyDate';
import Markdown from 'ui/catalog/markdown';
import Permissions from 'ui/common/permission/Permissions';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import DashboardFilters from './Filters';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
import Grid from 'material-ui/Grid';
interface IDatasetLinkProps extends React.Props<any> {
const styles = (theme) => ({
filterSection: theme.leftPanel.root,
});
interface IMyDataTableProps extends React.Props<any> {
classes?: any;
tab: string;
basePath: string;
paged: Page<any>;
onPaginationChange: (page: number, results: number, sortBy: string, dir?: string) => void;
pageSort?: string;
onFilter: (filter) => void;
filter: any;
filterCode?: string;
}
const defaultSortOptions = {
......@@ -41,12 +53,16 @@ const descriptorListSortOptions = {
...defaultSortOptions,
};
export default function MyDataTable({
function MyDataTable({
classes,
tab,
basePath,
paged,
onPaginationChange,
}: IDatasetLinkProps) {
onFilter,
filter,
filterCode,
}: IMyDataTableProps) {
if (! paged) {
return null;
......@@ -74,55 +90,67 @@ export default function MyDataTable({
}
};
const query = filterCode ? `?filter=${filterCode}` : '';
// console.log(`DF initialValues ${query}`, filter);
return (
<div>
<Tabs tab={ tab }>
<Tab name="datasets" to={ basePath }>Datasets</Tab>
<Tab name="descriptors" to={ `${basePath}/descriptors` }>Descriptors</Tab>
<Tab name="descriptorlists" to={ `${basePath}/descriptorlists` }>Descriptor lists</Tab>
<Tab name="datasets" to={ `${basePath}${query}` }>Datasets</Tab>
<Tab name="descriptors" to={ `${basePath}/descriptors${query}` }>Descriptors</Tab>
<Tab name="descriptorlists" to={ `${basePath}/descriptorlists${query}` }>Descriptor lists</Tab>
</Tabs>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
<Grid container spacing={ 0 }>
<ContentContainer>
<Paper>
<Table widths={ [ '10px', '30%', null, null, null, null, '210px' ] } headers={ (
<TableRow>
<TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
<TableCell>Title</TableCell>
<TableCell style={ { maxWidth: '30px' } }>Owner</TableCell>
<TableCell>Created</TableCell>
<TableCell>Modified</TableCell>
<TableCell style={ { maxWidth: '60px' } }>Status</TableCell>
<TableCell style={ { maxWidth: '210px' } } />
</TableRow>
) }>
{ paged && paged.content.map((row, i) => (
<TableRow key={ row.id }>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>{ paged.size * paged.number + i + 1 }</TableCell>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>{ <Markdown basic source={ row.title } /> || (<i>Untitled</i>) }</ResolveLink>
</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.owner.shortName }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.createdDate && <PrettyDate value={ row.createdDate } /> }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.lastModifiedDate && <PrettyDate value={ row.lastModifiedDate } /> }</TableCell>
<TableCell style={ { color: row.published ? '#88bb41' : '#ed9506' , fontSize: '1rem' } }>{ row.published ? 'Published' : 'In progress' }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>
<Button raised>{ row.published && row._permissions.write ? 'VIEW' : 'EDIT' }</Button>
</ResolveLink>
{ row._permissions.manage && <Permissions clazz={ row.clazz } id={ row.id } /> }
</TableCell>
</TableRow>
),
) }
</Table>
</Paper>
</ContentContainer>
<ScrollToTopOnMount />
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<DashboardFilters initialValues={ filter } onSubmit={ onFilter } />
</Grid>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
<Grid item xs={ 12 } md={ 9 } lg={ 10 } className="back-gray">
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
<Grid container spacing={ 0 }>
<ContentContainer>
<Paper>
<Table widths={ [ '10px', '30%', null, null, null, null, '210px' ] } headers={ (
<TableRow>
<TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
<TableCell>Title</TableCell>
<TableCell style={ { maxWidth: '30px' } }>Owner</TableCell>
<TableCell>Created</TableCell>
<TableCell>Modified</TableCell>
<TableCell style={ { maxWidth: '60px' } }>Status</TableCell>
<TableCell style={ { maxWidth: '210px' } } />
</TableRow>
) }>
{ paged && paged.content.map((row, i) => (
<TableRow key={ row.id }>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>{ paged.size * paged.number + i + 1 }</TableCell>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>{ <Markdown basic source={ row.title } /> || (<i>Untitled</i>) }</ResolveLink>
</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.owner.shortName }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.createdDate && <PrettyDate value={ row.createdDate } /> }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.lastModifiedDate && <PrettyDate value={ row.lastModifiedDate } /> }</TableCell>
<TableCell style={ { color: row.published ? '#88bb41' : '#ed9506' , fontSize: '1rem' } }>{ row.published ? 'Published' : 'In progress' }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>
<Button raised>{ row.published && row._permissions.write ? 'VIEW' : 'EDIT' }</Button>
</ResolveLink>
{ row._permissions.manage && <Permissions clazz={ row.clazz } id={ row.id } /> }
</TableCell>
</TableRow>
),
) }
</Table>
</Paper>
</ContentContainer>
</Grid>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
</Grid>
</Grid>
</div>
);
}
export default withStyles(styles)(MyDataTable);
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