DisplayPage.tsx

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

// Actions
import { loadInstitute } from 'institutes/actions/public';
import { applyFilters, applyOverviewFilters } from 'accessions/actions/public';

// Models
import FaoInstituteDetails from 'model/genesys/InstituteDetails';
import MapLayer from 'model/genesys/MapTileLayer';

// UI
import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
import GridContainer from 'ui/layout/GridContainer';
import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import PrettyDate from 'ui/common/time/PrettyDate';
import { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
// import { CardActions } from 'ui/common/Card';
import Button from '@material-ui/core/Button';
import Permissions from 'ui/common/permission/Permissions';
import FaoInstitute from 'model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import DownloadDialog from 'ui/common/download-dialog';
import PageTitle from 'ui/common/PageTitle';
import BlurbText from 'cms/ui/c/BlurbText';
import AccessionFilter from 'model/accession/AccessionFilter';
import { IPageRequest } from 'model/Page';

/*tslint:disable*/
const styles = (theme) => ({
  italicProperties: {
    fontStyle: 'italic' as 'italic',
  },
  pdciSubHeader: {
    fontSize: '1rem',
    color: 'black',
    marginTop: '15px',
  },
});
/*tslint:enable*/


interface IDisplayPageProps extends React.ClassAttributes<any> {
  t: any;
  classes: any;
  code: string;
  institute: FaoInstituteDetails;
  error: any;
  loading: boolean;
  loadInstitute: any;
  applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
  applyOverviewFilters: (filters: string | AccessionFilter) => any;
  userRoles: string[];
  mapLayers: MapLayer[];
}


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

  protected static needs = [
    ({ params: { wiewsCode } }) => loadInstitute(wiewsCode),
  ];

  constructor(props: IDisplayPageProps, context: any) {
    super(props, context);
  }

  public state = {
    authenticated: false,
  };

  private applyInstituteCodeFilter = () => {
    const { institute, applyFilters} = this.props;
    const filter = { institute: { code: [institute.details.code] } };
    applyFilters(filter);
  }

  private applyFilterForOverview = () => {
    const { institute, applyOverviewFilters } = this.props;
    const filter = { institute: { code: [institute.details.code] } };
    applyOverviewFilters(filter);
  }

  private applyLastModifyDateFilter = (lastUpdateDate) => {
    const { institute, applyFilters} = this.props;
    const startOfDay = new Date(`${lastUpdateDate[0]}-${lastUpdateDate[1]}-${lastUpdateDate[2]}`);
    const endOfDay = new Date(`${lastUpdateDate[0]}-${lastUpdateDate[1]}-${lastUpdateDate[2]}`);
    startOfDay.setHours(0);
    endOfDay.setHours(23, 59, 59);

    const filter = {
      institute: { code: [institute.details.code] },
      lastModifiedDate: {
        ge: startOfDay,
        le: endOfDay,
      },
    };
    applyFilters(filter);
  }

  public componentWillMount() {
    const { institute, code, loadInstitute, userRoles } = this.props;
    if (code && (! institute || code !== institute.details.code)) {
      console.log(`Reloading institute data for code=${code}`, institute);
      loadInstitute(code);
    }

    const authenticated: boolean = userRoles.findIndex((role) => role === 'ROLE_USER') !== -1;
    this.setState({authenticated});
  }

  public render() {
    const { error, loading, institute, code, userRoles, mapLayers, classes, t } = this.props;
    const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';

    let cropShortNameOverview;
    let cropNameOverview;
    let taxonomyGenusOverview;
    let taxonomyGenusSpeciesOverview;
    if (!loading) {
      const cropShortNameKey = 'crop.shortName';
      cropShortNameOverview = institute.overview[cropShortNameKey];
      const cropNameKey = 'cropName';
      cropNameOverview = institute.overview[cropNameKey];
      const taxonomyGenusKey = 'taxonomy.genus';
      taxonomyGenusOverview = institute.overview[taxonomyGenusKey];
      const taxonomyGenusSpeciesKey = 'taxonomy.genusSpecies';
      taxonomyGenusSpeciesOverview = institute.overview[taxonomyGenusSpeciesKey];
    }

    return (
      <PageLayout withFooter>
        <ScrollToTopOnMount />
        <PageTitle title={ !loading && institute ? institute.details.fullName || institute.details.code : t('common:label.loading', { what: t('institutes.public.p.display.title') }) } />
        <ContentHeader title={ !loading && institute ? institute.details.fullName || institute.details.code : t('common:label.loading', { what: t('institutes.public.p.display.title') }) } />

        { loading ? <Loading /> :
          <div>
            { error && <div>{ JSON.stringify(error) }</div> }

            { institute &&
            <PageContents className="pt-1rem">
                <MainSection
                  title={ t('institutes.public.p.display.title') }
                  cardActions={
                    <ButtonBar barLabelText={ t('institutes.public.p.display.actions') }>
                      <Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
                      { (userRoles.findIndex((role) => role === 'ROLE_ADMINISTRATOR') !== -1 || institute.details._permissions.manage) &&
                        <Link to={ `/dashboard/wiews/${institute.details.code}/files/` }>
                          <Button>{ t('institutes.public.p.display.browseFiles') }</Button>
                        </Link>
                      }
                      <Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
                      { this.state.authenticated &&
                        <DownloadDialog
                          downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
                          slug={ slug }
                          postParams={ { mcpd: 'mcpd' } }
                          buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }
                        />
                      }
                      { this.state.authenticated &&
                        <DownloadDialog
                          downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
                          slug={ slug }
                          postParams={ { pdci: 'pdci' } }
                          buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }
                        />
                      }
                      <DownloadDialog
                        downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
                        slug={ slug }
                        postParams={ { dwca: 'dwca' } }
                        buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` }
                      />
                      { institute.details._permissions.manage &&
                        <Link to={ `/dashboard/wiews/${institute.details.code}/edit` }>
                          <Button>{ t('common:action.edit') }</Button>
                        </Link>
                      }
                      { institute.details._permissions.manage &&
                        <Permissions clazz={ FaoInstitute.clazz } id={ institute.details.id }/>
                      }
                    </ButtonBar>
                  }
                >
                  { institute.blurb && institute.blurb.body &&
                      <div className="mb-20">
                        <BlurbText body={ institute.blurb.body } />
                      </div>
                  }
                  <Properties>
                    <PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem>
                    <PropertiesItem title={ t('institutes.public.p.display.type') }>{ institute.details.type }</PropertiesItem>
                    <PropertiesItem title={ t('geo.common.country') }>{ <CountryLink country={ institute.details.country }/> }</PropertiesItem>
                    { institute.details.url &&
                      <PropertiesItem title={ t('institutes.public.p.display.webLink') }>
                        <a href={ institute.details.url }> { institute.details.url }</a>
                      </PropertiesItem>
                    }
                    { institute.details.owner &&
                      <PropertiesItem title={ t('accessions.public.p.display.partner') }>
                        <b>{ institute.details.owner.shortName }</b> { institute.details.owner.name }
                      </PropertiesItem>
                    }
                    <PropertiesItem title={ t('institutes.common.accessionsInGenesys') }>
                      <a onClick={ this.applyInstituteCodeFilter }><Number value={ institute.details.accessionCount } /></a>
                    </PropertiesItem>
                  </Properties>
                </MainSection>

                { institute.details.latitude !== null && institute.details.longitude !== null &&
                  <PageSection title={ t('geo.common.location') }>
                    <LocationMap
                      locations={ [{ id: institute.details.id, lat: institute.details.latitude, lng: institute.details.longitude }] }
                      mapLayers={ mapLayers }
                    />
                    <Properties>
                      <PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
                      <PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
                    </Properties>
                  </PageSection>
                }

                <GridContainer className="mb-15">
                  { cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
                    <PieChartCard
                      title={ t('institutes.public.p.display.representedCrops') }
                      terms={ cropShortNameOverview.terms }
                      missing={ cropShortNameOverview.missing }
                      total={ cropShortNameOverview.total }
                    />
                  }

                  { cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
                    <PieChartCard
                      title={ t('institutes.public.p.display.representedCropNames') }
                      terms={ cropNameOverview.terms }
                      missing={ cropNameOverview.missing }
                      total={ cropNameOverview.total }
                    />
                  }

                  { taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
                    <PieChartCard
                      title={ t('institutes.public.p.display.representedGenera') }
                      terms={ taxonomyGenusOverview.terms }
                      missing={ taxonomyGenusOverview.missing }
                      total={ taxonomyGenusOverview.total }
                      propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                    />
                  }

                  { taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
                    <PieChartCard
                      title={ t('institutes.public.p.display.representedSpecies') }
                      terms={ taxonomyGenusSpeciesOverview.terms }
                      missing={ taxonomyGenusSpeciesOverview.missing }
                      total={ taxonomyGenusSpeciesOverview.total }
                      propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                    />
                  }

                </GridContainer>

                { institute.lastUpdates && institute.lastUpdates.length > 0 &&
                <PageSection title={ t('institutes.public.p.display.lastUpdates') }>
                  <Properties>
                    { institute.lastUpdates.map((lastUpdate) => (
                      <PropertiesItem key={ `${lastUpdate[0]}-${lastUpdate[1]}=${lastUpdate[2]}` }
                        numeric title={ <PrettyDate value={ new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2]) } /> }>
                          <a onClick={ () => this.applyLastModifyDateFilter(lastUpdate) }><Number value={ lastUpdate[3] } /></a>
                      </PropertiesItem>
                    )) }
                  </Properties>
                </PageSection>
                }

                { institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 &&
                  <PageSection
                    title={ t('institutes.public.p.display.PDCI') }
                    subheader={
                      <div className={ classes.pdciSubHeader }>
                        { t('institutes.public.p.display.pdciDescription1') }
                        <a href="https://www.cambridge.org/core/journals/plant-genetic-resources/article/quality-indicators-for-passport-data-in-ex-situ-genebanks/AD391E5CF32DD41BFB49C1FE1D457E2C">
                          { t('institutes.public.p.display.pdciDescriptionLink') }
                        </a>
                        { t('institutes.public.p.display.pdciDescription2') }
                      </div>
                    }
                  >
                    <BarChart
                      data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }
                      yLabel={ t('institutes.public.p.display.pdciYLabel') }
                      xLabel={ t('institutes.public.p.display.pdciXLabel') }
                    />
                    <div className="mt-20">
                      { t('institutes.public.p.display.pdciScore', {
                        count: institute.pdciStats.count,
                        avg: institute.pdciStats.avg.toFixed(2),
                        min: institute.pdciStats.min.toFixed(2),
                        max: institute.pdciStats.max.toFixed(2),
                      }) }
                    </div>
                  </PageSection>
                }
              </PageContents>
            }
          </div>
        }
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  institute: state.institutes.public.institute ? state.institutes.public.institute.data : undefined,
  error:  state.institutes.public.institute ? state.institutes.public.institute.error : undefined,
  loading:  state.institutes.public.institute ? state.institutes.public.institute.loading : true,
  code: ownProps.match.params.wiewsCode,
  userRoles: state.login.authorities,
  mapLayers: state.accessions.public.mapLayers,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadInstitute,
  applyFilters,
  applyOverviewFilters,
}, dispatch);


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