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

// Actions
8
import { applyFilters, updateRoute, loadMoreRequests } from 'requests/actions/admin';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
9
10

// Models
11
import MaterialRequest from 'model/request/MaterialRequest';
12
import FilteredPage from 'model/FilteredPage';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
13
14
15
16
17
18

// UI
import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';
import { PageContents } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
19
import RequestCard from 'requests/ui/admin/c/RequestCard';
20
21
22
23
24
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ContentLayout from 'ui/layout/ContentLayout';
import MaterialRequestFilter from 'requests/ui/admin/c/MaterialRequestFilter';
import Grid from '@material-ui/core/Grid';
import PaginationComponent from 'ui/common/pagination';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
25
26
27

class BrowsePage extends BrowsePageTemplate<any> {

28
    protected static needs = [
29
30
31
32
      ({ search, params: { filterCode } }) => {
          const qs = parse(search || '');
          return applyFilters(filterCode || '', FilteredPage.fromQueryString(qs));
      },
33
34
    ];

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
35
    public componentWillMount() {
36
        const { paged, applyFilters, filterCode } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
37
        if (!paged) {
38
            applyFilters(filterCode);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
39
40
41
42
        }
    }

    public render() {
43
        const { paged, loadMoreData} = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
45
46
47
48
49

        const renderRequest = (r: MaterialRequest, index: number) => {
            return <RequestCard key={ r.uuid } index={ index } request={ r } />;
        };

        return (
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
            <ContentLayout left={
                <MaterialRequestFilter initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
            } customHeaderHeight>
                <Grid container spacing={ 0 }>
                    <Grid item xs={ 12 }>
                        <PaginationComponent
                            pageObj={ paged }
                            onSortChange={ this.onSortChange }
                            displayName="requests.common.modelName"
                            sortOptions={ MaterialRequest.SORT_OPTIONS }
                        />
                        <PrettyFilters
                            prefix="requests"
                            filterObj={ paged && paged.filter || {} }
                            onSubmit={ this.myApplyFilters }
                        />
                        <PageContents className="pt-1rem container-spacing-horizontal">
                            { ! paged ? <Loading /> :
                                <PagedLoader
                                    paged={ paged }
                                    loadMore={ loadMoreData }
                                    roughItemHeight={ 80 }
                                    itemRenderer={ renderRequest } />
                            }
                        </PageContents>
                    </Grid>
                </Grid>
            </ContentLayout>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
78
79
80
81
        );
    }
}

82
const mapStateToProps = (state, ownProps) => ({
83
    paged: state.requests.admin.paged || undefined,
84
    filterCode: ownProps.match.params.filterCode,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
85
86
87
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
88
    applyFilters,
89
    loadMoreData: loadMoreRequests,
90
    updateRoute,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
91
92
93
}, dispatch);


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