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

src/accessions/actions/public.ts

@@ -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}`));
     });
 };
 

src/crop/ui/c/CropCard.tsx

@@ -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>
   )
   :

src/institutes/actions/public.ts

@@ -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}`));
         });
 };
 

src/institutes/ui/с/Filters.tsx

@@ -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>

src/institutes/ui/с/InstituteCard.tsx

@@ -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>

src/model/accession/Accession.ts

@@ -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; } = {

src/model/common.model.ts

@@ -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?) {

src/model/genesys/FaoInstitute.ts

@@ -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' },
   };
 }
 

src/model/subset/Subset.ts

@@ -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' },
   };
 }
 

src/subsets/actions/public.ts

@@ -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}`));
     });
 };
 

src/ui/common/filter/FiltersBlock.tsx

@@ -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();

src/ui/common/pagination/index.tsx

@@ -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,
                                         },
                                     },
                                 } }