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

Added general text filter to descriptors, lists and datasets

parent c484af63
{
"name": "genesys-catalog-server",
"version": "1.5.0",
"version": "1.6.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
......@@ -3,14 +3,8 @@ import { reduxForm } from 'redux-form';
import {withStyles} from 'material-ui/styles';
import Button from 'material-ui/Button';
import { Descriptor } from 'model/descriptor.model';
import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
import BooleanFilter from 'ui/common/filter/BooleanFilter';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
import CropFilter from 'ui/catalog/crop/CropFilter';
import {DESCRIPTOR_FILTER_FORM} from 'constants/filter';
import DescriptorFilters from './Filters';
import { DESCRIPTOR_FILTER_FORM } from 'constants/filter';
interface IDescriptorFilterFormProps extends React.ClassAttributes<any> {
classes: any;
......@@ -38,24 +32,7 @@ class DescriptorFilterForm extends React.Component<IDescriptorFilterFormProps, a
return (
<div>
<form onSubmit={ handleSubmit }>
<CollapsibleComponentSearch title="Crop">
<CropFilter />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Descriptor category">
<StringArrFilter name="category" options={ Descriptor.CATEGORIES } />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Descriptions">
<StringFilter name="title" searchType="contains" label="Descriptor title" placeholder="Title"/>
<StringFilter name="description" searchType="contains" label="Descriptor description" placeholder="Descriptor description"/>
<StringFilter name="bibliographicCitation" searchType="contains" label="Bibliographic citation" placeholder="1997"/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Tidbits">
<BooleanFilter name="key" label="Key crop descriptor"/>
<StringFilter name="columnName" searchType="contains" label="Column name" placeholder="Column name"/>
<StringArrFilter name="uom" label="UOM" placeholder="Language"/>
</CollapsibleComponentSearch>
<DescriptorFilters />
</form>
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } className={ classes.btnGreen }>Apply</Button>
......
......@@ -6,24 +6,30 @@ import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSea
import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
import BooleanFilter from 'ui/common/filter/BooleanFilter';
import TextFilter from 'ui/common/filter/TextFilter';
import CropFilter from 'ui/catalog/crop/CropFilter';
import {DESCRIPTOR_FILTER_FORM} from 'constants/filter';
import {Descriptor} from 'model/descriptor.model';
// <CollapsibleComponentSearch title="Descriptions">
// <StringFilter name="title" searchType="contains" label="Descriptor title" placeholder="Title"/>
// <StringFilter name="description" searchType="contains" label="Descriptor description" placeholder="Descriptor description"/>
// <StringArrFilter name="publisher" label="Publisher" placeholder="Publisher"/>
// <StringFilter name="bibliographicCitation" searchType="contains" label="Bibliographic citation" placeholder="1997"/>
// <StringFilter name="list.title" searchType="contains" label="Descriptor list" placeholder="Title"/>
// <StringFilter name="list.description" searchType="contains" label="Descriptor list description" placeholder=""/>
// </CollapsibleComponentSearch>
const DescriptorFilters = ({handleSubmit, initialize, ...other}) => (
<FiltersBlock title="Crop descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
<CollapsibleComponentSearch title="Crop">
<CropFilter />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Descriptor category">
<StringArrFilter name="category" options={ Descriptor.CATEGORIES } />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Descriptions">
<StringFilter name="title" searchType="contains" label="Descriptor title" placeholder="Title"/>
<StringFilter name="description" searchType="contains" label="Descriptor description" placeholder="Descriptor description"/>
<StringArrFilter name="publisher" label="Publisher" placeholder="Publisher"/>
<StringFilter name="bibliographicCitation" searchType="contains" label="Bibliographic citation" placeholder="1997"/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Tidbits">
<BooleanFilter name="key" label="Key crop descriptor"/>
......
import * as React from 'react';
import * as _ from 'lodash';
import {withStyles} from 'material-ui/styles';
import {log} from 'utilities/debug';
......@@ -15,20 +15,47 @@ const styles = (theme) => ({
//
// Renders a standard filters block
const FiltersBlock = ({ title, children, handleSubmit, initialize, classes }) => {
const FiltersBlock = ({ title, children, handleSubmit, onSubmit, initialize, classes }) => {
const onReset = (e) => {
log('Clearing form');
initialize({});
setTimeout(handleSubmit, 100);
};
// Remove empty arrays and null filters
const cleanFilters = (filter) => {
const result: any = {};
for (const k of Object.keys(filter).sort()) {
const val = filter[k];
// console.log(`${k} = ${val} typeof ${typeof val}`);
if (_.isObject(val)) {
if (_.isArray(val) && val.length > 0) {
result[k] = val.sort();
} else {
const sub = cleanFilters(val);
if (Object.keys(sub).length) {
result[k] = sub;
}
}
} else if (val !== null) {
result[k] = val;
}
}
return result;
};
const processSubmit = handleSubmit((data) => {
console.log('Submitting', data);
return onSubmit(cleanFilters(data));
});
return (
<div>
<ExpandFiltersComponent title={ title || 'Filters' }>
<form onSubmit={ handleSubmit }>
<form onSubmit={ processSubmit }>
{ children }
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } type="submit" className={ classes.btnGreen }>Apply filters</Button>
<Button raised onClick={ processSubmit } type="submit" className={ classes.btnGreen }>Apply filters</Button>
<Button onClick={ onReset } type="button" className={ classes.btnReset }>Reset</Button>
</div>
</form>
......
import * as React from 'react';
import { Field } from 'redux-form';
import TextField from 'material-ui/TextField';
interface ITextFilterInternal extends React.ClassAttributes<any> {
input: any;
label: string;
placeholder?: string;
}
class TextFilterInternal extends React.Component<ITextFilterInternal, any> {
private constructor(props, context) {
super(props, context);
this.state = {
text: props.input.value || '',
};
}
// only for the textbox
private handleChange = (event) => {
const { input } = this.props;
const { target: { value: inputValue } } = event;
const value = inputValue && inputValue.length > 0 ? inputValue : null;
this.setState({ ...this.state, text: inputValue });
input.onChange(value);
}
public componentWillReceiveProps(nextProps) {
this.setState({ text: nextProps.input.value });
}
public render() {
const { label, placeholder } = this.props;
return (
<div>
<TextField
className="full-width"
label={ label }
value={ this.state.text }
placeholder={ placeholder }
onChange={ this.handleChange }
/>
</div>
);
}
}
interface ITextFilter extends React.ClassAttributes<any> {
name: string;
label: string;
placeholder?: string;
className?: string;
}
class TextFilter extends React.Component<ITextFilter, any> {
public render() {
const { name , label, className, ...other } = this.props;
return (
<div className={ className }>
<Field
name={ name }
component={ TextFilterInternal }
label={ label }
{ ...other }
/>
</div>
);
}
}
export default TextFilter;
......@@ -89,16 +89,16 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<Link to="/" >Home</Link>
</ListItem>
<ListItem button>
<Link to="/descriptors" >Descriptors</Link>
<Link to="/datasets" >Datasets</Link>
</ListItem>
<ListItem button>
<Link to="/descriptorlists">Crop descriptors</Link>
<Link to="/partners" >Partners</Link>
</ListItem>
<ListItem button>
<Link to="/partners" >Partners</Link>
<Link to="/descriptorlists">Crop descriptors</Link>
</ListItem>
<ListItem button>
<Link to="/datasets" >Datasets</Link>
<Link to="/descriptors" >Descriptors</Link>
</ListItem>
<ListItem button>
<Link to="/crops" >Crops</Link>
......
......@@ -150,10 +150,10 @@ class Header extends React.Component<IHeaderProps, any> {
<img src="/images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
</Link>
<div className="navigation-block">
<Link activeClassName="active" to="/descriptors">Descriptors</Link>
<Link activeClassName="active" to="/descriptorlists">Crop descriptors</Link>
<Link activeClassName="active" to="/partners">Partners</Link>
<Link activeClassName="active" to="/datasets">Datasets</Link>
<Link activeClassName="active" to="/partners">Partners</Link>
<Link activeClassName="active" to="/descriptorlists">Crop descriptors</Link>
<Link activeClassName="active" to="/descriptors">Descriptors</Link>
</div>
</div>
<div>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
......
......@@ -7,9 +7,11 @@ import FiltersBlock from 'ui/common/filter/FiltersBlock';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
import TextFilter from 'ui/common/filter/TextFilter';
const DatasetFilters = ({handleSubmit, initialize, ...other}) => (
<FiltersBlock title="Datasets" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
<CollapsibleComponentSearch title="Dataset descriptions">
<StringFilter name="title" searchType="contains" label="Title" placeholder="Dataset title"/>
<StringFilter name="description" searchType="contains" label="Description" placeholder="Dataset description"/>
......
......@@ -59,7 +59,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
const {pagination} = nextProps;
if (! oldPagination.equals(pagination)) {
log('Paginations differ!', pagination);
log('Paginations differ!', oldPagination, pagination);
loadDescriptors(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
}
}
......
......@@ -110,7 +110,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Card square>
<CardHeader title={ descriptor.title } />
<CardContent>
{ ! descriptor.published && <h2>This descriptor list is not yet published!</h2> }
{ ! descriptor.published && <h2>This descriptor is not yet published!</h2> }
{ descriptor.key && <h2>This descriptor is a key descriptor for access and utilization of PGR.</h2> }
{ descriptor.description && <Markdown className="mb-20" source={ descriptor.description } /> }
......
......@@ -61,7 +61,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
const {pagination} = nextProps;
if (! oldPagination.equals(pagination)) {
log('Paginations differ!', pagination);
log('Paginations differ!', oldPagination, pagination);
listDescriptorLists(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
}
}
......
......@@ -8,10 +8,12 @@ import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSea
import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
import CropFilter from 'ui/catalog/crop/CropFilter';
import TextFilter from 'ui/common/filter/TextFilter';
const DescriptorListFilters = ({handleSubmit, initialize, ...other}) => (
<FiltersBlock title="Crop descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
<CollapsibleComponentSearch title="Crop">
<CropFilter />
</CollapsibleComponentSearch>
......
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