BrowsePage.tsx 3.74 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
10

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

// UI
15
import BrowsePageTemplate, { IBrowsePageProps } from 'ui/pages/_base/BrowsePage';
16
17
18
19
20
21
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';
22
import AccessionCard from 'accessions/ui/c/AccessionCard';
23
import Tabs, { Tab } from 'ui/common/Tabs';
24
import AccessionFilters from './c/Filters';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
25
// TODO only for demo
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26
import Button from '@material-ui/core/Button';
27

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

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

  public render() {
41
    const { paged, loadMoreData, filterCode, currentTab, t} = this.props;
42
43
44
45
46
47
48
49
50

    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
51
        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
52
          <PaginationComponent
53
            pageObj={ paged }
54
            onSortChange={ this.onSortChange }
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
55
            displayName="accessions.common.modelName"
56
57
            sortOptions={ Accession.SORT_OPTIONS }
            infinite
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
58
59
60
61
62
          />
          <Tabs
            tab={ currentTab }
            actions={
              <span>
63
64
65
                <Button variant="contained">{ t('TODO-Demo Select all') }</Button>
                <Button variant="contained">{ t('TODO-Demo Delete') }</Button>
                <Button variant="contained">{ t('TODO-Demo Share') }</Button>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
66
67
68
              </span>
            }
          >
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
69
70
71
            <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
72
73
          </Tabs>

74
75

        <PrettyFilters
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
77
78
          prefix="accessions"
          filterObj={ paged && paged.filter || {} }
          onSubmit={ this.myApplyFilters }
79
80
81
82
83
        />
        <PageContents>
          { ! paged ? <Loading /> :
            <PagedLoader
              paged={ paged }
84
              loadMore={ loadMoreData }
85
              roughItemHeight={ 45 }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
86
87
              itemRenderer={ renderAccession }
            />
88
89
90
91
92
93
94
95
          }
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
96
  paged: state.accessions.public.paged || undefined,
97
  filterCode: ownProps.match.params.filterCode,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
98
  currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
99
100
101
102
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  applyFilters,
103
  loadMoreData: loadMoreAccessions,
104
105
106
107
  updateRoute,
}, dispatch);


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