Commit 59af41c0 authored by Matija Obreza's avatar Matija Obreza
Browse files

Small UI fixes

- <CropCard compact /> is link to crop
- Snackbar on applyFilters
- InstituteFilters: accessions in Genesys first
- Institute browser: sort by collection size
- Pagination sort by custom properties
parent 3f1b1a1e
......@@ -11,6 +11,7 @@ import AccessionMapInfo from 'model/accession/AccessionMapInfo';
import {RECEIVE_ACCESSIONS, RECEIVE_ACCESSION, RECEIVE_ACCESSION_OVERVIEW, APPEND_ACCESSIONS, RECEIVE_ACCESSION_MAPINFO} from 'accessions/constants';
import AccessionService from 'service/genesys/AccessionService';
import { AccessionRef } from 'model/accession/AccessionRef';
import { showSnackbar } from 'actions/snackbar';
const receiveAccessions = (paged: FilteredPage<Accession>, error = null) => ({
type: RECEIVE_ACCESSIONS,
......@@ -61,13 +62,17 @@ export const updateRoute2 = (filterCode: string, path: string = '/a', qs?: any)
export const applyFilters = (filters: string | AccessionFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
console.log('Applying new filter', filters);
dispatch(showSnackbar('Applying filters...'));
return AccessionService.list(filters, page)
.then((paged) => {
dispatch(receiveAccessions(paged));
dispatch(updateRoute(paged));
dispatch(showSnackbar(`Filters applied.`));
}).catch((error) => {
console.log(`API error`, error);
dispatch(receiveAccessions(null, error));
dispatch(showSnackbar(`API error: ${error.statusText}`));
});
};
......
......@@ -81,14 +81,12 @@ const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { cr
return compact ? (
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
<Card className={ classes.root }>
<CropImage classes={ classes } crop={ crop } />
<CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
{ crop.name }
</Link>
}/>
</Card>
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
<Card className={ classes.root }>
<CropImage classes={ classes } crop={ crop } />
<CardHeader title={ crop.name } />
</Card>
</Link>
</Grid>
)
:
......
......@@ -6,6 +6,7 @@ import FaoInstitute from 'model/genesys/FaoInstitute';
import FaoInstituteFilter from 'model/genesys/FaoInstituteFilter';
import FilteredPage, {IPageRequest} from 'model/FilteredPage';
import InstituteService from 'service/genesys/InstituteService';
import { showSnackbar } from 'actions/snackbar';
const receiveInstitutes = (paged: FilteredPage<FaoInstitute>, error = null) => ({
type: RECEIVE_INSTITUTES,
......@@ -36,13 +37,16 @@ export const listInstitutesPromise = (filter: string | FaoInstituteFilter, page:
export const applyFilters = (filters: string | FaoInstituteFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
console.log('Applying new filter', filters);
dispatch(showSnackbar('Applying filters...'));
return InstituteService.list(filters, page)
.then((paged) => {
dispatch(receiveInstitutes(paged));
dispatch(updateRoute(paged));
dispatch(showSnackbar(`Filters applied.`));
}).catch((error) => {
console.log(`API error`, error);
dispatch(receiveInstitutes(null, error));
dispatch(showSnackbar(`API error: ${error.statusText}`));
});
};
......
......@@ -13,13 +13,13 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, ...other}) =
// console.log('AccessionFilters', initialValues);
return (
<FiltersBlock title="Filter institutes" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<CollapsibleComponentSearch title="Accessions in Genesys">
<BooleanFilter name="accessions"/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Text search">
<StringArrFilter name="code" label="Institute code" placeholder="NGA039"/>
<StringFilter name="name" label="Institute name" searchType="contains" placeholder="Plant Genetic Resources Unit"/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Accessions in Genesys">
<BooleanFilter name="accessions"/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title="Location">
<StringArrFilter name="country.iso3" label="Country" placeholder="SVN"/>
</CollapsibleComponentSearch>
......
......@@ -5,6 +5,7 @@ import FaoInstitute from 'model/genesys/FaoInstitute';
import {InstituteLink} from 'ui/genesys/Links';
import Card, {CardContent, CardActions} from 'ui/common/Card';
import SciName from 'ui/genesys/SciName';
import Number from 'ui/common/Number';
const styles = (theme) => ({
firstRow: {
......@@ -29,9 +30,7 @@ const InstituteCard = ({ institute, classes, index, ...other }: { institute: Fao
</InstituteLink>
</b>
{ institute.country && ` • ${institute.country.name}` }
<span className="float-right">
{ institute.accessionCount !== 0 && `Accessions in Genesys: ${institute.accessionCount}` }
</span>
{ institute.accessionCount && <span className="float-right">Accessions in Genesys: <Number value={ institute.accessionCount } /></span> }
</div>
<div>
<em>
......
......@@ -61,7 +61,7 @@ class Accession {
};
public static SORT_OPTIONS = {
seqNo: { label: 'Accession number', dir: 'ASC' },
seqNo: { label: 'Accession number', direction: 'ASC' },
};
public static SAMPSTAT: { [key: number]: string; } = {
......
......@@ -75,8 +75,8 @@ export abstract class AuditedVersionedModel extends VersionedModel {
public lastModifiedDate: Date;
public static SORT_OPTIONS = {
createdDate: { label: 'Created date', dir: 'DESC' },
lastModifiedDate: { label: 'Last updated', dir: 'DESC' },
createdDate: { label: 'Created date', direction: 'DESC' },
lastModifiedDate: { label: 'Last updated', direction: 'DESC' },
};
public constructor(obj?) {
......
......@@ -30,8 +30,11 @@ class FaoInstitute {
property: 'code',
direction: 'ASC',
};
public static SORT_OPTIONS = {
code: {label: 'Institute code', dir: 'ASC'},
code: { label: 'Institute code', direction: 'ASC'},
accessionCount1: { property: 'accessionCount', label: 'Collection size (largest first)', direction: 'DESC' },
accessionCount2: { property: 'accessionCount', label: 'Collection size (smallest first)', direction: 'ASC' },
};
}
......
......@@ -36,10 +36,10 @@ class Subset {
direction: 'ASC',
};
public static SORT_OPTIONS = {
title: { label: 'Title', dir: 'ASC' },
accessionCount: { label: 'Number of accessions', dir: 'ASC' },
publisher: { label: 'Publisher', dir: 'ASC' },
lastModifiedDate: { label: 'Last updated', dir: 'DESC' },
title: { label: 'Title', direction: 'ASC' },
accessionCount: { label: 'Number of accessions', direction: 'ASC' },
publisher: { label: 'Publisher', direction: 'ASC' },
lastModifiedDate: { label: 'Last updated', direction: 'DESC' },
};
}
......
......@@ -4,6 +4,7 @@
// Actions
import navigateTo from 'actions/navigation';
import { showSnackbar } from 'actions/snackbar';
// Constants
import { RECEIVE_SUBSETS, RECEIVE_SUBSET, APPEND_SUBSETS } from 'subsets/constants';
......@@ -48,13 +49,16 @@ export const updateRoute = (paged: FilteredPage<Subset>) => (dispatch) => {
export const applyFilters = (filters: string | SubsetFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
console.log('Applying new filter', filters, page);
dispatch(showSnackbar('Applying filters...'));
return SubsetService.list(filters, page)
.then((paged) => {
dispatch(receiveSubsets(paged));
dispatch(updateRoute(paged));
dispatch(showSnackbar(`Filters applied.`));
}).catch((error) => {
console.log(`API error`, error);
dispatch(receiveSubsets(null, error));
dispatch(showSnackbar(`API error: ${error.statusText}`));
});
};
......
......@@ -46,7 +46,6 @@ const FiltersBlock = ({ title, children, handleSubmit, onSubmit, initialize, cla
};
const processSubmit = handleSubmit((data) => {
showSnackbar('Applying filters...');
const clean = cleanFilters(data);
log('Submitting filters', clean);
scrollToTop();
......
......@@ -142,20 +142,42 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
const { t, classes, displayName, width, pageObj, onChange, sortOptions, infinite } = this.props;
let { sortBy } = this.props;
if (!sortBy) {
sortBy = pageObj && pageObj.sort ? pageObj.sort[0].property : null;
if (sortBy && sortOptions && sortOptions[sortBy]) {
// console.log('Using auto-detected sortBy', sortBy);
} else {
if (pageObj && pageObj.sort && pageObj && pageObj.sort[0] !== null) {
sortBy = pageObj && pageObj.sort ? pageObj.sort[0].property : null;
if (sortBy && sortOptions) {
// console.log(`Using auto-detected sortBy=${sortBy}`);
sortBy = Object.keys(sortOptions).find((key) => {
const sortOption = sortOptions[key];
// console.log(`Inspecting for key=${key} prop=${pageObj.sort[0].property}`, sortOption);
if (sortOption.property && pageObj.sort[0].property === sortOption.property) {
if (sortOption.direction && pageObj.sort[0].direction !== sortOption.direction) {
// console.log('Direction doesnt match');
return false;
}
// console.log('Matching sort');
return true;
} else if (key === pageObj.sort[0].property) {
if (sortOption.direction && pageObj.sort[0].direction !== sortOption.direction) {
// console.log('Direction doesnt match');
return false;
}
return true;
}
return false;
}) || '';
// console.log(`Sort by is ${sortBy} was ${this.props.sortBy}`);
}
} else {
sortBy = '';
}
}
const isMobile = mobile.indexOf(width) !== -1;
const fireSortChange = (page, results, sortBy) => {
console.log('Sort change', sortBy, sortOptions[sortBy]);
if (sortBy && sortOptions && sortOptions[sortBy] && typeof sortOptions[sortBy] !== 'string') {
onChange(page, results, sortBy, sortOptions[sortBy].dir);
onChange(page, results, sortOptions[sortBy].property || sortBy, sortOptions[sortBy].direction);
} else {
onChange(page, results, sortBy);
}
......@@ -210,7 +232,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
MenuProps={ {
PaperProps: {
style: {
width: 188,
width: 250,
},
},
} }
......
Markdown is supported
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