AccessionDetailsPage.tsx 8.88 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
2
3
import React from 'react';

import { AccessionService } from '@genesys/client/service';
Oleksii Savran's avatar
Oleksii Savran committed
4
import { Property } from 'ui/common/Property';
Matija Obreza's avatar
Matija Obreza committed
5
import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
6
import { WithTranslation, withTranslation } from 'react-i18next';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
7
8
9
10
11
12
import { LocalStorageCart } from 'utilities';

interface IAccessionDetailsPageState {
  accession: AccessionDetails;
  cartItems: string[];
}
Matija Obreza's avatar
Matija Obreza committed
13
14
15
16
17
18

interface IAccessionDetailsPage {
  match: any;
  apiUrl: string;
}

Maksym Tishchenko's avatar
Maksym Tishchenko committed
19
class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithTranslation, IAccessionDetailsPageState> {
Matija Obreza's avatar
Matija Obreza committed
20
21
22
23
24
  public constructor(props) {
    super(props);
  }

  public state = {
Maksym Tishchenko's avatar
Maksym Tishchenko committed
25
26
    accession: null,
    cartItems: LocalStorageCart.getCartItemsLS(),
Matija Obreza's avatar
Matija Obreza committed
27
28
29
30
  };

  public componentDidMount() {
    this.loadData(this.props.match.params.uuid);
Maksym Tishchenko's avatar
Maksym Tishchenko committed
31
32
33
34
35
36
37
38
39
40
    if (typeof window !== 'undefined') {
      window.addEventListener('storage', this.handleLocalStorageUpdate);
      this.receiveData();
    }
  }

  public componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('storage', this.handleLocalStorageUpdate);
    }
Matija Obreza's avatar
Matija Obreza committed
41
42
  }

Maksym Tishchenko's avatar
Maksym Tishchenko committed
43
44
45
46
47
48
49
50
51
52
  private handleLocalStorageUpdate = (e: StorageEvent) => {
    if (e.key === LocalStorageCart.LS_KEY) {
      this.receiveData();
    }
  };

  private receiveData = () => {
    this.setState({ cartItems: LocalStorageCart.getCartItemsLS() });
  };

Matija Obreza's avatar
Matija Obreza committed
53
54
55
56
57
58
59
60
61
62
63
64
  private loadData = (uuid: string): Promise<void> => {
    return AccessionService
      .getDetailsByUuid(uuid)
      .then((data) => {
        console.log('accession: ', data);
        this.setState({ accession: data });
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
      });
  };

Maksym Tishchenko's avatar
Maksym Tishchenko committed
65
66
67
68
69
70
71
72
73
74
  private addToCart = (e: React.MouseEvent<HTMLButtonElement>) => {
    LocalStorageCart.addToCart(e.currentTarget.getAttribute('data-uuid'));
    this.setState( { cartItems: LocalStorageCart.getCartItemsLS() } )
  };
  private removeFromCart = (e: React.MouseEvent<HTMLButtonElement>) => {
    LocalStorageCart.removeFromCart(e.currentTarget.getAttribute('data-uuid'));
    this.setState( { cartItems: LocalStorageCart.getCartItemsLS() } )
  }

  private renderAddToCart = () => {
Matija Obreza's avatar
Matija Obreza committed
75
    const { accession } = this.state;
Maksym Tishchenko's avatar
Maksym Tishchenko committed
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
    const { t } = this.props;

    const canAddToCart = !(accession.details.historic === true || accession.details.available === false || accession.details.institute.allowMaterialRequests === true);

    return <button
      type="button"
      disabled={ !canAddToCart }
      name={ `button-add-${accession.details.uuid}` }
      data-uuid={ accession.details.uuid }
      className="btn btn-primary"
      onClick={ this.addToCart }
    >
      { canAddToCart ? t('cart.addToCart') : t('list.notAvailable') }
    </button>
  }

  public render() {
    const { accession, cartItems } = this.state;
94
    const { apiUrl, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
95
96
97
98
99

    let propertyIndex = 0;

    if (accession === null) {
      return (
100
        <div>{ t('loading') }</div>
Matija Obreza's avatar
Matija Obreza committed
101
102
103
104
105
106
      );
    } else {
      const details = accession.details;
      return (
        <>
          <h1>{ details.accessionNumber }</h1>
Matija Obreza's avatar
Matija Obreza committed
107
108
          { details.doi && <Property title={ t('accession.doi') } value={ details.doi } index={ propertyIndex++ }/> }
          { details.accessionName && <Property title={ t('accession.accessionName') } value={ details.accessionName } index={ propertyIndex++ }/> }
Matija Obreza's avatar
Matija Obreza committed
109
          { details.taxonomy &&
Matija Obreza's avatar
Matija Obreza committed
110
            <Property title={ t('accession.taxonomy') } value={ <span dangerouslySetInnerHTML={ { __html: details.taxonomy.taxonNameHtml } } /> } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
111
112
          }
          { details.institute && details.institute.fullName &&
Matija Obreza's avatar
Matija Obreza committed
113
            <Property title={ t('accession.holdingInstitute') } value={ details.institute.fullName } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
114
115
116
117
118
          }
          { details.historic &&
            <Property title="Historic accession" value={ 'This is a historic record of an accession' } index={ propertyIndex++ }/>
          }
          { details.institute && details.institute.code &&
Matija Obreza's avatar
Matija Obreza committed
119
            <Property title={ t('accession.instituteCode') } value={ details.institute.code } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
120
121
122
123
          }
          { details.institute && details.institute.owner &&
            <Property title="Data provider" value={ details.institute.owner.name } index={ propertyIndex++ }/>
          }
Matija Obreza's avatar
Matija Obreza committed
124
125
126
          { details.sampStat &&
            <Property title={ t('accession.sampStat') } value={ t(`accession.sampleStatus.${details.sampStat}`) } index={ propertyIndex++ }/>
          }
Matija Obreza's avatar
Matija Obreza committed
127
          { details.countryOfOrigin &&
Matija Obreza's avatar
Matija Obreza committed
128
            <Property title={ t('accession.countryOfOrigin') } value={ details.countryOfOrigin.name } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
          }
          { details.ancest &&
            <Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
          }
          { details.aegis &&
            <Property title="AEGIS" value="Accession is part of the European Collection" index={ propertyIndex++ }/>
          }
          { (details.donorCode || details.donorName) &&
            <Property title="Donor institute" value={ <span>{ details.donorCode } { details.donorName }</span> } index={ propertyIndex++ }/>
          }
          { details.donorNumb &&
            <Property title="Donor accession number" value={ details.donorNumb } index={ propertyIndex++ }/>
          }
          { details.acceUrl &&
            <Property title="Accession URL" value={ <a href={ details.acceUrl } target="_blank" rel="nofollow">{ details.acceUrl }</a> } index={ propertyIndex++ }/>
          }

          { details.coll &&
            <>
              <h3 className="mt-4">Collecting site</h3>
Matija Obreza's avatar
Matija Obreza committed
149
150
151
152
153
              <Property title={ t('accession.coll.collSite') } value={ details.coll.collSite } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collDate') } value={ details.coll.collDate } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collMissId') } value={ details.coll.collMissId } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collCode') } value={ details.coll.collCode } index={ propertyIndex++ }/>
              <Property title={ t('accession.coll.collName') } value={ details.coll.collName } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
154
155
156
157
158
            </>
          }
          { details.geo &&
            <>
              <h3 className="mt-4">Georeference</h3>
Matija Obreza's avatar
Matija Obreza committed
159
160
161
162
163
              <Property title={ t('accession.geo.latitude') } value={ details.geo.latitude } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.longitude') } value={ details.geo.longitude } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.datum') } value={ details.geo.datum } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.uncertainty') } value={ details.geo.uncertainty } index={ propertyIndex++ }/>
              <Property title={ t('accession.geo.elevation') } value={ details.geo.elevation } index={ propertyIndex++ }/>
Matija Obreza's avatar
Matija Obreza committed
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
            </>
          }

          { accession.imageGallery &&
            <>
              <h2 className="mt-4">Images</h2>
              <div>
                { accession.imageGallery.images.map((image, idx) => (
                  <span key={ idx }>
                    <a href={ `${apiUrl}/api/v1/repository/download/d${image.storagePath}` }><img className="img-thumbnail" src={ `${apiUrl}/api/v1/repository/download/d/_thumbs${image.thumbnailPath}/200x200.jpg` } alt={ image.subject } /></a>
                  </span>
                )) }
              </div>
            </>
          }

          { accession.subsets && accession.subsets.length > 0 &&
            <>
Matija Obreza's avatar
Matija Obreza committed
182
              <h2 className="mt-4">{ t('accession.subsets') }</h2>
Matija Obreza's avatar
Matija Obreza committed
183
184
185
186
187
188
189
190
191
192
193
              { accession.subsets.map((subset, idx) => (
                <div key={ idx }>
                  <h5>{ subset.title }</h5>
                  <p>{ subset.description }</p>
                </div>
              )) }
            </>
          }

          { accession.datasets && accession.datasets.length > 0 &&
            <>
Matija Obreza's avatar
Matija Obreza committed
194
              <h2 className="mt-4">{ t('accession.datasets') }</h2>
Matija Obreza's avatar
Matija Obreza committed
195
196
197
198
199
200
201
202
              { accession.datasets.map((dataset, idx) => (
                <div key={ idx }>
                  <h5>{ dataset.title }</h5>
                  <p>{ dataset.description }</p>
                </div>
              )) }
            </>
          }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
          <div className="pt-4">
            {cartItems.includes(this.props.match.params.uuid) ?
              <button
                type="button"
                name={ `button-remove-${accession.details.uuid}` }
                data-uuid={ accession.details.uuid }
                className="btn btn-primary"
                onClick={ this.removeFromCart }
              >
                { t('cart.removeFromCart') }
              </button>
              :
              this.renderAddToCart()
            }
          </div>
Matija Obreza's avatar
Matija Obreza committed
218
219
220
221
222
        </>
      );
    }
  };
}
223
224

export default withTranslation()(AccessionDetailsPage);