DisplayPage.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';

// Actions
import { loadCropDetails } from 'crop/actions/public';
import { relinkAccessions } from 'crop/actions/admin';
import { applyFilters } from 'accessions/actions/public';

// Models
import Crop from 'model/genesys/Crop';
import CropDetails from 'model/genesys/CropDetails';

// UI
import PageLayout, { PageContents, MainSection } from 'ui/layout/PageLayout';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard';
import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer';
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Authorize from 'ui/common/authorized/Authorize';
import PageTitle from 'ui/common/PageTitle';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import BlurbText from 'cms/ui/c/BlurbText';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Permissions from 'ui/common/permission/Permissions';
import AccessionFilter from 'model/accession/AccessionFilter';
import { IPageRequest } from 'model/Page';

/*tslint:disable*/
const styles = (theme) => ({
  italicProperties: {
    fontStyle: 'italic' as 'italic',
  }
});
/*tslint:enable*/

interface IDisplayPageProps extends React.ClassAttributes<any> {
  loadCropDetails: (shortName: string) => void;
  cropDetails: CropDetails;
  crops: Crop[];
  shortName: string;
  t: any;
  classes?: any;
  applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
  relinkAccessions: (shortName: string) => void;
}

class DisplayPage extends React.Component<IDisplayPageProps, any> {

  protected static needs = [
    ({ params: { shortName } }) => {
      return shortName ? loadCropDetails(shortName) : null;
    },
  ];

  public componentWillMount() {
    const { loadCropDetails, shortName, cropDetails } = this.props;
    if (shortName && (! cropDetails || shortName !== cropDetails.shortName)) {
      loadCropDetails(shortName);
    }
  }

  private applyCropFilter = () => {
    const { shortName, applyFilters} = this.props;
    const filter = { crop: [ shortName ] };
    applyFilters(filter);
  }

  private relinkAccessions = () => {
    const { relinkAccessions, shortName } = this.props;
    relinkAccessions(shortName);
  }

  public render() {
    const { cropDetails, shortName, classes, t } = this.props;
    const crop = cropDetails;

    return (
      <PageLayout withFooter>
        <PageTitle title={ !crop || crop.shortName !== shortName ?  t('common:label.loading', { what: shortName }) : crop.name }/>
        <ContentHeader title={ !crop || crop.shortName !== shortName ?  t('common:label.loading', { what: shortName }) : crop.name } />

        { !crop || crop.shortName !== shortName ? (<Loading/>) :
          <PageContents className="pt-1rem">
          <MainSection
            title={ t('crop.public.p.display.generalInformation') }
            cardActions={
              <ButtonBar>
                <Button onClick={ this.applyCropFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
                { crop._permissions.manage && <Link to={ `/c/${crop.shortName}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
                { crop._permissions.manage && <Permissions clazz={ Crop.clazz } id={ crop.id }/> }
                <Authorize role="ROLE_ADMINISTRATOR">
                  <Button onClick={ this.relinkAccessions }>{ t('crop.admin.p.link') }</Button>
                </Authorize>
              </ButtonBar>
            }
          >
            { cropDetails.blurb && cropDetails.blurb.body &&
              <div className="mb-20">
                <BlurbText body={ cropDetails.blurb.body } />
              </div>
            }
            <Properties>
              <PropertiesItem title={ t('crop.public.c.cropCard.originalName') }>{ crop.name }</PropertiesItem>
              <PropertiesItem title={ t(`crop.common.accessionsInGenesys`) } keepEmpty>
                <a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
              </PropertiesItem>
            </Properties>
          </MainSection>

            { crop.overview &&
              <GridContainer className="pb-1rem">
                { crop.overview['institute.code'] && crop.overview['institute.code'].terms &&
                  <PieChartCard
                    title={ t('crop.public.p.display.holdingInstitutes') }
                    terms={ crop.overview['institute.code'].terms }
                    missing={ crop.overview['institute.code'].missing }
                    total={ crop.overview['institute.code'].total }
                  />
                }

                { crop.overview['institute.country.code3'] && crop.overview['institute.country.code3'].terms &&
                  <PieChartCard
                    title={ t('crop.public.p.display.countryOfInstitutes') }
                    terms={ crop.overview['institute.country.code3'].terms }
                    missing={ crop.overview['institute.country.code3'].missing }
                    total={ crop.overview['institute.country.code3'].total }
                  />
                }

                { crop.overview['taxonomy.genus'] && crop.overview['taxonomy.genus'].terms &&
                  <PieChartCard
                    title={ t('crop.public.p.display.representedGenera') }
                    terms={ crop.overview['taxonomy.genus'].terms }
                    missing={ crop.overview['taxonomy.genus'].missing }
                    total={ crop.overview['taxonomy.genus'].total }
                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                  />
                }

                { crop.overview['taxonomy.genusSpecies'] && crop.overview['taxonomy.genusSpecies'].terms &&
                  <PieChartCard
                    title={ t('crop.public.p.display.representedSpecies') }
                    terms={ crop.overview['taxonomy.genusSpecies'].terms }
                    missing={ crop.overview['taxonomy.genusSpecies'].missing }
                    total={ crop.overview['taxonomy.genusSpecies'].total }
                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                  />
                }
                </GridContainer >
                }
            <PropertiesCard title={ t(`crop.public.p.display.otherNames`) }
              propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) }
              propertyItemProps={ { keepEmpty: true, small: true, numeric: true } }
            />
          </PageContents>
        }
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  shortName: ownProps.match.params.shortName,
  crops: state.crop.public.list ? state.crop.public.list.data : undefined,
  cropDetails: state.crop.public.details ? state.crop.public.details.data : undefined,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadCropDetails,
  applyFilters,
  relinkAccessions,
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(DisplayPage)));