DisplayPage.tsx 7.37 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
import * as React from 'react';
Matija Obreza's avatar
Matija Obreza committed
2
3
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
4
5
6
7
import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';

// Actions
Matija Obreza's avatar
Matija Obreza committed
8
import { loadCropDetails } from 'crop/actions/public';
9
import { relinkAccessions } from 'crop/actions/admin';
Matija Obreza's avatar
Matija Obreza committed
10
import { applyFilters } from 'accessions/actions/public';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
11
12

// Models
13
import Crop from 'model/genesys/Crop';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
14
import CropDetails from 'model/genesys/CropDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
15
16

// UI
Matija Obreza's avatar
Matija Obreza committed
17
import PageLayout, { PageContents, MainSection } from 'ui/layout/PageLayout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
18
19
20
import {Properties, PropertiesItem} from 'ui/common/Properties';
import Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard';
Matija Obreza's avatar
Matija Obreza committed
21
import Number from 'ui/common/Number';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
import GridContainer from 'ui/layout/GridContainer';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
23
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
24
25
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Authorize from 'ui/common/authorized/Authorize';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26
import PageTitle from 'ui/common/PageTitle';
Matija Obreza's avatar
Matija Obreza committed
27
28
29
30
31
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';
Matija Obreza's avatar
Matija Obreza committed
32
33
import AccessionFilter from 'model/accession/AccessionFilter';
import { IPageRequest } from 'model/Page';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
34
35
36

/*tslint:disable*/
const styles = (theme) => ({
37
38
39
  italicProperties: {
    fontStyle: 'italic' as 'italic',
  }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
40
41
});
/*tslint:enable*/
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
42
43

interface IDisplayPageProps extends React.ClassAttributes<any> {
Matija Obreza's avatar
Matija Obreza committed
44
  loadCropDetails: (shortName: string) => void;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
45
  cropDetails: CropDetails;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
46
47
  crops: Crop[];
  shortName: string;
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
48
  t: any;
Matija Obreza's avatar
Matija Obreza committed
49
  classes?: any;
Matija Obreza's avatar
Matija Obreza committed
50
  applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
51
  relinkAccessions: (shortName: string) => void;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
52
53
54
55
}

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

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
56
57
  protected static needs = [
    ({ params: { shortName } }) => {
Matija Obreza's avatar
Matija Obreza committed
58
      return shortName ? loadCropDetails(shortName) : null;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
59
60
    },
  ];
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
61
62

  public componentWillMount() {
Maxym Borodenko's avatar
Maxym Borodenko committed
63
64
    const { loadCropDetails, shortName, cropDetails } = this.props;
    if (shortName && (! cropDetails || shortName !== cropDetails.shortName)) {
Matija Obreza's avatar
Matija Obreza committed
65
      loadCropDetails(shortName);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
66
67
68
    }
  }

Matija Obreza's avatar
Matija Obreza committed
69
70
  private applyCropFilter = () => {
    const { shortName, applyFilters} = this.props;
71
    const filter = { crop: [ shortName ] };
Matija Obreza's avatar
Matija Obreza committed
72
73
74
    applyFilters(filter);
  }

75
76
77
78
79
  private relinkAccessions = () => {
    const { relinkAccessions, shortName } = this.props;
    relinkAccessions(shortName);
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
80
  public render() {
81
    const { cropDetails, shortName, classes, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
82
    const crop = cropDetails;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
83

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
84
    return (
Oleksii Savran's avatar
Oleksii Savran committed
85
      <PageLayout withFooter>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
86
        <PageTitle title={ !crop || crop.shortName !== shortName ?  t('common:label.loading', { what: shortName }) : crop.name }/>
Matija Obreza's avatar
Matija Obreza committed
87
88
        <ContentHeader title={ !crop || crop.shortName !== shortName ?  t('common:label.loading', { what: shortName }) : crop.name } />

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
89
        { !crop || crop.shortName !== shortName ? (<Loading/>) :
Matija Obreza's avatar
Matija Obreza committed
90
          <PageContents className="pt-1rem">
Oleksii Savran's avatar
Oleksii Savran committed
91
92
93
94
95
96
97
98
99
100
101
102
103
          <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>
            }
          >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
104
            { cropDetails.blurb && cropDetails.blurb.body &&
Matija Obreza's avatar
Matija Obreza committed
105
              <div className="mb-20">
Matija Obreza's avatar
Matija Obreza committed
106
                <BlurbText body={ cropDetails.blurb.body } />
Matija Obreza's avatar
Matija Obreza committed
107
              </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
108
            }
Matija Obreza's avatar
Matija Obreza committed
109
110
111
112
113
114
115
            <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>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
116

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
117
118
119
            { crop.overview &&
              <GridContainer className="pb-1rem">
                { crop.overview['institute.code'] && crop.overview['institute.code'].terms &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
120
                  <PieChartCard
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
121
                    title={ t('crop.public.p.display.holdingInstitutes') }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
122
123
124
125
                    terms={ crop.overview['institute.code'].terms }
                    missing={ crop.overview['institute.code'].missing }
                    total={ crop.overview['institute.code'].total }
                  />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
126
127
128
                }

                { crop.overview['institute.country.code3'] && crop.overview['institute.country.code3'].terms &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
129
                  <PieChartCard
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
130
                    title={ t('crop.public.p.display.countryOfInstitutes') }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
131
132
133
134
                    terms={ crop.overview['institute.country.code3'].terms }
                    missing={ crop.overview['institute.country.code3'].missing }
                    total={ crop.overview['institute.country.code3'].total }
                  />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
135
136
137
                }

                { crop.overview['taxonomy.genus'] && crop.overview['taxonomy.genus'].terms &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
138
                  <PieChartCard
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
139
                    title={ t('crop.public.p.display.representedGenera') }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
140
141
142
                    terms={ crop.overview['taxonomy.genus'].terms }
                    missing={ crop.overview['taxonomy.genus'].missing }
                    total={ crop.overview['taxonomy.genus'].total }
143
                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
144
                  />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
145
146
147
                }

                { crop.overview['taxonomy.genusSpecies'] && crop.overview['taxonomy.genusSpecies'].terms &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
148
                  <PieChartCard
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
149
                    title={ t('crop.public.p.display.representedSpecies') }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
150
151
152
                    terms={ crop.overview['taxonomy.genusSpecies'].terms }
                    missing={ crop.overview['taxonomy.genusSpecies'].missing }
                    total={ crop.overview['taxonomy.genusSpecies'].total }
153
                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
154
                  />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
155
156
157
                }
                </GridContainer >
                }
158
159
160
161
            <PropertiesCard title={ t(`crop.public.p.display.otherNames`) }
              propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) }
              propertyItemProps={ { keepEmpty: true, small: true, numeric: true } }
            />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
162
163
          </PageContents>
        }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
164
165
166
167
168
169
170
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  shortName: ownProps.match.params.shortName,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
171
172
  crops: state.crop.public.list ? state.crop.public.list.data : undefined,
  cropDetails: state.crop.public.details ? state.crop.public.details.data : undefined,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
173
174
});

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
175
176
const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadCropDetails,
Matija Obreza's avatar
Matija Obreza committed
177
  applyFilters,
178
  relinkAccessions,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
179
}, dispatch);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
180
181


Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
182
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(DisplayPage)));