DisplayPage.tsx

import * as React from 'react';
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 PropertiesCard from 'ui/common/PropertiesCard.tsx';
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 PieChart from 'ui/common/pie-chart';
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';

interface IDisplayPageProps extends React.ClassAttributes<any> {
  t: any;
  classes?: any;
  code: string;
  institute: FaoInstituteDetails;
  error: any;
  loading: boolean;
  loadInstitute: any;
  applyFilters: any;
  applyOverviewFilters: 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 = {holder: {code: [ institute.details.code ]}};
    applyFilters(filter);
  }

  private applyFilterForOverview = () => {
    const { institute, applyOverviewFilters } = this.props;
    const filter = {holder: {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 = {
      holder: {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, mapLayers, 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') }>
                  { 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>

                  <CardActions className="container-spacing-vertical mt-15">
                    <ButtonBar barLabelText={ t('institutes.public.p.display.actions') }>
                      <Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
                      <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>
                  </CardActions>
                </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 &&
                    <PropertiesCard
                      title={ t('institutes.public.p.display.representedCrops') }
                      propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
                      small propertyItemProps={ { numeric: true } }
                    />
                  }

                  { cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
                    <PropertiesCard
                      title={ t('institutes.public.p.display.representedCropNames') }
                      propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small propertyItemProps={ { numeric: true } }
                    >
                      <PieChart
                        data={
                          cropNameOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                  { taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
                    <PropertiesCard
                      title={ t('institutes.public.p.display.representedGenera') }
                      propertiesList={  taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small propertyItemProps={ { numeric: true } }
                    >
                      <PieChart
                        data={
                          taxonomyGenusOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                  { taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
                    <PropertiesCard
                      title={ t('institutes.public.p.display.representedSpecies') }
                      propertiesList={  taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small propertyItemProps={ { numeric: true } }
                    >
                      <PieChart
                        data={
                          taxonomyGenusSpeciesOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                </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') }>
                    <BarChart data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }/>
                    <p className="mt-20">{ t('institutes.public.p.display.pdciScore', { count: institute.pdciStats.count, avg: institute.pdciStats.avg, min: institute.pdciStats.min, max: institute.pdciStats.max }) }</p>
                    <Link to="/content/passport-data-completeness-index">{ t('institutes.public.p.display.readPDCI') }</Link>
                  </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)(translate()(DisplayPage));