DisplayPage.tsx 7.54 KB
Newer Older
1
2
3
4
5
6
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';

import { deletePartner } from 'partners/actions/editor';
7
8
import { editPartner } from 'partners/actions/dashboard';
import { loadPartner, loadPartnerInstitutes } from 'partners/actions/public';
9
10

import Partner from 'model/genesys/Partner';
11
12
import FaoInstitute from 'model/genesys/FaoInstitute';
import Page from 'model/Page';
13
14
15

import confirm from 'utilities/confirmAlert';
import Loading from 'ui/common/Loading';
Matija Obreza's avatar
Matija Obreza committed
16
import Markdown from 'ui/common/markdown';
17
18
19
20
21
22
23
24
import { ExternalLink, FaoWiewsLink } from 'ui/catalog/Links';
import { Properties, PropertiesItem } from 'ui/common/Properties';

import Grid from '@material-ui/core/Grid';
import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
import Button from '@material-ui/core/Button';
import Permissions from 'ui/common/permission/Permissions';
import PageLayout from 'ui/layout/PageLayout';
Matija Obreza's avatar
Matija Obreza committed
25
import { InstituteLink, CountryLink } from 'ui/genesys/Links';
26
27
28
29
30
31
32

interface IPartnerPageProps extends React.ClassAttributes<any> {
  classes: any;
  t: any;

  uuid?: string;
  partner?: Partner;
33
  partnerInstitutes: Page<FaoInstitute>;
34
35
  loading?: any;
  loadPartner: any;
36
  loadPartnerInstitutes: any;
37
38
39
40
41
42
43
44
45
  editPartner: any;
  deletePartner: any;
}

// Page to edit a descriptor list
class PartnerPage extends React.Component<IPartnerPageProps, any> {

  protected static needs = [
    ({ params: { uuid } }) => loadPartner(uuid),
46
    ({ params: { uuid } }) => loadPartnerInstitutes(uuid),
47
  ];
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
48

49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
  private onEditPartner = (e) => {
    const { partner, editPartner } = this.props;
    editPartner(partner.uuid);
  }
  private onDelete = (e) => {
    const { t, partner, deletePartner } = this.props;

    confirm(<span>Delete <b>{ partner.name }</b>?</span>, {
      description: t('common:message.confirmDelete', { what: t('partners.common.modelName') }),
      confirmLabel: t('common:action.delete'),
      abortLabel: t('common:action.cancel'),
    }).then(() => {
      deletePartner(partner);
    }).catch(() => {
      // don't delete
    });
  }

  public componentWillMount() {
68
    const {uuid, partner, loadPartner, partnerInstitutes, loadPartnerInstitutes} = this.props;
69
70
71
72

    if (uuid && (!partner || partner.uuid !== uuid)) {
      console.log(`cwm: Loading partner ${uuid}`, partner);
      loadPartner(uuid);
73
74
75
      if (uuid && (!partnerInstitutes || partnerInstitutes.content && partnerInstitutes.content.length > 0 && partnerInstitutes.content[0].owner.uuid !== uuid)) {
        loadPartnerInstitutes(uuid);
      }
76
77
78
79
    }
  }

  public componentWillReceiveProps(nextProps) {
Oleksii Savran's avatar
Oleksii Savran committed
80
    const {uuid, partner, loading, loadPartner, partnerInstitutes, loadPartnerInstitutes, loadingInstitutes} = nextProps;
81
82
83
84
85

    if (uuid && (!partner || partner.uuid !== uuid)) {
      if (!loading || loading.uuid !== uuid) {
        console.log(`cwrp: Loading partner ${uuid}`, partner, loading);
        loadPartner(uuid);
86
87
      }
      if (uuid && partner && (!partnerInstitutes || partnerInstitutes.content && partnerInstitutes.content.length > 0 && partnerInstitutes.content[0].owner.uuid !== partner.uuid)) {
Oleksii Savran's avatar
Oleksii Savran committed
88
89
90
        if (!loadingInstitutes) {
          loadPartnerInstitutes(uuid);
        }
91
92
93
94
95
      }
    }
  }

  public render() {
96
    const { t, uuid, partner, partnerInstitutes } = this.props;
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

    const stillLoading: boolean = (!partner || (uuid && (partner.uuid !== uuid)));

    return (
      <PageLayout>
        { stillLoading ? <Loading/> :
          <Grid container spacing={ 0 } className="back-gray p-20">
            <Grid item xs={ 12 }>
              <Card square>
                <CardHeader title={ (
                  <span>
                        { partner.name }
                    { partner.shortName && <small> #{ partner.shortName } </small> }
                      </span>
                ) }/>
                <CardContent>
                  { partner.description && <Markdown className="mb-20" source={ partner.description }/> }

                  <Properties>
                    { partner.urls.length > 0 && (
                      <PropertiesItem title={ t('partners.public.p.display.urls') }>
                        { partner.urls.map((url) => (
                          <div key={ url }><ExternalLink link={ url }>{ url }</ExternalLink></div>
                        )) }
                      </PropertiesItem>
                    ) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
123
                    { partnerInstitutes && partnerInstitutes.content && partnerInstitutes.content.length > 0 && (
124
                      <PropertiesItem title={ t('partners.common.wiewsCodes') }>
Matija Obreza's avatar
Matija Obreza committed
125
                        {  partnerInstitutes.content.sort((a, b) => a.code.localeCompare(b.code)).map((institute) => (
Matija Obreza's avatar
Matija Obreza committed
126
127
128
129
130
                          <div key={ institute.code }>
                            <InstituteLink to={ institute }><b>{ institute.code }</b> { institute.fullName }</InstituteLink>
                            { ` ` }
                            <small><FaoWiewsLink wiewsCode={ institute.code }>({ t('View on FAO WIEWS website') })</FaoWiewsLink></small>
                          </div>
131
132
133
134
135
                        )) }
                      </PropertiesItem>
                    ) }
                    { partner.countryCodes.length > 0 && (
                      <PropertiesItem title={ t('partners.common.countries') }>
Matija Obreza's avatar
Matija Obreza committed
136
                        { partner.countryCodes.sort().map((countryCode) => (
Matija Obreza's avatar
Matija Obreza committed
137
                          <div key={ countryCode }><CountryLink country={ countryCode } /></div>
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
                        )) }
                      </PropertiesItem>
                    ) }
                    { partner.email && (
                      <PropertiesItem title={ t('user.common.email') }>
                        <div><a href={ `mailto:${partner.email}` }>{ partner.email }</a></div>
                      </PropertiesItem>
                    ) }
                    { partner.phone && (
                      <PropertiesItem title={ t('user.common.phone') }>{ partner.phone }</PropertiesItem>
                    ) }
                    { partner.address && (
                      <PropertiesItem title={ t('geo.common.address') }>{ partner.address }</PropertiesItem>
                    ) }
                    <PropertiesItem title={ t('partners.public.p.display.metadata') }><code>{ partner.uuid }, v{ partner.version }</code></PropertiesItem>
                  </Properties>
                </CardContent>

                { (partner._permissions.write || partner._permissions.delete) && (
                  <CardActions>
                    { partner._permissions.write && <Button onClick={ this.onEditPartner } type="button">{ t('common:action.edit') }</Button> }
                    { partner._permissions.delete && <Button onClick={ this.onDelete } type="button">{ t('common:action.delete') }</Button> }
                    { partner._permissions.manage && <Permissions clazz={ Partner.clazz } id={ partner.id }/> }
                  </CardActions>
                ) }
              </Card>
            </Grid>
          </Grid>
        }
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  uuid: ownProps.match.params.uuid,
174
175
176
  partner: state.partner.public.currentPartner,
  partnerInstitutes: state.partner.public.partnerInstitutes,
  loading: state.partner.public.loading,
Oleksii Savran's avatar
Oleksii Savran committed
177
  loadingInstitutes: state.partner.public.loadingInstitutes,
178
179
180
181
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadPartner,
182
  loadPartnerInstitutes,
183
184
185
186
187
  editPartner,
  deletePartner,
}, dispatch);

export default translate()(connect(mapStateToProps, mapDispatchToProps)(PartnerPage));