DisplayPage.tsx

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

// Actions
import { loadInstitute } from 'institutes/actions/public';
import { applyFiltersAsync as applyFilters, applyOverviewFiltersAsync as applyOverviewFilters } from 'accessions/actions/public';
import { showSnackbar } from 'actions/snackbar';

// Models
import FaoInstituteDetails from '@genesys/client/model/genesys/InstituteDetails';
import MapLayer from '@genesys/client/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, InstituteCodeLink, SubsetLink} from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
import Button from '@material-ui/core/Button';
import Permissions from 'ui/common/permission/Permissions';
import FaoInstitute from '@genesys/client/model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import DownloadDialog, { DOWNLOAD_AUTH_SLUG, DOWNLOAD_ANON_SLUG } from 'ui/common/download-dialog';
import PageTitle from 'ui/common/PageTitle';
import BlurbText from 'cms/ui/c/BlurbText';
import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
import { IPageRequest } from '@genesys/client/model/Page';
import ErrorMessage from 'ui/common/error/ErrorMessage';
import { PartnerLink } from 'ui/catalog/Links';
import PropertiesCard from 'ui/common/PropertiesCard';
import { Grid } from '@material-ui/core';
import { ExternalInstituteLink, FaoWiewsLink } from 'ui/common/Links';

/* eslint-disable*/
const styles = (theme) => ({
  italicProperties: {
    fontStyle: 'italic' as 'italic',
  },
  hasNewVersionPropLink: {
    '& > div': {
      backgroundColor: '#ffe2e2 !important',
    },
  },
  hasNewVersion: {
    backgroundColor: '#ffe2e2 !important',
  },
  pdciSubHeader: {
    fontSize: '1rem',
    color: 'black',
    marginTop: '15px',
  },
});
/* eslint-enable */


interface IDisplayPageProps extends React.ClassAttributes<any>, WithTranslation {
  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[];
  apiUrl: string;
  showSnackbar: (snack: string) => void;
  lang: string;
}


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

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

  public 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 = {
      historic: null,
      institute: { code: [institute.details.code] },
      lastModifiedDate: {
        ge: startOfDay,
        le: endOfDay,
      },
    };
    applyFilters(filter);
  }

  public componentDidMount() {
    const { code, loadInstitute, institute, userRoles } = this.props;
    if (code && (! institute || code !== institute.details.code)) {
      loadInstitute(code);
    }

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

  private addTerm = (property, term) => {
    const { applyOverviewFilters, showSnackbar, institute } = this.props;

    const updatedFilter: AccessionFilter = {
      institute: { code: [institute.details.code] },
    };
    switch (property) {
      case 'crop':
      case 'taxonomy.genus':
      case 'taxonomy.genusSpecies':
        _.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter((x) => x != null));
        break;

      default:
        _.set(updatedFilter, property, term);
    }

    showSnackbar('common.snackbar.applyingFilters');
    applyOverviewFilters(updatedFilter);
  }

  private renderLinkToOverview = (property) => (term) => {
    return (
      <a onClick={ () => this.addTerm(property, term.term) }>
        <Number value={ term.count }/>
      </a>
    );
  }

  public componentDidUpdate(prevProps: Readonly<IDisplayPageProps>): void {
    const { code: oldCode } = prevProps;
    const { loading, code, loadInstitute, institute } = this.props;
    if (code && !loading && (!institute || code !== institute.details.code) || code !== oldCode) {
      loadInstitute(code);
    }
  }

  public render() {
    const { error, loading, institute, code, userRoles, mapLayers, classes, apiUrl, t, lang } = this.props;
    const slug: string = this.state.authenticated ? DOWNLOAD_AUTH_SLUG : DOWNLOAD_ANON_SLUG;

    let cropShortNameOverview;
    let cropNameOverview;
    let taxonomyGenusOverview;
    let taxonomyGenusSpeciesOverview;
    if (!loading && institute) {
      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];
    }
    const hasNewVersion =  institute && institute.details && institute.details.vCode && institute.details.vCode !== code;

    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 ? t('institutes.public.p.display.title') : t('common:label.loading', { what: t('institutes.public.p.display.title') }) } />

        { loading ? <Loading /> :
          <div>
            { error && <ErrorMessage error={ error }/> }

            { institute &&
            <PageContents className="pt-1rem">
                <MainSection
                  className={ hasNewVersion ? classes.hasNewVersion : '' }
                  title={ institute.details.fullName || institute.details.code }
                  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>
                      <DownloadDialog
                        downloadUrl={ `${ apiUrl }/api/v1/wiews/${code}/download` }
                        slug={ slug }
                        postParams={ { mcpd: 'mcpd' } }
                        buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }
                        preventAction={ !this.state.authenticated }
                      />
                      <DownloadDialog
                        downloadUrl={ `${apiUrl}/api/v1/wiews/${code}/download` }
                        slug={ slug }
                        postParams={ { pdci: 'pdci' } }
                        buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }
                        preventAction={ !this.state.authenticated }
                      />
                      <DownloadDialog
                        downloadUrl={ `${apiUrl}/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') }>
                      <strong>{ institute.details.code }</strong>
                      <div className="float-right"><FaoWiewsLink lang={ lang } wiewsCode={ institute.details.code }>{ t('institutes.public.p.display.showWiewsPage') }</FaoWiewsLink></div>
                    </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>
                    {hasNewVersion &&
                      <PropertiesItem
                        className={ classes.hasNewVersionPropLink }
                        title={t('institutes.public.p.display.newCode')}
                      >
                        <InstituteCodeLink to={institute.details.vCode}>
                          { t('institutes.public.p.display.hasNewVersion', {instCode: institute.details.vCode}) }
                        </InstituteCodeLink>
                      </PropertiesItem>
                    }
                    { institute.details.url &&
                      <PropertiesItem title={ t('institutes.public.p.display.webLink') }>
                        <ExternalInstituteLink links={ institute.details.url }/>
                      </PropertiesItem>
                    }
                    { institute.details.owner &&
                      <PropertiesItem title={ t('accessions.public.p.display.partner') }>
                        <PartnerLink to={ institute.details.owner }/>
                      </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') }>
                        <Number value={ institute.details.latitude } />
                      </PropertiesItem>
                      <PropertiesItem title={ t('geo.common.longitude') }>
                        <Number value={ 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 }
                      valueHandler={ this.renderLinkToOverview('crop') }
                    />
                  }

                  { 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} } }
                      valueHandler={ this.renderLinkToOverview('taxonomy.genus') }
                    />
                  }

                  { 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} } }
                      valueHandler={ this.renderLinkToOverview('taxonomy.genusSpecies') }
                    />
                  }

                </GridContainer>
                <GridContainer className="mt-1rem mb-1rem">
                  { institute.recentSubsets && institute.recentSubsets.length > 0 &&
                  <Grid item xs={ 12 } style={ {minHeight: '100%'} }>
                    <PropertiesCard
                      style={ {height: '100%'} }
                      title={ t('recent.recentSubsets') }
                      propertyItemProps={ {keepEmpty: true} }
                      propertiesList={
                        institute.recentSubsets
                          .sort((a, b) => a.title.localeCompare(b.title))
                          .map((subset) => (
                            { value: <SubsetLink to={ subset }/> }
                          ))
                      }
                    />
                  </Grid>
                  }
                </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,
  apiUrl: state.applicationConfig.apiUrl,
  mapLayers: state.accessions.public.mapLayers,
  lang: state.applicationConfig.lang,
});

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


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