BrowsePage.tsx 5.2 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
import { listVocabularies, createVocabulary, autoUpdate } from 'actions/vocabulary';
7
import { Vocabulary, IVocabularyFilter } from 'model/vocabulary.model';
8
9
import { Page, Pagination } from 'model/common.model';

10
import Authorize from 'ui/common/authorized/Authorize';
Valeriy Panov's avatar
Valeriy Panov committed
11
import Loading from 'ui/common/Loading';
12
import PaginationComponent from 'ui/common/pagination';
13
14
15
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import VocabularyCard from './c/VocabularyCard';

Valeriy Panov's avatar
Valeriy Panov committed
16
17
18
import Grid from 'material-ui/Grid';
import Button from 'material-ui/Button';

19
20
21
22
23
24
25
const styles = (theme) => ({
    root: {
        backgroundColor: '#E8E5E0',
    },
    card: {
        margin: '20px',
    },
Valeriy Panov's avatar
Valeriy Panov committed
26
27
28
    updateButton: {
        marginRight: '1rem',
    },
29
30
31
32
33
34
35
36
37
});

interface IBrowsePageProps extends React.ClassAttributes<any> {
    pagination?: Pagination<IVocabularyFilter>;
    paged?: Page<Vocabulary>;
    listVocabularies: any;
    createVocabulary: any;
}

38
class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

    protected static needs = [
        ({ location: { query: { p: pageCurrent, l: pageSize, s: pageSort, d: pageDir } } }) => listVocabularies(pageCurrent, pageSize, pageSort, {}, pageDir),
    ];

    public componentWillMount() {
        const {pagination, paged, listVocabularies} = this.props;

        if (!paged) {
            listVocabularies(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
        }
    }

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

        if (!oldPagination.equals(pagination)) {
            listVocabularies(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
        }
    }

    protected onPaginationChange = (page, results, sortBy, dir) => {
        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);
    }

Valeriy Panov's avatar
Valeriy Panov committed
71
72
    protected autoUpdate = () => {
        const {autoUpdate, pagination} = this.props;
Matija Obreza's avatar
Matija Obreza committed
73
74
75
76
77
        autoUpdate()
          .then(() => {
            console.log('Vocabularies are updated');
            listVocabularies(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
          });
Valeriy Panov's avatar
Valeriy Panov committed
78
79
    }

80
81
82
    public render() {
        const {classes, paged, createVocabulary} = this.props;

83
        const stillLoading: boolean = (!(paged && paged.content));
Valeriy Panov's avatar
Valeriy Panov committed
84
85

        return (
86
          <div className={ classes.root }>
87
            <Authorize role="ROLE_ADMINISTRATOR">
Valeriy Panov's avatar
Valeriy Panov committed
88
89
90
91
92
93
94
95
96
97
98
99
100
              <ContentHeaderWithButton
                  title="What do you want to do?"
                  buttons={
                      <div>
                          <Button className={ classes.updateButton } raised onClick={ this.autoUpdate }>
                              Update vocabularies
                          </Button>
                          <Button raised onClick={ createVocabulary }>
                              Create vocabulary
                          </Button>
                      </div>
                  }
              />
101
102
            </Authorize>
            <Grid container spacing={ 0 }>
103
104
105
106
                <Grid item xs={ 12 }>
                    <PaginationComponent pageObj={ paged }
                                         onChange={ this.onPaginationChange }
                                         displayName="vocabularies"
Valeriy Panov's avatar
Valeriy Panov committed
107
                                         sortOptions={ Vocabulary.SORT_OPTIONS }
108
109
                    />
                </Grid>
110
111
112
                { stillLoading ? <Loading /> :
                  paged.content.map((vocabulary: Vocabulary, index) => (
                      <Grid key={ index } item xs={ 12 }>
113
                          <VocabularyCard className={ classes.card } vocabulary={ vocabulary } textRows={ 3 } />
114
115
116
                      </Grid>
                  ))
                }
117
118
119
120
                <Grid item xs={ 12 }>
                    <PaginationComponent pageObj={ paged }
                                         onChange={ this.onPaginationChange }
                                         displayName="vocabularies"
Valeriy Panov's avatar
Valeriy Panov committed
121
                                         sortOptions={ Vocabulary.SORT_OPTIONS }
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
                    />
                </Grid>
            </Grid>
          </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    pagination: new Pagination<IVocabularyFilter>({
        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
    }),
    paged: state.vocabulary.paged,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    listVocabularies,
    createVocabulary,
Valeriy Panov's avatar
Valeriy Panov committed
143
    autoUpdate,
144
145
146
147
148
}, dispatch);

const styled = withStyles(styles)(BrowsePage);

export default connect(mapStateToProps, mapDispatchToProps)(styled);