BrowsePage.tsx 6.8 KB
Newer Older
1
2
3
4
5
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from 'material-ui/styles';

Valeriy Panov's avatar
Valeriy Panov committed
6
7
import {log} from 'utilities/debug';

8
import { loadDescriptors } from 'actions/descriptors';
9
import { listCrops } from 'actions/crop';
Matija Obreza's avatar
Matija Obreza committed
10
import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';
11
12
13
import { Page, Pagination } from 'model/common.model';

import Loading from 'ui/common/Loading';
Valeriy Panov's avatar
Valeriy Panov committed
14
15
// import PaginationComponent from 'ui/common/pagination';
// import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
16
import ContentHeader from 'ui/common/heading/ContentHeader';
17
import DescriptorFilters from 'ui/catalog/descriptor/Filters';
18
import PrettyFilters from 'ui/common/filter/PrettyFilters';
19
20

import Grid from 'material-ui/Grid';
Valeriy Panov's avatar
Valeriy Panov committed
21
import DescriptorInfiniteLoader from './c/DescriptorInfiniteLoader';
22
23
24
25
26
27

interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
    classes: any;
    pagination?: Pagination<IDescriptorFilter>;
    paged: Page<Descriptor>;
    loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => void;
28
    listCrops: () => any;
29
    loading: any;
Valeriy Panov's avatar
Valeriy Panov committed
30
    list: Descriptor[];
31
32
33
34
35
36
37
38
39
40
}

const styles = (theme) => ({
    leftPanel: theme.leftPanel.root,
});

class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {

    protected static needs = [
      ({ location: { query: { p: pageCurrent, l: pageSize, s: pageSort, d: pageDir } } }) => loadDescriptors(pageCurrent, pageSize, pageSort, {}, pageDir),
41
      listCrops,
42
43
44
45
46
47
48
    ];

    constructor(props: IDescriptorListsPageProps, context: any) {
        super(props, context);
    }

    public componentWillMount() {
49
      const {paged, pagination, loadDescriptors, listCrops} = this.props;
50
51

      if (! paged) {
Valeriy Panov's avatar
Valeriy Panov committed
52
        log('Loading descriptors');
53
54
        loadDescriptors(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
      }
55
56

      listCrops();
57
58
59
60
61
62
63
    }

    public componentWillReceiveProps(nextProps) {
        const {loadDescriptors, pagination: oldPagination} = this.props;
        const {pagination} = nextProps;

        if (! oldPagination.equals(pagination)) {
64
            log('Paginations differ!', oldPagination, pagination);
65
66
67
68
69
            loadDescriptors(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
        }
    }

    protected onPaginationChange = (page, results, sortBy, dir) => {
Valeriy Panov's avatar
Valeriy Panov committed
70
        log('onPaginationChange', page, results, sortBy);
71
72
73
74
75
76
77
78
79
        const {router, router: { location }} = this.props;

        location.query.p = page;
        location.query.l = results;
        location.query.s = sortBy;
        location.query.d = dir;
        router.push(location);
    }

80
81
82
    protected applyFilters = (newFilters) => {
        const {loadDescriptors, pagination} = this.props;

Valeriy Panov's avatar
Valeriy Panov committed
83
        log('Applying new filter', newFilters);
84
85
86
        loadDescriptors(pagination.page, pagination.size, pagination.sort, newFilters, pagination.dir);
    }

87
    public render() {
Valeriy Panov's avatar
Valeriy Panov committed
88
        const {classes, paged, pagination, loading, list, loadDescriptors} = this.props;
89
90
91
92
93
94
95
96
97
98

        const stillLoading: boolean = (! paged || ! paged.content);

        return (
            <div className="back-gray ">
                <ContentHeader title="Crop Descriptors"
                               subTitle="A Genesys Catalog of Published Descriptors"
                />
                <Grid container spacing={ 0 }>
                    <Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.leftPanel }>
99
                        <DescriptorFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
100
101
102
                    </Grid>
                    <Grid item xs={ 12 } md={ 9 } lg={ 10 }>
                        <Grid container spacing={ 0 }>
Valeriy Panov's avatar
Valeriy Panov committed
103
                            { /*<Grid item xs={ 12 }>
104
105
106
107
                                <PaginationComponent
                                    pageObj={ paged }
                                    onChange={ this.onPaginationChange }
                                    displayName="descriptors"
Matija Obreza's avatar
Matija Obreza committed
108
                                    sortOptions={ Descriptor.SORT_OPTIONS }
109
                                />
Valeriy Panov's avatar
Valeriy Panov committed
110
                            </Grid>*/ }
111
112
113
114
115
116
                            <Grid item xs={ 12 }>
                                <PrettyFilters
                                    filterObj={ pagination.filter }
                                    onSubmit={ this.applyFilters }
                                />
                            </Grid>
117
118
                            { stillLoading ? <Loading /> :
                              <Grid item xs={ 12 } className="p-20">
Valeriy Panov's avatar
Valeriy Panov committed
119
                                  { /*{ paged.content.map((d: Descriptor, i) => (
120
121
                                    <DescriptorCard key={ d.uuid } className="mb-20"
                                          descriptor={ d } complete dataType vocabulary />
Valeriy Panov's avatar
Valeriy Panov committed
122
123
124
125
126
127
128
129
                                  )) }*/ }
                                  <DescriptorInfiniteLoader
                                      list={ list }
                                      loading={ loading }
                                      paged={ paged }
                                      filter={ pagination.filter }
                                      loadDescriptors={ loadDescriptors }
                                  />
130
131
132
133
                              </Grid>
                            }
                        </Grid>
                    </Grid>
Valeriy Panov's avatar
Valeriy Panov committed
134
                    { /*<Grid container spacing={ 0 } className="back-gray-yellow">
135
136
137
138
139
140
                        <Grid item md={ 2 }/>
                        <Grid item xs={ 12 } md={ 10 }>
                            <PaginationComponent
                                pageObj={ paged }
                                onChange={ this.onPaginationChange }
                                displayName="descriptors"
Matija Obreza's avatar
Matija Obreza committed
141
                                sortOptions={ Descriptor.SORT_OPTIONS }
142
143
                            />
                        </Grid>
Valeriy Panov's avatar
Valeriy Panov committed
144
                    </Grid>*/ }
145
146
147
148
149
150
151
152
153
154
155
156
157
                </Grid>
            </div>
        );
    }
}


const mapStateToProps = (state, ownProps) => ({
  pagination: new Pagination<IDescriptorFilter>({
    page: +ownProps.location.query.p || 0, // current page
    size: +ownProps.location.query.l || 20, // page size
    sort: ownProps.location.query.s, // page sorts
    dir: ownProps.location.query.d, // page sort directions
158
    filter: state.descriptors.pagedQuery && state.descriptors.pagedQuery.filter || null,
159
  }),
160
161
  paged: state.descriptors.paged,
  loading: state.descriptors.loading,
Valeriy Panov's avatar
Valeriy Panov committed
162
  list: state.descriptors.list,
163
164
165
166
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    loadDescriptors,
167
    listCrops,
168
169
170
171
172
173
}, dispatch);

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)((withStyles as any)(styles)(BrowsePage));