workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx

   1 /*
   2 * Copyright © 2018 European Support Limited
   3 *
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 *
   8 *      http: //www.apache.org/licenses/LICENSE-2.0
   9 *
  10 * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16
  17 import React, { Component } from 'react';
  18 import PropTypes from 'prop-types';
  19 import InfiniteScroll from 'shared/scroll/InfiniteScroll';
  20 import Workflows from 'features/catalog/views/Workflows';
  21 import AddWorkflow from 'features/catalog/views/AddWorkflow';
  22
  23 import Header from 'features/catalog/views/Header';
  24 import Main from 'features/catalog/views/Main';
  25 import { NAME, ASC, DESC } from 'features/catalog/catalogConstants';
  26
  27 class CatalogView extends Component {
  28     constructor(props) {
  29         super(props);
  30         this.state = {
  31             searchValue: ''
  32         };
  33     }
  34
  35     componentDidMount() {
  36         const { clearWorkflow } = this.props;
  37
  38         clearWorkflow();
  39     }
  40
  41     componentWillUnmount() {
  42         this.props.handleResetWorkflow();
  43     }
  44
  45     handleAlphabeticalOrderByClick = e => {
  46         e.preventDefault();
  47
  48         const {
  49             handleFetchWorkflow,
  50             catalog: { sort }
  51         } = this.props;
  52
  53         const payload = {
  54             ...sort
  55         };
  56         payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
  57         handleFetchWorkflow(payload, undefined, this.state.searchValue);
  58     };
  59
  60     handleScroll = () => {
  61         const {
  62             catalog: {
  63                 paging: { offset },
  64                 sort
  65             },
  66             handleFetchWorkflow
  67         } = this.props;
  68         handleFetchWorkflow(sort, offset, this.state.searchValue);
  69     };
  70
  71     goToOverviewPage = id => {
  72         const { history } = this.props;
  73         history.push('/workflow/' + id + '/overview');
  74     };
  75
  76     searchChange = searchValue => {
  77         this.setState({ searchValue: searchValue });
  78         this.dispatchChange(searchValue);
  79     };
  80
  81     dispatchChange = searchValue => {
  82         const { searchInputChanged, catalog } = this.props;
  83         searchInputChanged({
  84             ...catalog,
  85             searchNameFilter: searchValue
  86         });
  87     };
  88
  89     render() {
  90         const { catalog, showNewWorkflowModal } = this.props;
  91         const {
  92             sort,
  93             paging: { hasMore, total },
  94             items
  95         } = catalog;
  96         const alphabeticalOrder = sort[NAME];
  97
  98         return (
  99             <div className="wf-catalog">
 100                 <Header
 101                     searchChange={this.searchChange}
 102                     searchValue={this.state.searchValue}
 103                 />
 104                 <InfiniteScroll
 105                     useWindow={false}
 106                     loadMore={this.handleScroll}
 107                     hasMore={hasMore}>
 108                     <Main
 109                         total={total}
 110                         alphabeticalOrder={alphabeticalOrder}
 111                         onAlphabeticalOrderByClick={
 112                             this.handleAlphabeticalOrderByClick
 113                         }>
 114                         <div className="main__content">
 115                             <AddWorkflow onClick={showNewWorkflowModal} />
 116                             <Workflows
 117                                 items={items}
 118                                 onWorkflowClick={this.goToOverviewPage}
 119                             />
 120                         </div>
 121                     </Main>
 122                 </InfiniteScroll>
 123             </div>
 124         );
 125     }
 126 }
 127
 128 CatalogView.propTypes = {
 129     history: PropTypes.object,
 130     catalog: PropTypes.object,
 131     handleResetWorkflow: PropTypes.func,
 132     handleFetchWorkflow: PropTypes.func,
 133     showNewWorkflowModal: PropTypes.func,
 134     clearWorkflow: PropTypes.func,
 135     searchInputChanged: PropTypes.func
 136 };
 137
 138 CatalogView.defaultProps = {
 139     showNewWorkflowModal: () => {},
 140     clearWorkflow: () => {}
 141 };
 142
 143 export default CatalogView;