BrowsePage.tsx 5.13 KB
Newer Older
1
import * as React from 'react';
2
3
4
import { translate } from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
5
6
7
import { parse } from 'query-string';

// Actions
8
import { applyFilters, loadMoreAccessions, updateRoute } from 'accessions/actions/public';
9
import {loadArticlePromise} from 'cms/actions/public';
10
11

// Models
12
import Page from 'model/Page';
13
import Accession from 'model/accession/Accession';
14
15

// UI
16
import BrowsePageTemplate, { IBrowsePageProps } from 'ui/pages/_base/BrowsePage';
17
18
19
20
21
22
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PaginationComponent from 'ui/common/pagination';
23
import AccessionCard from 'accessions/ui/c/AccessionCard';
24
import Tabs, { Tab } from 'ui/common/Tabs';
25
import AccessionFilters from './c/Filters';
Oleksii Savran's avatar
Oleksii Savran committed
26
import ButtonBar from 'ui/common/buttons/ButtonBar';
27
import Download from 'ui/common/download-acce-dialog';
28

29
class BrowsePage extends BrowsePageTemplate<Accession> {
30
31
  protected static needs = [
    ({ search, params: { filterCode } }) => {
Matija Obreza's avatar
Matija Obreza committed
32
      const qs = parse(search || '');
33
      return applyFilters(filterCode || '', Page.fromQueryString(qs));
34
35
36
    },
  ];

37
  constructor(props: IBrowsePageProps<Accession>, context: any) {
38
39
40
      super(props, context);
  }

41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  public state = {
    downloadArticle: null,
    authenticated: false,
  };

  public componentWillMount() {
    super.componentWillMount();

    const { userRoles, loadArticlePromise, lang } = this.props;
    const authenticated: boolean = userRoles.findIndex((role) => role === 'ROLE_USER') !== -1;
    this.setState({authenticated});
    const slug: string = authenticated ? 'download-authenticated' : 'download-anonymous';
    if (!this.state.downloadArticle || (this.state.downloadArticle.slug !== slug)) {
      loadArticlePromise(lang, slug).then((data) => this.setState({downloadArticle: data}));
    }
  }

58
  public render() {
59
    const { paged, loadMoreData, filterCode, currentTab, t} = this.props;
60
61
62
63
64
65
66
67
68

    const renderAccession = (s: Accession, index: number) => {
      return <AccessionCard key={ s.uuid } index={ index } accession={ s } />;
    };

    return (
      <PageLayout sidebar={
        <AccessionFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
       }>
Matija Obreza's avatar
Matija Obreza committed
69
        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
70
          <PaginationComponent
71
            pageObj={ paged }
72
            onSortChange={ this.onSortChange }
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
73
            displayName="accessions.common.modelName"
74
75
            sortOptions={ Accession.SORT_OPTIONS }
            infinite
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
77
78
79
          />
          <Tabs
            tab={ currentTab }
            actions={
Oleksii Savran's avatar
Oleksii Savran committed
80
              <ButtonBar>
81
82
83
84
85
86
87
88
89
90
91
92
93
94
                { this.state.authenticated &&
                <Download dataType="mcpd"
                  article={ this.state.downloadArticle }
                  param={ paged && paged.filterCode || '' }
                  from="acn"
                  accessionNumber={ paged && paged.totalElements }
                  buttonTitle={ `${t('common:action.download')} ${t('accessions.public.p.display.MCPD')}` } />
                }
                <Download dataType="dwca"
                  article={ this.state.downloadArticle }
                  param={ paged && paged.filterCode || '' }
                  from="acn"
                  accessionNumber={ paged && paged.totalElements }
                  buttonTitle={ `${t('common:action.download')} ${t('accessions.public.p.display.zip')}` } />
Oleksii Savran's avatar
Oleksii Savran committed
95
              </ButtonBar>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
96
97
            }
          >
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
98
99
100
            <Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
            <Tab name="overview" to={ `/a/overview/${filterCode || ''}` }>{ t('accessions.tab.overview') }</Tab>
            <Tab name="map" to={ `/a/map/${filterCode || '' }` }>{ t('accessions.tab.map') }</Tab>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
101
102
          </Tabs>

103
104

        <PrettyFilters
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
105
106
107
          prefix="accessions"
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
108
        />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
109
        <PageContents className="pt-1rem container-spacing-horizontal">
110
111
112
          { ! paged ? <Loading /> :
            <PagedLoader
              paged={ paged }
113
              loadMore={ loadMoreData }
114
              roughItemHeight={ 45 }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
115
116
              itemRenderer={ renderAccession }
            />
117
118
119
120
121
122
123
124
          }
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
125
  paged: state.accessions.public.paged || undefined,
126
  filterCode: ownProps.match.params.filterCode,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
127
  currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
128
129
  userRoles: state.login.authorities,
  lang: state.applicationConfig.lang,
130
131
132
133
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  applyFilters,
134
  loadMoreData: loadMoreAccessions,
135
  updateRoute,
136
  loadArticlePromise,
137
138
139
}, dispatch);


Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
140
export default translate()(connect(mapStateToProps, mapDispatchToProps)(BrowsePage));