DisplayPage.tsx 3.23 KB
Newer Older
Valeriy Panov's avatar
Valeriy Panov committed
1
import * as React from 'react';
2
3
4
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';
Matija Obreza's avatar
Matija Obreza committed
5
import { translate } from 'react-i18next';
6

7
import { loadDataset, deleteDataset, publishDataset } from 'actions/dataset';
8
9
import { Dataset } from 'model/dataset.model';

Maxym Borodenko's avatar
Maxym Borodenko committed
10
import BackButton from 'ui/common/buttons/BackButton';
11
12
import Loading from 'ui/common/Loading';
import DatasetDisplay from './c/DatasetDisplay';
Valeriy Panov's avatar
Valeriy Panov committed
13
14
15
16
import Grid from 'material-ui/Grid';

interface IDatasetDetailProps extends React.ClassAttributes<any> {
    classes: any;
Matija Obreza's avatar
Matija Obreza committed
17
18
    t: any;

Matija Obreza's avatar
SSR JSS    
Matija Obreza committed
19
    uuid: string;
Valeriy Panov's avatar
Valeriy Panov committed
20
    dataset: Dataset;
Matija Obreza's avatar
Matija Obreza committed
21
    loadDataset: (uuid: string) => Promise<Dataset>;
22
23
    deleteDataset: (dataset: Dataset) => Promise<Dataset>;
    publishDataset: (dataset: Dataset, publish?: boolean) => Promise<Dataset>;
Valeriy Panov's avatar
Valeriy Panov committed
24
25
}

26
const styles = (theme) => ({
Maxim Babichev's avatar
Maxim Babichev committed
27
    headerButton: theme.buttons.headerButton,
Valeriy Panov's avatar
Valeriy Panov committed
28
29
30
31
32
33
    backSection: {
        display: 'flex',
    },
    flexGrow: {
        flex: '1 1 auto',
    },
Matija Obreza's avatar
Matija Obreza committed
34
});
Valeriy Panov's avatar
Valeriy Panov committed
35
36
37

class DatasetDetail extends React.Component<IDatasetDetailProps, any> {

38
    protected static needs = [
Maxym Borodenko's avatar
Maxym Borodenko committed
39
      ({ params: { uuid } }) => loadDataset(uuid),
40
    ];
Valeriy Panov's avatar
Valeriy Panov committed
41
42

    public componentDidMount() {
Matija Obreza's avatar
SSR JSS    
Matija Obreza committed
43
        const { dataset, loadDataset, uuid } = this.props;
Matija Obreza's avatar
Matija Obreza committed
44
        if (!dataset || dataset.uuid !== uuid) {
Matija Obreza's avatar
Matija Obreza committed
45
            loadDataset(uuid);
Valeriy Panov's avatar
Valeriy Panov committed
46
47
48
49
        }
    }

    public render() {
Matija Obreza's avatar
Matija Obreza committed
50
        const { t, classes, uuid, dataset, publishDataset, deleteDataset } = this.props;
Matija Obreza's avatar
SSR JSS    
Matija Obreza committed
51

52
        const stillLoading: boolean = (! dataset || (uuid && dataset && dataset.uuid !== uuid));
Matija Obreza's avatar
SSR JSS    
Matija Obreza committed
53

Valeriy Panov's avatar
Valeriy Panov committed
54
        return (
Maxim Babichev's avatar
Maxim Babichev committed
55
            <div className="back-gray">
Valeriy Panov's avatar
Valeriy Panov committed
56
                <Grid container spacing={ 0 }>
Matija Obreza's avatar
Matija Obreza committed
57
58
59
60
                    <Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
                        <h4 className="font-bold lh-35 m-0">{ t('p.dataset.title') }</h4>
                        <div className={ classes.flexGrow }/>
                        <BackButton defaultTarget="/datasets" defaultBackText={ t('common:action.backTo', { where: t('common:label.list') }) }/>
Valeriy Panov's avatar
Valeriy Panov committed
61
                    </Grid>
Matija Obreza's avatar
Matija Obreza committed
62
63
64
65
66
                    { stillLoading ? <Loading /> :
                      <Grid item xs={ 12 } className="p-10">
                          <DatasetDisplay dataset={ dataset } publishDataset={ publishDataset } deleteDataset={ deleteDataset } />
                      </Grid>
                    }
Valeriy Panov's avatar
Valeriy Panov committed
67
68
                </Grid>
                <Grid container spacing={ 0 }>
Maxim Babichev's avatar
Maxim Babichev committed
69
                    <Grid item xs={ 12 } className={ `back-gray-yellow pt-10 pb-10 pr-20  ${classes.backSection}` }>
Valeriy Panov's avatar
Valeriy Panov committed
70
                        <div className={ classes.flexGrow }/>
Matija Obreza's avatar
Matija Obreza committed
71
                        <BackButton defaultTarget="/datasets" defaultBackText={ t('common:action.backTo', { where: t('common:label.list') }) }/>
Valeriy Panov's avatar
Valeriy Panov committed
72
73
74
75
76
77
78
79
                    </Grid>
                </Grid>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
Matija Obreza's avatar
Matija Obreza committed
80
    dataset: state.datasets.currentDataset,
Maxym Borodenko's avatar
Maxym Borodenko committed
81
    uuid: ownProps.match.params.uuid,
Valeriy Panov's avatar
Valeriy Panov committed
82
83
84
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
Matija Obreza's avatar
Matija Obreza committed
85
    loadDataset,
86
87
    publishDataset,
    deleteDataset,
Valeriy Panov's avatar
Valeriy Panov committed
88
89
}, dispatch);

Matija Obreza's avatar
Matija Obreza committed
90
export default translate()(connect(mapStateToProps, mapDispatchToProps)((withStyles as any)(styles)(DatasetDetail)));