1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
/*
* Copyright © 2018 European Support Limited
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http: //www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import InfiniteScroll from 'react-infinite-scroller';
import Workflows from 'features/catalog/views/Workflows';
import AddWorkflow from 'features/catalog/views/AddWorkflow';
import Header from 'features/catalog/views/Header';
import Main from 'features/catalog/views/Main';
import { NAME, ASC, DESC } from 'features/catalog/catalogConstants';
class CatalogView extends React.Component {
componentDidMount() {
const { clearWorkflow } = this.props;
clearWorkflow();
}
componentWillUnmount() {
this.props.handleResetWorkflow();
}
handleAlphabeticalOrderByClick = e => {
e.preventDefault();
const {
handleFetchWorkflow,
catalog: { sort }
} = this.props;
const payload = { ...sort };
payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
handleFetchWorkflow(payload);
};
handleScroll = () => {
const {
catalog: {
paging: { offset },
sort
},
handleFetchWorkflow
} = this.props;
handleFetchWorkflow(sort, offset);
};
goToOverviewPage = id => {
const { history } = this.props;
history.push('/workflow/' + id + '/overview');
};
render() {
const { catalog, showNewWorkflowModal } = this.props;
const {
sort,
paging: { hasMore, total },
items
} = catalog;
const alphabeticalOrder = sort[NAME];
return (
<div className="wf-catalog">
<Header />
<InfiniteScroll
useWindow={false}
loadMore={this.handleScroll}
hasMore={hasMore}>
<Main
total={total}
alphabeticalOrder={alphabeticalOrder}
onAlphabeticalOrderByClick={
this.handleAlphabeticalOrderByClick
}>
<div className="main__content">
<AddWorkflow onClick={showNewWorkflowModal} />
<Workflows
items={items}
onWorkflowClick={this.goToOverviewPage}
/>
</div>
</Main>
</InfiniteScroll>
</div>
);
}
}
CatalogView.propTypes = {
history: PropTypes.object,
catalog: PropTypes.object,
handleResetWorkflow: PropTypes.func,
handleFetchWorkflow: PropTypes.func,
showNewWorkflowModal: PropTypes.func,
clearWorkflow: PropTypes.func
};
CatalogView.defaultProps = {
showNewWorkflowModal: () => {},
clearWorkflow: () => {}
};
export default CatalogView;
|
