DescriptorPicker.tsx 7.53 KB
Newer Older
1
import * as React from 'react';
Valeriy Panov's avatar
Valeriy Panov committed
2
import Grid from 'material-ui/Grid';
Matija Obreza's avatar
Matija Obreza committed
3
import { withStyles } from 'material-ui/styles';
4
import * as classnames from 'classnames';
5
import Card, { CardHeader } from 'ui/common/Card';
Valeriy Panov's avatar
Valeriy Panov committed
6

7
import { Page, Pagination } from 'model/common.model';
8
9
import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';

10
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
Valeriy Panov's avatar
Valeriy Panov committed
11
import PaginationComponent from 'ui/common/pagination';
12
13
import DescriptorFilters from 'ui/catalog/descriptor/Filters';
import {log} from 'utilities/debug';
14

15
interface IDescriptorPickerProps extends React.ClassAttributes<any> {
Maxim Babichev's avatar
Maxim Babichev committed
16
    classes: any;
17
18
    router: any;
    loadDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string) => void;
19
20
21
22
    matchingDescriptors: Page<Descriptor>; // results from loadDescriptors
    onAddDescriptor: (descriptor: Descriptor) => void; // event handler
    onRemoveDescriptor: (descriptor: Descriptor) => void; // event handler
    currentDescriptors: Descriptor[]; // currently selected descriptors
23
24
    pagination?: Pagination<IDescriptorFilter>;
    listCrops: () => any;
25
26
}

Maxim Babichev's avatar
Maxim Babichev committed
27
const styles = (theme) => ({
28
29
    leftPanel: theme.leftPanel.root,
    titleCardDisabled: {
30
31
32
        fontWeight: 'normal' as 'normal',
        fontStyle: 'italic' as 'italic',
        color: '#d4d4d2 ',
33
34
35
36
37
    },
    greenBackground: {
        backgroundColor: '#DCE8C8',
    },
    grayBackground: {
38
        position: 'relative' as 'relative',
39
        backgroundColor: '#ECEBE7',
Maxim Babichev's avatar
Maxim Babichev committed
40
    },
41
42
43
44
45
46
47
    emptyCardHeader: {
        padding: '16px !important',
    },
    paginationComponent: {
        position: 'absolute' as 'absolute',
        bottom: '0',
    },
Maxim Babichev's avatar
Maxim Babichev committed
48
49
50
    fake: {
        height: '30px',
    },
Maxim Babichev's avatar
Maxim Babichev committed
51
52
});

53
class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
54

55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
    public componentWillMount() {
        const {matchingDescriptors, pagination, loadDescriptors, listCrops} = this.props;

        if (! matchingDescriptors) {
            log('Loading descriptors');
            loadDescriptors(pagination.page, pagination.size, pagination.sort as string, pagination.filter, pagination.dir as string);
        }

        listCrops();
    }

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

        if (! oldPagination.equals(pagination)) {
            log('Paginations differ!', pagination);
            loadDescriptors(pagination.page, pagination.size, pagination.sort, pagination.filter, pagination.dir);
        }
    }

    protected onPaginationChange = (page, results, sortBy, dir) => {
        log('onPaginationChange', page, results, sortBy);
        const {router, router: { location }} = this.props;
79

80
81
82
83
84
        location.query.p = page;
        location.query.l = results;
        location.query.s = sortBy;
        location.query.d = dir;
        router.push(location);
85
86
    }

87
88
    protected applyFilters = (newFilters) => {
        const {loadDescriptors, pagination} = this.props;
89

90
91
        log('Applying new filter', newFilters);
        loadDescriptors(pagination.page, pagination.size, pagination.sort as string, newFilters, pagination.dir as string);
92
93
    }

94
    private onDescriptorSelected = (select) => (descriptor: Descriptor) => {
95
96
        const {onAddDescriptor, onRemoveDescriptor} = this.props;

97
        if (select) {
98
            onAddDescriptor(descriptor);
99
        } else {
100
            onRemoveDescriptor(descriptor);
101
        }
102
103
104
105
    }

    public render() {

106
        const {classes, pagination, matchingDescriptors} = this.props;
107
108
109
110
111
112

        // handle empty current descriptors
        let {currentDescriptors} = this.props;
        if (! currentDescriptors) {
            currentDescriptors = [];
        }
Maxim Babichev's avatar
Maxim Babichev committed
113

114
        return (
115
116
            <Grid container spacing={ 0 } className={ classes.container }>
                <Grid item xs={ 12 } md={ 4 } lg={ 2 } className={ classes.leftPanel }>
117
                    <DescriptorFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
118
119
                </Grid>
                <Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classes.grayBackground }>
120
                  { matchingDescriptors &&
Maxim Babichev's avatar
Maxim Babichev committed
121
                     <h4 className="pt-20 pl-20 font-bold">{ matchingDescriptors.totalElements || 0 } descriptors available</h4>
122
123
124
125
126
127
128
129
                  }

                  { matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.map((descriptor: Descriptor) => (
                      <DescriptorCard
                          className="m-20"
                          key={ descriptor.uuid }
                          descriptor={ descriptor }
                          compact
130
                          textRows={ 3 }
131
132
133
134
135
136
137
138
139
140
141
142
143
144
                          selectedProps={ {
                              selectable: true,
                              onSelect: this.onDescriptorSelected(true),
                              disabled: currentDescriptors && currentDescriptors.map((d) => d.uuid).indexOf(descriptor.uuid) !== -1,
                          } }
                      />
                  )) }

                  { matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.length < 2 ?
                    <div className={ classes.fake } /> :
                    <PaginationComponent
                        pageObj={ matchingDescriptors }
                        onChange={ this.onPaginationChange }
                        displayName="descriptors"
145
                        sortOptions={ Descriptor.SORT_OPTIONS }
146
147
                    />
                  }
148
                </Grid>
Maxim Babichev's avatar
Maxim Babichev committed
149
                <Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ `${ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) } even-row` }>
Maxim Babichev's avatar
Maxim Babichev committed
150
                    <h4 className="font-bold pt-20 pl-20">
151
                        { `${currentDescriptors.length} descriptor${currentDescriptors.length !== 1 ? 's' : '' } selected` }
Maxim Babichev's avatar
Maxim Babichev committed
152
                    </h4>
153
                    {
154
                        currentDescriptors.length === 0 && (
Maxim Babichev's avatar
Maxim Babichev committed
155
                            <Card square className="m-20">
156
                                <CardHeader
157
                                    className={ classes.emptyCardHeader }
158
159
160
161
162
163
164
165
166
167
168
169
                                    classes={ {
                                        title: classes.titleCardDisabled,
                                    } }
                                    title={
                                        (
                                            <span>0 descriptors selected</span>
                                        )
                                    }
                                />
                            </Card>
                        )
                    }
170
                    { currentDescriptors.length > 0 && currentDescriptors.map((descriptor: Descriptor) => (
171
                        <DescriptorCard
172
                            key={ descriptor.uuid }
Matija Obreza's avatar
Matija Obreza committed
173
                            className="m-20"
174
175
                            descriptor={ descriptor }
                            compact
176
                            textRows={ 3 }
177
178
179
180
181
182
183
184
                            onUnselect={ this.onDescriptorSelected(false) }
                            selectedProps={ {
                                selectable: false,
                                onUnselect: this.onDescriptorSelected(false),
                            } }
                        />
                        ),
                    ) }
185
186
187
188
189
190
                </Grid>
            </Grid>
        );
    }
}

191
export default withStyles(styles)(DescriptorPicker);